Changes to add actor node for flowchart

2025-08-15 14:29:25 +02:00 · 2021-11-12 14:09:49 +05:30
5 changed files with 125 additions and 1 deletions
--- a/cypress/platform/scratch/logicbeat/ashish.html
+++ b/cypress/platform/scratch/logicbeat/ashish.html
@@ -0,0 +1,67 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+        width: 100%;
+        }
+      h1 { color: grey;}
+      .mermaid2,.mermaid3 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
+    </style>
+  </head>
+  <body>
+    <div>info below</div>
+    <div class="flex flex-wrap">
+
+<div class="mermaid" style="width: 100%; height: 20%;">
+  flowchart LR
+    A(Ashu) --> B
+    C(^actor^) --> B
+</div>
+  <script src="/mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+          // console.error('Mermaid error: ', err);
+        };
+      mermaid.initialize({
+        // theme: 'dark',
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 2,
+        flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: false },
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        state:{
+          nodeSpacing: 50,
+          rankSpacing: 50,
+          defaultRenderer: 'dagre-wrapper',
+        },
+        logLevel:0,
+        fontSize: 18,
+        curve: 'cardinal',
+        securityLevel: 'strict',
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback(){alert('It worked');}
+    </script>
+  </body>
+</html>
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@@ -238,6 +238,45 @@ const rect_right_inv_arrow = (parent, node) => {
  return shapeSvg;
 };

+const actor = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+
+  const w = bbox.width + node.padding;
+  const h = bbox.height + node.padding;
+  const points = [
+    { x: w / 2, y: 0 },
+    { x: w / 2, y: -h },
+    { x: w / 2, y: -h / 1.5 },
+    { x: w / 4, y: -h },
+    { x: w / 2, y: -h / 1.5 },
+    { x: w / 2 + w / 4, y: -h },
+    { x: w / 2, y: -h / 1.5 },
+    { x: w / 2, y: -h / 2.5 },
+    { x: w / 4, y: h / 5 },
+    { x: w / 2, y: -h / 2.5 },
+    { x: w / 2 + w / 4, y: h / 5 },
+    { x: w / 2, y: -h / 2.5 },
+    { x: w / 2, y: -h },
+    { x: w / 1.8, y: -h },
+    { x: w / 1.5, y: -h - h / 3 },
+    { x: w / 1.8, y: -h - h / 2 },
+    { x: w / 2.2, y: -h - h / 2 },
+    { x: w / 3, y: -h - h / 3 },
+    { x: w / 2.2, y: -h },
+    { x: w / 2, y: -h },
+  ];
+
+  const el = insertPolygonShape(shapeSvg, w, h, points);
+  el.attr('style', node.style);
+  updateNodeBounds(node, el);
+
+  node.intersect = function (point) {
+    return intersect.polygon(node, points, point);
+  };
+
+  return shapeSvg;
+};
+
 const cylinder = (parent, node) => {
  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);

@@ -894,6 +933,7 @@ const shapes = {
  inv_trapezoid,
  rect_right_inv_arrow,
  cylinder,
+  actor,
  start,
  end,
  note,
--- a/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/src/diagrams/flowchart/flowRenderer-v2.js
@@ -125,6 +125,9 @@ export const addVertices = function (vert, g, svgId) {
      case 'cylinder':
        _shape = 'cylinder';
        break;
+      case 'actor':
+        _shape = 'actor';
+        break;
      case 'group':
        _shape = 'rect';
        break;
--- a/src/diagrams/flowchart/parser/flow-singlenode.spec.js
+++ b/src/diagrams/flowchart/parser/flow-singlenode.spec.js
@@ -44,7 +44,17 @@ describe('[Singlenodes] when parsing', () => {
    expect(vert['a'].styles.length).toBe(0);
    expect(vert['a'].type).toBe('square');
  });
+  it('should handle a single actor', function() {
+    // Silly but syntactically correct
+    const res = flow.parser.parse('graph TD\nA(^Actor^)');

+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(edges.length).toBe(0);
+    expect(vert['A'].styles.length).toBe(0);
+    expect(vert['A'].type).toBe('actor');
+  });
  it('should handle a single round square node', function() {
    // Silly but syntactically correct
    const res = flow.parser.parse('graph TD;a[A];');
--- a/src/diagrams/flowchart/parser/flow.jison
+++ b/src/diagrams/flowchart/parser/flow.jison
@@ -120,6 +120,8 @@ that id.
 "]]"                  return 'SUBROUTINEEND';
 "[("                  return 'CYLINDERSTART';
 ")]"                  return 'CYLINDEREND';
+"(^"                  return 'ACTORSTART';
+"^)"                  return 'ACTOREND';
 \-                    return 'MINUS';
 "."                   return 'DOT';
 [\_]                  return 'UNDERSCORE';
@@ -382,6 +384,8 @@ vertex:  idString SQS text SQE
        {$$ = $1;yy.addVertex($1,$3,'subroutine');}
    | idString CYLINDERSTART text CYLINDEREND
        {$$ = $1;yy.addVertex($1,$3,'cylinder');}
+    | idString ACTORSTART text ACTOREND
+        {$$ = $1;yy.addVertex($1,$3,'actor');}
    | idString PS text PE
        {$$ = $1;yy.addVertex($1,$3,'round');}
    | idString DIAMOND_START text DIAMOND_STOP
@@ -559,5 +563,5 @@ alphaNumToken  : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA |

 idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP;

-graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
+graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | CYLINDERSTART | CYLINDEREND | ACTORSTART | ACTOREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
 %%