From 9986b023d71f866be8ac0873c2c3289784b8000d Mon Sep 17 00:00:00 2001 From: Igor Wessel Date: Sat, 4 May 2024 06:21:12 -0300 Subject: [PATCH 1/3] feat(state): add from, to in edge --- packages/mermaid/src/diagrams/state/stateRenderer-v2.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js index 482e37cae..04bdd135e 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js @@ -252,7 +252,6 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) => type: 'group', padding: 0, //getConfig().flowchart.padding }; - graphItemCount++; const parentNodeId = itemId + PARENT_ID; g.setNode(parentNodeId, groupData); @@ -270,17 +269,21 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) => from = noteData.id; to = itemId; } + g.setEdge(from, to, { arrowhead: 'none', arrowType: '', style: G_EDGE_STYLE, labelStyle: '', + id: 'edge' + graphItemCount + `_${from}_${to}`, classes: CSS_EDGE_NOTE_EDGE, arrowheadStyle: G_EDGE_ARROWHEADSTYLE, labelpos: G_EDGE_LABELPOS, labelType: G_EDGE_LABELTYPE, thickness: G_EDGE_THICKNESS, }); + + graphItemCount++; } else { g.setNode(itemId, nodeData); } @@ -324,7 +327,7 @@ const setupDoc = (g, parentParsedItem, doc, diagramStates, diagramDb, altFlag) = setupNode(g, parentParsedItem, item.state1, diagramStates, diagramDb, altFlag); setupNode(g, parentParsedItem, item.state2, diagramStates, diagramDb, altFlag); const edgeData = { - id: 'edge' + graphItemCount, + id: 'edge' + graphItemCount + `_${item.state1.id}_${item.state2.id}`, arrowhead: 'normal', arrowTypeEnd: 'arrow_barb', style: G_EDGE_STYLE, From 1f6445271615eccdc7483327f8557286c31fcb91 Mon Sep 17 00:00:00 2001 From: Igor Wessel Date: Mon, 6 May 2024 07:46:42 -0300 Subject: [PATCH 2/3] feat(utils): create a standard edge id function --- packages/mermaid/src/utils.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts index 06aca5ab2..99283f359 100644 --- a/packages/mermaid/src/utils.ts +++ b/packages/mermaid/src/utils.ts @@ -929,3 +929,19 @@ export const decodeEntities = function (text: string): string { export const isString = (value: unknown): value is string => { return typeof value === 'string'; }; + +export const getEdgeId = ( + from: string, + to: string, + { + counter = 0, + prefix, + suffix, + }: { + counter?: number; + prefix?: string; + suffix?: string; + } +) => { + return `${prefix ? `${prefix}_` : ''}${from}_${to}_${counter}${suffix ? `_${suffix}` : ''}`; +}; From da150e8767eab63ef9e95be73a6696f34ffca161 Mon Sep 17 00:00:00 2001 From: Igor Wessel Date: Mon, 6 May 2024 08:07:47 -0300 Subject: [PATCH 3/3] feat: use standard edge id function for class,flow,state diagram --- .../mermaid/src/diagrams/class/classRenderer-v2.ts | 7 +++++-- .../mermaid/src/diagrams/flowchart/flowRenderer-v2.js | 11 ++++++++--- .../mermaid/src/diagrams/flowchart/flowRenderer.js | 7 +++++-- .../mermaid/src/diagrams/state/stateRenderer-v2.js | 10 +++++++--- 4 files changed, 25 insertions(+), 10 deletions(-) diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts index a01b1427b..e8fb9a588 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts +++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts @@ -4,7 +4,7 @@ import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { log } from '../../logger.js'; import { getConfig } from '../../diagram-api/diagramAPI.js'; import { render } from '../../dagre-wrapper/index.js'; -import utils from '../../utils.js'; +import utils, { getEdgeId } from '../../utils.js'; import { interpolateToCurve, getStylesFromArray } from '../../utils.js'; import { setupGraphViewbox } from '../../setupGraphViewbox.js'; import common from '../common/common.js'; @@ -231,7 +231,10 @@ export const addRelations = function (relations: ClassRelation[], g: graphlib.Gr //Set relationship style and line type classes: 'relation', pattern: edge.relation.lineType == 1 ? 'dashed' : 'solid', - id: `id_${edge.id1}_${edge.id2}_${cnt}`, + id: getEdgeId(edge.id1, edge.id2, { + prefix: 'id', + counter: cnt, + }), // Set link type for rendering arrowhead: edge.type === 'arrow_open' ? 'none' : 'normal', //Set edge extra labels diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js index f27d8e353..74c9dfb67 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js @@ -1,7 +1,7 @@ import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { select, curveLinear, selectAll } from 'd3'; import { getConfig } from '../../diagram-api/diagramAPI.js'; -import utils from '../../utils.js'; +import utils, { getEdgeId } from '../../utils.js'; import { render } from '../../dagre-wrapper/index.js'; import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js'; import { log } from '../../logger.js'; @@ -210,7 +210,11 @@ export const addEdges = async function (edges, g, diagObj) { cnt++; // Identify Link - const linkIdBase = 'L-' + edge.start + '-' + edge.end; + const linkIdBase = getEdgeId(edge.start, edge.end, { + counter: cnt, + prefix: 'L', + }); + // count the links from+to the same node to give unique id if (linkIdCnt[linkIdBase] === undefined) { linkIdCnt[linkIdBase] = 0; @@ -219,7 +223,8 @@ export const addEdges = async function (edges, g, diagObj) { linkIdCnt[linkIdBase]++; log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]); } - let linkId = linkIdBase + '-' + linkIdCnt[linkIdBase]; + let linkId = `${linkIdBase}_${linkIdCnt[linkIdBase]}`; + log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]); const linkNameStart = 'LS-' + edge.start; const linkNameEnd = 'LE-' + edge.end; diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js index b2e6bcc9c..fdd52a763 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js @@ -6,7 +6,7 @@ import { applyStyle } from 'dagre-d3-es/src/dagre-js/util.js'; import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js'; import { log } from '../../logger.js'; import common, { evaluate, renderKatex } from '../common/common.js'; -import { interpolateToCurve, getStylesFromArray } from '../../utils.js'; +import { interpolateToCurve, getStylesFromArray, getEdgeId } from '../../utils.js'; import { setupGraphViewbox } from '../../setupGraphViewbox.js'; import flowChartShapes from './flowChartShapes.js'; import { replaceIconSubstring } from '../../rendering-util/createText.js'; @@ -175,7 +175,10 @@ export const addEdges = async function (edges, g, diagObj) { cnt++; // Identify Link - const linkId = 'L-' + edge.start + '-' + edge.end; + const linkId = getEdgeId(edge.start, edge.end, { + counter: cnt, + prefix: 'L', + }); const linkNameStart = 'LS-' + edge.start; const linkNameEnd = 'LE-' + edge.end; diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js index 04bdd135e..8ebc948cd 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js @@ -5,7 +5,7 @@ import { render } from '../../dagre-wrapper/index.js'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import common from '../common/common.js'; -import utils from '../../utils.js'; +import utils, { getEdgeId } from '../../utils.js'; import { DEFAULT_DIAGRAM_DIRECTION, @@ -275,7 +275,9 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) => arrowType: '', style: G_EDGE_STYLE, labelStyle: '', - id: 'edge' + graphItemCount + `_${from}_${to}`, + id: getEdgeId(from, to, { + counter: graphItemCount, + }), classes: CSS_EDGE_NOTE_EDGE, arrowheadStyle: G_EDGE_ARROWHEADSTYLE, labelpos: G_EDGE_LABELPOS, @@ -327,7 +329,9 @@ const setupDoc = (g, parentParsedItem, doc, diagramStates, diagramDb, altFlag) = setupNode(g, parentParsedItem, item.state1, diagramStates, diagramDb, altFlag); setupNode(g, parentParsedItem, item.state2, diagramStates, diagramDb, altFlag); const edgeData = { - id: 'edge' + graphItemCount + `_${item.state1.id}_${item.state2.id}`, + id: getEdgeId(item.state1.id, item.state2.id, { + counter: graphItemCount, + }), arrowhead: 'normal', arrowTypeEnd: 'arrow_barb', style: G_EDGE_STYLE,