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

Merge pull request #5937 from mermaid-js/saurabh/icon-shape-style-fix

Browse Source 
Fix icon shape color for colored icons.
This commit is contained in:
Alois Klink 2024-10-09 07:47:34 +00:00 committed by GitHub
commit 2506c29f6b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 74 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/chilly-hotels-mix.md Normal file
View File

@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Jagged edge fix for icon shape

5
.changeset/heavy-cats-mate.md Normal file
View File

@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Icon color fix for colored icons.

17
cypress/integration/rendering/iconShape.spec.ts
View File

@ -124,3 +124,20 @@ describe('Test iconShape with different h', () => {
imgSnapshotTest(flowchartCode);
});
});
describe('Test colored iconShape', () => {
it('with no styles', () => {
let flowchartCode = `flowchart TB\n`;
const icon = 'fluent-emoji:tropical-fish';
flowchartCode += ` nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`;
imgSnapshotTest(flowchartCode);
});
it('with styles', () => {
let flowchartCode = `flowchart TB\n`;
const icon = 'fluent-emoji:tropical-fish';
flowchartCode += ` nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`;
flowchartCode += ` style nAA fill:#f9f,stroke:#333,stroke-width:4px \n`;
imgSnapshotTest(flowchartCode);
});
});

37
cypress/platform/viewer.js
View File

File diff suppressed because one or more lines are too long

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

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