Merge pull request mermaid-js#6408 from mermaid-js/fix/6193-curve-interpolation

fix: restore curve type configuration functionality for flowcharts

Author: ashishjain0512

.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 ...)

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
    *

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');
+  });
+});

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);

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;
   }

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: |