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

Updated icon shape positions

Browse Source
This commit is contained in:
saurabhg772244
2024-09-23 12:17:42 +05:30
parent ed7d41a3cb
commit 1c105154a6
5 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
cypress/platform/saurabh.html
View File

@@ -63,10 +63,14 @@
<body style="display: flex; gap: 2rem; flex-direction: row"> <body style="display: flex; gap: 2rem; flex-direction: row">
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
n21@{ shape: subproc,label: "Untitled Node"} A@{ icon: "fa:window-minimize", form: circle }
n52@{ shape: internal-storage,label: "Untitled Node"} E@{ icon: "fa:window-minimize", form: circle }
n53@{ shape: div-rect,label: "Untitled Node"} B@{ icon: "fa:bell", form: circle }
n54@{ shape: lin-doc,label: "Untitled Node"} B2@{ icon: "fa:bell", form: circle }
C@{ icon: "fa:address-book", form: square }
D@{ icon: "fa:star-half", form: square }
A --> E
B --> B2
</pre> </pre>
@@ -142,7 +146,7 @@
// layout: 'elk', // layout: 'elk',
// layout: 'fixed', // layout: 'fixed',
// htmlLabels: false, // htmlLabels: false,
flowchart: { titleTopMargin: 10, htmlLabels: true }, flowchart: { titleTopMargin: 10, padding: 0, htmlLabels: true },
// fontFamily: 'Caveat', // fontFamily: 'Caveat',
// fontFamily: 'Kalam', // fontFamily: 'Kalam',
fontFamily: 'courier', fontFamily: 'courier',

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

@@ -49,7 +49,7 @@ export const icon = async (
const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, { const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, {
...options, ...options,
fill: 'none', fill: 'transparent',
stroke: 'none', stroke: 'none',
}); });
@@ -68,7 +68,7 @@ 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 - iconY})` `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY : outerHeight / 2 - iconHeight - iconY - bbox.height - labelPadding})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
} }

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

@@ -57,7 +57,7 @@ export const iconCircle = async (
const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, { const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, {
...options, ...options,
fill: 'none', fill: 'transparent',
stroke: 'none', stroke: 'none',
}); });
@@ -65,7 +65,7 @@ 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 ? diameter / 2 - iconHeight - padding + bbox.height / 2 - iconY + labelPadding / 2 : -diameter / 2 + padding - bbox.height / 2 - labelPadding / 2 - iconY})` `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY - padding : outerHeight / 2 - iconHeight - iconY - padding - bbox.height - labelPadding})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
label.attr( label.attr(

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

@@ -54,7 +54,7 @@ export const iconRounded = async (
const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, { const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, {
...options, ...options,
fill: 'none', fill: 'transparent',
stroke: 'none', stroke: 'none',
}); });
@@ -73,7 +73,7 @@ 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 - halfPadding - iconY : -outerHeight / 2 + halfPadding - iconY})` `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY - halfPadding : outerHeight / 2 - iconHeight - iconY - halfPadding - bbox.height - labelPadding})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
} }

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

@@ -53,7 +53,7 @@ export const iconSquare = async (
const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, { const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, {
...options, ...options,
fill: 'none', fill: 'transparent',
stroke: 'none', stroke: 'none',
}); });
@@ -72,7 +72,7 @@ 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 - halfPadding - iconY : -outerHeight / 2 + halfPadding - iconY})` `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY - halfPadding : outerHeight / 2 - iconHeight - iconY - halfPadding - bbox.height - labelPadding})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
} }