From 1d1766b5c3f571a4b531a6ecbc9b859aac0a14e3 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Mon, 9 Sep 2024 14:53:17 +0530 Subject: [PATCH] Adjustements to support height and width --- .../rendering-elements/shapes/icon.ts | 19 +++++++++---------- .../rendering-elements/shapes/iconCircle.ts | 13 ++++++------- .../rendering-elements/shapes/iconSquare.ts | 19 +++++++++---------- 3 files changed, 24 insertions(+), 27 deletions(-) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts index e76e9b04a..db74d1c8c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts @@ -19,27 +19,26 @@ export const icon = async (parent: SVG, node: Node) => { const topLabel = node.pos === 't'; const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0); const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0); - const iconHeight = node.assetHeight ?? 48; - const iconWidth = node.assetWidth ?? 48; + const iconHeight = node.assetHeight ?? 0; + const iconWidth = node.assetWidth ?? 0; - const iconSize = Math.max( - labelHeight - halfPadding, - labelWidth - halfPadding, - Math.max(iconHeight, iconWidth) - ); + const iconSize = + iconWidth || iconHeight + ? Math.max(iconHeight, iconWidth) + : Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48); // const width = Math.max(labelWidth, iconSize); const height = labelHeight + iconSize; if (node.icon) { const iconElem = shapeSvg.append('g'); iconElem.html( - `${await getIconSVG(node.icon, { height: iconSize - 4 * halfPadding, fallbackPrefix: '' })}` + `${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}` ); const iconWidth = iconElem.node().getBBox().width; const iconHeight = iconElem.node().getBBox().height; iconElem.attr( 'transform', - `translate(${-iconWidth / 2}, ${-iconHeight / 2 - labelHeight / 2 + halfPadding + (topLabel ? labelHeight : 0)})` + `translate(${-iconWidth / 2}, ${-iconHeight / 2 - labelHeight / 2 - halfPadding + (topLabel ? labelHeight : halfPadding * 2)})` ); } @@ -53,7 +52,7 @@ export const icon = async (parent: SVG, node: Node) => { label.attr( 'transform', - `translate(${-labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${-height / 2 + iconSize - (topLabel ? iconSize - halfPadding : 0) - (bbox.y - (bbox.top ?? 0))})` + `translate(${-labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${-height / 2 + iconSize - (topLabel ? iconSize - halfPadding : -halfPadding) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, shapeSvg); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts index 4a38503db..dc08e23cb 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts @@ -23,14 +23,13 @@ export const iconCircle = async (parent: SVG, node: Node) => { const topLabel = node.pos === 't'; const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0); const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0); - const iconHeight = node.assetHeight ?? 48; - const iconWidth = node.assetWidth ?? 48; + const iconHeight = node.assetHeight ?? 0; + const iconWidth = node.assetWidth ?? 0; - const iconSize = Math.max( - labelHeight - halfPadding * 2, - labelWidth - halfPadding * 2, - Math.max(iconHeight, iconWidth) - ); + const iconSize = + iconWidth || iconHeight + ? Math.max(iconHeight, iconWidth) + : Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48); const radius = iconSize / 2 + Math.max(labelHeight / 2, labelWidth / 4) + halfPadding * 2 + iconSize / 5; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts index 36dea50ea..8b298b82f 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts @@ -24,14 +24,13 @@ export const iconSquare = async (parent: SVG, node: Node) => { const topLabel = node.pos === 't'; const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0); const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0); - const iconHeight = node.assetHeight ?? 48; - const iconWidth = node.assetWidth ?? 48; + const iconHeight = node.assetHeight ?? 0; + const iconWidth = node.assetWidth ?? 0; - const iconSize = Math.max( - labelHeight - halfPadding, - labelWidth - halfPadding, - Math.max(iconHeight, iconWidth) - ); + const iconSize = + iconWidth || iconHeight + ? Math.max(iconHeight, iconWidth) + : Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48); const width = Math.max(labelWidth, iconSize); const height = labelHeight + iconSize; @@ -59,13 +58,13 @@ export const iconSquare = async (parent: SVG, node: Node) => { if (node.icon) { const iconElem = shapeSvg.append('g'); iconElem.html( - `${await getIconSVG(node.icon, { height: iconSize - halfPadding * 4, fallbackPrefix: '' })}` + `${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}` ); const iconWidth = iconElem.node().getBBox().width; const iconHeight = iconElem.node().getBBox().height; iconElem.attr( 'transform', - `translate(${-iconWidth / 2}, ${-iconHeight / 2 - labelHeight / 2 + (topLabel ? labelHeight : 0)})` + `translate(${-iconWidth / 2}, ${-iconHeight / 2 - labelHeight / 2 - halfPadding + (topLabel ? labelHeight : halfPadding * 2)})` ); } @@ -79,7 +78,7 @@ export const iconSquare = async (parent: SVG, node: Node) => { label.attr( 'transform', - `translate(${-labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${-height / 2 + iconSize - (topLabel ? iconSize - halfPadding : 0) - (bbox.y - (bbox.top ?? 0))})` + `translate(${-labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${-height / 2 + iconSize - (topLabel ? iconSize - halfPadding : -halfPadding) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, iconShape);