From d3b2c7ea1855341a8d67a0108adfe7b5d2892e53 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Mon, 25 Nov 2024 17:10:25 +0100 Subject: [PATCH] Revert "#6080: Fix for issue with diamond intersections when using elk-layout" This reverts commit 255279eb223c11cedf9d4f73ae047f24eb88e6c5. --- .../rendering/flowchart-elk.spec.js | 43 ------ cypress/platform/knsv2.html | 142 +++--------------- packages/mermaid-layout-elk/src/render.ts | 29 ++-- 3 files changed, 38 insertions(+), 176 deletions(-) diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js index bb24cfad24..b5caef9733 100644 --- a/cypress/integration/rendering/flowchart-elk.spec.js +++ b/cypress/integration/rendering/flowchart-elk.spec.js @@ -857,49 +857,6 @@ flowchart LR D --> E A["A"] -`, - { flowchart: { titleTopMargin: 0 } } - ); - }); - it('6080: should handle diamond shape intersections', () => { - imgSnapshotTest( - `--- -config: - layout: elk ---- -flowchart LR - subgraph s1["Untitled subgraph"] - n1["Evaluate"] - n2["Option 1"] - n3["Option 2"] - n4["fa:fa-car Option 3"] - end - subgraph s2["Untitled subgraph"] - n5["Evaluate"] - n6["Option 1"] - n7["Option 2"] - n8["fa:fa-car Option 3"] - end - A["Start"] -- Some text --> B("Continue") - B --> C{"Evaluate"} - C -- One --> D["Option 1"] - C -- Two --> E["Option 2"] - C -- Three --> F["fa:fa-car Option 3"] - n1 -- One --> n2 - n1 -- Two --> n3 - n1 -- Three --> n4 - n5 -- One --> n6 - n5 -- Two --> n7 - n5 -- Three --> n8 - n1@{ shape: diam} - n2@{ shape: rect} - n3@{ shape: rect} - n4@{ shape: rect} - n5@{ shape: diam} - n6@{ shape: rect} - n7@{ shape: rect} - n8@{ shape: rect} - `, { flowchart: { titleTopMargin: 0 } } ); diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 7ec666c1a9..a69804655e 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -88,134 +88,40 @@ - 
----
-config:
-  layout: elk
----
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-        n3["Option 2"]
-        n4["fa:fa-car Option 3"]
-  end
-    n1 -- One --> n2
-    n1 -- Two --> n3
-    n1 -- Three --> n4
-    n5
-    n1@{ shape: diam}
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-
-
-    
 ---
 config:
-  layout: elk
----
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-        n3["Option 2"]
-        n4["fa:fa-car Option 3"]
-  end
- subgraph s2["Untitled subgraph"]
-        n5["Evaluate"]
-        n6["Option 1"]
-        n7["Option 2"]
-        n8["fa:fa-car Option 3"]
-  end
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    n1 -- One --> n2
-    n1 -- Two --> n3
-    n1 -- Three --> n4
-    n5 -- One --> n6
-    n5 -- Two --> n7
-    n5 -- Three --> n8
-    n1@{ shape: diam}
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    n5@{ shape: diam}
-    n6@{ shape: rect}
-    n7@{ shape: rect}
-    n8@{ shape: rect}
-
-
- 
----
-config:
-  layout: elk
+    look: handDrawn
+    theme: default
 ---
 flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-  end
-    n1 -- One --> n2
-
-
-
-
+    n00@{ shape: triangle, label: 'This is a label for triangle shape' }
+    n11@{ shape: sloped-rectangle, label: 'This is a label for sloped-rectangle shape' }
+    n22@{ shape: horizontal-cylinder, label: 'This is a label for horizontal-cylinder shape' }
+    n33@{ shape: flipped-triangle, label: 'This is a label for flipped-triangle shape' }
+    n44@{ shape: hourglass, label: 'This is a label for hourglass shape' }
+    n00 --> n11
+    n00 --> n22
+    n00 --> n33
+    n00 --> n44
+    n11 --> n22
+    n11 --> n33
+    n11 --> n44
+    n22 --> n33
+    n22 --> n44
+    n33 --> n44
- 
----
-config:
-  layout: elk
----
-flowchart LR
-    A{A} --> B & C
-
- 
+    
 ---
 config:
-  layout: elk
+    look: handDrawn
+    theme: default
 ---
 flowchart LR
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    %% C@{ shape: hexagon}
-
-
-    

-    
----
-config:
-  kanban:
-    ticketBaseUrl: 'https://github.com/your-repo/issues/#TICKET#'
----
-kanban
-  Backlog
-    task1[📝 Define project requirements]@{ ticket: a101 }
-  To Do
-    task2[🔍 Research technologies]@{ ticket: a102 }
-  Review
-    task4[🔍 Code review for login feature]@{ ticket: a104 }
-  Done
-    task5[✅ Deploy initial version]@{ ticket: a105 }
-  In Progress
-    task3[💻 Develop login feature]@{ ticket: 103 }
-
+    n22@{ shape: h-cyl }
+    n00 --> n11
+    n00 --> n22
+    n11 --> n22
     

     
 flowchart LR
diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts
index 1216b5dc82..60cdff8d62 100644
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -484,8 +484,6 @@ export const render = async (
     const r3 = a1 * q1.x + b1 * q1.y + c1;
     const r4 = a1 * q2.x + b1 * q2.y + c1;
 
-    const epsilon = 1e-6;
-
     // Check signs of r3 and r4. If both point 3 and point 4 lie on
     // same side of line 1, the line segments do not intersect.
     if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
@@ -504,7 +502,7 @@ export const render = async (
     // Check signs of r1 and r2. If both point 1 and point 2 lie
     // on same side of second line segment, the line segments do
     // not intersect.
-    if (Math.abs(r1) < epsilon && Math.abs(r2) < epsilon && sameSign(r1, r2)) {
+    if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {
       return /*DON'T_INTERSECT*/;
     }
 
@@ -549,11 +547,11 @@ export const render = async (
       { x: x1 - w / 2, y: y1 },
     ];
     log.debug(
-      `APA16 diamondIntersection calc abc89:
+      `UIO diamondIntersection calc abc89:
   outsidePoint: ${JSON.stringify(outsidePoint)}
   insidePoint : ${JSON.stringify(insidePoint)}
-  node-bounds       : x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`,
-      JSON.stringify(polyPoints)
+  node        : x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`,
+      polyPoints
     );
 
     const intersections = [];
@@ -566,8 +564,8 @@ export const render = async (
       minY = Math.min(minY, entry.y);
     });
 
-    const left = x1 - w / 2 - minX;
-    const top = y1 - h / 2 - minY;
+    // const left = x1 - w / 2;
+    // const top = y1 + h / 2;
 
     for (let i = 0; i < polyPoints.length; i++) {
       const p1 = polyPoints[i];
@@ -575,8 +573,8 @@ export const render = async (
       const intersect = intersectLine(
         bounds,
         outsidePoint,
-        { x: left + p1.x, y: top + p1.y },
-        { x: left + p2.x, y: top + p2.y }
+        { x: p1.x, y: p1.y },
+        { x: p2.x, y: p2.y }
       );
 
       if (intersect) {
@@ -755,6 +753,7 @@ export const render = async (
         }
       }
     });
+    log.debug('returning points', points);
     return points;
   };
 
@@ -969,17 +968,17 @@ export const render = async (
             startNode.innerHTML
           );
         }
-        if (startNode.shape === 'diamond' || startNode.shape === 'diam') {
+        if (startNode.shape === 'diamond') {
           edge.points.unshift({
             x: startNode.x + startNode.width / 2 + offset.x,
             y: startNode.y + startNode.height / 2 + offset.y,
           });
         }
-        if (endNode.shape === 'diamond' || endNode.shape === 'diam') {
+        if (endNode.shape === 'diamond') {
           const x = endNode.x + endNode.width / 2 + offset.x;
           // Add a point at the center of the diamond
           if (
-            Math.abs(edge.points[edge.points.length - 1].y - endNode.y - offset.y) > 0.01 ||
+            Math.abs(edge.points[edge.points.length - 1].y - endNode.y - offset.y) > 0.001 ||
             Math.abs(edge.points[edge.points.length - 1].x - x) > 0.001
           ) {
             edge.points.push({
@@ -998,7 +997,7 @@ export const render = async (
             height: startNode.height,
             padding: startNode.padding,
           },
-          startNode.shape === 'diamond' || startNode.shape === 'diam'
+          startNode.shape === 'diamond'
         ).reverse();
 
         edge.points = cutPathAtIntersect(
@@ -1010,7 +1009,7 @@ export const render = async (
             height: endNode.height,
             padding: endNode.padding,
           },
-          endNode.shape === 'diamond' || endNode.shape === 'diam'
+          endNode.shape === 'diamond'
         );
 
         const paths = insertEdge(