Updated intersection calculations , Mermaid version 11.0.0-b.73

cypress/platform/knsv-pos.html

@@ -102,9 +102,9 @@
       };
       let code = `
       stateDiagram
-        S:Stillas
+        S:S
-        T:Tiger
+        T:T
-        U:Ulv
+        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) {
+      // if (window?.calcIntersections) {
-        console.log('Intersections', window.calcIntersections(positions, 'S', 'T'));
+      //   console.log('Intersections', window.calcIntersections(positions, 'T', 'U'));
-      } else {
+      // } else {
-        console.error('calcIntersections not found');
+      //   console.error('calcIntersections not found');
-      }
+      // }
-      // console.log(svg);
+      console.log(JSON.stringify(positions));
       const elem = document.querySelector('#diagram');
       elem.innerHTML = svg;
     </script>

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",

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) {