Decouple layout loaders from core package, register tidy-tree and elk loaders separately

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

packages/mermaid-layout-tidy-tree/src/render.ts

@@ -48,7 +48,7 @@ export const render = async (
   const edgePaths = element.insert('g').attr('class', 'edgePaths');
   const edgeLabels = element.insert('g').attr('class', 'edgeLabels');
   const nodes = element.insert('g').attr('class', 'nodes');
-
+  // Step 1: Insert nodes into DOM to get their actual dimensions
   log.debug('Inserting nodes into DOM for dimension calculation');
 
   await Promise.all(
@@ -87,7 +87,7 @@ export const render = async (
       }
     })
   );
-
+  // Step 2: Run the bidirectional tidy-tree layout algorithm
   log.debug('Running bidirectional tidy-tree layout algorithm');
 
   const updatedLayoutData = {
@@ -103,17 +103,22 @@ export const render = async (
   };
 
   const layoutResult = await executeTidyTreeLayout(updatedLayoutData, data4Layout.config);
-
+  // Step 3: Position the nodes based on bidirectional layout results
   log.debug('Positioning nodes based on bidirectional layout results');
 
   layoutResult.nodes.forEach((positionedNode) => {
     const node = nodeDb[positionedNode.id];
     if (node?.domId) {
+      // Position the node at the calculated coordinates from bidirectional layout
+      // The layout algorithm has already calculated positions for:
+      // - Root node at center (0, 0)
+      // - Left tree nodes with negative x coordinates (growing left)
+      // - Right tree nodes with positive x coordinates (growing right)
       node.domId.attr('transform', `translate(${positionedNode.x}, ${positionedNode.y})`);
-
+      // Store the final position
       node.x = positionedNode.x;
       node.y = positionedNode.y;
-
+      // Step 3: Position the nodes based on bidirectional layout results
       log.debug(`Positioned node ${node.id} at (${positionedNode.x}, ${positionedNode.y})`);
     }
   });

packages/mermaid-layout-tidy-tree/src/types.ts

@@ -1,7 +1,7 @@
 import type { LayoutData } from 'mermaid';
 
-type Node = LayoutData['nodes'][number];
-type Edge = LayoutData['edges'][number];
+export type Node = LayoutData['nodes'][number];
+export type Edge = LayoutData['edges'][number];
 
 /**
  * Positioned node after layout calculation
@@ -67,5 +67,3 @@ export interface TidyTreeLayoutConfig {
   gap: number;
   bottomPadding: number;
 }
-
-export type { Node, Edge };

packages/mermaid/package.json

@@ -87,7 +87,9 @@
     "roughjs": "^4.6.6",
     "stylis": "^4.3.6",
     "ts-dedent": "^2.2.0",
-    "uuid": "^11.1.0"
+    "uuid": "^11.1.0",
+    "@mermaid-js/layout-elk": "workspace:^",
+    "@mermaid-js/layout-tidy-tree": "workspace:^"
   },
   "devDependencies": {
     "@adobe/jsonschema2md": "^8.0.2",

packages/mermaid/src/rendering-util/render.ts

@@ -45,11 +45,11 @@ const registerDefaultLayoutLoaders = () => {
     },
     {
       name: 'tidy-tree',
-      loader: async () => await import('../../../mermaid-layout-tidy-tree/src/index.js'),
+      loader: async () => await import('@mermaid-js/layout-tidy-tree/src/render.js'),
     },
     {
       name: 'elk',
-      loader: async () => await import('../../../mermaid-layout-elk/src/render.js'),
+      loader: async () => await import('@mermaid-js/layout-elk/src/render.js'),
     },
   ]);
 };

pnpm-lock.yaml

@@ -229,6 +229,12 @@ importers:
       '@iconify/utils':
         specifier: ^2.1.33
         version: 2.3.0
+      '@mermaid-js/layout-elk':
+        specifier: workspace:^
+        version: link:../mermaid-layout-elk
+      '@mermaid-js/layout-tidy-tree':
+        specifier: workspace:^
+        version: link:../mermaid-layout-tidy-tree
       '@mermaid-js/parser':
         specifier: workspace:^
         version: link:../parser
@@ -448,6 +454,7 @@ importers:
       mermaid:
         specifier: workspace:^
         version: link:../mermaid
+
   packages/mermaid-layout-tidy-tree:
     dependencies:
       d3: