From b7c03dc27eefa029a2b735066567bb461d2c7e63 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 25 Jun 2025 12:58:54 +0200 Subject: [PATCH] Some cleanup --- cypress/platform/knsv2.html | 64 ++++++++-------- packages/mermaid-layout-elk/src/render.ts | 74 ++++++------------- .../rendering-elements/edges.js | 2 +- 3 files changed, 57 insertions(+), 83 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 6a08fa49b..f9d6c050e 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -105,7 +105,7 @@ - 
+    
       ---
       config:
         layout: elk
@@ -119,12 +119,12 @@
           B@{ shape: diamond}
 
     

-    
+    
       ---
       config:
         layout: elk
         flowchart:
-          curve: linear
+          curve: rounded
       ---
       flowchart LR
           D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
@@ -132,12 +132,14 @@
           D@{ shape: question}
           I@{ shape: question}
     

-    
+    
       ---
       config:
         layout: elk
         flowchart:
-          curve: linear
+          curve: rounded
+        elk:
+          nodePlacementStrategy: NETWORK_SIMPLEX
       ---
       flowchart LR
           D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
@@ -146,7 +148,7 @@
           D@{ shape: trap-b}
           I@{ shape: lean-l}
     

-    
+    
 ---
 config:
   layout: elk
@@ -164,7 +166,7 @@ flowchart LR
 config:
   layout: elk
   flowchart:
-    curve: linear
+    //curve: linear
 ---
 flowchart LR
 %% A ==> B
@@ -172,7 +174,7 @@ flowchart LR
 A{A} --> B((Bo boo)) & B & B & B
 
     

-    
+    
       ---
       config:
         layout: elk
@@ -192,7 +194,7 @@ A{A} --> B((Bo boo)) & B & B & B
           D --> I & E
           E --> I
     

-    
+    
 ---
 config:
   layout: elk
@@ -217,7 +219,7 @@ config:
       end
       end
     

-    
+    
 ---
 config:
   layout: elk
@@ -230,7 +232,7 @@ config:
       D-->I
       D-->I
     

-    
+    
 ---
 config:
   layout: elk
@@ -269,7 +271,7 @@ flowchart LR
     n8@{ shape: rect}
 
     

-    
+    
 ---
 config:
   layout: elk
@@ -285,7 +287,7 @@ flowchart LR
 
 
     

-    
+    
 ---
 config:
   layout: elk
@@ -294,7 +296,7 @@ flowchart LR
     A{A} --> B & C
 

-    
+    
 ---
 config:
   layout: elk
@@ -306,7 +308,7 @@ flowchart LR
     end
 

-    
+    
 ---
 config:
   layout: elk
@@ -324,7 +326,7 @@ flowchart LR
 
 
     

-    
+    
 ---
 config:
   kanban:
@@ -343,81 +345,81 @@ kanban
     task3[💻 Develop login feature]@{ ticket: 103 }
 
     

-    
+    
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
 
     

-    
+    
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     

-    
+    
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     

-    
+    
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
 
     

-    
+    
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
 
     

-    
+    
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     

-    
+    
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     

-    
+    
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
 
     

-    
+    
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
 
     

-    
+    
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     

-    
+    
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     

-    
+    
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
   A:::AClass
   classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     

-    
+    
 flowchart LR
   nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
   style A fill:#f9f,stroke:#333,stroke-width:4px
     

-    
+    
 kanban
   id2[In progress]
     docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
     

-    
+    
 ---
 config:
   kanban:
diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts
index 7e2a82c75..4d969d4e5 100644
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -9,7 +9,6 @@ import type {
 import { curveLinear } from 'd3';
 import ELK from 'elkjs/lib/elk.bundled.js';
 import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
-import { bounds } from '../../mermaid/src/diagrams/user-journey/journeyRenderer';
 
 type Node = LayoutData['nodes'][number];
 
@@ -74,9 +73,9 @@ export const render = async (
         ...node,
         children: [],
       };
-      // Let lke render with the copy
+      // Let elk render with the copy
       graph.children.push(child);
-      // Save the original contining the intersection function
+      // Save the original containing the intersection function
       nodeDb[node.id] = child;
       await addVertices(nodeEl, nodeArr, child, node.id);
 
@@ -267,7 +266,6 @@ export const render = async (
     const edges = dataForLayout.edges;
     const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
     const linkIdCnt: any = {};
-    const dir = dataForLayout.direction || 'DOWN';
     let defaultStyle: string | undefined;
     let defaultLabelStyle: string | undefined;
 
@@ -404,13 +402,11 @@ export const render = async (
 
         // calculate start and end points of the edge, note that the source and target
         // can be modified for shapes that have ports
-        // @ts-ignore TODO: fix this
-        const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
+
+        const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge);
         log.debug('abc78 source and target', source, target);
         // Add the edge to the graph
         graph.edges.push({
-          // @ts-ignore TODO: fix this
-          id: 'e' + edge.start + edge.end,
           ...edge,
           sources: [source],
           targets: [target],
@@ -810,6 +806,25 @@ export const render = async (
       log.debug('UIO cutter2: No suitable outside point found for end node intersection');
     }
 
+    // Final cleanup: Check if the last point is too close to the previous point
+    if (points.length > 1) {
+      const lastPoint = points[points.length - 1];
+      const secondLastPoint = points[points.length - 2];
+      const distance = Math.sqrt(
+        (lastPoint.x - secondLastPoint.x) ** 2 + (lastPoint.y - secondLastPoint.y) ** 2
+      );
+
+      // If the distance is very small (less than 2 pixels), remove the last point
+      if (distance < 2) {
+        log.debug(
+          'UIO cutter2: Last point too close to previous point, removing it. Distance:',
+          distance
+        );
+        log.debug('UIO cutter2: Removing last point:', lastPoint, 'keeping:', secondLastPoint);
+        points.pop();
+      }
+    }
+
     log.debug('UIO cutter2: Final points:', points);
 
     // Debug: Check which side of the end node we're ending at
@@ -1061,49 +1076,6 @@ export const render = async (
           });
         }
 
-        // edge.points = cutPathAtIntersect2(startNode, edge.points.reverse(), offset, {
-        //   x: startNode.x + startNode.width / 2 + offset.x,
-        //   y: startNode.y + startNode.height / 2 + offset.y,
-        //   width: sw,
-        //   height: startNode.height,
-        //   padding: startNode.padding,
-        // }).reverse();
-
-        // edge.points = cutPathAtIntersect2(endNode, edge.points, offset, {
-        //   x: endNode.x + ew / 2 + endNode.offset.x,
-        //   y: endNode.y + endNode.height / 2 + endNode.offset.y,
-        //   width: ew,
-        //   height: endNode.height,
-        //   padding: endNode.padding,
-        // });
-
-        // edge.points = cutPathAtIntersect(
-        //   edge.points.reverse(),
-        //   {
-        //     x: startNode.offset.posX + startNode.width / 2,
-        //     y: startNode.offset.posY + startNode.height / 2,
-        //     width: sw,
-        //     height: startNode.height,
-        //     padding: startNode.padding,
-        //   },
-        //   true // startNode.shape === 'diamond' || startNode.shape === 'diam'
-        // ).reverse();
-
-        // console.log('UIO width', sw, startNode.width);
-
-        // edge.points = cutPathAtIntersect(
-        //   edge.points,
-        //   {
-        //     x: endNode.offset.posX + endNode.width / 2,
-        //     y: endNode.offset.posY + endNode.height / 2,
-        //     width: ew,
-        //     height: endNode.height,
-        //     padding: endNode.padding,
-        //   },
-        //   endNode.shape === 'diamond' || endNode.shape === 'diam'
-        // );
-        // startNode.intersect = undefined;
-        // endNode.intersect = undefined;
         log.debug('UIO cutter2: Points before cutter2:', edge.points);
         edge.points = cutter2(startNode, endNode, edge.points);
         log.debug('UIO cutter2: Points after cutter2:', edge.points);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index afcd65360..7efa6eb9b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -602,7 +602,7 @@ export const insertEdge = function (
   //     .attr('cx', point.x)
   //     .attr('cy', point.y);
   // });
-  if (edge.showPoints || true) {
+  if (edge.showPoints) {
     lineData.forEach((point) => {
       elem
         .append('circle')