From 08fbed7c470036587fdbb67d58857c0ac11527bf Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 1 Jan 2025 16:34:04 +0100 Subject: [PATCH] Adding insertElementForSize --- .../class/classRenderer-v3-unified.ts | 2 +- .../flowchart/flowRenderer-v3-unified.ts | 2 +- .../state/stateRenderer-v3-unified.ts | 2 +- ...lementsForSize.js => getDiagramElement.js} | 0 .../rendering-util/insertElementsForSize.ts | 45 +++++++++++++++++++ packages/mermaid/src/rendering-util/render.ts | 3 ++ 6 files changed, 51 insertions(+), 3 deletions(-) rename packages/mermaid/src/rendering-util/{insertElementsForSize.js => getDiagramElement.js} (100%) create mode 100644 packages/mermaid/src/rendering-util/insertElementsForSize.ts diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/class/classRenderer-v3-unified.ts index 670f93f16..af35cedc4 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer-v3-unified.ts +++ b/packages/mermaid/src/diagrams/class/classRenderer-v3-unified.ts @@ -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'; diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts index 6cc15258d..62a289506 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts @@ -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'; diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts index 109417c03..a8f05bfff 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts +++ b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts @@ -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'; diff --git a/packages/mermaid/src/rendering-util/insertElementsForSize.js b/packages/mermaid/src/rendering-util/getDiagramElement.js similarity index 100% rename from packages/mermaid/src/rendering-util/insertElementsForSize.js rename to packages/mermaid/src/rendering-util/getDiagramElement.js diff --git a/packages/mermaid/src/rendering-util/insertElementsForSize.ts b/packages/mermaid/src/rendering-util/insertElementsForSize.ts new file mode 100644 index 000000000..608854efe --- /dev/null +++ b/packages/mermaid/src/rendering-util/insertElementsForSize.ts @@ -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 { + children?: unknown[]; + labelData?: LabelData; + domId?: Node['domId'] | SVGGroup | d3.Selection; +} + + +// 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; + } + }); +} diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts index b975e7bf9..f08cf478e 100644 --- a/packages/mermaid/src/rendering-util/render.ts +++ b/packages/mermaid/src/rendering-util/render.ts @@ -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, });