Merge pull request #6161 from mermaid-js/saurabh/refactor/convert-flo…

…wDb-to-class Refactor: Change flowDB to class based architecture.
mermaid-js · Jan 22, 2025 · 5120ed0 · 5120ed0
2 parents e9e663f + 1575a93
commit 5120ed0
Show file tree

Hide file tree

Showing 22 changed files with 1,127 additions and 1,060 deletions.
diff --git a/.changeset/new-kiwis-listen.md b/.changeset/new-kiwis-listen.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each flowchart
diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html
@@ -62,56 +62,23 @@
 
   <body style="display: flex; gap: 2rem; flex-direction: row">
     <pre id="diagram4" class="mermaid">
-      flowchart LR
-      A@{ icon: "fa:window-minimize", form: circle }
-      E@{ icon: "fa:window-minimize", form: circle }
-      B@{ icon: "fa:bell", form: circle }
-      B2@{ icon: "fa:bell", form: circle }
-      C@{ icon: "fa:address-book",  form: square  }
-      D@{ icon: "fa:star-half",  form: square  }
-      A --> E
-      B --> B2
-
+      flowchart
+          A --> A
+          subgraph B
+            B1 --> B1
+          end
+          subgraph C
+            subgraph C1
+              C2 --> C2
+              subgraph D
+                D1 --> D1
+              end
+              D --> D
+            end
+            C1 --> C1
+          end
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
-      flowchart TB
-       A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
-       B2 --test--> C
-       D --> B2 --> E
-       style B2 fill:#f9f,stroke:#333,stroke-width:4px
-  </pre
-    >
-    <pre id="diagram43" class="mermaid2">
-      flowchart BT
-       A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }
-       B2 --test--> C
-       D --> B2 --> E
-  </pre
-    >
-    <pre id="diagram4" class="mermaid2">
-      flowchart BT
-       A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }
-       B2 --test--> C
-  </pre
-    >
-    <pre id="diagram43" class="mermaid2">
-      flowchart BT
-       A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }
-       B2 --test--> C
-  </pre
-    >
-    <pre id="diagram6" class="mermaid2">
-      flowchart TB
-       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 } --> C
-  </pre
-    >
-    <pre id="diagram6" class="mermaid2">
-      flowchart TB
-       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 } --> C
-       D --> B2 --> 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.spec.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts
@@ -1,9 +1,11 @@
-import flowDb from './flowDb.js';
+import { FlowDB } from './flowDb.js';
 import type { FlowSubGraph } from './types.js';
 
 describe('flow db subgraphs', () => {
+  let flowDb: FlowDB;
   let subgraphs: FlowSubGraph[];
   beforeEach(() => {
+    flowDb = new FlowDB();
     subgraphs = [
       { nodes: ['a', 'b', 'c', 'e'] },
       { nodes: ['f', 'g', 'h'] },
@@ -44,8 +46,9 @@ describe('flow db subgraphs', () => {
 });
 
 describe('flow db addClass', () => {
+  let flowDb: FlowDB;
   beforeEach(() => {
-    flowDb.clear();
+    flowDb = new FlowDB();
   });
   it('should detect many classes', () => {
     flowDb.addClass('a,b', ['stroke-width: 8px']);
@@ -65,3 +68,33 @@ describe('flow db addClass', () => {
     expect(classes.get('a')?.styles).toEqual(['stroke-width: 8px']);
   });
 });
+
+describe('flow db class', () => {
+  let flowDb: FlowDB;
+  beforeEach(() => {
+    flowDb = new FlowDB();
+  });
+  // This is to ensure that functions used in flow JISON are exposed as function from FlowDB
+  it('should have functions used in flow JISON as own property', () => {
+    const functionsUsedInParser = [
+      'setDirection',
+      'addSubGraph',
+      'setAccTitle',
+      'setAccDescription',
+      'addVertex',
+      'addLink',
+      'setClass',
+      'destructLink',
+      'addClass',
+      'setClickEvent',
+      'setTooltip',
+      'setLink',
+      'updateLink',
+      'updateLinkInterpolate',
+    ] as const satisfies (keyof FlowDB)[];
+
+    for (const fun of functionsUsedInParser) {
+      expect(Object.hasOwn(flowDb, fun)).toBe(true);
+    }
+  });
+});