Skip to content

Commit

Permalink
#5574 Adding support for edge ids and animations
Browse files Browse the repository at this point in the history
  • Loading branch information
@knsv
knsv committed Dec 17, 2024
1 parent df636c6 commit 9b00f1f
Show file tree
Hide file tree
Showing 11 changed files with 313 additions and 73 deletions.
79 changes: 58 additions & 21 deletions cypress/platform/knsv2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,29 +84,66 @@
/* tspan {
font-size: 6px !important;
} */
/* .flowchart-link {
stroke-dasharray: 4, 4 !important;
animation: flow 1s linear infinite;
animation: dashdraw 4.93282s linear infinite;
stroke-width: 2px !important;
} */

@keyframes dashdraw {
from {
stroke-dashoffset: 0;
}
}

/*stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: 4.932820s linear infinite;*/
/* stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;*/
</style>
</head>

<body>
<pre id="diagram4" class="mermaid2">
flowchart LR
A --> B
</pre>
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
---
flowchart LR
subgraph S2
subgraph s1["APA"]
D{"Use the editor"}
end


D -- Mermaid js --> I{"fa:fa-code Text"}
D --> I
D --> I

end
A e1@==> B
e1@{ animate: true}
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@--> B
classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
class e1 animate
</pre>
<h2>infinite</h2>
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
</pre>
<h2>Mermaid - edge-animation-slow</h2>
<pre id="diagram4" class="mermaid">
flowchart LR
A e1@--> B
e1@{ animation: fast}
</pre>
<h2>Mermaid - edge-animation-fast</h2>
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
class e1 edge-animation-fast
</pre>

<pre id="diagram4" class="mermaid2">

info </pre
>
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
Expand All @@ -131,7 +168,7 @@
end
end
</pre>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
Expand All @@ -144,7 +181,7 @@
D-->I
D-->I
</pre>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
Expand Down Expand Up @@ -183,7 +220,7 @@
n8@{ shape: rect}

</pre>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
Expand All @@ -199,7 +236,7 @@


</pre>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
Expand All @@ -208,7 +245,7 @@
A{A} --> B & C
</pre
>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
Expand All @@ -220,7 +257,7 @@
end
</pre
>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
Expand Down
96 changes: 71 additions & 25 deletions packages/mermaid/src/diagrams/flowchart/flowDb.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import type {
FlowLink,
FlowVertexTypeParam,
} from './types.js';
import type { NodeMetaData } from '../../types.js';
import type { NodeMetaData, EdgeMetaData } from '../../types.js';

const MERMAID_DOM_ID_PREFIX = 'flowchart-';
let vertexCounter = 0;
Expand Down Expand Up @@ -71,12 +71,38 @@ export const addVertex = function (
classes: string[],
dir: string,
props = {},
shapeData: any
metadata: any
) {
// console.log('addVertex', id, shapeData);
if (!id || id.trim().length === 0) {
return;
}
// Extract the metadata from the shapeData, the syntax for adding metadata for nodes and edges is the same
// so at this point we don't know if it's a node or an edge, but we can still extract the metadata
let doc;
if (metadata !== undefined) {
let yamlData;
// detect if shapeData contains a newline character
if (!metadata.includes('\n')) {
yamlData = '{\n' + metadata + '\n}';
} else {
yamlData = metadata + '\n';
}
doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA }) as NodeMetaData;
}

// Check if this is an edge
const edge = edges.find((e) => e.id === id);
if (edge) {
const edgeDoc = doc as EdgeMetaData;
if (edgeDoc?.animate) {
edge.animate = edgeDoc.animate;
}
if (edgeDoc?.animation) {
edge.animation = edgeDoc.animation;
}
return;
}

let txt;

let vertex = vertices.get(id);
Expand Down Expand Up @@ -128,19 +154,7 @@ export const addVertex = function (
Object.assign(vertex.props, props);
}

if (shapeData !== undefined) {
let yamlData;
// detect if shapeData contains a newline character
// console.log('shapeData', shapeData);
if (!shapeData.includes('\n')) {
// console.log('yamlData shapeData has no new lines', shapeData);
yamlData = '{\n' + shapeData + '\n}';
} else {
// console.log('yamlData shapeData has new lines', shapeData);
yamlData = shapeData + '\n';
}
// console.log('yamlData', yamlData);
const doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA }) as NodeMetaData;
if (doc !== undefined) {
if (doc.shape) {
if (doc.shape !== doc.shape.toLowerCase() || doc.shape.includes('_')) {
throw new Error(`No such shape: ${doc.shape}. Shape names should be lowercase.`);
Expand Down Expand Up @@ -187,11 +201,18 @@ export const addVertex = function (
* Function called by parser when a link/edge definition has been found
*
*/
export const addSingleLink = function (_start: string, _end: string, type: any) {
export const addSingleLink = function (_start: string, _end: string, type: any, id?: string) {
const start = _start;
const end = _end;

const edge: FlowEdge = { start: start, end: end, type: undefined, text: '', labelType: 'text' };
const edge: FlowEdge = {
start: start,
end: end,
type: undefined,
text: '',
labelType: 'text',
classes: [],
};
log.info('abc78 Got edge...', edge);
const linkTextObj = type.text;

Expand All @@ -210,6 +231,9 @@ export const addSingleLink = function (_start: string, _end: string, type: any)
edge.stroke = type.stroke;
edge.length = type.length > 10 ? 10 : type.length;
}
if (id) {
edge.id = id;
}

if (edges.length < (config.maxEdges ?? 500)) {
log.info('Pushing edge...');
Expand All @@ -225,11 +249,17 @@ You have to call mermaid.initialize.`
}
};

export const addLink = function (_start: string[], _end: string[], type: unknown) {
log.info('addLink', _start, _end, type);
export const addLink = function (_start: string[], _end: string[], linkData: unknown) {
const id =
linkData && typeof linkData === 'object' && 'id' in linkData
? linkData.id?.replace('@', '')
: undefined;

log.info('addLink', _start, _end, id);

for (const start of _start) {
for (const end of _end) {
addSingleLink(start, end, type);
addSingleLink(start, end, linkData, id);
}
}
};
Expand Down Expand Up @@ -282,7 +312,13 @@ export const updateLink = function (positions: ('default' | number)[], style: st
});
};

export const addClass = function (ids: string, style: string[]) {
export const addClass = function (ids: string, _style: string[]) {
const style = _style
.join()
.replace(/\\,/g, '§§§')
.replace(/,/g, ';')
.replace(/§§§/g, ',')
.split(';');
ids.split(',').forEach(function (id) {
let classNode = classes.get(id);
if (classNode === undefined) {
Expand Down Expand Up @@ -337,6 +373,10 @@ export const setClass = function (ids: string, className: string) {
if (vertex) {
vertex.classes.push(className);
}
const edge = edges.find((e) => e.id === id);
if (edge) {
edge.classes.push(className);
}
const subGraph = subGraphLookup.get(id);
if (subGraph) {
subGraph.classes.push(className);
Expand Down Expand Up @@ -997,7 +1037,7 @@ export const getData = () => {
styles.push(...rawEdge.style);
}
const edge: Edge = {
id: getEdgeId(rawEdge.start, rawEdge.end, { counter: index, prefix: 'L' }),
id: getEdgeId(rawEdge.start, rawEdge.end, { counter: index, prefix: 'L' }, rawEdge.id),
start: rawEdge.start,
end: rawEdge.end,
type: rawEdge.type ?? 'normal',
Expand All @@ -1009,14 +1049,20 @@ export const getData = () => {
rawEdge?.stroke === 'invisible'
? ''
: 'edge-thickness-normal edge-pattern-solid flowchart-link',
arrowTypeStart: rawEdge?.stroke === 'invisible' ? 'none' : arrowTypeStart,
arrowTypeEnd: rawEdge?.stroke === 'invisible' ? 'none' : arrowTypeEnd,
arrowTypeStart:
rawEdge?.stroke === 'invisible' || rawEdge?.type === 'arrow_open' ? 'none' : arrowTypeStart,
arrowTypeEnd:
rawEdge?.stroke === 'invisible' || rawEdge?.type === 'arrow_open' ? 'none' : arrowTypeEnd,
arrowheadStyle: 'fill: #333',
cssCompiledStyles: getCompiledStyles(rawEdge.classes),
labelStyle: styles,
style: styles,
pattern: rawEdge.stroke,
look: config.look,
animate: rawEdge.animate,
animation: rawEdge.animation,
};

edges.push(edge);
});

Expand Down
Loading

0 comments on commit 9b00f1f

Please sign in to comment.