diff --git a/cypress/platform/knsv-pos.html b/cypress/platform/knsv-pos.html
index 8f2b78652..4363ab9b2 100644
--- a/cypress/platform/knsv-pos.html
+++ b/cypress/platform/knsv-pos.html
@@ -127,9 +127,8 @@
`;
code = `
- stateDiagram
- T --> U
- T --> V
+ flowchart
+ T --> V@{ shape: odd }@
`;
let positions = {
@@ -176,59 +175,18 @@
},
};
- positions = {
- nodes: {
- T: {
- x: 37.964874267578125,
- y: 24.99908971786499,
- width: 38.10995101928711,
- height: 25.998868942260742,
- },
- U: {
- x: 31.61321258544922,
- y: 85.99644947052002,
- width: 39.22151184082031,
- height: 25.998876571655273,
- },
- V: {
- x: 105.83320808410645,
- y: 85.99644947052002,
- width: 39.22149658203125,
- height: 25.998876571655273,
- },
- },
- edges: {
- edge0: {
- points: [
- // { x: 37.61160659790039, y: 24 },
- { x: 31.61160659790039, y: 38 },
- { x: 31.61160659790039, y: 55.5 },
- { x: 31.61160659790039, y: 73 },
- ],
- },
- edge1: {
- points: [
- { x: 44.31547546386719, y: 38 },
- { x: 44.31547546386719, y: 51.5 },
- { x: 45.487048339120996, y: 54.32842712474619 },
- { x: 48.31547546386719, y: 55.5 },
- { x: 101.83481979370117, y: 55.5 },
- { x: 104.66324691844736, y: 56.67157287525381 },
- { x: 105.83481979370117, y: 59.5 },
- { x: 105.83481979370117, y: 66.25 },
- { x: 105.83481979370117, y: 73 },
- ],
- },
- },
- };
+ positions = JSON.parse(
+ '{"edges":{"edge0":{"points":[{"x":0,"y":20},{"x":37.5,"y":20},{"x":75,"y":20}]},"edge1":{"points":[{"x":75,"y":20},{"x":112.5,"y":20},{"x":150,"y":20}]},"edge2":{"points":[{"x":75,"y":20},{"x":150,"y":20},{"x":225,"y":20}]},"edge3":{"points":[{"x":225,"y":20},{"x":150,"y":20},{"x":75,"y":20}]},"edge4":{"points":[{"x":225,"y":20},{"x":262.5,"y":20},{"x":300,"y":20}]},"edge5":{"points":[{"x":300,"y":20},{"x":225,"y":20},{"x":150,"y":20}]},"L_T_U_0":{"end":"U","start":"T","points":[{"x":104.38350598538668,"y":35.05980396270752},{"x":104.38350598538668,"y":66.67100191116333},{"x":28.860682588672134,"y":66.67100191116333},{"x":28.860682588672134,"y":98.28219985961914}]},"L_T_V_1":{"end":"V","start":"T","points":[{"x":164.31731414794922,"y":25.08638346762546},{"x":219.38338541984558,"y":25.08638346762546},{"x":219.38338541984558,"y":66.82066899427501},{"x":274.44945669174194,"y":66.82066899427501}]},"L_A_AV_0":{"end":"AV","start":"A","points":[{"x":99.65645053250867,"y":142.4039154052734},{"x":99.65645053250867,"y":159.3222198486328},{"x":105.4496819748155,"y":159.3222198486328},{"x":105.4496819748155,"y":176.2405242919922}]},"L_A_n1_1":{"end":"n1","start":"A","points":[{"x":101.4458357684995,"y":97.09012603759766},{"x":101.4458357684995,"y":122.0281257629395},{"x":150.3651923903006,"y":122.0281257629395},{"x":150.3651923903006,"y":146.9661254882812}]},"L_T_V_0":{"points":[{"x":64.84303604535387,"y":9.04546070098877},{"x":64.84303604535387,"y":53.79048013687114},{"x":111.32122039794909,"y":53.79048013687114},{"x":111.32122039794909,"y":98.53549957275351}],"start":"T","end":"V"},"L_T_n4_1":{"points":[{"x":53.70423344777099,"y":9.04546070098877},{"x":53.70423344777099,"y":219.2719521522522},{"x":62.78969536879233,"y":219.2719521522522},{"x":62.78969536879233,"y":429.4984436035156}],"start":"T","end":"n4"}},"nodes":{"A":{"x":95.37615203857422,"y":117.4039154052734,"width":86.6796875,"height":50},"T":{"x":53.21803665161133,"y":-13.45453929901123,"width":66.11250305175781,"height":45},"U":{"x":1.983121395111084,"y":120.7822036743164,"width":67.22499990463257,"height":45.00000762939453},"V":{"x":110.82122039794922,"y":98.0354995727539,"width":0,"height":0},"AV":{"x":109.72998046875,"y":201.2405242919922,"width":78.1640625,"height":50},"n1":{"x":351.1719665527344,"y":308.9921875,"width":126.15625,"height":60},"n2":{"x":-117.0737686157227,"y":-76.22648620605469,"width":110,"height":60},"n3":{"x":-103.8790435791016,"y":382.8584594726562,"width":110,"height":60},"Crash":{"x":300,"y":20},"Still":{"x":75,"y":20},"Moving":{"x":225,"y":20},"Stilla":{"x":0,"y":40},"root_end":{"x":150,"y":20},"root_start":{"x":0,"y":20},"n4":{"x":63.437957763671875,"y":459.4984436035156,"height":60,"width":110}}}'
+ );
// console.log('positions:', positions);
const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
- if (window?.calcIntersections) {
- console.log(
- 'Intersections',
- calcIntersections('T', undefined, positions.nodes['T'], { x: 200, y: 200 })
+ if (window?.calcIntersections2) {
+ const int = await calcIntersections2(
+ { id: 'a', shape: 'rect', x: 100, y: 100, width: 100, height: 100 },
+ { id: 'a', shape: 'rect', x: 300, y: 100, width: 100, height: 100 }
);
+ console.log('Intersections', int);
} else {
console.error('calcIntersections not found');
}
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 75c5b9db6..38e6c0598 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
@@ -11,6 +11,7 @@ import {
insertEdge,
clear as clearEdges,
} from '../../rendering-elements/edges.js';
+import { select } from 'd3';
import { getConfig } from '../../../diagram-api/diagramAPI.js';
let nodeDB = new Map();
@@ -53,11 +54,27 @@ const calcIntersectionPoint = (node, point) => {
pos = 'l'; // Left
}
- // console.log('angleDeg', angleDeg, 'pos', pos, criticalAngleDeg);
-
return { x: intersection.x, y: intersection.y, pos };
};
+const calcNodeIntersections = async (_node1, _node2) => {
+ // CReate new nodes in order not to require a rendered diagram
+ const fakeParent = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+ const parent = select(fakeParent);
+ const node1 = Object.assign({}, _node1);
+ const node2 = Object.assign({}, _node2);
+ await insertNode(parent, node1, 'TB');
+ await insertNode(parent, node2, 'TB');
+ // Insert node will not give any widths as the element is not in the DOM
+ node1.width = _node1.width || 50;
+ node1.height = _node1.height || 50;
+ node2.width = _node2.width || 50;
+ node2.height = _node2.height || 50;
+
+ const startIntersection = calcIntersectionPoint(node1, { x: node2.x, y: node2.y });
+ const endIntersection = calcIntersectionPoint(node2, { x: node1.x, y: node1.y });
+ return [startIntersection, endIntersection];
+};
const calcIntersections = (startNodeId, endNodeId, startNodeSize, endNodeSize) => {
const startNode = nodeDB.get(startNodeId);
if (startNodeSize) {
@@ -234,8 +251,6 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => {
// Insert the edges and position the edge labels
for (const edge of data4Layout.edges) {
- // console.info('Edge : ' + JSON.stringify(edge), edge);
-
if (!positions.edges[edge.id]) {
const startNode = positions.nodes[edge.start];
const endNode = positions.nodes[edge.end];
@@ -255,6 +270,7 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => {
}
if (window) {
window.calcIntersections = calcIntersections;
+ window.calcNodeIntersections = calcNodeIntersections;
}
return { elem, diff: 0 };
};