Adding insertElementForSize

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';

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';

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';

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<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;
+    }
+  });
+}

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,
   });