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/docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md b/docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md index 35efcddeb..e8aaed4b9 100644 --- a/docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md +++ b/docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md @@ -10,7 +10,7 @@ # Interface: ExternalDiagramDefinition -Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L94) +Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96) ## Properties @@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/me > **detector**: `DiagramDetector` -Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96) +Defined in: [packages/mermaid/src/diagram-api/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L98) --- @@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/me > **id**: `string` -Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L95) +Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97) --- @@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/me > **loader**: `DiagramLoader` -Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97) +Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99) diff --git a/docs/config/setup/mermaid/type-aliases/SVG.md b/docs/config/setup/mermaid/type-aliases/SVG.md index 184f3e2cd..d6b628556 100644 --- a/docs/config/setup/mermaid/type-aliases/SVG.md +++ b/docs/config/setup/mermaid/type-aliases/SVG.md @@ -12,4 +12,4 @@ > **SVG** = `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`> -Defined in: [packages/mermaid/src/diagram-api/types.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L126) +Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128) diff --git a/docs/config/setup/mermaid/type-aliases/SVGGroup.md b/docs/config/setup/mermaid/type-aliases/SVGGroup.md index 8d673aafb..7b2e92f52 100644 --- a/docs/config/setup/mermaid/type-aliases/SVGGroup.md +++ b/docs/config/setup/mermaid/type-aliases/SVGGroup.md @@ -12,4 +12,4 @@ > **SVGGroup** = `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`> -Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128) +Defined in: [packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130) diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts index 56364e9c6..ed90eec57 100644 --- a/packages/mermaid/src/diagram-api/types.ts +++ b/packages/mermaid/src/diagram-api/types.ts @@ -3,6 +3,7 @@ import type * as d3 from 'd3'; import type { SetOptional, SetRequired } from 'type-fest'; import type { Diagram } from '../Diagram.js'; import type { BaseDiagramConfig, MermaidConfig } from '../config.type.js'; +import type { DiagramOrientation } from '../diagrams/git/gitGraphTypes.js'; export interface DiagramMetadata { title?: string; @@ -35,7 +36,8 @@ export interface DiagramDB { getAccTitle?: () => string; setAccDescription?: (description: string) => void; getAccDescription?: () => string; - + getDirection?: () => string | undefined; + setDirection?: (dir: DiagramOrientation) => void; setDisplayMode?: (title: string) => void; bindFunctions?: (element: Element) => void; } diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index 6c8111743..af5b83b9c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -29,7 +29,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'; export const edgeLabels = new Map(); export const terminalLabels = new Map(); @@ -47,8 +47,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] }; };