diff --git a/.changeset/chilly-hotels-mix.md b/.changeset/chilly-hotels-mix.md new file mode 100644 index 0000000000..642ab6ecf6 --- /dev/null +++ b/.changeset/chilly-hotels-mix.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Jagged edge fix for icon shape diff --git a/.changeset/heavy-cats-mate.md b/.changeset/heavy-cats-mate.md new file mode 100644 index 0000000000..c903cc47e5 --- /dev/null +++ b/.changeset/heavy-cats-mate.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Icon color fix for colored icons. diff --git a/cypress/integration/rendering/iconShape.spec.ts b/cypress/integration/rendering/iconShape.spec.ts index 389e2d94dd..4c12c3fa34 100644 --- a/cypress/integration/rendering/iconShape.spec.ts +++ b/cypress/integration/rendering/iconShape.spec.ts @@ -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); + }); +}); diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index 2882be1302..a9d4d2d81b 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -61,11 +61,48 @@ const contentLoaded = async function () { width: 512, height: 512, }; + /* MIT License + + Copyright (c) Microsoft Corporation. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE */ + const staticAwsLogoIconPack = { + prefix: 'fluent-emoji', + icons: { + 'tropical-fish': { + width: 32, + height: 32, + body: '', + }, + }, + width: 256, + height: 256, + }; mermaid.registerIconPacks([ { name: 'fa', loader: () => staticBellIconPack, }, + { + name: 'fluent-emoji', + loader: () => staticAwsLogoIconPack, + }, ]); await mermaid.run(); } diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts index d87efaad10..cd0e346697 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts @@ -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( diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts index 1e18174dff..74d399d6eb 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts @@ -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))},${ diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts index 8ec7d6ee01..c98c99b6fb 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts @@ -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( diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts index df9e790dfa..3c73d03193 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts @@ -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(