Merge in latest

cypress/platform/knsv2.html

@@ -91,8 +91,8 @@
     <pre id="diagram4" class="mermaid">
 ---
 config:
-  look: handdrawn
+  look: neo
-
+  layout: elk
 ---
 flowchart LR
     n1["n1"] --- C

packages/mermaid-layout-elk/src/render.ts

@@ -883,7 +883,6 @@ export const render = async (
 
   // Iterate through all nodes and add the top level nodes to the graph
   const nodes = data4Layout.nodes;
-  const count = 3;
 
   nodes.forEach((n: { id: string | number }) => {
     const node = nodeDb[n.id];
@@ -920,29 +919,6 @@ export const render = async (
       delete node.width;
       delete node.height;
     }
-    if (node.id === 'A' || node.id === 'E') {
-      node.layoutOptions = {
-        ...node.layoutOptions,
-        'partitioning.partition': 1,
-      };
-      node.x = 0;
-    }
-    if (node.id === 'B') {
-      node.layoutOptions = {
-        ...node.layoutOptions,
-        'partitioning.partition': 2,
-      };
-      node.x = 300;
-    }
-    if (node.id === 'C' || node.id === 'D' || node.id === 'F') {
-      node.layoutOptions = {
-        ...node.layoutOptions,
-        'partitioning.partition': 3,
-      };
-      node.x = 800;
-    }
-    // count = count - 1;
-    // console.log('APA13 node partition node id=', node.id, 'count = ', count);
   });
   elkGraph.edges.forEach((edge: any) => {
     const source = edge.sources[0];
@@ -955,10 +931,7 @@ export const render = async (
       setIncludeChildrenPolicy(target, ancestorId);
     }
   });
-  const copy = JSON.parse(JSON.stringify({ ...elkGraph }));
-  console.log('APA13 layout before', JSON.stringify({ ...elkGraph }));
   const g = await elk.layout(elkGraph);
-  console.log('APA13 layout', JSON.parse(JSON.stringify(g)));
   // debugger;
   await drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
   g.edges?.map(
@@ -1045,7 +1018,10 @@ export const render = async (
             startNode.innerHTML
           );
         }
-        if (startNode.calcIntersect) {
+        if (startNode.intersect) {
+          // Remove the first point of the edge points
+          edge.points.shift();
+
           // console.log(
           //   'APA13 calculating start intersection start node',
           //   startNode.id,
@@ -1058,7 +1034,7 @@ export const render = async (
           //   '\nPos',
           //   edge.points[0]
           // );
-          const intersection = startNode.calcIntersect(
+          const intersection2 = startNode.calcIntersect(
             {
               x: startNode.offset.posX + startNode.width / 2,
               y: startNode.offset.posY + startNode.height / 2,
@@ -1067,14 +1043,16 @@ export const render = async (
             },
             edge.points[0]
           );
-          // const intersection = startNode.intersect(edge.points[0]);
+          const intersection = startNode.intersect(edge.points[0]);
 
-          if (distance(intersection, edge.points[0]) > epsilon) {
+          if (distance(intersection2, edge.points[0]) > epsilon) {
-            edge.points.unshift(intersection);
+            edge.points.unshift(intersection2);
           }
         }
-        if (endNode.calcIntersect) {
+        if (endNode.intersect) {
-          const intersection = endNode.calcIntersect(
+          // Remove the last point of the edge points
+          edge.points.pop();
+          const intersection2 = endNode.calcIntersect(
             {
               x: endNode.offset.posX + endNode.width / 2,
               y: endNode.offset.posY + endNode.height / 2,
@@ -1084,7 +1062,7 @@ export const render = async (
             edge.points[edge.points.length - 1]
           );
           console.log('APA13 intersection2', endNode);
-          const intersection2 = endNode.intersect(edge.points[edge.points.length - 1]);
+          const intersection = endNode.intersect(edge.points[edge.points.length - 1]);
           // if (edge.id === 'L_n4_C_10_0') {
           // console.log('APA14 lineData', edge.points, 'intersection:', intersection);
           // console.log(
@@ -1092,16 +1070,14 @@ export const render = async (
           //   distance(intersection, edge.points[edge.points.length - 1])
           // );
           // }
+          console.log('APA13 intersection2.2', intersection, intersection2);
 
-          if (distance(intersection, edge.points[edge.points.length - 1]) > epsilon) {
+          if (distance(intersection2, edge.points[edge.points.length - 1]) > epsilon) {
             // console.log('APA13! distance ok\nintersection:', intersection);
-            edge.points.push(intersection);
+            edge.points.push(intersection2);
             // console.log('APA13! distance ok\npoints:', edge.points);
           }
         }
-        // Add coordinates of the start node and end node to the edge points as insert edge will remove those
-        edge.points.unshift({ x: endNode.x, y: endNode.y });
-        edge.points.push({ x: endNode.x, y: endNode.y });
 
         const paths = insertEdge(
           edgesEl,

packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js

@@ -305,6 +305,7 @@ export const render = async (data4Layout, svg) => {
 
   log.debug('Edges:', data4Layout.edges);
   data4Layout.edges.forEach((edge) => {
+    edge.trim = true;
     // Handle self-loops
     if (edge.start === edge.end) {
       const nodeId = edge.start;

packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js

@@ -380,18 +380,20 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => {
         };
       }
     }
-
+    // ###############################################################
+    // Edge trimming - this could affect Collab!!!
+    // ###############################################################
+    // we can remove the edge trimming if we want
+    // if we don't set trim to true this will not happen and we dont need to add the start and end positions
+    // to the edge
+    edge.trim = true;
     edge.points = positions.edges[edge.id].points;
+
     const paths = insertEdge(edgePaths, edge, {}, data4Layout.type, {}, {}, data4Layout.diagramId);
     paths.updatedPath = paths.originalPath;
     positionEdgeLabel(edge, paths);
   }
-  if (window) {
+
-    // TODO: Remove this now that we can do:
-    // import { calcIntersections, calcNodeIntersections } from '@mermaid-chart/mermaid';
-    window.calcIntersections = calcIntersections;
-    window.calcNodeIntersections = calcNodeIntersections;
-  }
   return { elem, diff: 0 };
 };
 /**

packages/mermaid/src/rendering-util/rendering-elements/edges.js

@@ -370,8 +370,8 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
     }
     edgeClassStyles.push(edge.cssCompiledStyles[key]);
   }
-
+  console.log('APA13 edge.trim', edge.trim);
-  if (head.intersect && tail.intersect) {
+  if (head.intersect && tail.intersect && edge.trim) {
     points = points.slice(1, edge.points.length - 1);
     points.unshift(tail.intersect(points[0]));
     log.debug(
@@ -460,8 +460,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   let svgPath;
   let linePath =
     edge.curve === 'rounded'
-      ? // ? generateRoundedPath(applyMarkerOffsetsToPoints(lineData, edge), 5)
+      ? generateRoundedPath(applyMarkerOffsetsToPoints(lineData, edge), 5)
-        generateRoundedPath(lineData, 5)
       : lineFunction(lineData);
   const edgeStyles = Array.isArray(edge.style) ? edge.style : [edge.style];
   let animatedEdge = false;