#3358 Support for adding tests and fixed issues for some shapes

cypress/integration/rendering/block.spec.ts

@@ -0,0 +1,304 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('Block diagram', () => {
+  it('BL1: should calculate the block widths', () => {
+    imgSnapshotTest(
+      `block-beta
+  columns 2
+  block
+    id2["I am a wide one"]
+    id1
+  end
+  id["Next row"]
+      `,
+      {}
+    );
+  });
+
+  it('BL2: should handle colums statement in sub-blocks', () => {
+    imgSnapshotTest(
+      `block-beta
+  id1["Hello"]
+  block
+    columns 3
+    id2["to"]
+    id3["the"]
+    id4["World"]
+    id5["World"]
+  end
+      `,
+      {}
+    );
+  });
+
+  it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
+    imgSnapshotTest(
+      `block-beta
+  block
+    columns 1
+    id1
+    id2
+    id2.1
+  end
+  id3
+  id4
+      `,
+      {}
+    );
+  });
+
+  it('BL4: should align block widths and handle colums statements in deeper sub-blocks then 1 level', () => {
+    imgSnapshotTest(
+      `block-beta
+  columns 1
+  block
+    columns 1
+    block
+      columns 3
+      id1
+      id2
+      id2.1(("XYZ"))
+    end
+    id48
+  end
+  id3
+      `,
+      {}
+    );
+  });
+
+  it('BL5: should align block widths and handle colums statements in deeper sub-blocks then 1 level (alt)', () => {
+    imgSnapshotTest(
+      `block-beta
+  columns 1
+  block
+    id1
+    id2
+    block
+      columns 1
+      id3("Wider then")
+      id5(("id5"))
+    end
+  end
+  id4
+      `,
+      {}
+    );
+  });
+
+  it('BL6: should handle block arrows and spece statements', () => {
+    imgSnapshotTest(
+      `block-beta
+    columns 3
+    space:3
+    ida idb idc
+    id1  id2
+      blockArrowId<["Label"]>(right)
+      blockArrowId2<["Label"]>(left)
+      blockArrowId3<["Label"]>(up)
+      blockArrowId4<["Label"]>(down)
+      blockArrowId5<["Label"]>(x)
+      blockArrowId6<["Label"]>(y)
+      blockArrowId6<["Label"]>(x, down)
+      `,
+      {}
+    );
+  });
+
+  it('BL7: should handle different types of edges', () => {
+    imgSnapshotTest(
+      `block-beta
+      columns 3
+      A space:5
+      A --o B
+      A --> C
+      A --x D
+      `,
+      {}
+    );
+  });
+
+  it('BL8: should handle sub-blocks without columns statements', () => {
+    imgSnapshotTest(
+      `block-beta
+      columns 2
+      C A B
+      block
+        D
+        E
+      end
+      `,
+      {}
+    );
+  });
+
+  it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
+    imgSnapshotTest(
+      `block-beta
+      columns 3
+      B space
+      block
+        D
+      end
+      D --> B
+      `,
+      {}
+    );
+  });
+
+  it('BL10: should handle edges from composite blocks', () => {
+    imgSnapshotTest(
+      `block-beta
+      columns 3
+      B space
+      block BL
+        D
+      end
+      BL --> B
+      `,
+      {}
+    );
+  });
+
+  it('BL11: should handle edges to composite blocks', () => {
+    imgSnapshotTest(
+      `block-beta
+      columns 3
+      B space
+      block BL
+        D
+      end
+      B --> BL
+      `,
+      {}
+    );
+  });
+
+  it('BL12: edges should handle labels', () => {
+    imgSnapshotTest(
+      `block-beta
+      A
+      space
+      A -- "apa" --> E
+      `,
+      {}
+    );
+  });
+
+  it('BL13: should handle block arrows in different directions', () => {
+    imgSnapshotTest(
+      `block-beta
+      columns 3
+      space blockArrowId1<["down"]>(down) space
+      blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
+      space blockArrowId5<["up"]>(up) space
+      blockArrowId6<["x"]>(x) space blockArrowId7<["y"]>(y)
+      `,
+      {}
+    );
+  });
+
+  it('BL14: should style statements and class statements', () => {
+    imgSnapshotTest(
+      `block-beta
+    A
+    B
+    classDef blue fill:#66f,stroke:#333,stroke-width:2px;
+    class A blue
+    style B fill:#f9F,stroke:#333,stroke-width:4px
+      `,
+      {}
+    );
+  });
+
+  it('BL15: width alignment - D and E should share available space', () => {
+    imgSnapshotTest(
+      `block-beta
+  block
+    D
+    E
+  end
+  db("This is the text in the box")
+      `,
+      {}
+    );
+  });
+
+  it('BL16: width alignment - C should be as wide as the composite block', () => {
+    imgSnapshotTest(
+      `block-beta
+  block
+    A("This is the text")
+    B
+  end
+  C
+      `,
+      {}
+    );
+  });
+
+  it('BL16: width alignment - blocks shold be equal in width', () => {
+    imgSnapshotTest(
+      `block-beta
+    A("This is the text")
+    B
+    C
+      `,
+      {}
+    );
+  });
+
+  it('BL17: block types 1 - square, rounded and circle', () => {
+    imgSnapshotTest(
+      `block-beta
+    A["square"]
+    B("rounded")
+    C(("circle"))
+      `,
+      {}
+    );
+  });
+
+  it('BL18: block types 2 - odd, diamond and hexagon', () => {
+    imgSnapshotTest(
+      `block-beta
+    A>"rect_left_inv_arrow"]
+    B{"diamond"}
+    C{{"hexagon"}}
+      `,
+      {}
+    );
+  });
+
+  it('BL19: block types 3 - stadium', () => {
+    imgSnapshotTest(
+      `block-beta
+    A(["stadium"])
+      `,
+      {}
+    );
+  });
+
+  it('BL20: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
+    imgSnapshotTest(
+      `block-beta
+    A[/"lean right"/]
+    B[\"lean left"\]
+    C[/"trapezoid"\]
+    D[\"trapezoid alt"/]
+      `,
+      {}
+    );
+  });
+
+  it('BL21: block types 1 - square, rounded and circle', () => {
+    imgSnapshotTest(
+      `block-beta
+    A["square"]
+    B("rounded")
+    C(("circle"))
+      `,
+      {}
+    );
+  });
+});

cypress/platform/knsv2.html

@@ -64,184 +64,45 @@
   <body>
     <pre id="diagram" class="mermaid2">
 block-beta
-      columns 3
+    A["square"]
-      space blockArrowId1<["down"]>(down) space
+    B("rounded")
-      blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
+    C(("circle"))
-      space blockArrowId5<["up"]>(up) space
+    </pre>
-      blockArrowId6<["x"]>(x) space blockArrowId7<["y"]>(y)
+    <pre id="diagram" class="mermaid2">
+block-beta
+    A>"rect_left_inv_arrow"]
+    B{"diamond"}
+    C{{"hexagon"}}
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    A(["stadium"])
     </pre>
     <pre id="diagram" class="mermaid">
 block-beta
-columns 3
+    %% A[["subroutine"]]
-  space Browser space
+    %% B[("cylinder")]
-  space:3
+    C>"surprise"]
-
-    A
-    B
-    C
-
-    space:3
-    space
-    db{{"This is the text in the box"}}
-
-      classDef green fill:#9f6,stroke:#333,stroke-width:2px;
-      style B fill:#f9F,stroke:#333,stroke-width:4px
-      class A green
-
-      Browser --> A
-      Browser --> B
-      Browser --> C
-      A --> db
-      B --> db
-      C--> db
-
-      block
-        D
-        E
-      end
     </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    A[/"lean right"/]
+    B[\"lean left"\]
+    C[/"trapezoid"\]
+    D[\"trapezoid"/]
+    </pre>
+
     <pre id="diagram" class="mermaid2">
 flowchart
       B
       style B fill:#f9F,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-      columns 3
-      classDef green fill:#9f6,stroke:#333,stroke-width:2px;
-      A
-      space
-      block
-        E
-        F
-      end
-      E -- "apa" --> A
 
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-      columns 3
-      C space A space B
-      B --> A
-      B --> C
-      block
-        D
-        E
-      end
-      E --> A
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-      columns 2
-      C A B
-      block
-        D
-        E
-      end
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-      columns 2
-      A B C D
-      A --o B
-      A --> C
-
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    columns 3
-    space:3
-    ida idb idc
-    id1  id2
-      blockArrowId<["Label"]>(right)
-      blockArrowId2<["Label"]>(left)
-      blockArrowId3<["Label"]>(up)
-      blockArrowId4<["Label"]>(down)
-      blockArrowId5<["Label"]>(x)
-      blockArrowId6<["Label"]>(y)
-      blockArrowId6<["Label"]>(x, down)
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  columns 1
-  block
-    id1
-    id2
-    block
-      columns 1
-      id3("Wider then")
-      id5(("id5"))
-    end
-  end
-  id4
-    </pre>
-
-    <pre id="diagram" class="mermaid2">
-block-beta
-  columns 1
-  block
-    columns 1
-    block
-      columns 3
-      id1
-      id2
-      id2.1(("XYZ"))
-      %%id2.2
-    end
-    id48
-  end
-  id3
-%%  id3
-%%  id4
-  %% block
-    %% columns 2
-    %% id2
-    %% id3
-  %% end
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  block
-    columns 1
-    id1
-    id2
-    %%id2.1
-  end
-  id3
-%%  id3
-%%  id4
-  %% block
-    %% columns 2
-    %% id2
-    %% id3
-  %% end
-    </pre>
     <pre id="diagram" class="mermaid2">
       flowchart LR
       a1 -- apa --> b1
     </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  id1["Hello"]
-  block
-    columns 3
-    id2["to"]
-    id3["the"]
-    id4["World"]
-    id5["World"]
-  end
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  columns 2
-  block
-    id2["I am a wide one"]
-    id1
-  end
-  id[Next row]
 
-
-    </pre>
     <pre id="diagram" class="mermaid2">
 flowchart RL
   subgraph "`one`"

packages/mermaid/src/diagrams/block/parser/block.jison

@@ -86,27 +86,49 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 .*direction\s+RL[^\n]*                                      return 'direction_rl';
 .*direction\s+LR[^\n]*                                      return 'direction_lr';
 
+// Node end of shape
+<NODE>"((("             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+<NODE>")))"             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+<NODE>[\)]\)           { this.popState();yy.getLogger().info('Lex: ))'); return "NODE_DEND"; }
+<NODE>"}}"             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+<NODE>"}"             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+<NODE>"(-"             { this.popState();yy.getLogger().info('Lex: (-'); return "NODE_DEND"; }
+<NODE>"-)"             { this.popState();yy.getLogger().info('Lex: -)'); return "NODE_DEND"; }
+<NODE>"(("             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+<NODE>"]]"             { this.popState();yy.getLogger().info('Lex: ]]'); return "NODE_DEND"; }
+<NODE>"("              { this.popState();yy.getLogger().info('Lex: (');  return "NODE_DEND";  }
+<NODE>"])"             { this.popState();yy.getLogger().info('Lex: ])'); return "NODE_DEND"; }
+<NODE>"\\]"             { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
+<NODE>"/]"             { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
+<NODE>")]"             { this.popState();yy.getLogger().info('Lex: )]'); return "NODE_DEND"; }
+<NODE>[\)]             { this.popState();yy.getLogger().info('Lex: )');  return "NODE_DEND"; }
+<NODE>\]\>             { this.popState();yy.getLogger().info('Lex: ]>'); return "NODE_DEND"; }
+<NODE>[\]]             { this.popState();yy.getLogger().info('Lex: ]'); return "NODE_DEND"; }
+
 // Start of nodes with shapes and description
 "-)"                   { yy.getLogger().info('Lexa: -)'); this.pushState('NODE');return 'NODE_DSTART'; }
 "(-"                   { yy.getLogger().info('Lexa: (-'); this.pushState('NODE');return 'NODE_DSTART'; }
 "))"                   { yy.getLogger().info('Lexa: ))'); this.pushState('NODE');return 'NODE_DSTART';  }
 ")"                    { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART';      }
+"((("                  { yy.getLogger().info('Lex: (((');  this.pushState('NODE');return 'NODE_DSTART'; }
 "(("                   { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
 "{{"                   { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
-"("                    { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
+"{"                   { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
-"["                    { yy.getLogger().info('Lexa: ['); this.pushState('NODE');return 'NODE_DSTART'; }
+">"                   { yy.getLogger().info('Lexc: >'); this.pushState('NODE');return 'NODE_DSTART'; }
 "(["                   { yy.getLogger().info('Lexa: (['); this.pushState('NODE');return 'NODE_DSTART'; }
+"("                    { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
 "[["                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[|"                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[("                   { this.pushState('NODE');return 'NODE_DSTART'; }
-"((("                  { this.pushState('NODE');return 'NODE_DSTART'; }
 ")))"                  { this.pushState('NODE');return 'NODE_DSTART'; }
+"[\\"                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[/"                   { this.pushState('NODE');return 'NODE_DSTART'; }
 "[\\"                  { this.pushState('NODE');return 'NODE_DSTART'; }
+"["                    { yy.getLogger().info('Lexa: ['); this.pushState('NODE');return 'NODE_DSTART'; }
 
 "<["                   { this.pushState('BLOCK_ARROW');yy.getLogger().debug('LEX ARR START');return 'BLOCK_ARROW_START'; }
 
-[^\(\[\n\-\)\{\}\s\<]+     { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
+[^\(\[\n\-\)\{\}\s\<\>]+     { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
 <<EOF>>                { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; }
 
 // Handling of strings in node
@@ -119,21 +141,6 @@ accDescr\s*"{"\s*                                { this.pushState("acc_descr_mul
 <string>[^"]+          { yy.getLogger().debug('LEX: NODE_DESCR:', yytext); return "NODE_DESCR";}
 <string>["]            {yy.getLogger().debug('LEX POPPING');this.popState();}
 
-// Node end of shape
-<NODE>\]\>             { this.popState();yy.getLogger().info('Lex: ]>'); return "NODE_DEND"; }
-<NODE>[\)]\)           { this.popState();yy.getLogger().info('Lex: ))'); return "NODE_DEND"; }
-<NODE>[\)]             { this.popState();yy.getLogger().info('Lex: )');  return "NODE_DEND"; }
-<NODE>[\]]             { this.popState();yy.getLogger().info('Lex: ]'); return "NODE_DEND"; }
-<NODE>"}}"             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
-<NODE>"(-"             { this.popState();yy.getLogger().info('Lex: (-'); return "NODE_DEND"; }
-<NODE>"-)"             { this.popState();yy.getLogger().info('Lex: -)'); return "NODE_DEND"; }
-<NODE>"(("             { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
-<NODE>"("              { this.popState();yy.getLogger().info('Lex: (');  return "NODE_DEND";  }
-<NODE>"])"             { this.popState();yy.getLogger().info('Lex: ])'); return "NODE_DEND"; }
-<NODE>"]]"             { this.popState();yy.getLogger().info('Lex: ]]'); return "NODE_DEND"; }
-<NODE>"/]"             { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
-<NODE>")]"             { this.popState();yy.getLogger().info('Lex: )]'); return "NODE_DEND"; }
-
 <BLOCK_ARROW>"]>"\s*"("       { yy.getLogger().debug('Lex: =>BAE');  this.pushState('ARROW_DIR');  }
 <ARROW_DIR>","?\s*right\s*           { yytext = yytext.replace(/^,\s*/, ''); yy.getLogger().debug('Lex (right): dir:',yytext);return "DIR"; }
 <ARROW_DIR>","?\s*left\s*            { yytext = yytext.replace(/^,\s*/, ''); yy.getLogger().debug('Lex (left):',yytext);return "DIR"; }

packages/mermaid/src/diagrams/block/renderHelpers.ts

@@ -71,7 +71,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     case 'inv_trapezoid':
       _shape = 'inv_trapezoid';
       break;
-    case 'odd_right':
+    case 'rect_left_inv_arrow':
       _shape = 'rect_left_inv_arrow';
       break;
     case 'circle':