diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 1c46866c5..52aa9bc6a 100644 --- 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! - -
-%%{
-  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
     >
 
     
-      %%{init: {"layout": "elk", "mergeEdges": true} }%%
+      %%{init: {"layout": "dagre", "mergeEdges": true} }%%
 stateDiagram
-      A --> B
+      A: This is A
       
-
-      %%{init: {"layout": "elk", "mergeEdges": true} }%%
+    
+      %%{init: {"layout": "dagre", "mergeEdges": true} }%%
 flowchart
       A --> B(This is B)
       
-      %%{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 <<choice>>
+    [*] --> IsPositive
+    IsPositive --> if_state
+    if_state --> False: if n < 0
+    if_state --> True : if n >= 0
+      
+
+      %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
+      stateDiagram
+    state if_state <<choice>>
+    [*] --> IsPositive
+    IsPositive --> if_state
+    if_state --> False: if n < 0
+    if_state --> True : if n >= 0
       
@@ -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));
     
   
 
diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts
index a72d3369e..9e7fc3941 100644
--- 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: [],
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index ad1573596..1450f5bab 100644
--- 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')
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
index e8355e1a8..db47746f8 100644
--- 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)