From 4266b2e4ca84a00f66b381fbdb62e6a6859dfb20 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 31 May 2024 11:27:12 +0200 Subject: [PATCH 1/3] #5237 Bugfixes --- .../mermaid/src/diagrams/state/dataFetcher.js | 35 ++++++++++++--- .../mermaid/src/diagrams/state/stateDb.js | 4 +- .../rendering-elements/edges.js | 45 +++++++++---------- .../rendering-elements/nodes.js | 4 +- .../rendering-elements/shapes/roundedRect.ts | 1 - 5 files changed, 52 insertions(+), 37 deletions(-) diff --git a/packages/mermaid/src/diagrams/state/dataFetcher.js b/packages/mermaid/src/diagrams/state/dataFetcher.js index d69c64d7a..b8302cc22 100644 --- a/packages/mermaid/src/diagrams/state/dataFetcher.js +++ b/packages/mermaid/src/diagrams/state/dataFetcher.js @@ -54,16 +54,16 @@ export function stateDomId(itemId = '', counter = 0, type = '', typeSpacer = DOM return `${DOMID_STATE}-${itemId}${typeStr}-${counter}`; } -const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, useRough) => { +const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, useRough, look) => { // graphItemCount = 0; log.trace('items', doc); doc.forEach((item) => { switch (item.stmt) { case STMT_STATE: - dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough); + dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough, look); break; case DEFAULT_STATE_TYPE: - dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough); + dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough, look); break; case STMT_RELATION: { @@ -74,7 +74,8 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u nodes, edges, altFlag, - useRough + useRough, + look ); dataFetcher( parentParsedItem, @@ -83,7 +84,8 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u nodes, edges, altFlag, - useRough + useRough, + look ); const edgeData = { id: 'edge' + graphItemCount, @@ -100,6 +102,7 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u thickness: G_EDGE_THICKNESS, classes: CSS_EDGE, useRough, + look, }; edges.push(edgeData); //g.setEdge(item.state1.id, item.state2.id, edgeData, graphItemCount); @@ -210,7 +213,16 @@ function getClassesFromDbInfo(dbInfoItem) { } } } -export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, useRough) => { +export const dataFetcher = ( + parent, + parsedItem, + diagramStates, + nodes, + edges, + altFlag, + useRough, + look +) => { const itemId = parsedItem.id; const classStr = getClassesFromDbInfo(diagramStates[itemId]); @@ -301,6 +313,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt rx: 10, ry: 10, useRough, + look, }; // Clear the label for dividers who have no description @@ -330,6 +343,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt isGroup: newNode.type === 'group', padding: 0, //getConfig().flowchart.padding useRough, + look, }; const groupData = { labelStyle: '', @@ -343,6 +357,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt isGroup: true, padding: 16, //getConfig().flowchart.padding useRough, + look, }; graphItemCount++; @@ -382,6 +397,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt labelType: G_EDGE_LABELTYPE, thickness: G_EDGE_THICKNESS, useRough, + look, }); } else { insertOrUpdateNode(nodes, nodeData); @@ -389,6 +405,11 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt } if (parsedItem.doc) { log.trace('Adding nodes children '); - setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, useRough); + setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, useRough, look); } }; + +export const reset = () => { + nodeDb = {}; + graphItemCount = 0; +}; diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index 7193820c0..c4d24f002 100644 --- a/packages/mermaid/src/diagrams/state/stateDb.js +++ b/packages/mermaid/src/diagrams/state/stateDb.js @@ -11,7 +11,7 @@ import { setDiagramTitle, getDiagramTitle, } from '../common/commonDb.js'; -import { dataFetcher } from './dataFetcher.js'; +import { dataFetcher, reset as resetDataFetching } from './dataFetcher.js'; import { DEFAULT_DIAGRAM_DIRECTION, @@ -583,6 +583,8 @@ export const getData = () => { const diagramStates = getStates(); const config = getConfig(); const useRough = config.look === 'handdrawn'; + const look = config.look; + resetDataFetching(); dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough); console.log('State Nodes XDX:', nodes); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index 1450f5bab..90ba9ff71 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -436,38 +436,34 @@ const fixCorners = function (lineData) { // Find a new point on the line point 5 points back and push it to the new array const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, 5); const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, 5); + newLineData.push(newPrevPoint); const xDiff = newNextPoint.x - newPrevPoint.x; const yDiff = newNextPoint.y - newPrevPoint.y; - newLineData.push(newPrevPoint); const a = Math.sqrt(2) * 2; let newCornerPoint = { x: cornerPoint.x, y: cornerPoint.y }; - if (Math.abs(nextPoint.x - prevPoint.x) > 10 && Math.abs(nextPoint.y - prevPoint.y) >= 10) { - console.log( - 'Corner point fixing', - Math.abs(nextPoint.x - prevPoint.x), - Math.abs(nextPoint.y - prevPoint.y) - ); - const r = 5; - if (cornerPoint.x === newPrevPoint.x) { - newCornerPoint = { - x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a, - y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a, - }; - } else { - newCornerPoint = { - x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a, - y: yDiff < 0 ? newPrevPoint.y - r + a : newPrevPoint.y + r - a, - }; - } + if (cornerPoint.x === newPrevPoint.x) { + // if (yDiff > 0) { + newCornerPoint = { + x: xDiff < 0 ? newPrevPoint.x - 5 + a : newPrevPoint.x + 5 - a, + y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a, + }; + // } else { + // newCornerPoint = { x: newPrevPoint.x - a, y: newPrevPoint.y + a }; + // } } else { - console.log( - 'Corner point skipping fixing', - Math.abs(nextPoint.x - prevPoint.x), - Math.abs(nextPoint.y - prevPoint.y) - ); + // if (yDiff > 0) { + // newCornerPoint = { x: newPrevPoint.x - 5 + a, y: newPrevPoint.y + a }; + // } else { + newCornerPoint = { + x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a, + y: yDiff < 0 ? newPrevPoint.y - 5 + a : newPrevPoint.y + 5 - a, + }; + // } } + + // newLineData.push(cornerPoint); newLineData.push(newCornerPoint, newNextPoint); } else { newLineData.push(lineData[i]); @@ -475,7 +471,6 @@ const fixCorners = function (lineData) { } return newLineData; }; - /** * Given a line, this function will return a new line where the corners are rounded. * @param lineData diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js index d03fd257a..6dcec7266 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js @@ -36,6 +36,7 @@ const shapes = { choice, note, roundedRect, + rectWithTitle: roundedRect, squareRect, stadium, subroutine, @@ -57,9 +58,6 @@ export const insertNode = async (elem, node, dir) => { let newEl; let el; - if (node) { - console.log('BLA: rect node', JSON.stringify(node)); - } //special check for rect shape (with or without rounded corners) if (node.shape === 'rect') { if (node.rx && node.ry) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts index aa254c000..636116132 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts @@ -8,6 +8,5 @@ export const roundedRect = async (parent: SVGAElement, node: Node) => { classes: '', } as RectOptions; - console.log('roundedRect XDX'); return drawRect(parent, node, options); }; From 2c9c3b457126915e9e18c7866e33ab6fb5e123ec Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 31 May 2024 11:55:26 +0200 Subject: [PATCH 2/3] #5237 Elk curve fix --- packages/mermaid-layout-elk/src/render.ts | 4 +- .../rendering-elements/edges.js | 44 ++++++++++--------- 2 files changed, 26 insertions(+), 22 deletions(-) diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts index 9e7fc3941..61221298c 100644 --- a/packages/mermaid-layout-elk/src/render.ts +++ b/packages/mermaid-layout-elk/src/render.ts @@ -468,8 +468,8 @@ export const render = async (data4Layout, svg, element, algorithm) => { 'elk.layered.mergeEdges': data4Layout.config.mergeEdges, 'elk.direction': 'DOWN', 'spacing.baseValue': 30, - 'spacing.nodeNode': 40, - 'spacing.nodeNodeBetweenLayers': 45, + // 'spacing.nodeNode': 40, + // 'spacing.nodeNodeBetweenLayers': 45, // 'spacing.edgeNode': 40, // 'spacing.edgeNodeBetweenLayers': 30, // 'spacing.edgeEdge': 30, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index 90ba9ff71..1406c2370 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -436,34 +436,38 @@ const fixCorners = function (lineData) { // Find a new point on the line point 5 points back and push it to the new array const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, 5); const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, 5); - newLineData.push(newPrevPoint); const xDiff = newNextPoint.x - newPrevPoint.x; const yDiff = newNextPoint.y - newPrevPoint.y; + newLineData.push(newPrevPoint); const a = Math.sqrt(2) * 2; let newCornerPoint = { x: cornerPoint.x, y: cornerPoint.y }; - if (cornerPoint.x === newPrevPoint.x) { - // if (yDiff > 0) { - newCornerPoint = { - x: xDiff < 0 ? newPrevPoint.x - 5 + a : newPrevPoint.x + 5 - a, - y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a, - }; - // } else { - // newCornerPoint = { x: newPrevPoint.x - a, y: newPrevPoint.y + a }; - // } + if (Math.abs(nextPoint.x - prevPoint.x) > 10 && Math.abs(nextPoint.y - prevPoint.y) >= 10) { + console.log( + 'Corner point fixing', + Math.abs(nextPoint.x - prevPoint.x), + Math.abs(nextPoint.y - prevPoint.y) + ); + const r = 3; + if (cornerPoint.x === newPrevPoint.x) { + newCornerPoint = { + x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a, + y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a, + }; + } else { + newCornerPoint = { + x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a, + y: yDiff < 0 ? newPrevPoint.y - r + a : newPrevPoint.y + r - a, + }; + } } else { - // if (yDiff > 0) { - // newCornerPoint = { x: newPrevPoint.x - 5 + a, y: newPrevPoint.y + a }; - // } else { - newCornerPoint = { - x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a, - y: yDiff < 0 ? newPrevPoint.y - 5 + a : newPrevPoint.y + 5 - a, - }; - // } + console.log( + 'Corner point skipping fixing', + Math.abs(nextPoint.x - prevPoint.x), + Math.abs(nextPoint.y - prevPoint.y) + ); } - - // newLineData.push(cornerPoint); newLineData.push(newCornerPoint, newNextPoint); } else { newLineData.push(lineData[i]); From cca1c417497ecf87212bffeb2ae8b6b628123ae3 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 31 May 2024 12:04:38 +0200 Subject: [PATCH 3/3] #5237 Adding look to data4Layout generation and radius fix --- packages/mermaid/src/diagrams/state/stateDb.js | 2 +- packages/mermaid/src/rendering-util/rendering-elements/edges.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index c4d24f002..b01f608ea 100644 --- a/packages/mermaid/src/diagrams/state/stateDb.js +++ b/packages/mermaid/src/diagrams/state/stateDb.js @@ -585,7 +585,7 @@ export const getData = () => { const useRough = config.look === 'handdrawn'; const look = config.look; resetDataFetching(); - dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough); + dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough, look); console.log('State Nodes XDX:', nodes); return { nodes, edges, other: {}, config }; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index 1406c2370..8c07173a8 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -449,7 +449,7 @@ const fixCorners = function (lineData) { Math.abs(nextPoint.x - prevPoint.x), Math.abs(nextPoint.y - prevPoint.y) ); - const r = 3; + const r = 5; if (cornerPoint.x === newPrevPoint.x) { newCornerPoint = { x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a,