marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-16 22:09:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
This commit is contained in:
darshanr0107
2025-08-04 14:25:08 +05:30
parent a7f12f1baa
commit c95c64139d
5 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/mermaid-layout-tidy-tree/src/render.ts
View File

@@ -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})`);
}
});

6
packages/mermaid-layout-tidy-tree/src/types.ts
View File

@@ -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 };