marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-23 09:20:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

Adjustments for icon shape

Browse Source
This commit is contained in:
saurabhg772244
2024-09-06 17:56:13 +05:30
parent 89fb65913d
commit 14bb09a3db
2 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
View File

@@ -45,9 +45,11 @@ export const iconCircle = async (parent: SVG, node: Node) => {
iconElem.html( iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
); );
const iconWidth = iconElem.node().getBBox().width;
const iconHeight = iconElem.node().getBBox().height;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconElem.node().getBBox().width / 2}, ${-iconElem.node().getBBox().height / 2 - labelHeight / 2 + (topLabel ? labelHeight - halfPadding * 2 : 0)})` `translate(${-iconWidth / 2}, ${-iconHeight / 2 - labelHeight / 2 + (topLabel ? labelHeight : 0)})`
); );
} }
@@ -61,7 +63,7 @@ export const iconCircle = async (parent: SVG, node: Node) => {
label.attr( label.attr(
'transform', 'transform',
`translate(${-labelWidth / 2},${iconSize / 2 - labelHeight / 2 + halfPadding - (topLabel ? iconSize : 0)})` `translate(${-labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${iconSize / 2 - labelHeight / 2 + halfPadding - (topLabel ? iconSize : 0) - (bbox.y - (bbox.top ?? 0))})`
); );
updateNodeBounds(node, iconShape); updateNodeBounds(node, iconShape);

18
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
View File

@@ -28,14 +28,12 @@ export const iconSquare = async (parent: SVG, node: Node) => {
const iconSize = Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48); const iconSize = Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
const width = Math.max(labelWidth, iconSize); const width = Math.max(labelWidth, iconSize);
const height = labelHeight + iconSize; const height = labelHeight + iconSize;
const dx = bbox.x;
const dy = bbox.y;
const points = [ const points = [
{ x: dx - width / 2, y: dy - height / 2 }, { x: -width / 2, y: -height / 2 },
{ x: dx - width / 2, y: dy + height / 2 }, { x: -width / 2, y: height / 2 },
{ x: dx + width / 2, y: dy + height / 2 }, { x: width / 2, y: height / 2 },
{ x: dx + width / 2, y: dy - height / 2 }, { x: width / 2, y: -height / 2 },
]; ];
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed
@@ -55,11 +53,13 @@ export const iconSquare = async (parent: SVG, node: Node) => {
if (node.icon) { if (node.icon) {
const iconElem = shapeSvg.append('g'); const iconElem = shapeSvg.append('g');
iconElem.html( iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize - 4 * halfPadding, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, { height: iconSize - halfPadding * 4, fallbackPrefix: '' })}</g>`
); );
const iconWidth = iconElem.node().getBBox().width;
const iconHeight = iconElem.node().getBBox().height;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${dx - width / 2 + halfPadding * 2}, ${dy - height / 2 + (topLabel ? labelHeight : 0)})` `translate(${-iconWidth / 2}, ${-iconHeight / 2 - labelHeight / 2 + (topLabel ? labelHeight : 0)})`
); );
} }
@@ -73,7 +73,7 @@ export const iconSquare = async (parent: SVG, node: Node) => {
label.attr( label.attr(
'transform', 'transform',
`translate(${dx - width / 2 + halfPadding},${dy - height / 2 + iconSize + halfPadding - (topLabel ? iconSize : 0)})` `translate(${-labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${-height / 2 + iconSize - (topLabel ? iconSize - halfPadding : 0) - (bbox.y - (bbox.top ?? 0))})`
); );
updateNodeBounds(node, iconShape); updateNodeBounds(node, iconShape);