marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-09 15:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixed neo look for color icons

Browse Source
This commit is contained in:
saurabhg772244
2024-10-09 16:50:46 +05:30
parent 122a44024c
commit 2509511135
6 changed files with 42 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/platform/saurabh.html
View File

@@ -67,7 +67,7 @@
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
flowchart TD flowchart TD
B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" } B2@{ icon: "logos:aws", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
</pre </pre
> >
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">

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

@@ -77,8 +77,15 @@ 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};`);
iconElem.attr('class', 'icon'); iconElem
.selectAll('path')
.nodes()
.forEach((path: SVGPathElement) => {
if (path.getAttribute('fill') === 'currentColor') {
path.setAttribute('class', 'icon');
}
});
} }
label.attr( label.attr(

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

@@ -75,8 +75,15 @@ export const iconCircle = async (
'transform', 'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? -iconSize / 2 : -iconSize / 2})` `translate(${-iconWidth / 2 - iconX},${topLabel ? -iconSize / 2 : -iconSize / 2})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder); iconElem.attr('style', `color : ${stylesMap.get('stroke') ?? nodeBorder};`);
iconElem.attr('class', 'icon'); iconElem
.selectAll('path')
.nodes()
.forEach((path: SVGPathElement) => {
if (path.getAttribute('fill') === 'currentColor') {
path.setAttribute('class', 'icon');
}
});
// label.attr( // label.attr(
// 'transform', // 'transform',
// `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})` // `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`

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

@@ -45,14 +45,14 @@ export const iconRounded = async (
iconSize = Math.max(node.width - padding * 2, node.height - padding * 2); iconSize = Math.max(node.width - padding * 2, node.height - padding * 2);
} }
const { nodeBorder, mainBkg } = themeVariables; const { nodeBorder } = themeVariables;
const { stylesMap } = compileStyles(node); const { stylesMap } = compileStyles(node);
const x = -width / 2; const x = -width / 2;
const y = -height / 2; const y = -height / 2;
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;
@@ -87,8 +87,15 @@ export const iconRounded = async (
'transform', 'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? -iconSize / 2 : -iconSize / 2})` `translate(${-iconWidth / 2 - iconX},${topLabel ? -iconSize / 2 : -iconSize / 2})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder); iconElem.attr('style', `color : ${stylesMap.get('stroke') ?? nodeBorder};`);
iconElem.attr('class', 'icon'); iconElem
.selectAll('path')
.nodes()
.forEach((path: SVGPathElement) => {
if (path.getAttribute('fill') === 'currentColor') {
path.setAttribute('class', 'icon');
}
});
} }
label.attr( label.attr(

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

@@ -48,14 +48,14 @@ export const iconSquare = async (
//const height = iconSize + padding * 2; //const height = iconSize + padding * 2;
//const width = iconSize + padding * 2; //const width = iconSize + padding * 2;
const { nodeBorder, mainBkg } = themeVariables; const { nodeBorder } = themeVariables;
const { stylesMap } = compileStyles(node); const { stylesMap } = compileStyles(node);
const x = -width / 2; const x = -width / 2;
const y = -height / 2; const y = -height / 2;
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;
@@ -89,8 +89,15 @@ export const iconSquare = async (
'transform', 'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? -iconSize / 2 : -iconSize / 2})` `translate(${-iconWidth / 2 - iconX},${topLabel ? -iconSize / 2 : -iconSize / 2})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder); iconElem.attr('style', `color : ${stylesMap.get('stroke') ?? nodeBorder};`);
iconElem.attr('class', 'icon'); iconElem
.selectAll('path')
.nodes()
.forEach((path: SVGPathElement) => {
if (path.getAttribute('fill') === 'currentColor') {
path.setAttribute('class', 'icon');
}
});
} }
label.attr( label.attr(

2
packages/mermaid/src/styles.ts
View File

@@ -115,7 +115,7 @@ const getStyles = (
stroke-width: 1px; stroke-width: 1px;
} }
[data-look="neo"].icon-shape .icon path { [data-look="neo"].icon-shape .icon {
fill: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder}; fill: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
filter: ${options.dropShadow}; filter: ${options.dropShadow};
} }