MC-1733 Reset layout

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

@@ -15,18 +15,18 @@ import { getConfig } from '../../../diagram-api/diagramAPI.js';
 
 let nodeDB = new Map();
 
-const fixInterSections = (points, startNodeId, endNodeId) => {
-  const startNode = nodeDB.get(startNodeId);
-  const endNode = nodeDB.get(endNodeId);
-  // Get the intersections
-  const startIntersection = startNode.intersect(points[1]);
-  const endIntersection = endNode.intersect(points[points.length - 2]);
+// const fixInterSections = (points, startNodeId, endNodeId) => {
+//   const startNode = nodeDB.get(startNodeId);
+//   const endNode = nodeDB.get(endNodeId);
+//   // Get the intersections
+//   const startIntersection = startNode.intersect(points[1]);
+//   const endIntersection = endNode.intersect(points[points.length - 2]);
 
-  // Replace the first and last points with their respective intersections
-  const fixedPoints = [startIntersection, ...points.slice(1, -1), endIntersection];
+//   // Replace the first and last points with their respective intersections
+//   const fixedPoints = [startIntersection, ...points.slice(1, -1), endIntersection];
 
-  return fixedPoints;
-};
+//   return points;
+// };
 
 const calcIntersectionPoint = (node, point) => {
   const intersection = node.intersect(point);
@@ -81,9 +81,9 @@ const calcIntersections = (startNodeId, endNodeId, startNodeSize, endNodeSize) =
 const doRender = async (_elem, data4Layout, siteConfig, positions) => {
   const elem = _elem.insert('g').attr('class', 'root');
   elem.insert('g').attr('class', 'clusters');
+  const nodes = elem.insert('g').attr('class', 'nodes');
   const edgePaths = elem.insert('g').attr('class', 'edgePaths');
   const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
-  const nodes = elem.insert('g').attr('class', 'nodes');
 
   if (!positions?.nodes || !positions?.edges) {
     positions = {};
@@ -234,7 +234,8 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => {
         ],
       };
     }
-    edge.points = fixInterSections(positions.edges[edge.id].points, edge.start, edge.end);
+    // edge.points = fixInterSections(positions.edges[edge.id].points, edge.start, edge.end);
+    edge.points = positions.edges[edge.id].points;
     const paths = insertEdge(edgePaths, edge, {}, data4Layout.type, {}, {}, data4Layout.diagramId);
     paths.updatedPath = paths.originalPath;
     positionEdgeLabel(edge, paths);

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

@@ -376,14 +376,15 @@ const findAdjacentPoint = function (pointA, pointB, distance) {
 const fixCorners = function (lineData) {
   const { cornerPointPositions } = extractCornerPoints(lineData);
   const newLineData = [];
+  const r = 4;
   for (let i = 0; i < lineData.length; i++) {
     if (cornerPointPositions.includes(i)) {
       const prevPoint = lineData[i - 1];
       const nextPoint = lineData[i + 1];
       const cornerPoint = lineData[i];
 
-      const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, 5);
-      const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, 5);
+      const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, r);
+      const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, r);
 
       const xDiff = newNextPoint.x - newPrevPoint.x;
       const yDiff = newNextPoint.y - newPrevPoint.y;
@@ -397,7 +398,7 @@ const fixCorners = function (lineData) {
           Math.abs(nextPoint.x - prevPoint.x),
           Math.abs(nextPoint.y - prevPoint.y)
         );
-        const r = 5;
+
         if (cornerPoint.x === newPrevPoint.x) {
           newCornerPoint = {
             x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a,
@@ -431,6 +432,8 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   const tail = startNode;
   var head = endNode;
 
+  const pointsStr = btoa(JSON.stringify(points));
+
   if (head.intersect && tail.intersect) {
     points = points.slice(1, edge.points.length - 1);
     points.unshift(tail.intersect(points[0]));
@@ -475,13 +478,16 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
     lineData.splice(-1, 0, midPoint);
   }
   let curve = curveBasis;
+  // let curve = curveLinear;
+  // let curve = curveCardinal;
   if (edge.curve) {
     curve = edge.curve;
   }
 
   const { x, y } = getLineFunctionsWithOffset(edge);
   const lineFunction = line().x(x).y(y).curve(curve);
-
+  // const pointsStr = btoa(JSON.stringify(lineData));
+  // console.log('Line data', lineData);
   let strokeClasses;
   switch (edge.thickness) {
     case 'normal':
@@ -544,6 +550,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   svgPath.attr('data-edge', true);
   svgPath.attr('data-et', 'edge');
   svgPath.attr('data-id', edge.id);
+  svgPath.attr('data-points', pointsStr);
   // DEBUG code, adds a red circle at each edge coordinate
   // cornerPoints.forEach((point) => {
   //   elem
@@ -557,9 +564,9 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   // lineData.forEach((point) => {
   //   elem
   //     .append('circle')
-  //     .style('stroke', 'blue')
-  //     .style('fill', 'blue')
-  //     .attr('r', 3)
+  //     .style('stroke', 'red')
+  //     .style('fill', 'red')
+  //     .attr('r', 1)
   //     .attr('cx', point.x)
   //     .attr('cy', point.y);
   // });

packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts

@@ -53,7 +53,6 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
       .attr('style', nodeStyles)
       .attr('rx', rx)
       .attr('data-id', node.id)
-      .attr('data-et', 'node')
       .attr('ry', ry)
       .attr('x', x)
       .attr('y', y)