diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts index c66798471..b1c85d6bf 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts @@ -85,6 +85,11 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => { node.radius = 15; node.taper = 15; node.stroke = 'none'; + node.from = 'mindmap'; + } else if (node.shape === 'rect') { + node.height = 46; + node.width = 92; + node.from = 'mindmap'; } }); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/bang.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/bang.ts index 446cd0c58..3218f0627 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/bang.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/bang.ts @@ -17,33 +17,36 @@ export async function bang(parent: D3Selection, getNodeClasses(node) ); - const w = bbox.width + 8 * halfPadding; - const h = bbox.height + 2 * halfPadding; + const w = bbox.width + 10 * halfPadding; + const h = bbox.height + 8 * halfPadding; const r = 0.15 * w; - const { cssStyles } = node; - // Label centered around (0,0) + const minWidth = bbox.width + 20; + const minHeight = bbox.height + 20; + const effectiveWidth = Math.max(w, minWidth); + const effectiveHeight = Math.max(h, minHeight); + label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`); let bangElem; const path = `M0 0 - a${r},${r} 1 0,0 ${w * 0.25},${-1 * h * 0.1} - a${r},${r} 1 0,0 ${w * 0.25},${0} - a${r},${r} 1 0,0 ${w * 0.25},${0} - a${r},${r} 1 0,0 ${w * 0.25},${h * 0.1} + a${r},${r} 1 0,0 ${effectiveWidth * 0.25},${-1 * effectiveHeight * 0.1} + a${r},${r} 1 0,0 ${effectiveWidth * 0.25},${0} + a${r},${r} 1 0,0 ${effectiveWidth * 0.25},${0} + a${r},${r} 1 0,0 ${effectiveWidth * 0.25},${effectiveHeight * 0.1} - a${r},${r} 1 0,0 ${w * 0.15},${h * 0.33} - a${r * 0.8},${r * 0.8} 1 0,0 0,${h * 0.34} - a${r},${r} 1 0,0 ${-1 * w * 0.15},${h * 0.33} + a${r},${r} 1 0,0 ${effectiveWidth * 0.15},${effectiveHeight * 0.33} + a${r * 0.8},${r * 0.8} 1 0,0 0,${effectiveHeight * 0.34} + a${r},${r} 1 0,0 ${-1 * effectiveWidth * 0.15},${effectiveHeight * 0.33} - a${r},${r} 1 0,0 ${-1 * w * 0.25},${h * 0.15} - a${r},${r} 1 0,0 ${-1 * w * 0.25},0 - a${r},${r} 1 0,0 ${-1 * w * 0.25},0 - a${r},${r} 1 0,0 ${-1 * w * 0.25},${-1 * h * 0.15} + a${r},${r} 1 0,0 ${-1 * effectiveWidth * 0.25},${effectiveHeight * 0.15} + a${r},${r} 1 0,0 ${-1 * effectiveWidth * 0.25},0 + a${r},${r} 1 0,0 ${-1 * effectiveWidth * 0.25},0 + a${r},${r} 1 0,0 ${-1 * effectiveWidth * 0.25},${-1 * effectiveHeight * 0.15} - a${r},${r} 1 0,0 ${-1 * w * 0.1},${-1 * h * 0.33} - a${r * 0.8},${r * 0.8} 1 0,0 0,${-1 * h * 0.34} - a${r},${r} 1 0,0 ${w * 0.1},${-1 * h * 0.33} + a${r},${r} 1 0,0 ${-1 * effectiveWidth * 0.1},${-1 * effectiveHeight * 0.33} + a${r * 0.8},${r * 0.8} 1 0,0 0,${-1 * effectiveHeight * 0.34} + a${r},${r} 1 0,0 ${effectiveWidth * 0.1},${-1 * effectiveHeight * 0.33} H0 V0 Z`; if (node.look === 'handDrawn') { @@ -62,7 +65,7 @@ export async function bang(parent: D3Selection, } // Translate the path (center the shape) - bangElem.attr('transform', `translate(${-w / 2}, ${-h / 2})`); + bangElem.attr('transform', `translate(${-effectiveWidth / 2}, ${-effectiveHeight / 2})`); updateNodeBounds(node, bangElem); node.calcIntersect = function (bounds: Bounds, point: Point) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts index 8f70f82fc..63708f19b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts @@ -19,7 +19,10 @@ export async function drawRect( const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const totalWidth = Math.max(bbox.width + options.labelPaddingX * 2, node?.width || 0); - const totalHeight = Math.max(bbox.height + options.labelPaddingY * 2, node?.height || 0); + const totalHeight = Math.max( + bbox.height + (node.from === 'mindmap' ? options.labelPaddingY : options.labelPaddingY * 2), + node?.height || 0 + ); const x = -totalWidth / 2; const y = -totalHeight / 2; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts index 243b63789..bcaf38887 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts @@ -95,8 +95,15 @@ export async function roundedRect( const labelPaddingX = node?.padding ?? 0; const labelPaddingY = node?.padding ?? 0; - const w = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2; - const h = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2; + let w; + let h; + if (node.from === 'mindmap') { + w = bbox.width + labelPaddingX * 2; + h = bbox.height + labelPaddingY; + } else { + w = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2; + h = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2; + } const radius = node.radius || 5; const taper = node.taper || 5; // Taper width for the rounded corners const { cssStyles } = node; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts index af72a798f..ed32f115c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts @@ -7,7 +7,7 @@ export async function squareRect(parent: D3Selecti rx: 0, ry: 0, classes: '', - labelPaddingX: (node?.padding || 0) * 2, + labelPaddingX: node.from === 'mindmap' ? (node?.padding || 0) * 1 : (node?.padding || 0) * 2, labelPaddingY: (node?.padding || 0) * 1, } as RectOptions; return drawRect(parent, node, options); diff --git a/packages/mermaid/src/rendering-util/types.ts b/packages/mermaid/src/rendering-util/types.ts index c35d28266..db9b10487 100644 --- a/packages/mermaid/src/rendering-util/types.ts +++ b/packages/mermaid/src/rendering-util/types.ts @@ -95,6 +95,7 @@ export interface ClusterNode extends BaseNode { radius?: number; taper?: number; stroke?: string; + from?: 'mindmap' | 'flowchart' | 'state' | 'class' | 'sequence' | 'er'; // Indicates the diagram type this node is from } export interface NonClusterNode extends BaseNode { shape?: ShapeID; @@ -110,6 +111,7 @@ export interface NonClusterNode extends BaseNode { radius?: number; taper?: number; stroke?: string; + from?: 'mindmap' | 'flowchart' | 'state' | 'class' | 'sequence' | 'er'; // Indicates the diagram type this node is from } // Common properties for any node in the system