#2315 Adding the possibility to add actor figures as participants

src/diagrams/sequence/svgDraw.js

@@ -181,13 +181,23 @@ export const drawLabel = function (elem, txtObject) {
 };
 
 let actorCnt = -1;
+
+export const fixLifeLineHeights = (diagram, bounds) => {
+  console.log('fixLifeLineHeights', diagram, bounds);
+  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 g = elem.append('g');
@@ -225,6 +235,99 @@ export const drawActor = function (elem, actor, conf) {
     { class: 'actor' },
     conf
   );
+
+  return 75;
+};
+
+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);
+  // circle.attr('rx', rectData.rx);
+  // circle.attr('ry', rectData.ry);
+
+  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 100;
+};
+
+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) {
@@ -576,4 +679,5 @@ export default {
   insertArrowCrossHead,
   getTextObj,
   getNoteRect,
+  fixLifeLineHeights,
 };