Prototype multiple elements on the same line

When a note or signal is indented with '=' it is shown on the same height as
the latest note or signal without indentation.

This is just a PoC implementation of bramp#130. The formatting is mucked up and the
logic is a bit hard to read. If we decide this is a useful feature we probably
want to make 'lines' (collections of notes/signals that are on the same line)
a first-class citizen.

Author: raboof

src/diagram.js

@@ -59,24 +59,28 @@
 		this.index = index;
 	};
 
-	Diagram.Signal = function(actorA, signaltype, actorB, message) {
+	Diagram.Signal = function(actorA, signaltype, actorB, message, indent) {
 		this.type       = "Signal";
 		this.actorA     = actorA;
 		this.actorB     = actorB;
 		this.linetype   = signaltype & 3;
 		this.arrowtype  = (signaltype >> 2) & 3;
 		this.message    = message;
+		if (indent) this.offset = 0;
+		else this.offset = 1;
 	};
 
 	Diagram.Signal.prototype.isSelf = function() {
 		return this.actorA.index == this.actorB.index;
 	};
 
-	Diagram.Note = function(actor, placement, message) {
+	Diagram.Note = function(actor, placement, message, indent) {
 		this.type      = "Note";
 		this.actor     = actor;
 		this.placement = placement;
 		this.message   = message;
+		if (indent) this.offset = 0;
+		else this.offset = 1;
 
 		if (this.hasManyActors() && actor[0] == actor[1]) {
 			throw new Error("Note should be over two different actors");
@@ -158,6 +162,3 @@
 		delete diagram.parseError;
 		return diagram;
 	};
-
-
-

src/grammar.jison

@@ -23,6 +23,7 @@
 "note"            return 'note';
 "title"           return 'title';
 ","               return ',';
+"="               return 'INDENT';
 [^\->:,\r\n]+     return 'ACTOR';
 "--"              return 'DOTLINE';
 "-"               return 'LINE';
@@ -60,8 +61,8 @@ statement
 	;
 
 note_statement
-	: 'note' placement actor message   { $$ = new Diagram.Note($3, $2, $4); }
-	| 'note' 'over' actor_pair message { $$ = new Diagram.Note($3, Diagram.PLACEMENT.OVER, $4); }
+	: indent 'note' placement actor message   { $$ = new Diagram.Note($4, $3, $5, $1); }
+	| indent 'note' 'over' actor_pair message { $$ = new Diagram.Note($4, Diagram.PLACEMENT.OVER, $5, $1); }
 	;
 
 actor_pair
@@ -75,10 +76,15 @@ placement
 	;
 
 signal
-	: actor signaltype actor message
-	{ $$ = new Diagram.Signal($1, $2, $3, $4); }
+	: indent actor signaltype actor message
+	{ $$ = new Diagram.Signal($2, $3, $4, $5, $1); }
 	;
 
+indent
+        : /* empty */ { $$ = false }
+        | 'INDENT'    { $$ = true }
+        ;
+
 actor
 	: ACTOR { $$ = yy.parser.yy.getActor(Diagram.unescape($1)); }
 	;

src/sequence-diagram.js

@@ -230,7 +230,7 @@
 
 			this.draw_title();
 			this.draw_actors(y);
-			this.draw_signals(y + this._actors_height);
+			this.draw_signals(y, this._actors_height);
 
 			this._paper.setFinish();
 		},
@@ -293,6 +293,7 @@
 				}
 			}
 
+			var currentLineHeight = 0;
 			_.each(signals, function(s) {
 				var a, b; // Indexes of the left and right actors involved
 
@@ -354,8 +355,14 @@
 				}
 
 				actor_ensure_distance(a, b, s.width + extra_width);
-				this._signals_height += s.height;
+
+				currentLineHeight = Math.max(currentLineHeight, s.height);
+				if (s.offset == 1) {
+				  this._signals_height += currentLineHeight;
+					currentLineHeight = 0;
+				}
 			}, this);
+			this._signals_height += currentLineHeight;
 
 			// Re-jig the positions
 			var actors_x = 0;
@@ -416,9 +423,16 @@
 			this.draw_text_box(actor, actor.name, ACTOR_MARGIN, ACTOR_PADDING, this._font);
 		},
 
-		draw_signals : function (offsetY) {
+		draw_signals : function (offsetY, currentLineHeight) {
 			var y = offsetY;
 			_.each(this.diagram.signals, function(s) {
+				if (s.offset == 1) {
+				  y += currentLineHeight;
+					currentLineHeight = s.height;
+			  } else {
+			    currentLineHeight = Math.max(currentLineHeight, s.height);
+				}
+
 				if (s.type == "Signal") {
 					if (s.isSelf()) {
 						this.draw_self_signal(s, y);
@@ -430,7 +444,6 @@
 					this.draw_note(s, y);
 				}
 
-				y += s.height;
 			}, this);
 		},
 
@@ -637,4 +650,3 @@
 		drawing.draw(container);
 
 	}; // end of drawSVG
-