GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Updated icon shape to use css color style instead of stroke

Browse Source
This commit is contained in:
saurabhg772244 2024-10-07 15:52:12 +05:30
parent ddf18dd233
commit 0b8f27e1d2
4 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -77,7 +77,7 @@ export const icon = async (
: -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.attr('style', `color: ${stylesMap.get('stroke') ?? nodeBorder};`);
} }
label.attr( label.attr(

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

@ -26,10 +26,10 @@ export const iconCircle = async (
const topLabel = node.pos === 't'; const topLabel = node.pos === 't';
const { nodeBorder, mainBkg } = themeVariables; const { nodeBorder } = themeVariables;
const { stylesMap } = compileStyles(node); const { stylesMap } = compileStyles(node);
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg }); const options = userNodeOverrides(node, { stroke: 'transparent' });
if (node.look !== 'handDrawn') { if (node.look !== 'handDrawn') {
options.roughness = 0; options.roughness = 0;
@ -74,7 +74,7 @@ export const iconCircle = async (
: -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.attr('style', `color: ${stylesMap.get('stroke') ?? nodeBorder};`);
label.attr( label.attr(
'transform', 'transform',
`translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${ `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${

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

@ -30,7 +30,7 @@ export const iconRounded = async (
const height = iconSize + halfPadding * 2; const height = iconSize + halfPadding * 2;
const width = iconSize + halfPadding * 2; const width = iconSize + halfPadding * 2;
const { nodeBorder, mainBkg } = themeVariables; const { nodeBorder } = themeVariables;
const { stylesMap } = compileStyles(node); const { stylesMap } = compileStyles(node);
const x = -width / 2; const x = -width / 2;
@ -39,7 +39,7 @@ export const iconRounded = async (
const labelPadding = node.label ? 8 : 0; const labelPadding = node.label ? 8 : 0;
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg }); const options = userNodeOverrides(node, { stroke: 'transparent' });
if (node.look !== 'handDrawn') { if (node.look !== 'handDrawn') {
options.roughness = 0; options.roughness = 0;
@ -82,7 +82,7 @@ export const iconRounded = async (
: -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.attr('style', `color: ${stylesMap.get('stroke') ?? nodeBorder};`);
} }
label.attr( label.attr(

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

@ -29,7 +29,7 @@ export const iconSquare = async (
const height = iconSize + halfPadding * 2; const height = iconSize + halfPadding * 2;
const width = iconSize + halfPadding * 2; const width = iconSize + halfPadding * 2;
const { nodeBorder, mainBkg } = themeVariables; const { nodeBorder } = themeVariables;
const { stylesMap } = compileStyles(node); const { stylesMap } = compileStyles(node);
const x = -width / 2; const x = -width / 2;
@ -38,7 +38,7 @@ export const iconSquare = async (
const labelPadding = node.label ? 8 : 0; const labelPadding = node.label ? 8 : 0;
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg }); const options = userNodeOverrides(node, { stroke: 'transparent' });
if (node.look !== 'handDrawn') { if (node.look !== 'handDrawn') {
options.roughness = 0; options.roughness = 0;
@ -81,7 +81,7 @@ export const iconSquare = async (
: -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.attr('style', `color: ${stylesMap.get('stroke') ?? nodeBorder};`);
} }
label.attr( label.attr(