diff --git a/.changeset/four-eyes-wish.md b/.changeset/four-eyes-wish.md new file mode 100644 index 000000000..3bbbc1e47 --- /dev/null +++ b/.changeset/four-eyes-wish.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Ensure edge label color is applied when using classDef with edge IDs diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 8c6cde57a..5ef32c269 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -1186,4 +1186,17 @@ end imgSnapshotTest(graph, { htmlLabels: false }); }); }); + + it('V2 - 17: should apply class def colour to edge label', () => { + imgSnapshotTest( + ` graph LR + id1(Start) link@-- "Label" -->id2(Stop) + style id1 fill:#f9f,stroke:#333,stroke-width:4px + +class id2 myClass +classDef myClass fill:#bbf,stroke:#f66,stroke-width:2px,color:white,stroke-dasharray: 5 5 +class link myClass +` + ); + }); }); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index 3292b3811..51b17b117 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -25,7 +25,7 @@ import { import rough from 'roughjs'; import createLabel from './createLabel.js'; import { addEdgeMarkers } from './edgeMarker.ts'; -import { isLabelStyle } from './shapes/handDrawnShapeStyles.js'; +import { isLabelStyle, styles2String } from './shapes/handDrawnShapeStyles.js'; const edgeLabels = new Map(); const terminalLabels = new Map(); @@ -43,8 +43,10 @@ export const getLabelStyles = (styleArray) => { export const insertEdgeLabel = async (elem, edge) => { let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels); + const { labelStyles } = styles2String(edge); + edge.labelStyle = labelStyles; const labelElement = await createText(elem, edge.label, { - style: getLabelStyles(edge.labelStyle), + style: edge.labelStyle, useHtmlLabels, addSvgBackground: true, isNode: false, 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 16a201e14..25ddff46b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts @@ -20,7 +20,11 @@ export const compileStyles = (node: Node) => { // the array is the styles of node from the classes it is using // node.cssStyles is an array of styles directly set on the node // concat the arrays and remove duplicates such that the values from node.cssStyles are used if there are duplicates - const stylesMap = styles2Map([...(node.cssCompiledStyles || []), ...(node.cssStyles || [])]); + const stylesMap = styles2Map([ + ...(node.cssCompiledStyles || []), + ...(node.cssStyles || []), + ...(node.labelStyle || []), + ]); return { stylesMap, stylesArray: [...stylesMap] }; };