From a6dc1eaa407c92704a7fd630e08eaa5f8cfab06b Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Thu, 13 Jun 2024 13:47:25 +0200 Subject: [PATCH 1/3] #5237 Fix eslint error --- packages/mermaid/src/diagrams/flowchart/flowDb.ts | 9 ++++----- .../rendering-util/layout-algorithms/dagre/index.js | 11 ----------- .../src/rendering-util/rendering-elements/clusters.js | 2 +- .../rendering-elements/shapes/trapezoid.ts | 3 +-- 4 files changed, 6 insertions(+), 19 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts index b24fc8805..65b675a9d 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts @@ -795,10 +795,10 @@ const addNodeFromVertex = ( config: any, look: string ) => { - let parentId = parentDB.get(vertex.id); - let isGroup = subGraphDB.get(vertex.id) || false; + const parentId = parentDB.get(vertex.id); + const isGroup = subGraphDB.get(vertex.id) || false; - let node = findNode(nodes, vertex.id); + const node = findNode(nodes, vertex.id); if (!node) { nodes.push({ id: vertex.id, @@ -852,7 +852,7 @@ export const getData = () => { const n = getVertices(); n.forEach((vertex) => { - const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, config.look); + addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, config.look); }); const e = getEdges(); @@ -874,7 +874,6 @@ export const getData = () => { pattern: rawEdge.stroke, look: config.look, }; - console.log('rawEdge SPLIT', rawEdge, index); edges.push(edge); }); diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js index 3e8d35ccb..36ae4b707 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js +++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js @@ -188,17 +188,6 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit insertCluster(clusters, node); // A cluster in the non-recursive way - console.log( - 'A tainted cluster node with children XBX', - v, - node.id, - node.width, - node.height, - node.x, - node.y, - 'offset', - parent?.offsetY - ); clusterDb[node.id].node = node; } else { const parent = graph.node(node.parentId); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index 2bbb13c62..e98af7e00 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js @@ -278,7 +278,7 @@ const roundedWithTitle = (parent, node) => { const rectBox = rect.node().getBBox(); node.height = rectBox.height; node.offsetX = 0; - // Used by payout engone to position subgraph in parent + // Used by layout engine to position subgraph in parent node.offsetY = bbox.height - node.padding / 2; node.labelBBox = bbox; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts index eb25dc52a..eae0787e8 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts @@ -37,8 +37,7 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise Date: Thu, 13 Jun 2024 14:10:58 +0200 Subject: [PATCH 2/3] #5237 Fix eslint error --- cypress/platform/flowchart-refactor.html | 1195 ++++++++++++---------- cypress/platform/flowchart-sate.html | 312 +++--- cypress/platform/state-refactor.html | 1 + 3 files changed, 805 insertions(+), 703 deletions(-) diff --git a/cypress/platform/flowchart-refactor.html b/cypress/platform/flowchart-refactor.html index 7eb2e545a..52336fd28 100644 --- a/cypress/platform/flowchart-refactor.html +++ b/cypress/platform/flowchart-refactor.html @@ -1,775 +1,866 @@ + + + + + + + + + + + - - - - - - - - - - - + + - .content .pre-scrollable { - max-height: 200px; - overflow-y: scroll; - } - - - - - - - - - - - - - -
DagreDagre with roughELKELK with rough
- -
-
- 
-      flowchart LR
-    id1([This is the text in the box])
-
-
+ + + + + + + + + + + + - - + - + - + + + + + + + - - - - - - - - - - - + - - + - + - + - - - - - + + + + + + + + - - + - - + - + - + - - - - - + + + + + + + + - - + - - + - + - + - - - - - + + + + + + + + - - + - - + - + - + - - - - - + + + + + + + + - - + - - + - + - + - - - - - + + + + + + + + - - + - - + - + - + - - - - - + + + + + + + + - - + - - - + - + - - - - - + + + + + + + + - - + - - + - + - + - - - - - + + + + + + + + - - + - - + - + - + - - - - - + + + + + + + + - - + - - + - + - + - - - - - + + + + + + + + - - + - - + - + - + - - - - - + + + + + + + + - - + - - + - + - + - - - - - + + + + + + + + - - + - - + - + - + - - - - - + + + + + + + + +
DagreDagre with roughELKELK with rough
+ +
+
+ 
+              flowchart LR
+              id1([This is the text in the box])
+
+
- 		- 
+        
+
+ 
 flowchart LR
     id1([This is the text in the box])
 
-
- 		- 
+
+ 		+ 
 %%{init: {"look": "handdrawn"} }%%
 flowchart LR
     id1([This is the text in the box])
-
-
-
- 		- 
+
+ 		+ 
 %%{init: {"handdrawn": false, "layout": "elk"} }%%
 flowchart LR
     id1([This is the text in the box])
-
-
-
- 		- 
+
+ 		+ 
 %%{init: {"look": "handdrawn", "layout": "elk"} }%%
 flowchart LR
     id1([This is the text in the box])
+
+
- -
-
- 
+
+ +
+
+ 
       flowchart LR
     id1[[This is the text in the box]]
-
+ +
- 		- 
+        
+
+ 
 flowchart LR
     id1[[This is the text in the box]]
-
- 		- 
+
+ 		+ 
 %%{init: {"look": "handdrawn"} }%%
 flowchart LR
     id1[[This is the text in the box]]
-
- 		- 
+
+ 		+ 
 %%{init: {"handdrawn": false, "layout": "elk"} }%%
 flowchart LR
     id1[[This is the text in the box]]
-
- 		- 
+
+ 		+ 
 %%{init: {"look": "handdrawn", "layout": "elk"} }%%
 flowchart LR
     id1[[This is the text in the box]]
-
-
- -
-
- 
+
+ +
+
+ 
               flowchart LR
     id1[(Database)]
-
+ +
- 		- 
+        
+
+ 
           flowchart LR
     id1[(Database)]
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn"} }%%
           flowchart LR
     id1[(Database)]
-
- 		- 
+
+ 		+ 
           %%{init: {"handdrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1[(Database)]
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn", "layout": "elk"} }%%
           flowchart LR
     id1[(Database)]
-
-
- -
-
- 
+
+ +
+
+ 
               flowchart LR
     id1((This is the text in the circle))
-
+ +
- 		- 
+        
+
+ 
           flowchart LR
     id1((This is the text in the circle))
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn"} }%%
           flowchart LR
     id1((This is the text in the circle))
-
- 		- 
+
+ 		+ 
           %%{init: {"handdrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1((This is the text in the circle))
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn", "layout": "elk"} }%%
           flowchart LR
     id1((This is the text in the circle))
-
-
- -
-
- 
+
+ +
+
+ 
               flowchart TD
     id1(((This is the text in the circle)))
-
+ +
- 		- 
+        
+
+ 
           flowchart TD
     id1(((This is the text in the circle)))
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn"} }%%
           flowchart TD
     id1(((This is the text in the circle)))
-
- 		- 
+
+ 		+ 
           %%{init: {"handdrawn": false, "layout": "elk"} }%%
           flowchart TD
     id1(((This is the text in the circle)))
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn", "layout": "elk"} }%%
           flowchart TD
     id1(((This is the text in the circle)))
-
-
- -
-
- 
+
+ +
+
+ 
               flowchart LR
     id1>This is the text in the box]
-
+ +
- 		- 
+        
+
+ 
           flowchart LR
     id1>This is the text in the box]
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn"} }%%
           flowchart LR
     id1>This is the text in the box]  
-
- 		- 
+
+ 		+ 
           %%{init: {"handdrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1>This is the text in the box]  
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn", "layout": "elk"} }%%
           flowchart LR
     id1>This is the text in the box]
-
-
- -
-
- 
+
+ +
+
+ 
               flowchart LR
     id1{This is the text in the box}
-
+ +
- 		- 
+        
+
+ 
           flowchart LR
     id1{This is the text in the box}
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn"} }%%
           flowchart LR
     id1{This is the text in the box}
-
- 		- 
+
+ 		+ 
           %%{init: {"handdrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1{This is the text in the box}
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn", "layout": "elk"} }%%
           flowchart LR
     id1{This is the text in the box}
-
-
- -
-
- 
+
+ +
+
+ 
               flowchart LR
     id1{{This is the text in the box}}
-
+ +
- 		- 
+        
+
+ 
           flowchart LR
     id1{{This is the text in the box}}
-
- 		- 
-          %%{init: {"look": "handdrawn"} }%%
-          flowchart LR
-    id1{{This is the text in the box}}
-
- 		- 
+
+ 		+ 
           %%{init: {"handdrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1{{This is the text in the box}}
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn", "layout": "elk"} }%%
           flowchart LR
     id1{{This is the text in the box}}
-
-
- -
-
- 
+
+ +
+
+ 
               flowchart TD
     id1[/This is the text in the box/]
-
+ +
- 		- 
+        
+
+ 
           flowchart TD
     id1[/This is the text in the box/]
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn"} }%%
           flowchart TD
     id1[/This is the text in the box/]  
-
- 		- 
+
+ 		+ 
           %%{init: {"handdrawn": false, "layout": "elk"} }%%
           flowchart TD
     id1[/This is the text in the box/] 
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn", "layout": "elk"} }%%
           flowchart TD
     id1[/This is the text in the box/]
-
-
- -
-
- 
+
+ +
+
+ 
               flowchart TD
     id1[\This is the text in the box\]
-
+ +
- 		- 
+        
+
+ 
           flowchart TD
     id1[\This is the text in the box\]
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn"} }%%
           flowchart TD
     id1[\This is the text in the box\]
-
- 		- 
+
+ 		+ 
           %%{init: {"handdrawn": false, "layout": "elk"} }%%
           flowchart TD
     id1[\This is the text in the box\]
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn", "layout": "elk"} }%%
           flowchart TD
     id1[\This is the text in the box\]
 
-
-
- -
-
- 
+
+ +
+
+ 
               flowchart TD
     A[/Christmas\]
-
+ +
- 		- 
+        
+
+ 
           flowchart TD
     A[/Christmas\]
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn"} }%%
           flowchart TD
     A[/Christmas\]
-
- 		- 
+
+ 		+ 
           %%{init: {"handdrawn": false, "layout": "elk"} }%%
           flowchart TD
     A[/Christmas\]
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn", "layout": "elk"} }%%
           flowchart TD
     A[/Christmas\]
-
-
- -
-
- 
+
+ +
+
+ 
               flowchart TD
     A[\Christmas/]
-
+ +
- 		- 
+        
+
+ 
           flowchart TD
     A[\Christmas/]
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn"} }%%
           flowchart TD
     A[\Christmas/]
-
- 		- 
+
+ 		+ 
           %%{init: {"handdrawn": false, "layout": "elk"} }%%
           flowchart TD
     A[\Christmas/]
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn", "layout": "elk"} }%%
           flowchart TD
     A[\Christmas/]  
-
-
- -
-
- 
+
+ +
+
+ 
               flowchart LR
     id1(This is the text in the box)
-
+ +
- 		- 
+        
+
+ 
           flowchart LR
     id1(This is the text in the box)
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn"} }%%
           flowchart LR
     id1(This is the text in the box)
-
- 		- 
+
+ 		+ 
           %%{init: {"handdrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1(This is the text in the box)
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn", "layout": "elk"} }%%
           flowchart LR
     id1(This is the text in the box) 
-
-
- -
-
- 
+
+ +
+
+ 
               flowchart LR
     id1[This is the text in the box]
-
+ +
- 		- 
+        
+
+ 
           flowchart LR
     id1[This is the text in the box]
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn"} }%%
           flowchart LR
     id1[This is the text in the box]
-
- 		- 
+
+ 		+ 
           %%{init: {"handdrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1[This is the text in the box]
-
- 		- 
+
+ 		+ 
           %%{init: {"look": "handdrawn", "layout": "elk"} }%%
           flowchart LR
     id1[This is the text in the box]
-
-
-
+ - - - \ No newline at end of file + let coll = document.getElementsByClassName('collapsible'); + for (const element of coll) { + element.addEventListener('click', function () { + this.classList.toggle('active'); + let content = this.nextElementSibling; + if (content.style.maxHeight) { + content.style.maxHeight = null; + } else { + content.style.maxHeight = content.scrollHeight + 'px'; + } + }); + } + + + diff --git a/cypress/platform/flowchart-sate.html b/cypress/platform/flowchart-sate.html index 61c3c167d..49809d73c 100644 --- a/cypress/platform/flowchart-sate.html +++ b/cypress/platform/flowchart-sate.html @@ -1,181 +1,191 @@ + + + + + + + + + + + - - - - - - - - - - - + + - .content .pre-scrollable { - max-height: 200px; - overflow-y: scroll; - } - - - - - - - - - - - - + - - - \ No newline at end of file + let coll = document.getElementsByClassName('collapsible'); + for (const element of coll) { + element.addEventListener('click', function () { + this.classList.toggle('active'); + let content = this.nextElementSibling; + if (content.style.maxHeight) { + content.style.maxHeight = null; + } else { + content.style.maxHeight = content.scrollHeight + 'px'; + } + }); + } + + + diff --git a/cypress/platform/state-refactor.html b/cypress/platform/state-refactor.html index 6bad8d2c6..3d2a47e47 100644 --- a/cypress/platform/state-refactor.html +++ b/cypress/platform/state-refactor.html @@ -105,6 +105,7 @@ stateId +
State roughFlowchart rough
- -
-
- 
+  
+    
+      
+        
+        
+        
+        
+      
+      
+        
-      
-      
+        
+      
+        
+      
+    
State roughFlowchart rough

+          
+          

+            

+              
       flowchart LR
     id1([This is the text in the box])
 
-  

+  
+            

           

-      		
-        
+        
+        

+          
 %%{init: {"look": "handdrawn"} }%%
 stateDiagram-v2
     stateA
 
-      

-      		
-        
+      

+        		
+          
 %%{init: {"look": "handdrawn"} }%%
 flowchart LR
     id1[[This is the text in the box]]
 
 
-      

-      

 
-    

From fc17733770d26418a849617839fba825b348ea56 Mon Sep 17 00:00:00 2001
From: Ashish Jain 
Date: Thu, 13 Jun 2024 14:17:36 +0200
Subject: [PATCH 3/3] #5237 Fix eslint error

---
 cypress/platform/knsv2.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 9c91100bb..40cb5a933 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -153,6 +153,7 @@ flowchart LR
     end
     Apa --- C
     A --x C
+    
 ---