Merge pull request #318 from ciekawy/activation_draft

activations doc + few fixes
mermaid-js · Mar 14, 2016 · 1ad9e75 · 1ad9e75
2 parents e9c6db4 + d070029
commit 1ad9e75
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 11 deletions.
diff --git a/docs/content/sequenceDiagram.md b/docs/content/sequenceDiagram.md
@@ -72,6 +72,55 @@ There are six types of arrows currently supported:
 --x which will render a dotted line with a cross at the end (async)
 
 
+## Activations
+It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
+
+```
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    activate John
+    John-->>Alice: Great!
+    deactivate John
+```
+
+Renders to the diagram below:
+
+```mermaid
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    activate John
+    John-->>Alice: Great!
+    deactivate John
+```
+
+There is also a shortcut notation by appending `+`/`-` suffix to the message arrow:  
+
+```
+sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    John-->>-Alice: Great!
+```
+
+Activations can be stacked for same actor:
+
+```
+sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    Alice->>+John: John, can yoy hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    John-->>-Alice: I feel great!
+```
+
+Stacked activations look like this:
+
+```mermaid
+sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    Alice->>+John: John, can yoy hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    John-->>-Alice: I feel great!
+```
+
 ## Notes
 It is possible to add notes to a sequence diagram. This is done by the notation
 Note [ right of | left of | over ] [Actor]: Text in note content

diff --git a/src/diagrams/sequenceDiagram/sequenceRenderer.js b/src/diagrams/sequenceDiagram/sequenceRenderer.js
@@ -347,6 +347,19 @@ module.exports.draw = function (text, id) {
     svgDraw.insertArrowHead(diagram);
     svgDraw.insertArrowCrossHead(diagram);
 
+    function activeEnd(msg, verticalPos) {
+        var activationData = exports.bounds.endActivation(msg);
+        if(activationData.starty + 18 > verticalPos) {
+            activationData.starty = verticalPos - 6;
+            verticalPos += 12;
+        }
+        svgDraw.drawActivation(diagram, activationData, verticalPos, conf);
+
+        exports.bounds.insert(activationData.startx, verticalPos -10, activationData.stopx,  verticalPos);
+    }
+
+    var lastMsg;
+
     // Draw the messages/signals
     messages.forEach(function(msg){
         var loopData;
@@ -374,15 +387,10 @@ module.exports.draw = function (text, id) {
                 }
                 break;
             case sq.yy.LINETYPE.ACTIVE_START:
-                // exports.bounds.bumpVerticalPos(conf.boxMargin);
                 exports.bounds.newActivation(msg, diagram);
-                // exports.bounds.bumpVerticalPos(conf.boxMargin + conf.boxTextMargin);
                 break;
             case sq.yy.LINETYPE.ACTIVE_END:
-                var activationData = exports.bounds.endActivation(msg);
-                svgDraw.drawActivation(diagram, activationData, exports.bounds.getVerticalPos(), conf);
-
-                exports.bounds.insert(activationData.startx, exports.bounds.getVerticalPos() -10, activationData.stopx,  exports.bounds.getVerticalPos());
+                activeEnd(msg, exports.bounds.getVerticalPos());
                 break;
             case sq.yy.LINETYPE.LOOP_START:
                 exports.bounds.bumpVerticalPos(conf.boxMargin);
@@ -426,14 +434,19 @@ module.exports.draw = function (text, id) {
                 break;
             default:
               try {
+                lastMsg = msg;
                 exports.bounds.bumpVerticalPos(conf.messageMargin);
                 var fromBounds = actorFlowVerticaBounds(msg.from);
                 var toBounds = actorFlowVerticaBounds(msg.to);
-                var forward = fromBounds[0] < toBounds[0];
-                startx = fromBounds[forward?1:0];
-                stopx = toBounds[forward?0:1];
-
-                drawMessage(diagram, startx, stopx, exports.bounds.getVerticalPos(), msg);
+                var fromIdx = fromBounds[0] <= toBounds[0]?1:0;
+                var toIdx = fromBounds[0] < toBounds[0]?0:1;
+                startx = fromBounds[fromIdx];
+                stopx = toBounds[toIdx];
+
+                var verticalPos = exports.bounds.getVerticalPos();
+                drawMessage(diagram, startx, stopx, verticalPos, msg);
+                var allBounds = fromBounds.concat(toBounds);
+                exports.bounds.insert(Math.min.apply(null, allBounds), verticalPos, Math.max.apply(null, allBounds), verticalPos);
               } catch (e) {
                   console.error('error while drawing message', e);
               }