GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

fixed icon shape for large icon size

Browse Source
This commit is contained in:
saurabhg772244 2024-09-25 11:56:06 +05:30
parent 6a649d347d
commit e2e2caa0e9
4 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,7 +59,7 @@ export const icon = async (
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, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>`
); );
const iconBBox = iconElem.node().getBBox(); const iconBBox = iconElem.node().getBBox();
const iconWidth = iconBBox.width; const iconWidth = iconBBox.width;
@ -68,14 +68,14 @@ export const icon = async (
const iconY = iconBBox.y; const iconY = iconBBox.y;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY : outerHeight / 2 - iconHeight - iconY - bbox.height - labelPadding})` `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
} }
label.attr( label.attr(
'transform', 'transform',
`translate(${-bbox.width / 2},${topLabel ? -height / 2 - bbox.height / 2 - labelPadding / 2 : height / 2 - bbox.height / 2 + labelPadding / 2})` `translate(${-bbox.width / 2},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
); );
iconShape.attr( iconShape.attr(

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

@ -40,7 +40,7 @@ export const iconCircle = async (
const iconElem = shapeSvg.append('g'); const iconElem = shapeSvg.append('g');
if (node.icon) { if (node.icon) {
iconElem.html( iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>`
); );
} }
const iconBBox = iconElem.node().getBBox(); const iconBBox = iconElem.node().getBBox();
@ -49,7 +49,7 @@ export const iconCircle = async (
const iconX = iconBBox.x; const iconX = iconBBox.x;
const iconY = iconBBox.y; const iconY = iconBBox.y;
const diameter = Math.max(iconWidth, iconHeight) + padding * 2; const diameter = Math.max(iconWidth, iconHeight) * Math.SQRT2 + padding * 2;
const iconNode = rc.circle(0, 0, diameter, options); const iconNode = rc.circle(0, 0, diameter, options);
const outerWidth = Math.max(diameter, bbox.width); const outerWidth = Math.max(diameter, bbox.width);
@ -65,12 +65,12 @@ export const iconCircle = async (
const outerShape = shapeSvg.insert(() => outerNode); const outerShape = shapeSvg.insert(() => outerNode);
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY - padding : outerHeight / 2 - iconHeight - iconY - padding - bbox.height - labelPadding})` `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
label.attr( label.attr(
'transform', 'transform',
`translate(${-bbox.width / 2},${topLabel ? -diameter / 2 - bbox.height / 2 - labelPadding / 2 : diameter / 2 - bbox.height / 2 + labelPadding / 2})` `translate(${-bbox.width / 2},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
); );
iconShape.attr( iconShape.attr(

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
View File

@ -64,7 +64,7 @@ export const iconRounded = async (
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, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>`
); );
const iconBBox = iconElem.node().getBBox(); const iconBBox = iconElem.node().getBBox();
const iconWidth = iconBBox.width; const iconWidth = iconBBox.width;
@ -73,14 +73,14 @@ export const iconRounded = async (
const iconY = iconBBox.y; const iconY = iconBBox.y;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY - halfPadding : outerHeight / 2 - iconHeight - iconY - halfPadding - bbox.height - labelPadding})` `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder);
} }
label.attr( label.attr(
'transform', 'transform',
`translate(${-bbox.width / 2},${topLabel ? -height / 2 - bbox.height / 2 - labelPadding / 2 : height / 2 - bbox.height / 2 + labelPadding / 2})` `translate(${-bbox.width / 2},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
); );
iconShape.attr( iconShape.attr(

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

@ -63,7 +63,7 @@ export const iconSquare = async (
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, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>`
); );
const iconBBox = iconElem.node().getBBox(); const iconBBox = iconElem.node().getBBox();
const iconWidth = iconBBox.width; const iconWidth = iconBBox.width;
@ -72,14 +72,14 @@ export const iconSquare = async (
const iconY = iconBBox.y; const iconY = iconBBox.y;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY - halfPadding : outerHeight / 2 - iconHeight - iconY - halfPadding - bbox.height - labelPadding})` `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder);
} }
label.attr( label.attr(
'transform', 'transform',
`translate(${-bbox.width / 2},${topLabel ? -height / 2 - bbox.height / 2 - labelPadding / 2 : height / 2 - bbox.height / 2 + labelPadding / 2})` `translate(${-bbox.width / 2},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
); );
iconShape.attr( iconShape.attr(