Skip to content

Commit f47ba9a

Browse files
StefRaveStefRave
committed
Add the line numbers to the SVG diagram to enable real time tracking Added to test.html: - Visualy track elements - Click in element selects correct line in editor - SVG shows current editor line in SVG
Signed-off-by: Stef Rave <stef.rave@gmail.com>
1 parent e03dc21 commit f47ba9a

File tree

5 files changed

+81
-34
lines changed

5 files changed

+81
-34
lines changed

‎src/diagram.js‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,22 @@ function Diagram() {
1414
/*
1515
* Return an existing actor with this alias, or creates a new one with alias and name.
1616
*/
17-
Diagram.prototype.getActor = function(alias, name) {
17+
Diagram.prototype.getActor = function(alias, name, lineno) {
1818
alias = alias.trim();
1919

2020
var i, actors = this.actors;
2121
for (i in actors) {
2222
if (actors[i].alias == alias)
2323
return actors[i];
2424
}
25-
i = actors.push( new Diagram.Actor(alias, (name || alias), actors.length) );
25+
i = actors.push( new Diagram.Actor(alias, (name || alias), actors.length, lineno) );
2626
return actors[ i - 1 ];
2727
};
2828

2929
/*
3030
* Parses the input as either a alias, or a "name as alias", and returns the corresponding actor.
3131
*/
32-
Diagram.prototype.getActorWithAlias = function(input) {
32+
Diagram.prototype.getActorWithAlias = function(input, lineno) {
3333
input = input.trim();
3434

3535
// We are lazy and do some of the parsing in javascript :(. TODO move into the .jison file.
@@ -42,41 +42,47 @@ Diagram.prototype.getActorWithAlias = function(input) {
4242
name = alias = input;
4343
}
4444

45-
return this.getActor(alias, name);
45+
return this.getActor(alias, name, lineno);
4646
};
4747

48-
Diagram.prototype.setTitle = function(title) {
49-
this.title = title;
48+
Diagram.prototype.setTitle = function(title, lineno) {
49+
this.title = {
50+
message: title,
51+
lineno: lineno
52+
};
5053
};
5154

5255
Diagram.prototype.addSignal = function(signal) {
5356
this.signals.push( signal );
5457
};
5558

56-
Diagram.Actor = function(alias, name, index) {
59+
Diagram.Actor = function(alias, name, index, lineno) {
5760
this.alias = alias;
5861
this.name = name;
5962
this.index = index;
63+
this.lineno = lineno;
6064
};
6165

62-
Diagram.Signal = function(actorA, signaltype, actorB, message) {
66+
Diagram.Signal = function (actorA, signaltype, actorB, message, lineno) {
6367
this.type = "Signal";
6468
this.actorA = actorA;
6569
this.actorB = actorB;
6670
this.linetype = signaltype & 3;
6771
this.arrowtype = (signaltype >> 2) & 3;
68-
this.message = message;
72+
this.message = message;
73+
this.lineno = lineno;
6974
};
7075

7176
Diagram.Signal.prototype.isSelf = function() {
7277
return this.actorA.index == this.actorB.index;
7378
};
7479

75-
Diagram.Note = function(actor, placement, message) {
80+
Diagram.Note = function(actor, placement, message, lineno) {
7681
this.type = "Note";
7782
this.actor = actor;
7883
this.placement = placement;
7984
this.message = message;
85+
this.lineno = lineno;
8086

8187
if (this.hasManyActors() && actor[0] == actor[1]) {
8288
throw new Error("Note should be over two different actors");

‎src/grammar.jison‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,12 @@ statement
5656
: 'participant' actor_alias { $2; }
5757
| signal { yy.parser.yy.addSignal($1); }
5858
| note_statement { yy.parser.yy.addSignal($1); }
59-
| 'title' message { yy.parser.yy.setTitle($2); }
59+
| 'title' message { yy.parser.yy.setTitle($2, yylineno); }
6060
;
6161

6262
note_statement
63-
: 'note' placement actor message { $$ = new Diagram.Note($3, $2, $4); }
64-
| 'note' 'over' actor_pair message { $$ = new Diagram.Note($3, Diagram.PLACEMENT.OVER, $4); }
63+
: 'note' placement actor message { $$ = new Diagram.Note($3, $2, $4, yylineno); }
64+
| 'note' 'over' actor_pair message { $$ = new Diagram.Note($3, Diagram.PLACEMENT.OVER, $4, yylineno); }
6565
;
6666

6767
actor_pair
@@ -76,15 +76,15 @@ placement
7676

7777
signal
7878
: actor signaltype actor message
79-
{ $$ = new Diagram.Signal($1, $2, $3, $4); }
79+
{ $$ = new Diagram.Signal($1, $2, $3, $4, yylineno); }
8080
;
8181

8282
actor
8383
: ACTOR { $$ = yy.parser.yy.getActor(Diagram.unescape($1)); }
8484
;
8585

8686
actor_alias
87-
: ACTOR { $$ = yy.parser.yy.getActorWithAlias(Diagram.unescape($1)); }
87+
: ACTOR { $$ = yy.parser.yy.getActorWithAlias(Diagram.unescape($1), yylineno); }
8888
;
8989

9090
signaltype

‎src/theme-snap.js‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -170,9 +170,13 @@ if (typeof Snap !== "undefined") (function () {
170170
this._stack = [];
171171
},
172172

173-
finish_group: function() {
173+
finish_group: function(groupName, lineno) {
174174
var g = this._paper.group.apply(this._paper, this._stack);
175175
this.clear_group();
176+
if(groupName)
177+
g.addClass(groupName);
178+
if(lineno !== undefined)
179+
g.attr({ "data-lineno": lineno });
176180
return g;
177181
},
178182

@@ -244,31 +248,31 @@ if (typeof Snap !== "undefined") (function () {
244248
draw_title : function() {
245249
this.clear_group();
246250
BaseTheme.prototype.draw_title.call(this);
247-
return this.finish_group().addClass('title');
251+
return this.finish_group('title', this._title ? this._title.lineno : undefined);
248252
},
249253

250254
draw_actor : function (actor, offsetY, height) {
251255
this.clear_group();
252256
BaseTheme.prototype.draw_actor.call(this, actor, offsetY, height);
253-
return this.finish_group().addClass('actor');
257+
return this.finish_group('actor', actor.lineno);
254258
},
255259

256260
draw_signal : function (signal, offsetY) {
257261
this.clear_group();
258262
BaseTheme.prototype.draw_signal.call(this, signal, offsetY);
259-
return this.finish_group().addClass('signal');
263+
return this.finish_group('signal', signal.lineno);
260264
},
261265

262266
draw_self_signal : function(signal, offsetY) {
263267
this.clear_group();
264268
BaseTheme.prototype.draw_self_signal.call(this, signal, offsetY);
265-
return this.finish_group().addClass('signal');
269+
return this.finish_group('signal', signal.lineno);
266270
},
267271

268272
draw_note : function (note, offsetY) {
269273
this.clear_group();
270274
BaseTheme.prototype.draw_note.call(this, note, offsetY);
271-
return this.finish_group().addClass('note');
275+
return this.finish_group('note', note.lineno);
272276
},
273277
});
274278

@@ -311,11 +315,5 @@ if (typeof Snap !== "undefined") (function () {
311315

312316
$("body").prepend("<div style='font-family: Daniel; position: absolute;top:-1000px;'>js-sequence. make sure font is loaded. This should be invisible</div>");
313317

314-
if (typeof WebFont !== "undefined") {
315-
WebFont.load({
316-
custom: {
317-
families: ['Daniel']
318-
}
319-
});
320-
}
318+
321319
})();

‎src/theme.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -123,10 +123,12 @@ _.extend(BaseTheme.prototype, {
123123

124124
// Setup some layout stuff
125125
if (diagram.title) {
126-
var title = this._title = {};
127-
var bb = this.text_bbox(diagram.title, font);
126+
var title = this._title = {
127+
message: diagram.title.message,
128+
lineno: diagram.title.lineno
129+
};
130+
var bb = this.text_bbox(title.message, font);
128131
title.text_bb = bb;
129-
title.message = diagram.title;
130132

131133
title.width = bb.width + (TITLE_PADDING + TITLE_MARGIN) * 2;
132134
title.height = bb.height + (TITLE_PADDING + TITLE_MARGIN) * 2;

‎test/test.html‎

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,16 @@
2727
.sequence .note path {
2828
fill: #ffff00;
2929
}*/
30-
30+
.sequence g.editing {
31+
outline-color: green;
32+
outline-style: dotted;
33+
outline-width: thin;
34+
}
35+
.sequence g[data-lineno]:hover {
36+
outline-color: blue;
37+
outline-style: dotted;
38+
outline-width: thin;
39+
}
3140
/* hover signal text color */
3241
.sequence .signal line:hover,
3342
.sequence .signal path:hover {
@@ -82,15 +91,47 @@
8291
function draw() {
8392
$("#diagram").empty();
8493

85-
var diagram = Diagram.parse($('#language').val());
94+
var textArea = $('#language').get(0);
95+
var diagram = Diagram.parse(textArea.value);
8696
console.log(diagram);
8797
$($('input[name=themeChoice]:checked').get().reverse()).each(function () {
8898
diagram.drawSVG('diagram', { theme: $(this).val() });
8999
});
100+
101+
$(".sequence g[data-lineno]").each(function(i, e) {
102+
e.onclick = function() {
103+
var textIndex = 0;
104+
var lineNo = Number(e.attributes["data-lineno"].value);
105+
var text = textArea.value;
106+
for (var j = 0; j < lineNo; j++) {
107+
textIndex = text.indexOf('\n', textIndex) + 1;
108+
}
109+
textArea.selectionStart = textIndex;
110+
textArea.selectionEnd = textIndex;
111+
textArea.focus();
112+
};
113+
});
90114
}
91115

92116
draw();
93-
117+
118+
$('#language').on("keyup click focus focusout", function () {
119+
var textArea = $('#language').get(0);
120+
var editingLine = textArea.value.substr(0, textArea.selectionStart).split("\n").length - 1;
121+
$(".sequence g.editing").each(function (i, e) {
122+
$(e).attr('class', function (index, classNames) {
123+
return classNames.replace('editing', '');
124+
});
125+
});
126+
if (textArea == document.activeElement) {
127+
$(".sequence g[data-lineno='" + editingLine + "']").each(function(i, e) {
128+
$(e).attr('class', function(index, classNames) {
129+
return classNames + ' editing';
130+
});
131+
});
132+
}
133+
});
134+
94135
$('input[name=themeChoice]').on("change", function() { draw() });
95136
$('#language').on("change input paste", _.throttle(function () {
96137
//try {

0 commit comments

Comments
 (0)