Merge branch 'develop' into feature/2249_sequence_diagram_popup_menus

src/diagrams/sequence/parser/sequenceDiagram.jison

@@ -33,6 +33,7 @@
 \%%(?!\{)[^\n]*                                                 /* skip comments */
 [^\}]\%\%[^\n]*                                                 /* skip comments */
 "participant"                                                   { this.begin('ID'); return 'participant'; }
+"actor"                                                   			{ this.begin('ID'); return 'participant_actor'; }
 <ID>[^\->:\n,;]+?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)           { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
 <ALIAS>"as"                                                     { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
 <ALIAS>(?:)                                                     { this.popState(); this.popState(); return 'NEWLINE'; }
@@ -107,8 +108,10 @@ directive
   ;
 
 statement
-	: 'participant' actor 'AS' restOfLine 'NEWLINE' {$2.description=yy.parseMessage($4); $$=$2;}
-	| 'participant' actor 'NEWLINE' {$$=$2;}
+	: 'participant' actor 'AS' restOfLine 'NEWLINE' {$2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
+	| 'participant' actor 'NEWLINE' {$2.type='addParticipant';$$=$2;}
+	| 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.type='addActor';$2.description=yy.parseMessage($4); $$=$2;}
+	| 'participant_actor' actor 'NEWLINE' {$2.type='addActor'; $$=$2;}
 	| signal 'NEWLINE'
 	| autonumber {yy.enableSequenceNumbers()}
 	| 'activate' actor 'NEWLINE' {$$={type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $2};}
@@ -233,9 +236,13 @@ signal
 	{ $$ = [$1,$3,{type: 'addMessage', from:$1.actor, to:$3.actor, signalType:$2, msg:$4}]}
 	;
 
-actor
-	: ACTOR {$$={type: 'addActor', actor:$1}}
-	;
+// actor
+// 	: actor_participant
+// 	| actor_actor
+// 	;
+
+actor: ACTOR {$$={ type: 'addParticipant', actor:$1}};
+// actor_actor: ACTOR {$$={type: 'addActor', actor:$1}};
 
 signaltype
 	: SOLID_OPEN_ARROW  { $$ = yy.LINETYPE.SOLID_OPEN; }

src/diagrams/sequence/sequenceDb.js

@@ -15,14 +15,17 @@ export const parseDirective = function (statement, context, type) {
   mermaidAPI.parseDirective(this, statement, context, type);
 };
 
-export const addActor = function (id, name, description) {
+export const addActor = function (id, name, description, type) {
   // Don't allow description nulling
   const old = actors[id];
   if (old && name === old.name && description == null) return;
 
   // Don't allow null descriptions, either
   if (description == null || description.text == null) {
-    description = { text: name, wrap: null };
+    description = { text: name, wrap: null, type };
+  }
+  if (type == null || description.text == null) {
+    description = { text: name, wrap: null, type };
   }
 
   actors[id] = {
@@ -34,6 +37,7 @@ export const addActor = function (id, name, description) {
     properties: {},
     actorCnt: null,
     rectData: null,
+    type: type || 'participant',
   };
   if (prevActor && actors[prevActor]) {
     actors[prevActor].nextActor = id;
@@ -315,8 +319,11 @@ export const apply = function (param) {
     });
   } else {
     switch (param.type) {
+      case 'addParticipant':
+        addActor(param.actor, param.actor, param.description, 'participant');
+        break;
       case 'addActor':
-        addActor(param.actor, param.actor, param.description);
+        addActor(param.actor, param.actor, param.description, 'actor');
         break;
       case 'activeStart':
         addSignal(param.actor, undefined, undefined, param.signalType);

src/diagrams/sequence/sequenceDiagram.spec.js

@@ -121,6 +121,55 @@ B-->A: I am good thanks!`;
 
     mermaidAPI.parse(str);
 
+    const actors = parser.yy.getActors();
+
+    expect(Object.keys(actors)).toEqual(['A', 'B']);
+    expect(actors.A.description).toBe('Alice');
+    expect(actors.B.description).toBe('Bob');
+
+    const messages = parser.yy.getMessages();
+    expect(messages.length).toBe(2);
+    expect(messages[0].from).toBe('A');
+    expect(messages[1].from).toBe('B');
+  });
+  it('it should alias a mix of actors and participants apa12', function() {
+    const str = `
+sequenceDiagram
+  actor Alice as Alice2
+  actor Bob
+  participant John as John2
+  participant Mandy
+  Alice->>Bob: Hi Bob
+  Bob->>Alice: Hi Alice
+  Alice->>John: Hi John
+  John->>Mandy: Hi Mandy
+  Mandy ->>Joan: Hi Joan`;
+
+    mermaidAPI.parse(str);
+
+    const actors = parser.yy.getActors();
+    expect(Object.keys(actors)).toEqual(['Alice', 'Bob', 'John', 'Mandy', 'Joan']);
+    expect(actors.Alice.description).toBe('Alice2');
+    expect(actors.Alice.type).toBe('actor');
+    expect(actors.Bob.description).toBe('Bob');
+    expect(actors.John.type).toBe('participant');
+    expect(actors.Joan.type).toBe('participant');
+
+    const messages = parser.yy.getMessages();
+    expect(messages.length).toBe(5);
+    expect(messages[0].from).toBe('Alice');
+    expect(messages[4].to).toBe('Joan');
+  });
+  it('it should alias actors apa13', function() {
+    const str = `
+sequenceDiagram
+actor A as Alice
+actor B as Bob
+A->B:Hello Bob, how are you?
+B-->A: I am good thanks!`;
+
+    mermaidAPI.parse(str);
+
     const actors = parser.yy.getActors();
     expect(Object.keys(actors)).toEqual(['A', 'B']);
     expect(actors.A.description).toBe('Alice');
@@ -1501,7 +1550,7 @@ participant Alice`;
       expect(bounds.startx).toBe(0);
       expect(bounds.starty).toBe(0);
       expect(bounds.stopx).toBe(conf.width);
-      expect(bounds.stopy).toBe(models.lastActor().y + models.lastActor().height);
+      expect(bounds.stopy).toBe(models.lastActor().y + models.lastActor().height + conf.boxMargin);
     });
   });
 });
@@ -1550,7 +1599,7 @@ participant Alice
     expect(bounds.startx).toBe(0);
     expect(bounds.startx).toBe(0);
     expect(bounds.starty).toBe(0);
-    expect(bounds.stopy).toBe(models.lastActor().y + models.lastActor().height);
+    expect(bounds.stopy).toBe(models.lastActor().y + models.lastActor().height + mermaid.sequence.boxMargin);
   });
   it('it should handle one actor, when logLevel is 3', function() {
     const str = `
@@ -1568,6 +1617,6 @@ participant Alice
     expect(bounds.startx).toBe(0);
     expect(bounds.startx).toBe(0);
     expect(bounds.starty).toBe(0);
-    expect(bounds.stopy).toBe(models.lastActor().y + models.lastActor().height);
+    expect(bounds.stopy).toBe(models.lastActor().y + models.lastActor().height + mermaid.sequence.boxMargin);
   });
 });

src/diagrams/sequence/sequenceRenderer.js

@@ -1,5 +1,5 @@
 import { select, selectAll } from 'd3';
-import svgDraw, { drawText } from './svgDraw';
+import svgDraw, { drawText, fixLifeLineHeights } from './svgDraw';
 import { log } from '../../logger';
 import { parser } from './parser/sequenceDiagram';
 import common from '../common/common';
@@ -421,7 +421,7 @@ export const drawActors = function (diagram, actors, actorKeys, verticalPos) {
   // Draw the actors
   let prevWidth = 0;
   let prevMargin = 0;
-
+  let maxHeight = 0;
   for (let i = 0; i < actorKeys.length; i++) {
     const actor = actors[actorKeys[i]];
 
@@ -434,7 +434,8 @@ export const drawActors = function (diagram, actors, actorKeys, verticalPos) {
     actor.y = verticalPos;
 
     // Draw the box with the attached line
-    svgDraw.drawActor(diagram, actor, conf);
+    const height = svgDraw.drawActor(diagram, actor, conf);
+    maxHeight = Math.max(maxHeight, height);
     bounds.insert(actor.x, verticalPos, actor.x + actor.width, actor.height);
 
     prevWidth += actor.width;
@@ -443,7 +444,7 @@ export const drawActors = function (diagram, actors, actorKeys, verticalPos) {
   }
 
   // Add a margin between the actor boxes and the first arrow
-  bounds.bumpVerticalPos(conf.height);
+  bounds.bumpVerticalPos(maxHeight);
 };
 
 export const drawActorsPopup = function (diagram, actors, actorKeys) {
@@ -710,6 +711,8 @@ export const draw = function (text, id) {
     // Draw actors below diagram
     bounds.bumpVerticalPos(conf.boxMargin * 2);
     drawActors(diagram, actors, actorKeys, bounds.getVerticalPos());
+    bounds.bumpVerticalPos(conf.boxMargin);
+    fixLifeLineHeights(diagram, bounds.getVerticalPos());
   }
 
   // only draw popups for the top row of actors.

src/diagrams/sequence/styles.js

@@ -106,6 +106,15 @@ const getStyles = (options) =>
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
 }
+  .actor-man line {
+    stroke: ${options.actorBorder};
+    fill: ${options.actorBkg};
+  }
+  .actor-man circle, line {
+    stroke: ${options.actorBorder};
+    fill: ${options.actorBkg};
+    stroke-width: 2px;
+  }
 `;
 
 export default getStyles;

src/diagrams/sequence/svgDraw.js

@@ -286,13 +286,22 @@ export const drawLabel = function (elem, txtObject) {
 };
 
 let actorCnt = -1;
+
+export const fixLifeLineHeights = (diagram, bounds) => {
+  if (!diagram.selectAll) return;
+  diagram
+    .selectAll('.actor-line')
+    .attr('class', '200')
+    .attr('y2', bounds - 55);
+};
+
 /**
  * Draws an actor in the diagram with the attached line
  * @param elem - The diagram we'll draw to.
  * @param actor - The actor to draw.
  * @param conf - drawText implementation discriminator object
  */
-export const drawActor = function (elem, actor, conf) {
+const drawActorTypeParticipant = function (elem, actor, conf) {
   const center = actor.x + actor.width / 2;
 
   const boxpluslineGroup = elem.append('g');
@@ -332,7 +341,7 @@ export const drawActor = function (elem, actor, conf) {
   rect.class = cssclass;
   rect.rx = 3;
   rect.ry = 3;
-  drawRect(g, rect);
+  const rectElem = drawRect(g, rect);
   actor.rectData = rect;
 
   if (actor.properties != null && actor.properties['icon']) {
@@ -354,6 +363,105 @@ export const drawActor = function (elem, actor, conf) {
     { class: 'actor' },
     conf
   );
+
+  let height = actor.height;
+  if (rectElem.node) {
+    const bounds = rectElem.node().getBBox();
+    actor.height = bounds.height;
+    height = bounds.height;
+  }
+  return height;
+};
+
+const drawActorTypeActor = function (elem, actor, conf) {
+  const center = actor.x + actor.width / 2;
+
+  if (actor.y === 0) {
+    actorCnt++;
+    elem
+      .append('line')
+      .attr('id', 'actor' + actorCnt)
+      .attr('x1', center)
+      .attr('y1', 80)
+      .attr('x2', center)
+      .attr('y2', 2000)
+      .attr('class', 'actor-line')
+      .attr('stroke-width', '0.5px')
+      .attr('stroke', '#999');
+  }
+  const actElem = elem.append('g');
+  actElem.attr('class', 'actor-man');
+
+  const rect = getNoteRect();
+  rect.x = actor.x;
+  rect.y = actor.y;
+  rect.fill = '#eaeaea';
+  rect.width = actor.width;
+  rect.height = actor.height;
+  rect.class = 'actor';
+  rect.rx = 3;
+  rect.ry = 3;
+  // drawRect(actElem, rect);
+
+  actElem
+    .append('line')
+    .attr('id', 'actor-man-torso' + actorCnt)
+    .attr('x1', center)
+    .attr('y1', actor.y + 25)
+    .attr('x2', center)
+    .attr('y2', actor.y + 45);
+
+  actElem
+    .append('line')
+    .attr('id', 'actor-man-arms' + actorCnt)
+    .attr('x1', center - 18)
+    .attr('y1', actor.y + 33)
+    .attr('x2', center + 18)
+    .attr('y2', actor.y + 33);
+  actElem
+    .append('line')
+    .attr('x1', center - 18)
+    .attr('y1', actor.y + 60)
+    .attr('x2', center)
+    .attr('y2', actor.y + 45);
+  actElem
+    .append('line')
+    .attr('x1', center)
+    .attr('y1', actor.y + 45)
+    .attr('x2', center + 16)
+    .attr('y2', actor.y + 60);
+
+  const circle = actElem.append('circle');
+  circle.attr('cx', actor.x + actor.width / 2);
+  circle.attr('cy', actor.y + 10);
+  circle.attr('r', 15);
+  circle.attr('width', actor.width);
+  circle.attr('height', actor.height);
+
+  const bounds = actElem.node().getBBox();
+  actor.height = bounds.height;
+
+  _drawTextCandidateFunc(conf)(
+    actor.description,
+    actElem,
+    rect.x,
+    rect.y + 35,
+    rect.width,
+    rect.height,
+    { class: 'actor' },
+    conf
+  );
+
+  return actor.height;
+};
+
+export const drawActor = function (elem, actor, conf) {
+  switch (actor.type) {
+    case 'actor':
+      return drawActorTypeActor(elem, actor, conf);
+    case 'participant':
+      return drawActorTypeParticipant(elem, actor, conf);
+  }
 };
 
 export const anchorElement = function (elem) {
@@ -834,4 +942,5 @@ export default {
   getNoteRect,
   popupMenu,
   popdownMenu,
+  fixLifeLineHeights,
 };