Merge pull request #320 from bronsoja/seq-diagram-title-support

(WIP) Sequence Diagram Title Support
mermaid-js · Mar 16, 2016 · fb500ac · fb500ac
2 parents 1ad9e75 + 4f9a2a8
commit fb500ac
Show file tree

Hide file tree

Showing 13 changed files with 65,644 additions and 63,491 deletions.
diff --git a/dist/mermaid.js b/dist/mermaid.js
diff --git a/dist/mermaid.min.js b/dist/mermaid.min.js
diff --git a/dist/mermaid.slim.js b/dist/mermaid.slim.js
diff --git a/dist/mermaid.slim.min.js b/dist/mermaid.slim.min.js
diff --git a/dist/mermaidAPI.js b/dist/mermaidAPI.js
diff --git a/dist/mermaidAPI.min.js b/dist/mermaidAPI.min.js
diff --git a/dist/mermaidAPI.slim.js b/dist/mermaidAPI.slim.js
diff --git a/dist/mermaidAPI.slim.min.js b/dist/mermaidAPI.slim.min.js
diff --git a/src/diagrams/sequenceDiagram/parser/sequenceDiagram.jison b/src/diagrams/sequenceDiagram/parser/sequenceDiagram.jison
@@ -91,7 +91,7 @@ statement
 	| 'activate' actor 'NL' {$$={type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $2};}
 	| 'deactivate' actor 'NL' {$$={type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $2};}
 	| note_statement 'NL'
-	| 'title' SPACE text 'NL'
+	| title text2 'NL' {$$=[{type:'setTitle', text:$2}]}
 	| 'loop' restOfLine document end
 	{
 		$3.unshift({type: 'loopStart', loopText:$2, signalType: yy.LINETYPE.LOOP_START});

diff --git a/src/diagrams/sequenceDiagram/parser/sequenceDiagram.js b/src/diagrams/sequenceDiagram/parser/sequenceDiagram.js
diff --git a/src/diagrams/sequenceDiagram/sequenceDb.js b/src/diagrams/sequenceDiagram/sequenceDb.js
@@ -4,6 +4,7 @@
 var actors    = {};
 var messages  = [];
 var notes     = [];
+var title = '';
 var Logger = require('../../logger');
 var log = new Logger.Log();
 
@@ -45,6 +46,9 @@ exports.getActor = function(id){
 exports.getActorKeys = function(){
     return Object.keys(actors);
 };
+exports.getTitle = function() {
+  return title;
+}
 
 exports.clear = function(){
     actors   = {};
@@ -91,6 +95,10 @@ exports.addNote = function (actor, placement, message){
     messages.push({from:actors[0], to:actors[1], message:message, type:exports.LINETYPE.NOTE, placement: placement});
 };
 
+exports.setTitle = function(titleText){
+  title = titleText;
+}
+
 
 exports.parseError = function(err,hash){
     global.mermaidAPI.parseError(err,hash);
@@ -146,6 +154,8 @@ exports.apply = function(param){
             case 'altEnd':
                 exports.addSignal(undefined, undefined, undefined, param.signalType);
                 break;
+            case 'setTitle': 
+                exports.setTitle(param.text);
         }
     }
 };
diff --git a/src/diagrams/sequenceDiagram/sequenceDiagram.spec.js b/src/diagrams/sequenceDiagram/sequenceDiagram.spec.js
@@ -50,6 +50,26 @@ describe('when parsing a sequenceDiagram',function() {
         expect(messages.length).toBe(3);
         expect(messages[0].from).toBe('Alice');
         expect(messages[2].from).toBe('Bob');
+    });
+		it('it should handle a sequenceDiagram definition with a title', function () {
+        str = 'sequenceDiagram\n' +
+        'title: Diagram Title\n' + 
+        'Alice->Bob:Hello Bob, how are you?\n' +
+        'Note right of Bob: Bob thinks\n' +
+        'Bob-->Alice: I am good thanks!';
+
+        sq.parse(str);
+        var actors = sq.yy.getActors();
+        expect(actors.Alice.description).toBe('Alice');
+        actors.Bob.description = 'Bob';
+
+        var messages = sq.yy.getMessages();
+        var title = sq.yy.getTitle();
+
+        expect(messages.length).toBe(3);
+        expect(messages[0].from).toBe('Alice');
+        expect(messages[2].from).toBe('Bob');
+        expect(title).toBe('Diagram Title');
     });
     it('it should space in actor names', function () {
         str = 'sequenceDiagram\n' +

diff --git a/src/diagrams/sequenceDiagram/sequenceRenderer.js b/src/diagrams/sequenceDiagram/sequenceRenderer.js
@@ -12,7 +12,7 @@ var log = new Logger.Log();
 var conf = {
 
     diagramMarginX:50,
-    diagramMarginY:10,
+    diagramMarginY:30,
     // Margin between actors
     actorMargin:50,
     // Width of actor boxes
@@ -341,6 +341,7 @@ module.exports.draw = function (text, id) {
     var actors = sq.yy.getActors();
     var actorKeys = sq.yy.getActorKeys();
     var messages = sq.yy.getMessages();
+    var title = sq.yy.getTitle();
     module.exports.drawActors(diagram, actors, actorKeys, 0);
 
     // The arrow head definition is attached to the svg once
@@ -474,7 +475,15 @@ module.exports.draw = function (text, id) {
         height = height - conf.boxMargin + conf.bottomMarginAdj;
     }
 
-    var width  = box.stopx-box.startx+2*conf.diagramMarginX;
+    var width = (box.stopx - box.startx) + (2 * conf.diagramMarginX);
+
+    if(title) {
+      diagram.append('text')
+        .text(title)
+        .attr('x', ( ( box.stopx-box.startx) / 2 ) - ( 2 * conf.diagramMarginX ) )
+        .attr('y', -25);
+    }
+
     if(conf.useMaxWidth) {
         diagram.attr('height', '100%');
         diagram.attr('width', '100%');
@@ -483,5 +492,6 @@ module.exports.draw = function (text, id) {
         diagram.attr('height',height);
         diagram.attr('width', width );
     }
-    diagram.attr('viewBox', (box.startx-conf.diagramMarginX) + ' -' +conf.diagramMarginY + ' ' + width + ' ' + height);
+    var extraVertForTitle = title ? 40 : 0;
+    diagram.attr('viewBox', (box.startx - conf.diagramMarginX) + ' -' + (conf.diagramMarginY + extraVertForTitle) + ' ' + width + ' ' + (height + extraVertForTitle));
 };