diff --git a/.changeset/curve-interpolation-fix.md b/.changeset/curve-interpolation-fix.md new file mode 100644 index 000000000..fcd2cd349 --- /dev/null +++ b/.changeset/curve-interpolation-fix.md @@ -0,0 +1,9 @@ +--- +'mermaid': minor +--- + +fix: restore curve type configuration functionality for flowcharts. This fixes the issue where curve type settings were not being applied when configured through any of the following methods: + +- Config +- Init directive (%%{ init: { 'flowchart': { 'curve': '...' } } }%%) +- LinkStyle command (linkStyle default interpolate ...) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index c02a41a1c..638847547 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -262,7 +262,19 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { * Defines how mermaid renders curves for flowcharts. * */ - curve?: 'basis' | 'linear' | 'cardinal'; + curve?: + | 'basis' + | 'bumpX' + | 'bumpY' + | 'cardinal' + | 'catmullRom' + | 'linear' + | 'monotoneX' + | 'monotoneY' + | 'natural' + | 'step' + | 'stepAfter' + | 'stepBefore'; /** * Represents the padding between the labels and the shape * diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts index ca97b98ba..8d12de00b 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts @@ -98,3 +98,31 @@ describe('flow db class', () => { } }); }); + +describe('flow db getData', () => { + let flowDb: FlowDB; + beforeEach(() => { + flowDb = new FlowDB(); + }); + + it('should use defaultInterpolate for edges without specific interpolate', () => { + flowDb.addVertex('A', { text: 'A', type: 'text' }, undefined, [], [], '', {}, undefined); + flowDb.addVertex('B', { text: 'B', type: 'text' }, undefined, [], [], '', {}, undefined); + flowDb.addLink(['A'], ['B'], {}); + flowDb.updateLinkInterpolate(['default'], 'stepBefore'); + + const { edges } = flowDb.getData(); + expect(edges[0].curve).toBe('stepBefore'); + }); + + it('should prioritize edge-specific interpolate over defaultInterpolate', () => { + flowDb.addVertex('A', { text: 'A', type: 'text' }, undefined, [], [], '', {}, undefined); + flowDb.addVertex('B', { text: 'B', type: 'text' }, undefined, [], [], '', {}, undefined); + flowDb.addLink(['A'], ['B'], {}); + flowDb.updateLinkInterpolate(['default'], 'stepBefore'); + flowDb.updateLinkInterpolate([0], 'basis'); + + const { edges } = flowDb.getData(); + expect(edges[0].curve).toBe('basis'); + }); +}); diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts index 7074464dc..de926f294 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts @@ -252,6 +252,7 @@ export class FlowDB implements DiagramDB { labelType: 'text', classes: [], isUserDefinedId: false, + interpolate: this.edges.defaultInterpolate, }; log.info('abc78 Got edge...', edge); const linkTextObj = type.text; @@ -1124,6 +1125,7 @@ You have to call mermaid.initialize.` look: config.look, animate: rawEdge.animate, animation: rawEdge.animation, + curve: rawEdge.interpolate || this.edges.defaultInterpolate || config.flowchart?.curve, }; edges.push(edge); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index 4a9ab52cb..434c53856 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -6,7 +6,22 @@ import utils from '../../utils.js'; import { getLineFunctionsWithOffset } from '../../utils/lineWithOffset.js'; import { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js'; -import { curveBasis, curveLinear, curveCardinal, line, select } from 'd3'; +import { + curveBasis, + curveLinear, + curveCardinal, + curveBumpX, + curveBumpY, + curveCatmullRom, + curveMonotoneX, + curveMonotoneY, + curveNatural, + curveStep, + curveStepAfter, + curveStepBefore, + line, + select, +} from 'd3'; import rough from 'roughjs'; import createLabel from './createLabel.js'; import { addEdgeMarkers } from './edgeMarker.ts'; @@ -484,6 +499,33 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod case 'cardinal': curve = curveCardinal; break; + case 'bumpX': + curve = curveBumpX; + break; + case 'bumpY': + curve = curveBumpY; + break; + case 'catmullRom': + curve = curveCatmullRom; + break; + case 'monotoneX': + curve = curveMonotoneX; + break; + case 'monotoneY': + curve = curveMonotoneY; + break; + case 'natural': + curve = curveNatural; + break; + case 'step': + curve = curveStep; + break; + case 'stepAfter': + curve = curveStepAfter; + break; + case 'stepBefore': + curve = curveStepBefore; + break; default: curve = curveBasis; } diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 881e292cb..e36b00bf9 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -2066,7 +2066,21 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) description: | Defines how mermaid renders curves for flowcharts. type: string - enum: ['basis', 'linear', 'cardinal'] + enum: + [ + 'basis', + 'bumpX', + 'bumpY', + 'cardinal', + 'catmullRom', + 'linear', + 'monotoneX', + 'monotoneY', + 'natural', + 'step', + 'stepAfter', + 'stepBefore', + ] default: 'basis' padding: description: |