marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-17 06:20:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
edge flickering fix
This commit is contained in:
Ashish Jain
2025-01-22 11:12:23 +01:00
committed by GitHub
parent eb76dfb1ca 963efa64c7
commit e9e663ffa3
6 changed files with 96 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/bright-ads-exist.md Normal file
View File

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

6
docs/config/setup/interfaces/mermaid.LayoutData.md
View File

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

28
packages/mermaid/src/diagrams/flowchart/flowDb.ts
View File

@@ -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',

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

@@ -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"} `

1
packages/mermaid/src/diagrams/flowchart/types.ts
View File

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

1
packages/mermaid/src/rendering-util/types.ts
View File

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