Fix block diagram styles and bounds

Author: knsv

packages/mermaid/src/diagrams/block/blockRenderer.ts

@@ -53,8 +53,14 @@ export const draw = async function (
 
   // Establish svg dimensions and get width and height
   // Why, oh why ????
-  if (bounds) {
-    const bounds2 = bounds;
+  const renderedBounds = nodes.node()?.getBBox();
+  const bounds2 =
+    renderedBounds &&
+    Number.isFinite(renderedBounds.width) &&
+    Number.isFinite(renderedBounds.height)
+      ? renderedBounds
+      : bounds;
+  if (bounds2) {
     const magicFactor = Math.max(1, Math.round(0.125 * (bounds2.width / bounds2.height)));
     const height = bounds2.height + magicFactor + 10;
     const width = bounds2.width + 10;

packages/mermaid/src/diagrams/block/renderHelpers.ts

@@ -19,6 +19,9 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     classStr = (vertex?.classes ?? []).join(' ');
   }
   classStr = classStr + ' flowchart-label';
+  const cssCompiledStyles = (vertex?.classes ?? []).flatMap(
+    (className) => db.getClasses().get(className)?.styles ?? []
+  );
 
   // We create a SVG label, either by delegating to addHtmlLabel or manually
   let radius = 0;
@@ -107,13 +110,16 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     rx: radius,
     ry: radius,
     class: classStr,
+    cssClasses: classStr,
+    cssStyles: vertex?.styles ?? [],
+    cssCompiledStyles,
     style: styles.style,
     id: vertex.id,
     domId: dbDiagramId ? `${dbDiagramId}-${vertex.id}` : vertex.id,
     isGroup: false as const,
     directions: vertex.directions,
-    width: bounds.width,
-    height: bounds.height,
+    width: bounds.width || undefined,
+    height: bounds.height || undefined,
     x: bounds.x,
     y: bounds.y,
     positioned,

packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.spec.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import type { Node } from '../../types.js';
+import { styles2String } from './handDrawnShapeStyles.js';
+
+describe('hand drawn shape styles', () => {
+  it('normalizes string label styles before compiling node styles', () => {
+    const styles = styles2String({
+      id: 'styled-node',
+      isGroup: false,
+      cssStyles: ['fill:#f9F', 'stroke:#333'],
+      labelStyle: 'color:#fff;text-align:center;',
+    } as Node);
+
+    expect(styles.nodeStyles).toContain('fill:#f9F !important');
+    expect(styles.nodeStyles).toContain('stroke:#333 !important');
+    expect(styles.labelStyles).toContain('color:#fff !important');
+    expect(styles.labelStyles).toContain('text-align:center !important');
+  });
+});

packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts

@@ -15,6 +15,19 @@ export const solidStateFill = (color: string) => {
   };
 };
 
+const normalizeStyleList = (styles: string | string[] | undefined): string[] => {
+  if (Array.isArray(styles)) {
+    return styles;
+  }
+  if (!styles) {
+    return [];
+  }
+  return styles
+    .split(';')
+    .map((style) => style.trim())
+    .filter(Boolean);
+};
+
 export const compileStyles = (node: Node) => {
   // node.cssCompiledStyles is an array of strings in the form of 'key: value' where key is the css property and value is the value
   // the array is the styles of node from the classes it is using
@@ -23,7 +36,7 @@ export const compileStyles = (node: Node) => {
   const stylesMap = styles2Map([
     ...(node.cssCompiledStyles || []),
     ...(node.cssStyles || []),
-    ...(node.labelStyle || []),
+    ...normalizeStyleList(node.labelStyle),
   ]);
   return { stylesMap, stylesArray: [...stylesMap] };
 };
@@ -36,6 +49,7 @@ export const styles2Map = (styles: string[]) => {
   });
   return styleMap;
 };
+
 export const isLabelStyle = (key: string) => {
   return (
     key === 'color' ||

packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts

@@ -18,8 +18,8 @@ export async function inv_trapezoid<T extends SVGGraphicsElement>(
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const w = Math.max(bbox.width + (labelPaddingX ?? 0) * 2, node?.width ?? 0);
-  const h = Math.max(bbox.height + (labelPaddingY ?? 0) * 2, node?.height ?? 0);
+  const h = Math.max(bbox.height + labelPaddingY * 2, node.height ?? 0);
+  const w = Math.max(bbox.width + labelPaddingX * 2, (node.width ?? 0) - h);
 
   const points = [
     { x: 0, y: 0 },

packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts

@@ -13,8 +13,8 @@ export async function lean_left<T extends SVGGraphicsElement>(parent: D3Selectio
   const labelPaddingY = nodePadding;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-  const h = (node?.height ?? bbox.height) + labelPaddingY;
-  const w = (node?.width ?? bbox.width) + labelPaddingX;
+  const h = Math.max(bbox.height + labelPaddingY, node.height ?? 0);
+  const w = Math.max(bbox.width + labelPaddingX, (node.width ?? 0) - h);
   const points = [
     { x: 0, y: 0 },
     { x: w + (3 * h) / 6, y: 0 },

packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts

@@ -13,8 +13,8 @@ export async function lean_right<T extends SVGGraphicsElement>(parent: D3Selecti
   const labelPaddingY = nodePadding;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-  const h = (node?.height ?? bbox.height) + labelPaddingY;
-  const w = (node?.width ?? bbox.width) + labelPaddingX;
+  const h = Math.max(bbox.height + labelPaddingY, node.height ?? 0);
+  const w = Math.max(bbox.width + labelPaddingX, (node.width ?? 0) - h);
 
   const points = [
     { x: (-3 * h) / 6, y: 0 },

packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts

@@ -16,9 +16,13 @@ export async function rect_left_inv_arrow<T extends SVGGraphicsElement>(
   const labelPaddingY = node.look === 'neo' ? 12 : (nodePadding ?? 0);
   const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const w = (node?.width ?? bbox.width) + (node.look === 'neo' ? labelPaddingX * 2 : labelPaddingX);
-  const h =
-    (node?.height ?? bbox.height) + (node.look === 'neo' ? labelPaddingY * 2 : labelPaddingY);
+  const labelWidth = bbox.width + (node.look === 'neo' ? labelPaddingX * 2 : labelPaddingX);
+  const h = Math.max(
+    bbox.height + (node.look === 'neo' ? labelPaddingY * 2 : labelPaddingY),
+    node.height ?? 0
+  );
+  const notchWidth = h / 4;
+  const w = Math.max(labelWidth, (node.width ?? 0) - notchWidth);
 
   const x = -w / 2;
   const y = -h / 2;

packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts

@@ -46,8 +46,8 @@ export async function subroutine<T extends SVGGraphicsElement>(parent: D3Selecti
 
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const totalWidth = (node?.width ?? bbox.width) + 2 * FRAME_WIDTH + labelPaddingX;
-  const totalHeight = (node?.height ?? bbox.height) + labelPaddingY;
+  const totalWidth = Math.max(bbox.width + 2 * FRAME_WIDTH + labelPaddingX, node.width ?? 0);
+  const totalHeight = Math.max(bbox.height + labelPaddingY, node.height ?? 0);
 
   const w = totalWidth - 2 * FRAME_WIDTH;
   const h = totalHeight;

packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts

@@ -13,8 +13,8 @@ export async function trapezoid<T extends SVGGraphicsElement>(parent: D3Selectio
   const labelPaddingY = node.look === 'neo' ? nodePadding : nodePadding;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-  const h = (node?.height ?? bbox.height) + labelPaddingY;
-  const w = (node?.width ?? bbox.width) + labelPaddingX;
+  const h = Math.max(bbox.height + labelPaddingY, node.height ?? 0);
+  const w = Math.max(bbox.width + labelPaddingX, (node.width ?? 0) - h);
 
   const points = [
     { x: (-3 * h) / 6, y: 0 },