Add the line numbers to the SVG diagram to enable real time tracking

[StefRave]

Added to example test.html (only works in chrome :-():

• Visualy track elements
• Click in element selects correct line in editor
• SVG shows current editor line in SVG

A working example for all browsers can be viewed at: https://stefrave.github.io/js-sequence-diagrams/

[StefRave]

This pull request is based on pull request #128

[deftdawg]

About the only way that could be any cooler, would be if when you clicked on a word, it jumped you to that word in the line too... Awesome stuff though!

[StefRave]

Hi, I reimplemented this feature again on version 2.
This feature adds the original line numbers in the sourcefile to the SVG like:
<g data-lineno="3" class="signal ">
This makes it possible to implement interaction between sequence diagram and editor.

As an example: https://stefrave.github.io/js-sequence-diagrams/
When a node in the sequence diagram is clicked the cursor moves to the correct line in the editor. The current line being edited is highlighted in the sequence diagram.

[deftdawg]

@StefRave We are not worthy! 🤣 Amazing stuff!

[bramp]

Awesome addition. I've added a few suggestions to the changes.