diff --git a/.changeset/six-planets-rescue.md b/.changeset/six-planets-rescue.md new file mode 100644 index 000000000..8b04a69ed --- /dev/null +++ b/.changeset/six-planets-rescue.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: node border style for handdrawn shapes diff --git a/.github/workflows/e2e-timings.yml b/.github/workflows/e2e-timings.yml index ef009fa2b..f4c28acad 100644 --- a/.github/workflows/e2e-timings.yml +++ b/.github/workflows/e2e-timings.yml @@ -58,7 +58,7 @@ jobs: echo "EOF" >> $GITHUB_OUTPUT - name: Commit and create pull request - uses: peter-evans/create-pull-request@07cbaebb4bfc9c5d7db426ea5a5f585df29dd0a0 + uses: peter-evans/create-pull-request@1310d7dab503600742045e6fd4b84dda64352858 with: add-paths: | cypress/timings.json diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index 00c9b8313..4b73bb02f 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -33,13 +33,13 @@ function setupDompurifyHooks() { const TEMPORARY_ATTRIBUTE = 'data-temp-href-target'; DOMPurify.addHook('beforeSanitizeAttributes', (node) => { - if (node instanceof Element && node.tagName === 'A' && node.hasAttribute('target')) { + if (node.tagName === 'A' && node.hasAttribute('target')) { node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') ?? ''); } }); DOMPurify.addHook('afterSanitizeAttributes', (node) => { - if (node instanceof Element && node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) { + if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) { node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) ?? ''); node.removeAttribute(TEMPORARY_ATTRIBUTE); if (node.getAttribute('target') === '_blank') { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts index 99dedd919..16a201e14 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts @@ -104,8 +104,23 @@ export const userNodeOverrides = (node: Node, options: any) => { seed: handDrawnSeed, strokeWidth: stylesMap.get('stroke-width')?.replace('px', '') || 1.3, fillLineDash: [0, 0], + strokeLineDash: getStrokeDashArray(stylesMap.get('stroke-dasharray')), }, options ); return result; }; + +const getStrokeDashArray = (strokeDasharrayStyle?: string) => { + if (!strokeDasharrayStyle) { + return [0, 0]; + } + const dashArray = strokeDasharrayStyle.trim().split(/\s+/).map(Number); + if (dashArray.length === 1) { + const val = isNaN(dashArray[0]) ? 0 : dashArray[0]; + return [val, val]; + } + const first = isNaN(dashArray[0]) ? 0 : dashArray[0]; + const second = isNaN(dashArray[1]) ? 0 : dashArray[1]; + return [first, second]; +};