From ff3418c520f72986d31d0c73c4205953020cb66b Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Mon, 16 Sep 2024 15:38:05 +0200 Subject: [PATCH] Adding intersection calculation for new nodes --- cypress/platform/knsv-pos.html | 62 +++---------------- .../layout-algorithms/fixed/index.js | 24 +++++-- 2 files changed, 30 insertions(+), 56 deletions(-) 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 }; };