Merge branch 'neo-new-shapes' into sidv/configReturn

cypress/platform/knsv-pos.html

@@ -127,9 +127,8 @@
 
               `;
       code = `
-        stateDiagram
+        flowchart
-          T --> U
+          T --> V@{ shape: odd }@
-          T --> V
       `;
 
       let positions = {
@@ -176,59 +175,18 @@
         },
       };
 
-      positions = {
+      positions = JSON.parse(
-        nodes: {
+        '{"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}}}'
-          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 },
-            ],
-          },
-        },
-      };
 
       // console.log('positions:', positions);
       const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
-      if (window?.calcIntersections) {
+      if (window?.calcIntersections2) {
-        console.log(
+        const int = await calcIntersections2(
-          'Intersections',
+          { id: 'a', shape: 'rect', x: 100, y: 100, width: 100, height: 100 },
-          calcIntersections('T', undefined, positions.nodes['T'], { x: 200, y: 200 })
+          { id: 'a', shape: 'rect', x: 300, y: 100, width: 100, height: 100 }
         );
+        console.log('Intersections', int);
       } else {
         console.error('calcIntersections not found');
       }

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 };
 };