From 2f2fc1b4f11fc5c4d46ac9380a4c417c380be6f2 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Mon, 23 Sep 2024 15:48:46 +0530 Subject: [PATCH 1/3] updated window pane for new look --- .../rendering-util/rendering-elements/shapes/windowPane.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts index 59aa208ef..def369736 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts @@ -27,8 +27,8 @@ export const windowPane = async (parent: SVGAElement, node: Node) => { ]; const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${y + h} L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset} - M${x - rectOffset},${y} L${x + w},${y} - M${x},${y - rectOffset} L${x},${y + h}`; + M${x - rectOffset},${y} L${x + w},${y} L${x + w},${y + h} L${x - rectOffset},${y + h} L${x - rectOffset},${y} + M${x},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${y + h} L${x},${y + h} L${x},${y - rectOffset}`; if (node.look !== 'handDrawn') { options.roughness = 0; From 4d2ffc46d0dc3f1de87948ffb72af0a2ecc3b3ec Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Mon, 23 Sep 2024 16:46:44 +0530 Subject: [PATCH 2/3] updated padding for curley brace shape --- .../rendering-elements/shapes/curlyBraceLeft.ts | 8 +++++--- .../rendering-elements/shapes/curlyBraceRight.ts | 8 +++++--- .../rendering-elements/shapes/curlyBraces.ts | 10 ++++++---- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts index 9b98c9aec..f08d99c93 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts @@ -38,8 +38,10 @@ export const curlyBraceLeft = 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 = bbox.width + (node.padding ?? 0); - const h = bbox.height + (node.padding ?? 0); + const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0); + const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0); + const w = Math.max(bbox.width + paddingX, node.width ?? 0); + const h = Math.max(bbox.height + paddingY, node.height ?? 0); const radius = Math.max(5, h * 0.1); const { cssStyles } = node; @@ -96,7 +98,7 @@ export const curlyBraceLeft = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${-h / 2 + paddingY / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, curlyBraceLeftShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts index 9a051e273..48eadbbd5 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts @@ -38,8 +38,10 @@ export const curlyBraceRight = 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 = bbox.width + (node.padding ?? 0); - const h = bbox.height + (node.padding ?? 0); + const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0); + const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0); + const w = Math.max(bbox.width + paddingX, node.width ?? 0); + const h = Math.max(bbox.height + paddingY, node.height ?? 0); const radius = Math.max(5, h * 0.1); const { cssStyles } = node; @@ -96,7 +98,7 @@ export const curlyBraceRight = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + paddingX / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + paddingY / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, curlyBraceRightShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts index 9512c96d2..bf667e3c5 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts @@ -38,8 +38,10 @@ export const curlyBraces = 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 = bbox.width + (node.padding ?? 0); - const h = bbox.height + (node.padding ?? 0); + const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0); + const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0); + const w = Math.max(bbox.width + paddingX, node.width ?? 0); + const h = Math.max(bbox.height + paddingY, node.height ?? 0); const radius = Math.max(5, h * 0.1); const { cssStyles } = node; @@ -83,7 +85,7 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => { // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); - const options = userNodeOverrides(node, { fill: 'none' }); + const options = userNodeOverrides(node, { fill: 'transparent' }); if (node.look !== 'handDrawn') { options.roughness = 0; @@ -115,7 +117,7 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + paddingX / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + paddingY / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, curlyBracesShape); From 6934c3eb5ad45446047ba8e3824b1dc5c33cf414 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Mon, 23 Sep 2024 17:08:17 +0530 Subject: [PATCH 3/3] Updated padding for neo look --- .../rendering-elements/shapes/dividedRect.ts | 8 +++++--- .../rendering-elements/shapes/halfRoundedRectangle.ts | 6 ++++-- .../rendering-elements/shapes/linedWaveEdgedRect.ts | 8 +++++--- .../rendering-elements/shapes/windowPane.ts | 6 ++++-- 4 files changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts index 8083a6611..297764ae5 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts @@ -8,8 +8,10 @@ export const dividedRectangle = 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 = bbox.width + node.padding; - const h = bbox.height + node.padding; + const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0); + const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0); + const w = Math.max(bbox.width + paddingX * 2, node?.width ?? 0); + const h = Math.max(bbox.height + paddingY * 2, node?.height ?? 0); const rectOffset = h * 0.2; const x = -w / 2; @@ -53,7 +55,7 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${x + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))}, ${y + rectOffset + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${x + paddingX / 2 - (bbox.x - (bbox.left ?? 0))}, ${y + rectOffset + paddingY / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts index 86b220e29..f450f867a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts @@ -17,8 +17,10 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => { const minWidth = 80, minHeight = 50; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); - const w = Math.max(minWidth, bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); - const h = Math.max(minHeight, bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); + const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0); + const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0); + const w = Math.max(minWidth, bbox.width + paddingX * 2, node?.width ?? 0); + const h = Math.max(minHeight, bbox.height + paddingY * 2, node?.height ?? 0); const radius = h / 2; const { cssStyles } = node; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts index 6e4d485d3..b308454ef 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts @@ -13,8 +13,10 @@ export const linedWaveEdgedRect = 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 paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0); + const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0); + const w = Math.max(bbox.width + paddingX * 2, node?.width ?? 0); + const h = Math.max(bbox.height + paddingY * 2, node?.height ?? 0); const waveAmplitude = h / 4; const finalH = h + waveAmplitude; const { cssStyles } = node; @@ -66,7 +68,7 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => { waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + paddingX + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + paddingY - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, waveEdgeRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts index def369736..6f91370fe 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts @@ -8,8 +8,10 @@ export const windowPane = 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 paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0); + const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0); + const w = Math.max(bbox.width + paddingX * 2, node?.width ?? 0); + const h = Math.max(bbox.height + paddingY * 2, node?.height ?? 0); const rectOffset = 5; const x = -w / 2; const y = -h / 2;