From 991721e955ff038fc70bdfd1ab2995401efec6df Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 17 May 2024 12:46:02 +0200 Subject: [PATCH] #5237 Elk tweaks and additional layout algorithms --- .cspell/mermaid-terms.txt | 1 + cypress/platform/knsv2.html | 11 ++++++-- packages/mermaid-layout-elk/src/index.ts | 28 +++++++++++++------ packages/mermaid/src/rendering-util/render.js | 23 ++++++++++++++- 4 files changed, 51 insertions(+), 12 deletions(-) diff --git a/.cspell/mermaid-terms.txt b/.cspell/mermaid-terms.txt index b263bb67d..6937c8fb5 100644 --- 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 index d1926ece0..26d6b31e2 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -75,12 +75,17 @@ - 
+    
+      %%{init: {"layout": "stress"} }%%
 stateDiagram
-NumLockOff --> NumLockOn : EvNumLockPressed
+  [*] --> T1
+  T1 --> T2
+  T2 --> T3
+  T3 --> T1
+  T1 --> T3
       

-    
+    
 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
index 25a22c3c1..413212b0f 100644
--- 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
index a7fe49050..8e15f5ccf 100644
--- 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');
     }
   }
 };