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

Adding insertElementForSize

Browse Source
This commit is contained in:
Knut Sveidqvist
2025-01-01 16:34:04 +01:00
parent df636c6d0a
commit 08fbed7c47
6 changed files with 51 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/mermaid/src/diagrams/class/classRenderer-v3-unified.ts
View File

@@ -1,7 +1,7 @@
import { getConfig } from '../../diagram-api/diagramAPI.js';
import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
import { log } from '../../logger.js';
import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
import { getDiagramElement } from '../../rendering-util/getDiagramElement.js';
import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
import type { LayoutData } from '../../rendering-util/types.js';

2
packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
View File

@@ -2,7 +2,7 @@ import { select } from 'd3';
import { getConfig } from '../../diagram-api/diagramAPI.js';
import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
import { log } from '../../logger.js';
import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
import { getDiagramElement } from '../../rendering-util/getDiagramElement.js';
import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
import type { LayoutData } from '../../rendering-util/types.js';

2
packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
View File

@@ -1,7 +1,7 @@
import { getConfig } from '../../diagram-api/diagramAPI.js';
import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
import { log } from '../../logger.js';
import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
import { getDiagramElement } from '../../rendering-util/getDiagramElement.js';
import { render } from '../../rendering-util/render.js';
import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
import type { LayoutData } from '../../rendering-util/types.js';

0
packages/mermaid/src/rendering-util/insertElementsForSize.js → packages/mermaid/src/rendering-util/getDiagramElement.js
View File

45
packages/mermaid/src/rendering-util/insertElementsForSize.ts Normal file
View File

@@ -0,0 +1,45 @@
import { select } from 'd3';
import type { SVG } from '../diagram-api/types.js';
import { getConfig } from '../diagram-api/diagramAPI.js';
import type { LayoutData, NonClusterNode } from './types.js';
import type { SVGGroup } from '../diagram-api/types.js';
import { insertNode } from './rendering-elements/nodes.js';
type Node = LayoutData['nodes'][number];
interface LabelData {
width: number;
height: number;
wrappingWidth?: number;
labelNode?: SVGGElement | null;
}
interface NodeWithVertex extends Omit<Node, 'domId'> {
children?: unknown[];
labelData?: LabelData;
domId?: Node['domId'] | SVGGroup | d3.Selection<SVGAElement, unknown, Element | null, unknown>;
}
// export function insertElementsForSize(el: SVGElement, data: LayoutData): void {
/**
*
* @param el
* @param data
*/
export function insertElementsForSize(el: SVG, data: LayoutData) {
const nodesElem = el.insert('g').attr('class', 'nodes');
el.insert('g').attr('class', 'edges');
data.nodes.forEach(async (item) => {
if (!item.isGroup) {
const node = item as NonClusterNode;
const config = getConfig();
const newNode = await insertNode(nodesElem, node, { config, dir: node.dir });
const boundingBox = newNode.node()!.getBBox();
item.domId = newNode.attr('id');
item.width = boundingBox.width;
item.height = boundingBox.height;
}
});
}

3
packages/mermaid/src/rendering-util/render.ts
View File

@@ -3,6 +3,7 @@ import type { InternalHelpers } from '../internals.js';
import { internalHelpers } from '../internals.js';
import { log } from '../logger.js';
import type { LayoutData } from './types.js';
import { insertElementsForSize } from './insertElementsForSize.js';
export interface RenderOptions {
algorithm?: string;
@@ -51,6 +52,8 @@ export const render = async (data4Layout: LayoutData, svg: SVG) => {
const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
const layoutRenderer = await layoutDefinition.loader();
// Add the bounding box to the layout so that the render can run
await insertElementsForSize(svg, data4Layout);
return layoutRenderer.render(data4Layout, svg, internalHelpers, {
algorithm: layoutDefinition.algorithm,
});