activations doc + few fixes

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

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);
  }