Merge pull request #6198 from mermaid-js/edge-flicker-fix

edge flickering fix

.changeset/bright-ads-exist.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+Fixes for consistent edge id creation & handling edge cases for animate edge feature

docs/config/setup/interfaces/mermaid.LayoutData.md

@@ -20,7 +20,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/types.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L147)
+[packages/mermaid/src/rendering-util/types.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L148)
 
 ---
 
@@ -30,7 +30,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/types.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L146)
+[packages/mermaid/src/rendering-util/types.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L147)
 
 ---
 
@@ -40,4 +40,4 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/types.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L145)
+[packages/mermaid/src/rendering-util/types.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L146)

packages/mermaid/src/diagrams/flowchart/flowDb.ts

@@ -94,10 +94,10 @@ export const addVertex = function (
   const edge = edges.find((e) => e.id === id);
   if (edge) {
     const edgeDoc = doc as EdgeMetaData;
-    if (edgeDoc?.animate) {
+    if (edgeDoc?.animate !== undefined) {
       edge.animate = edgeDoc.animate;
     }
-    if (edgeDoc?.animation) {
+    if (edgeDoc?.animation !== undefined) {
       edge.animation = edgeDoc.animation;
     }
     return;
@@ -212,6 +212,7 @@ export const addSingleLink = function (_start: string, _end: string, type: any,
     text: '',
     labelType: 'text',
     classes: [],
+    isUserDefinedId: false,
   };
   log.info('abc78 Got edge...', edge);
   const linkTextObj = type.text;
@@ -231,8 +232,17 @@ export const addSingleLink = function (_start: string, _end: string, type: any,
     edge.stroke = type.stroke;
     edge.length = type.length > 10 ? 10 : type.length;
   }
-  if (id) {
+
+  if (id && !edges.some((e) => e.id === id)) {
     edge.id = id;
+    edge.isUserDefinedId = true;
+  } else {
+    const existingLinks = edges.filter((e) => e.start === edge.start && e.end === edge.end);
+    if (existingLinks.length === 0) {
+      edge.id = getEdgeId(edge.start, edge.end, { counter: 0, prefix: 'L' });
+    } else {
+      edge.id = getEdgeId(edge.start, edge.end, { counter: existingLinks.length + 1, prefix: 'L' });
+    }
   }
 
   if (edges.length < (config.maxEdges ?? 500)) {
@@ -267,9 +277,18 @@ export const addLink = function (_start: string[], _end: string[], linkData: unk
 
   log.info('addLink', _start, _end, id);
 
+  // for a group syntax like A e1@--> B & C, only the first edge should have an the userDefined id
+  // the rest of the edges should have auto generated ids
   for (const start of _start) {
     for (const end of _end) {
-      addSingleLink(start, end, linkData, id);
+      //use the id only for last node in _start and and first node in _end
+      const isLastStart = start === _start[_start.length - 1];
+      const isFirstEnd = end === _end[0];
+      if (isLastStart && isFirstEnd) {
+        addSingleLink(start, end, linkData, id);
+      } else {
+        addSingleLink(start, end, linkData, undefined);
+      }
     }
   }
 };
@@ -1045,6 +1064,7 @@ export const getData = () => {
     }
     const edge: Edge = {
       id: getEdgeId(rawEdge.start, rawEdge.end, { counter: index, prefix: 'L' }, rawEdge.id),
+      isUserDefinedId: rawEdge.isUserDefinedId,
       start: rawEdge.start,
       end: rawEdge.end,
       type: rawEdge.type ?? 'normal',

packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js

@@ -251,7 +251,7 @@ describe('when parsing directions', function () {
     expect(data4Layout.nodes[0].shape).toEqual('squareRect');
     expect(data4Layout.nodes[0].label).toEqual('This is a<br/>multiline string');
   });
-  it(' should be possible to use } in strings', function () {
+  it('should be possible to use } in strings', function () {
     const res = flow.parser.parse(`flowchart TB
       A@{
         label: "This is a string with }"
@@ -264,7 +264,7 @@ describe('when parsing directions', function () {
     expect(data4Layout.nodes[0].shape).toEqual('squareRect');
     expect(data4Layout.nodes[0].label).toEqual('This is a string with }');
   });
-  it(' should be possible to use @ in strings', function () {
+  it('should be possible to use @ in strings', function () {
     const res = flow.parser.parse(`flowchart TB
       A@{
         label: "This is a string with @"
@@ -277,7 +277,7 @@ describe('when parsing directions', function () {
     expect(data4Layout.nodes[0].shape).toEqual('squareRect');
     expect(data4Layout.nodes[0].label).toEqual('This is a string with @');
   });
-  it(' should be possible to use @ in strings', function () {
+  it('should be possible to use @ in strings', function () {
     const res = flow.parser.parse(`flowchart TB
       A@{
         label: "This is a string with}"
@@ -291,7 +291,7 @@ describe('when parsing directions', function () {
     expect(data4Layout.nodes[0].label).toEqual('This is a string with}');
   });
 
-  it(' should be possible to use @  syntax to add labels on multi nodes', function () {
+  it('should be possible to use @  syntax to add labels on multi nodes', function () {
     const res = flow.parser.parse(`flowchart TB
        n2["label for n2"] &   n4@{ label: "labe for n4"}   & n5@{ label: "labe for n5"}
       `);
@@ -343,7 +343,64 @@ describe('when parsing directions', function () {
     expect(data4Layout.nodes[9].label).toEqual('@for@ AS@');
     expect(data4Layout.nodes[10].label).toEqual('@for@ AS@');
   });
-  it.skip(' should be possible to use @  syntax to add labels with trail spaces', function () {
+
+  it('should handle unique edge creation with using @ and &', function () {
+    const res = flow.parser.parse(`flowchart TD
+     A & B e1@--> C & D
+        A1 e2@--> C1 & D1
+      `);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(7);
+    expect(data4Layout.edges.length).toBe(6);
+    expect(data4Layout.edges[0].id).toEqual('L_A_C_0');
+    expect(data4Layout.edges[1].id).toEqual('L_A_D_0');
+    expect(data4Layout.edges[2].id).toEqual('e1');
+    expect(data4Layout.edges[3].id).toEqual('L_B_D_0');
+    expect(data4Layout.edges[4].id).toEqual('e2');
+    expect(data4Layout.edges[5].id).toEqual('L_A1_D1_0');
+  });
+
+  it('should handle redefine same edge ids again', function () {
+    const res = flow.parser.parse(`flowchart TD
+     A & B e1@--> C & D
+        A1 e1@--> C1 & D1
+      `);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(7);
+    expect(data4Layout.edges.length).toBe(6);
+    expect(data4Layout.edges[0].id).toEqual('L_A_C_0');
+    expect(data4Layout.edges[1].id).toEqual('L_A_D_0');
+    expect(data4Layout.edges[2].id).toEqual('e1');
+    expect(data4Layout.edges[3].id).toEqual('L_B_D_0');
+    expect(data4Layout.edges[4].id).toEqual('L_A1_C1_0');
+    expect(data4Layout.edges[5].id).toEqual('L_A1_D1_0');
+  });
+
+  it('should handle overriding edge animate again', function () {
+    const res = flow.parser.parse(`flowchart TD
+     A e1@--> B
+     C e2@--> D
+     E e3@--> F
+    e1@{ animate: true }
+    e2@{ animate: false }
+    e3@{ animate: true }
+    e3@{ animate: false }
+      `);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(6);
+    expect(data4Layout.edges.length).toBe(3);
+    expect(data4Layout.edges[0].id).toEqual('e1');
+    expect(data4Layout.edges[0].animate).toEqual(true);
+    expect(data4Layout.edges[1].id).toEqual('e2');
+    expect(data4Layout.edges[1].animate).toEqual(false);
+    expect(data4Layout.edges[2].id).toEqual('e3');
+    expect(data4Layout.edges[2].animate).toEqual(false);
+  });
+
+  it.skip('should be possible to use @  syntax to add labels with trail spaces', function () {
     const res = flow.parser.parse(
       `flowchart TB
        n2["label for n2"] &   n4@{ label: "labe for n4"}   & n5@{ label: "labe for n5"} `

packages/mermaid/src/diagrams/flowchart/types.ts

@@ -53,6 +53,7 @@ export interface FlowText {
 }
 
 export interface FlowEdge {
+  isUserDefinedId: boolean;
   start: string;
   end: string;
   interpolate?: string;

packages/mermaid/src/rendering-util/types.ts

@@ -125,6 +125,7 @@ export interface Edge {
   pattern?: string;
   thickness?: 'normal' | 'thick' | 'invisible' | 'dotted';
   look?: string;
+  isUserDefinedId?: boolean;
 }
 
 export interface RectOptions {