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

bramp / js-sequence-diagrams

Draws simple SVG sequence diagrams from textual representation of the diagram

https://bramp.github.io/js-sequence-diagrams/

BSD 2-Clause "Simplified" License

7.81k stars 1.08k forks source link

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

Open StefRave opened 9 years ago

StefRave commented 9 years ago

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 commented 9 years ago

This pull request is based on pull request #128

deftdawg commented 8 years ago

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 commented 7 years ago

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 commented 7 years ago

@StefRave We are not worthy! 🤣 Amazing stuff!

bramp commented 7 years ago

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