diff --git a/cypress/platform/knsv-pos.html b/cypress/platform/knsv-pos.html
index 5785b2bd7..e3789f8c0 100644
--- a/cypress/platform/knsv-pos.html
+++ b/cypress/platform/knsv-pos.html
@@ -102,9 +102,9 @@
};
let code = `
stateDiagram
- S:Stillas
- T:Tiger
- U:Ulv
+ S:S
+ T:T
+ U:U
state Z {
state X {
Y:Ypsilon
@@ -115,13 +115,21 @@
S --> T: angrepp
T --> U: Apa
T --> V: Varg
+
+ B
+ C
+ D
+ `;
+ code = `
+ stateDiagram
+ A --> B: Hello
`;
- const positions = {
+ let positions = {
nodes: {
S: { x: 0, y: 0 },
T: { x: 100, y: 100, width: 100, height: 100 },
- U: { x: 200, y: 200 },
+ U: { x: 250, y: 160 },
V: { x: 300, y: 120 },
Z: { x: 300, y: 10, width: 160, height: 100 },
X: { x: 300, y: 20, width: 80, height: 60 },
@@ -137,9 +145,17 @@
],
},
edge1: {
+ // points: [
+ // { x: 100, y: 100 },
+ // { x: 200, y: 200 },
+ // ],
points: [
{ x: 100, y: 100 },
- { x: 200, y: 200 },
+ { x: 150, y: 120 },
+ { x: 190.19453144073486, y: 120 },
+ { x: 190.19453144073486, y: 152.1556251525879 },
+ { x: 230.38906288146973, y: 152.1556251525879 },
+ { x: 250, y: 160 },
],
},
edge2: {
@@ -153,13 +169,18 @@
},
};
+ positions = {
+ nodes: {},
+ edges: {},
+ };
+
const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
- if (window?.calcIntersections) {
- console.log('Intersections', window.calcIntersections(positions, 'S', 'T'));
- } else {
- console.error('calcIntersections not found');
- }
- // console.log(svg);
+ // if (window?.calcIntersections) {
+ // console.log('Intersections', window.calcIntersections(positions, 'T', 'U'));
+ // } else {
+ // console.error('calcIntersections not found');
+ // }
+ console.log(JSON.stringify(positions));
const elem = document.querySelector('#diagram');
elem.innerHTML = svg;
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 623f7bc7b..eca33f76e 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
{
"name": "@mermaid-chart/mermaid",
- "version": "11.0.0-b.67",
+ "version": "11.0.0-b.72",
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module",
"module": "./dist/mermaid.core.mjs",
diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
index 269c37d01..f2d84c9ba 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
@@ -45,9 +45,21 @@ const calcIntersectionPoint = (node, point) => {
return { x: intersection.x, y: intersection.y, pos };
};
-const calcIntersections = (points, startNodeId, endNodeId) => {
+const calcIntersections = (points, startNodeId, endNodeId, startNodeSize, endNodeSize) => {
const startNode = nodeDB.get(startNodeId);
+ if (startNodeSize) {
+ startNode.x = startNodeSize.width;
+ startNode.y = startNodeSize.width;
+ startNode.width = startNodeSize.width;
+ startNode.height = startNodeSize.height;
+ }
const endNode = nodeDB.get(endNodeId);
+ if (endNodeSize) {
+ endNode.x = endNodeSize.width;
+ endNode.y = endNodeSize.width;
+ endNode.width = endNodeSize.width;
+ endNode.height = endNodeSize.height;
+ }
// Get the intersections
const startIntersection = calcIntersectionPoint(startNode, { x: endNode.x, y: endNode.y });
const endIntersection = calcIntersectionPoint(endNode, { x: startNode.x, y: startNode.y });
@@ -62,6 +74,15 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => {
const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
const nodes = elem.insert('g').attr('class', 'nodes');
+ if (!positions?.nodes || !positions?.edges) {
+ positions = {};
+ if (!positions?.nodes) {
+ positions.nodes = {};
+ }
+ if (!positions?.edges) {
+ positions.edges = {};
+ }
+ }
// Add positions for nodes that lack them
let maxY = 0;
data4Layout.nodes.map(function (node) {