#5237 Clean and fix for issue with edges to the diamond shape

cypress/platform/knsv2.html

@@ -86,14 +86,20 @@
 ---
 config:
   look: handDrawn
-  flowchart:
+  layout: elk
-    htmlLabels: false
+  elk:
+        nodePlacementStrategy: BRANDES_KOEPF
 ---
-flowchart
+flowchart TB
-      A[I am a long text, where do I go??? handdrawn - false]
+    %% A --> C
+    B -- sdf sdf --> C{"Evaluate"}
+    C --> n4["salkdfjh akljd lkasdjf lkashj lksjadf klasdh"]
+    C --> F
+
+
 </pre
       >
-      <pre id="diagram" class="mermaid">
+      <pre id="diagram" class="mermaid2">
 ---
 config:
   look: handdrawn
@@ -106,7 +112,7 @@ flowchart
       >
     </div>
     <div class="flex">
-      <pre id="diagram" class="mermaid">
+      <pre id="diagram" class="mermaid2">
 ---
 config:
   flowchart:
@@ -116,7 +122,7 @@ flowchart
       A[I am a long text, where do I go??? classic - false]
 </pre
       >
-      <pre id="diagram" class="mermaid">
+      <pre id="diagram" class="mermaid2">
 ---
 config:
   flowchart:
@@ -159,8 +165,8 @@ flowchart LR
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      // import layouts from './mermaid-layout-elk.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
-      // mermaid.registerLayoutLoaders(layouts);
+      mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {
         console.error('Mermaid error: ', err);
       };

packages/mermaid-layout-elk/src/render.ts

@@ -23,7 +23,6 @@ export const render = async (
   { algorithm }: RenderOptions
 ) => {
   const nodeDb: Record<string, any> = {};
-  const portPos: Record<string, any> = {};
   const clusterDb: Record<string, any> = {};
 
   const addVertex = async (nodeEl: any, graph: { children: any[] }, nodeArr: any, node: any) => {
@@ -169,42 +168,6 @@ export const render = async (
     );
   };
 
-  const getNextPort = (node: string | number, edgeDirection: string, graphDirection: any) => {
-    log.info('getNextPort abc88', { node, edgeDirection, graphDirection });
-    if (!portPos[node]) {
-      switch (graphDirection) {
-        case 'TB':
-        case 'TD':
-          portPos[node] = {
-            inPosition: 'north',
-            outPosition: 'south',
-          };
-          break;
-        case 'BT':
-          portPos[node] = {
-            inPosition: 'south',
-            outPosition: 'north',
-          };
-          break;
-        case 'RL':
-          portPos[node] = {
-            inPosition: 'east',
-            outPosition: 'west',
-          };
-          break;
-        case 'LR':
-          portPos[node] = {
-            inPosition: 'west',
-            outPosition: 'east',
-          };
-          break;
-      }
-    }
-    const result = edgeDirection === 'in' ? portPos[node].inPosition : portPos[node].outPosition;
-
-    return result;
-  };
-
   const addSubGraphs = (nodeArr: any[]): TreeData => {
     const parentLookupDb: TreeData = { parentById: {}, childrenById: {} };
     const subgraphs = nodeArr.filter((node: { isGroup: any }) => node.isGroup);
@@ -229,9 +192,9 @@ export const render = async (
     return parentLookupDb;
   };
 
-  const getEdgeStartEndPoint = (edge: any, dir: any) => {
+  const getEdgeStartEndPoint = (edge: any) => {
-    let source: any = edge.start;
+    const source: any = edge.start;
-    let target: any = edge.end;
+    const target: any = edge.end;
 
     // Save the original source and target
     const sourceId = source;
@@ -244,14 +207,6 @@ export const render = async (
       return { source, target };
     }
 
-    if (startNode.shape === 'diamond') {
-      source = `${source}-${getNextPort(source, 'out', dir)}`;
-    }
-
-    if (endNode.shape === 'diamond') {
-      target = `${target}-${getNextPort(target, 'in', dir)}`;
-    }
-
     // Add the edge to the graph
     return { source, target, sourceId, targetId };
   };
@@ -980,11 +935,18 @@ export const render = async (
           });
         }
         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.001 ||
+            Math.abs(edge.points[edge.points.length - 1].x - x) > 0.001
+          ) {
             edge.points.push({
               x: endNode.x + endNode.width / 2 + offset.x,
               y: endNode.y + endNode.height / 2 + offset.y,
             });
           }
+        }
 
         edge.points = cutPathAtIntersect(
           edge.points.reverse(),

packages/mermaid/src/rendering-util/rendering-elements/edges.js

@@ -538,6 +538,27 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
       .attr('style', edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : '');
   }
 
+  // DEBUG code, DO NOT REMOVE
+  // adds a red circle at each edge coordinate
+  // cornerPoints.forEach((point) => {
+  //   elem
+  //     .append('circle')
+  //     .style('stroke', 'blue')
+  //     .style('fill', 'blue')
+  //     .attr('r', 3)
+  //     .attr('cx', point.x)
+  //     .attr('cy', point.y);
+  // });
+  // lineData.forEach((point) => {
+  //   elem
+  //     .append('circle')
+  //     .style('stroke', 'blue')
+  //     .style('fill', 'blue')
+  //     .attr('r', 3)
+  //     .attr('cx', point.x)
+  //     .attr('cy', point.y);
+  // });
+
   let url = '';
   if (getConfig().flowchart.arrowMarkerAbsolute || getConfig().state.arrowMarkerAbsolute) {
     url =

packages/mermaid/src/schemas/config.schema.yaml

@@ -118,7 +118,7 @@ properties:
           - NETWORK_SIMPLEX
           - LINEAR_SEGMENTS
           - BRANDES_KOEPF
-        default: SIMPLE
+        default: BRANDES_KOEPF
   darkMode:
     type: boolean
     default: false