chore: Cleanup layout-elk

packages/mermaid-layout-elk/src/find-common-ancestor.ts

@@ -3,8 +3,7 @@ export interface TreeData {
   childrenById: Record<string, string[]>;
 }
 
-export const findCommonAncestor = (id1: string, id2: string, treeData: TreeData) => {
-  const { parentById } = treeData;
+export const findCommonAncestor = (id1: string, id2: string, { parentById }: TreeData) => {
   const visited = new Set();
   let currentId = id1;
 
@@ -20,6 +19,7 @@ export const findCommonAncestor = (id1: string, id2: string, treeData: TreeData)
     }
     currentId = parentById[currentId];
   }
+
   currentId = id2;
   while (currentId) {
     if (visited.has(currentId)) {
@@ -27,5 +27,6 @@ export const findCommonAncestor = (id1: string, id2: string, treeData: TreeData)
     }
     currentId = parentById[currentId];
   }
+
   return 'root';
 };

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

@@ -1,8 +1,8 @@
 // @ts-nocheck File not ready to check types
 import { curveLinear } from 'd3';
 import ELK from 'elkjs/lib/elk.bundled.js';
-import mermaid from 'mermaid';
-import { findCommonAncestor } from './find-common-ancestor.js';
+import mermaid, { type LayoutData } from 'mermaid';
+import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
 
 const {
   common,
@@ -199,13 +199,13 @@ const getNextPort = (node, edgeDirection, graphDirection) => {
   return result;
 };
 
-const addSubGraphs = function (nodeArr) {
-  const parentLookupDb = { parentById: {}, childrenById: {} };
+const addSubGraphs = (nodeArr): TreeData => {
+  const parentLookupDb: TreeData = { parentById: {}, childrenById: {} };
   const subgraphs = nodeArr.filter((node) => node.isGroup);
   log.info('Subgraphs - ', subgraphs);
-  subgraphs.forEach(function (subgraph) {
+  subgraphs.forEach((subgraph) => {
     const children = nodeArr.filter((node) => node.parentId === subgraph.id);
-    children.forEach(function (node) {
+    children.forEach((node) => {
       parentLookupDb.parentById[node.id] = subgraph.id;
       if (parentLookupDb.childrenById[subgraph.id] === undefined) {
         parentLookupDb.childrenById[subgraph.id] = [];
@@ -250,7 +250,7 @@ const getEdgeStartEndPoint = (edge, dir) => {
   return { source, target, sourceId, targetId };
 };
 
-const calcOffset = function (src, dest, parentLookupDb) {
+const calcOffset = function (src: string, dest: string, parentLookupDb: TreeData) {
   const ancestor = findCommonAncestor(src, dest, parentLookupDb);
   if (ancestor === undefined || ancestor === 'root') {
     return { x: 0, y: 0 };
@@ -451,7 +451,7 @@ function setIncludeChildrenPolicy(nodeId: string, ancestorId: string) {
   }
 }
 
-export const render = async (data4Layout, svg, element, algorithm) => {
+export const render = async (data4Layout: LayoutData, svg, element, algorithm) => {
   const elk = new ELK();
 
   // Add the arrowheads to the svg
@@ -467,13 +467,6 @@ export const render = async (data4Layout, svg, element, algorithm) => {
       'elk.layered.mergeEdges': data4Layout.config['elk.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: [],
@@ -550,9 +543,7 @@ export const render = async (data4Layout, svg, element, algorithm) => {
     }
   });
 
-  // log.info('before layout', JSON.stringify(elkGraph, null, 2));
   const g = await elk.layout(elkGraph);
-  // log.info('after layout', JSON.stringify(g));
 
   // debugger;
   drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
@@ -565,7 +556,9 @@ export const render = async (data4Layout, svg, element, algorithm) => {
 
     const offset = calcOffset(sourceId, targetId, parentLookupDb);
     log.info('APA12 offset', offset, sourceId, targetId, edge);
-    if (edge.sections) {
+    if (!edge.sections) {
+      return;
+    }
     const src = edge.sections[0].startPoint;
     const dest = edge.sections[0].endPoint;
     const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : [];
@@ -592,6 +585,5 @@ export const render = async (data4Layout, svg, element, algorithm) => {
     edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2;
     edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2;
     positionEdgeLabel(edge, paths);
-    }
   });
 };

packages/mermaid/src/mermaid.ts

@@ -19,6 +19,7 @@ import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import { registerLayoutLoaders } from './rendering-util/render.js';
 import type { LayoutLoaderDefinition } from './rendering-util/render.js';
 import { internalHelpers } from './internals.js';
+import type { LayoutData } from './rendering-util/types.js';
 
 export type {
   MermaidConfig,
@@ -30,6 +31,7 @@ export type {
   ParseResult,
   UnknownDiagramError,
   LayoutLoaderDefinition,
+  LayoutData,
 };
 
 export interface RunOptions {