Fix for edge issue with small corners

2025-08-15 06:19:24 +02:00 · 2024-05-28 15:27:13 +02:00
parent 51bdda0c34
commit 9855bdbaaa
4 changed files with 75 additions and 91 deletions
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -80,52 +80,23 @@
  init: {
  "theme":"base",
  "fontFamily": "Kalam",
-  "themeVariables": {
-    "background": "#FFFFFF",
-    "primaryColor": "#7bdfa7",
-    "primaryTextColor": "#3c3c3b",
-    "secondaryColor": "#642470",
-    "secondaryTextColor": "#3c3c3b",
-    "tertiaryColor": "#1c736D",
-    "tertiaryTextColor": "#3c3c3b",
-    "noteBkgColor": "#9fd8ef",
-    "loopTextColor": "#636362",
-    "labelBoxBkgColor": "#642470",
-    "labelBoxBorderColor": "#642470",
-    "labelTextColor": "#d4d4d4",
-    "signalTextColor": "#636362",
-    "signalColor": "#642470"
-  }
-  }
-}%%
-sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!
-      </pre
-    >
-    <pre id="diagram" class="mermaid2">
-%%{
-  init: {
-    "theme":"base",
-  "fontFamily": "Forth Bold",
-  "themeVariables": {
-    "background": "#FFFFFF",
-    "primaryColor": "#7bdfa7",
-    "primaryTextColor": "#3c3c3b",
-    "secondaryColor": "#642470",
-    "secondaryTextColor": "#3c3c3b",
-    "tertiaryColor": "#1c736D",
-    "tertiaryTextColor": "#3c3c3b",
-    "noteBkgColor": "#9fd8ef",
-    "loopTextColor": "#636362",
-    "labelBoxBkgColor": "#642470",
-    "labelBoxBorderColor": "#642470",
-    "labelTextColor": "#d4d4d4",
-    "signalTextColor": "#636362",
-    "signalColor": "#642470"
-  }
+  "themeVariables":
+    {
+      "background": "#FFFFFF",
+      "primaryColor": "#7bdfa7",
+      "primaryTextColor": "#3c3c3b",
+      "secondaryColor": "#642470",
+      "secondaryTextColor": "#3c3c3b",
+      "tertiaryColor": "#1c736D",
+      "tertiaryTextColor": "#3c3c3b",
+      "noteBkgColor": "#9fd8ef",
+      "loopTextColor": "#636362",
+      "labelBoxBkgColor": "#642470",
+      "labelBoxBorderColor": "#642470",
+      "labelTextColor": "#d4d4d4",
+      "signalTextColor": "#636362",
+      "signalColor": "#642470"
+    }
  }
 }%%
 sequenceDiagram
@@ -137,29 +108,35 @@ sequenceDiagram
    >

    <pre id="diagram" class="mermaid2">
-      %%{init: {"layout": "elk", "mergeEdges": true} }%%
+      %%{init: {"layout": "dagre", "mergeEdges": true} }%%
 stateDiagram
-      A --> B
+      A: This is A
      </pre
    >
-    <pre id="diagram" class="mermaid">
-      %%{init: {"layout": "elk", "mergeEdges": true} }%%
+    <pre id="diagram" class="mermaid2">
+      %%{init: {"layout": "dagre", "mergeEdges": true} }%%
 flowchart
      A --> B(This is B)
      </pre
    >
    <pre id="diagram" class="mermaid2">
-      %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "NETWORK_SIMPLEX"} }%%
-stateDiagram
-  State T0 {
-    direction LR
-    A --> B
-  }
-  State T1 {
-    [*] --> NumLockOff
-    NumLockOff --> NumLockOn : EvNumLockPressed
-    NumLockOn --> NumLockOff : EvNumLockPressed
-  }
+      %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
+      stateDiagram
+    state if_state &lt;&lt;choice&gt;&gt;
+    [*] --> IsPositive
+    IsPositive --> if_state
+    if_state --> False: if n < 0
+    if_state --> True : if n >= 0
+      </pre
+    >
+    <pre id="diagram" class="mermaid">
+      %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
+      stateDiagram
+    state if_state &lt;&lt;choice&gt;&gt;
+    [*] --> IsPositive
+    IsPositive --> if_state
+    if_state --> False: if n < 0
+    if_state --> True : if n >= 0
      </pre
    >
    <pre id="diagram" class="mermaid2">
@@ -250,16 +227,16 @@ stateDiagram-v2
        console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
-        theme: 'base',
+        // theme: 'base',
        handdrawnSeed: 12,
        look: 'handdrawn',
-        'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
+
        // layout: 'dagre',
-        layout: 'elk',
+        // layout: 'elk',
        flowchart: { titleTopMargin: 10 },
        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        fontFamily: 'courier',
+        fontFamily: 'Kalam',
+        // fontFamily: 'courier',
        sequence: {
          actorFontFamily: 'courier',
          noteFontFamily: 'courier',
@@ -275,10 +252,6 @@ stateDiagram-v2
        console.error('In parse error:');
        console.error(err);
      };
-      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
-      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
    </script>
  </body>
 </html>
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -468,6 +468,13 @@ export const render = async (data4Layout, svg, element, algorithm) => {
      'elk.layered.mergeEdges': data4Layout.config.mergeEdges,
      'elk.direction': 'DOWN',
      'spacing.baseValue': 30,
+      'spacing.nodeNode': 40,
+      'spacing.nodeNodeBetweenLayers': 45,
+      // 'spacing.edgeNode': 40,
+      // 'spacing.edgeNodeBetweenLayers': 30,
+      // 'spacing.edgeEdge': 30,
+      // 'spacing.edgeEdgeBetweenLayers': 40,
+      // 'spacing.nodeSelfLoop': 50,
    },
    children: [],
    edges: [],
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -436,34 +436,38 @@ const fixCorners = function (lineData) {
      // Find a new point on the line point 5 points back and push it to the new array
      const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, 5);
      const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, 5);
-      newLineData.push(newPrevPoint);

      const xDiff = newNextPoint.x - newPrevPoint.x;
      const yDiff = newNextPoint.y - newPrevPoint.y;
+      newLineData.push(newPrevPoint);

      const a = Math.sqrt(2) * 2;
      let newCornerPoint = { x: cornerPoint.x, y: cornerPoint.y };
-      if (cornerPoint.x === newPrevPoint.x) {
-        // if (yDiff > 0) {
-        newCornerPoint = {
-          x: xDiff < 0 ? newPrevPoint.x - 5 + a : newPrevPoint.x + 5 - a,
-          y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a,
-        };
-        // } else {
-        //   newCornerPoint = { x: newPrevPoint.x - a, y: newPrevPoint.y + a };
-        // }
+      if (Math.abs(nextPoint.x - prevPoint.x) > 10 && Math.abs(nextPoint.y - prevPoint.y) >= 10) {
+        console.log(
+          'Corner point fixing',
+          Math.abs(nextPoint.x - prevPoint.x),
+          Math.abs(nextPoint.y - prevPoint.y)
+        );
+        const r = 5;
+        if (cornerPoint.x === newPrevPoint.x) {
+          newCornerPoint = {
+            x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a,
+            y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a,
+          };
+        } else {
+          newCornerPoint = {
+            x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a,
+            y: yDiff < 0 ? newPrevPoint.y - r + a : newPrevPoint.y + r - a,
+          };
+        }
      } else {
-        // if (yDiff > 0) {
-        //   newCornerPoint = { x: newPrevPoint.x - 5 + a, y: newPrevPoint.y + a };
-        // } else {
-        newCornerPoint = {
-          x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a,
-          y: yDiff < 0 ? newPrevPoint.y - 5 + a : newPrevPoint.y + 5 - a,
-        };
-        // }
+        console.log(
+          'Corner point skipping fixing',
+          Math.abs(nextPoint.x - prevPoint.x),
+          Math.abs(nextPoint.y - prevPoint.y)
+        );
      }
-
-      // newLineData.push(cornerPoint);
      newLineData.push(newCornerPoint, newNextPoint);
    } else {
      newLineData.push(lineData[i]);
@@ -632,6 +636,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
  //     .attr('cx', point.x)
  //     .attr('cy', point.y);
  // });
+
  // lineData.forEach((point) => {
  //   elem
  //     .append('circle')
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
@@ -33,7 +33,6 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});

-    console.log('rect options: ', options);
    const roughNode =
      rx || ry
        ? rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, rx || 0), options)