From ea987171b278f734f61ca6aa85aba0a998289f29 Mon Sep 17 00:00:00 2001 From: omkarht Date: Tue, 3 Sep 2024 18:01:15 +0530 Subject: [PATCH] implemented neo-fication and shape resize for waveRectangle, taggedWaveEdgedRectangle, multiWaveEdgedRectangle shapes --- .../rendering-elements/shapes/multiWaveEdgedRectangle.ts | 8 ++++++-- .../shapes/taggedWaveEdgedRectangle.ts | 9 ++++++--- .../rendering-elements/shapes/waveRectangle.ts | 7 +++++-- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts index 8d8a7caf2..bec117c0b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts @@ -14,8 +14,12 @@ export const multiWaveEdgedRectangle = async (parent: SVGAElement, node: Node) = const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); - const w = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); - const h = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); + + const nodePadding = node.padding ?? 0; + const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding; + const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding; + const w = Math.max(bbox.width + labelPaddingX * 2, node?.width ?? 0); + const h = Math.max(bbox.height + labelPaddingY * 2, node?.height ?? 0); const waveAmplitude = h / 4; const finalH = h + waveAmplitude; const x = -w / 2; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts index a2b15b821..342f110a8 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts @@ -14,8 +14,11 @@ export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node) const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); - const w = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); - const h = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); + const nodePadding = node.padding ?? 0; + const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding; + const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding; + const w = Math.max(bbox.width + labelPaddingX * 2, node?.width ?? 0); + const h = Math.max(bbox.height + labelPaddingY * 2, node?.height ?? 0); const waveAmplitude = h / 4; const tagWidth = 0.2 * w; const tagHeight = 0.2 * h; @@ -88,7 +91,7 @@ export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node) waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + (labelPaddingX ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (labelPaddingY ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, waveEdgeRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts index d66f354cb..188e54f69 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts @@ -21,8 +21,11 @@ export const waveRectangle = async (parent: SVGAElement, node: Node) => { const minWidth = 100; // Minimum width const minHeight = 50; // Minimum height - const baseWidth = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); - const baseHeight = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); + const nodePadding = node.padding ?? 0; + const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding; + const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding; + const baseWidth = Math.max(bbox.width + labelPaddingX * 2, node?.width ?? 0); + const baseHeight = Math.max(bbox.height + labelPaddingY * 2, node?.height ?? 0); const aspectRatio = baseWidth / baseHeight;