#5237 Elk tweaks and additional layout algorithms

mermaid-js · May 17, 2024 · 991721e · 991721e
1 parent 47d4929
commit 991721e
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 12 deletions.
diff --git a/.cspell/mermaid-terms.txt b/.cspell/mermaid-terms.txt
@@ -18,6 +18,7 @@ Markdownish
 mermaidjs
 mindmap
 mindmaps
+mrtree
 multigraph
 nodesep
 NOTEGROUP

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -75,12 +75,17 @@
     </style>
   </head>
   <body>
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
+      %%{init: {"layout": "stress"} }%%
 stateDiagram
-NumLockOff --> NumLockOn : EvNumLockPressed
+  [*] --> T1
+  T1 --> T2
+  T2 --> T3
+  T3 --> T1
+  T1 --> T3
       </pre
     >
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 stateDiagram
   State1: The state with a note
   note right of State1

diff --git a/packages/mermaid-layout-elk/src/index.ts b/packages/mermaid-layout-elk/src/index.ts
@@ -10,6 +10,8 @@ import {
   insertEdgeLabel,
   positionEdgeLabel,
 } from '../../mermaid/src/rendering-util/rendering-elements/edges.js';
+import { curveLinear } from 'd3';
+import { interpolateToCurve } from '../../mermaid/src/utils.js';
 import insertMarkers from '../../mermaid/src/rendering-util/rendering-elements/markers.js';
 import { insertNode } from '../../mermaid/src/rendering-util/rendering-elements/nodes.js';
 import { labelHelper } from '../../mermaid/src/rendering-util/rendering-elements/shapes/util.js';
@@ -373,13 +375,14 @@ export const addEdges = function (dataForLayout, graph, svg) {
     edgeData.style = edgeData.style += style;
     edgeData.labelStyle = edgeData.labelStyle += labelStyle;
 
-    // if (edge.interpolate !== undefined) {
-    //   edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
-    // } else if (edges.defaultInterpolate !== undefined) {
-    //   edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
-    // } else {
-    //   edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
-    // }
+    const conf = getConfig();
+    if (edge.interpolate !== undefined) {
+      edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
+    } else if (edges.defaultInterpolate !== undefined) {
+      edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
+    } else {
+      edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
+    }
 
     if (edge.text === undefined) {
       if (edge.style !== undefined) {
@@ -466,7 +469,7 @@ function setIncludeChildrenPolicy(nodeId: string, ancestorId: string) {
   }
 }
 
-export const render = async (data4Layout, svg, element) => {
+export const render = async (data4Layout, svg, element, algorithm) => {
   const elk = new ELK();
 
   // Add the arrowheads to the svg
@@ -479,6 +482,15 @@ export const render = async (data4Layout, svg, element) => {
       'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
       'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]',
       'elk.layered.spacing.edgeNodeBetweenLayers': '30',
+      'elk.algorithm': algorithm,
+      'nodePlacement.strategy': 'NETWORK_SIMPLEX',
+      'spacing.nodeNode': 70,
+      'spacing.nodeNodeBetweenLayers': 25,
+      'spacing.edgeNode': 10,
+      'spacing.edgeNodeBetweenLayers': 20,
+      'spacing.edgeEdge': 20,
+      'spacing.edgeEdgeBetweenLayers': 20,
+      'spacing.nodeSelfLoop': 20,
     },
     children: [],
     edges: [],

diff --git a/packages/mermaid/src/rendering-util/render.js b/packages/mermaid/src/rendering-util/render.js
@@ -4,10 +4,31 @@ export const render = async (data4Layout, svg, element) => {
       const layoutRenderer = await import('./layout-algorithms/dagre/index.js');
       return layoutRenderer.render(data4Layout, svg, element);
     }
+
     case 'elk': {
       // TODO: Should fix this import path
       const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js');
-      return layoutRenderer.render(data4Layout, svg, element);
+      return layoutRenderer.render(data4Layout, svg, element, 'elk.layered');
+    }
+    case 'stress': {
+      // TODO: Should fix this import path
+      const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js');
+      return layoutRenderer.render(data4Layout, svg, element, 'elk.stress');
+    }
+    case 'force': {
+      // TODO: Should fix this import path
+      const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js');
+      return layoutRenderer.render(data4Layout, svg, element, 'elk.force');
+    }
+    case 'mrtree': {
+      // TODO: Should fix this import path
+      const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js');
+      return layoutRenderer.render(data4Layout, svg, element, 'elk.mrtree');
+    }
+    case 'sporeOverlap': {
+      // TODO: Should fix this import path
+      const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js');
+      return layoutRenderer.render(data4Layout, svg, element, 'elk.sporeOverlap');
     }
   }
 };