From d1395d05e2e02b3847e496226d9e09b3ea34e028 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 10 Sep 2024 13:39:13 +0200 Subject: [PATCH] MC-1733 Reset layout --- cypress/platform/knsv-pos.html | 76 +++-- cypress/platform/knsv-reset.html | 306 ++++++++++++++++++ cypress/platform/knsv2.html | 45 ++- .../layout-algorithms/fixed/index.js | 25 +- .../rendering-elements/edges.js | 21 +- .../rendering-elements/shapes/drawRect.ts | 1 - 6 files changed, 430 insertions(+), 44 deletions(-) create mode 100644 cypress/platform/knsv-reset.html diff --git a/cypress/platform/knsv-pos.html b/cypress/platform/knsv-pos.html index a39b2fd2d..34499a958 100644 --- a/cypress/platform/knsv-pos.html +++ b/cypress/platform/knsv-pos.html @@ -119,30 +119,24 @@ A S --> T: angrepp - T --> U: Apa - T --> V: Varg + T --> U + T --> V C D E `; - // code = ` - // stateDiagram - // A0 - // state subbe { - // subState - // B - // } - // C - // D - // E - // `; + code = ` + stateDiagram + T --> U + T --> V + `; let positions = { nodes: { S: { x: 0, y: 0 }, T: { x: 100, y: 100, width: 100, height: 100 }, - U: { x: 250, y: 160 }, + U: { x: 250, y: 260 }, V: { x: 300, y: 120 }, Z: { x: 300, y: 10, width: 160, height: 100 }, X: { x: 300, y: 20, width: 80, height: 60 }, @@ -167,7 +161,7 @@ { x: 150, y: 120 }, { x: 190.19453144073486, y: 120 }, { x: 190.19453144073486, y: 152.1556251525879 }, - { x: 230.38906288146973, y: 152.1556251525879 }, + { x: 250, y: 152.1556251525879 }, { x: 250, y: 160 }, ], }, @@ -182,11 +176,55 @@ }, }; - // positions = { - // nodes: {}, - // edges: {}, - // }; + 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: 37.61160659790039, y: 24 }, + { 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) { console.log( diff --git a/cypress/platform/knsv-reset.html b/cypress/platform/knsv-reset.html new file mode 100644 index 000000000..a9e653da0 --- /dev/null +++ b/cypress/platform/knsv-reset.html @@ -0,0 +1,306 @@ + + + + + + + + + + + + + + + + + + 

+    

+
+    
+  
+
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index a31e90611..1cd3282da 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -338,6 +338,39 @@ flowchart TD
 
 
 
+      
+---
+  title: hello2
+  config:
+    look: neo
+    layout: dagre
+    elk:
+        nodePlacementStrategy: BRANDES_KOEPF
+---
+flowchart
+        S
+        T
+        U
+        subgraph Z
+          subgraph X
+            Y[Ypsilon]
+          end
+        end
+        subgraph Q
+          Q1[Quintus]
+        end
+        A
+
+        S -- angrepp --> T
+        T -- Apa --> U
+        T -- Varge --> V
+      C
+      D
+      E
+
+
+

       
 ---
   title: hello2
@@ -394,7 +427,7 @@ flowchart LR
     

 
-      
+      
 flowchart TB
     c1-->a2
     subgraph one
@@ -432,7 +465,10 @@ flowchart TB
       window.callback = function () {
         alert('A callback was triggered');
       };
-      mermaid.initialize({
+      function callback() {
+        alert('It worked');
+      }
+      await mermaid.initialize({
         // theme: 'base',
         // handDrawnSeed: 12,
         // look: 'handDrawn',
@@ -455,10 +491,9 @@ flowchart TB
         fontSize: 12,
         logLevel: 3,
         securityLevel: 'loose',
+        callback,
       });
-      function callback() {
-        alert('It worked');
-      }
+
       mermaid.parseError = function (err, hash) {
         console.error('In parse error:');
         console.error(err);
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 451583d85..8c059fcfc 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
+++ b/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);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index 2b00e7486..ba7e596bd 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/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);
   // });
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
index b1ca2bca8..71eb93e25 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
+++ b/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)