From 8b6fb94835f211e717527893b96f677c589ff0ff Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Thu, 12 Sep 2024 12:10:41 +0200
Subject: [PATCH] WIP

---
 cypress/platform/knsv2.html                   |   4 +
 .../mermaid/src/diagrams/flowchart/flowDb.ts  |   5 +-
 .../flowchart/parser/flow-node-data.spec.js   | 103 +++++++++++++++---
 .../src/diagrams/flowchart/parser/flow.jison  |  10 +-
 4 files changed, 99 insertions(+), 23 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index fe587b8d2..52c2286e6 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -421,6 +421,10 @@ flowchart LR
 
     </pre>
 
+    <pre id="diagram4" class="mermaid">
+      flowchart
+      D@{ shape: circle, label: "circle" } & E
+    </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       import layouts from './mermaid-layout-elk.esm.mjs';
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index a0a2f5656..4eb503c5c 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -123,10 +123,10 @@ export const addVertex = function (
   if (shapeData !== undefined) {
     let yamlData;
     // detect if shapeData contains a newline character
-
+    console.log('shapeData', shapeData);
     if (!shapeData.includes('\n')) {
       // console.log('yamlData shapeData has no new lines', shapeData);
-      yamlData = '{\n' + shapeData + '\n';
+      yamlData = '{\n' + shapeData + '\n}';
     } else {
       // console.log('yamlData shapeData has new lines', shapeData);
       yamlData = shapeData + '\n';
@@ -136,6 +136,7 @@ export const addVertex = function (
         yamlData = yamlData.substring(0, lastPos) + '\n';
       }
     }
+    console.log('yamlData', yamlData);
     const doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA }) as NodeMetaData;
     // console.log('yamlData doc', doc);
     if (doc?.shape) {
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
index ee461de9b..05773a842 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
@@ -15,7 +15,16 @@ describe('when parsing directions', function () {
 
   it('should handle basic shape data statements', function () {
     const res = flow.parser.parse(`flowchart TB
-      D@{ shape: rounded }@`);
+      D@{ shape: rounded}`);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(1);
+    expect(data4Layout.nodes[0].shape).toEqual('rounded');
+    expect(data4Layout.nodes[0].label).toEqual('D');
+  });
+  it('should handle basic shape data statements', function () {
+    const res = flow.parser.parse(`flowchart TB
+      D@{ shape: rounded }`);
 
     const data4Layout = flow.parser.yy.getData();
     expect(data4Layout.nodes.length).toBe(1);
@@ -23,9 +32,69 @@ describe('when parsing directions', function () {
     expect(data4Layout.nodes[0].label).toEqual('D');
   });
 
+  it('should handle basic shape data statements with &', function () {
+    const res = flow.parser.parse(`flowchart TB
+      D@{ shape: rounded } & E`);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(2);
+    expect(data4Layout.nodes[0].shape).toEqual('rounded');
+    expect(data4Layout.nodes[0].label).toEqual('D');
+    expect(data4Layout.nodes[1].label).toEqual('E');
+  });
+  it('should handle shape data statements with edges', function () {
+    const res = flow.parser.parse(`flowchart TB
+      D@{ shape: rounded } --> E`);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(2);
+    expect(data4Layout.nodes[0].shape).toEqual('rounded');
+    expect(data4Layout.nodes[0].label).toEqual('D');
+    expect(data4Layout.nodes[1].label).toEqual('E');
+  });
+  it('should handle basic shape data statements with amp and edges 1', function () {
+    const res = flow.parser.parse(`flowchart TB
+      D@{ shape: rounded } & E --> F`);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(3);
+    expect(data4Layout.nodes[0].shape).toEqual('rounded');
+    expect(data4Layout.nodes[0].label).toEqual('D');
+    expect(data4Layout.nodes[1].label).toEqual('E');
+  });
+  it('should handle basic shape data statements with amp and edges 2', function () {
+    const res = flow.parser.parse(`flowchart TB
+      D@{ shape: rounded } & E@{ shape: rounded } --> F`);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(3);
+    expect(data4Layout.nodes[0].shape).toEqual('rounded');
+    expect(data4Layout.nodes[0].label).toEqual('D');
+    expect(data4Layout.nodes[1].label).toEqual('E');
+  });
+  it('should handle basic shape data statements with amp and edges 3', function () {
+    const res = flow.parser.parse(`flowchart TB
+      D@{ shape: rounded } & E@{ shape: rounded } --> F & G@{ shape: rounded }`);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(4);
+    expect(data4Layout.nodes[0].shape).toEqual('rounded');
+    expect(data4Layout.nodes[0].label).toEqual('D');
+    expect(data4Layout.nodes[1].label).toEqual('E');
+  });
+  it('should handle basic shape data statements with amp and edges 4', function () {
+    const res = flow.parser.parse(`flowchart TB
+      D@{ shape: rounded } & E@{ shape: rounded } --> F@{ shape: rounded } & G@{ shape: rounded }`);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(4);
+    expect(data4Layout.nodes[0].shape).toEqual('rounded');
+    expect(data4Layout.nodes[0].label).toEqual('D');
+    expect(data4Layout.nodes[1].label).toEqual('E');
+  });
   it('should no matter of there are no leading spaces', function () {
     const res = flow.parser.parse(`flowchart TB
-      D@{shape: rounded }@`);
+      D@{shape: rounded}`);
 
     const data4Layout = flow.parser.yy.getData();
 
@@ -36,7 +105,7 @@ describe('when parsing directions', function () {
 
   it('should no matter of there are many leading spaces', function () {
     const res = flow.parser.parse(`flowchart TB
-      D@{       shape: rounded }@`);
+      D@{       shape: rounded}`);
 
     const data4Layout = flow.parser.yy.getData();
 
@@ -47,7 +116,7 @@ describe('when parsing directions', function () {
 
   it('should be forgiving with many spaces before teh end', function () {
     const res = flow.parser.parse(`flowchart TB
-      D@{ shape: rounded          }@`);
+      D@{ shape: rounded         }`);
 
     const data4Layout = flow.parser.yy.getData();
 
@@ -57,7 +126,7 @@ describe('when parsing directions', function () {
   });
   it('should be possible to add multiple properties on the same line', function () {
     const res = flow.parser.parse(`flowchart TB
-      D@{ shape: rounded , label: "DD" }@`);
+      D@{ shape: rounded , label: "DD"}`);
 
     const data4Layout = flow.parser.yy.getData();
 
@@ -70,7 +139,7 @@ describe('when parsing directions', function () {
       A --> D@{
         shape: circle
         icon: "clock"
-      }@
+     }
 
       `);
 
@@ -89,11 +158,11 @@ describe('when parsing directions', function () {
       B@{
         shape: circle
         icon: "clock"
-      }@
+     }
       C[Hello]@{
         shape: circle
         icon: "clock"
-      }@
+     }
       `);
 
     const data4Layout = flow.parser.yy.getData();
@@ -105,12 +174,12 @@ describe('when parsing directions', function () {
     expect(data4Layout.nodes[2].shape).toEqual('circle');
     expect(data4Layout.nodes[2].label).toEqual('Hello');
   });
-  it('should use handle bracket end (}) character inside the shape data', function () {
+  it.only('should use handle bracket end (}) character inside the shape data', function () {
     const res = flow.parser.parse(`flowchart TB
       A@{
         label: "This is }"
         icon: "clock"
-      }@
+     }
       `);
 
     const data4Layout = flow.parser.yy.getData();
@@ -135,7 +204,7 @@ describe('when parsing directions', function () {
           This is a
           multiline string
         icon: "clock"
-      }@
+     }
       `);
 
     const data4Layout = flow.parser.yy.getData();
@@ -149,7 +218,7 @@ describe('when parsing directions', function () {
         label: "This is a
           multiline string"
         icon: "clock"
-      }@
+     }
       `);
 
     const data4Layout = flow.parser.yy.getData();
@@ -162,7 +231,7 @@ describe('when parsing directions', function () {
       A@{
         label: "This is a string with }"
         icon: "clock"
-      }@
+     }
       `);
 
     const data4Layout = flow.parser.yy.getData();
@@ -175,7 +244,7 @@ describe('when parsing directions', function () {
       A@{
         label: "This is a string with @"
         icon: "clock"
-      }@
+     }
       `);
 
     const data4Layout = flow.parser.yy.getData();
@@ -186,14 +255,14 @@ describe('when parsing directions', function () {
   it(' should be possible to use @ in strings', function () {
     const res = flow.parser.parse(`flowchart TB
       A@{
-        label: "This is a string with }@"
+        label: "This is a string with}"
         icon: "clock"
-      }@
+     }
       `);
 
     const data4Layout = flow.parser.yy.getData();
     expect(data4Layout.nodes.length).toBe(1);
     expect(data4Layout.nodes[0].shape).toEqual('squareRect');
-    expect(data4Layout.nodes[0].label).toEqual('This is a string with }@');
+    expect(data4Layout.nodes[0].label).toEqual('This is a string with}');
   });
 });
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 27253be4f..7dad0dfdf 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -39,12 +39,12 @@ accDescr\s*"{"\s*                               { this.begin("acc_descr_multilin
 
 
 \@\{                                            { this.pushState("shapeData"); yytext=""; return 'SHAPE_DATA' }
-<shapeData>["]                                   {
+<shapeData>["]                                  {
                                                     this.pushState("shapeDataStr");
                                                     return 'SHAPE_DATA';
                                                 }
-<shapeDataStr>["]                                { this.popState(); return 'SHAPE_DATA'}
-<shapeDataStr>[^\"]+                             {
+<shapeDataStr>["]                               { this.popState(); return 'SHAPE_DATA'}
+<shapeDataStr>[^\"]+                            {
                                                     const re = /\n\s*/g;
                                                     yytext = yytext.replace(re,"<br/>");
                                                     return 'SHAPE_DATA'}
@@ -404,8 +404,10 @@ vertexStatement: vertexStatement link node shapeData
 
 node: styledVertex
         { /*console.warn('nod', $styledVertex);*/ $$ = [$styledVertex];}
+    | node shapeData spaceList AMP spaceList styledVertex
+        {  yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$shapeData); $$ = $node.concat($styledVertex); console.warn('pip2', $node[0], $styledVertex, $$);  }
     | node spaceList AMP spaceList styledVertex
-        { $$ = $node.concat($styledVertex); /* console.warn('pip', $node[0], $styledVertex, $$); */ }
+        { $$ = $node.concat($styledVertex); console.warn('pip', $node[0], $styledVertex, $$);  }
     ;
 
 styledVertex: vertex