MC-1733 Reset layout

2025-09-07 17:46:44 +02:00 · 2024-09-10 13:39:13 +02:00
parent 13b96ad6c0
commit d1395d05e2
6 changed files with 430 additions and 44 deletions
--- 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(
--- a/cypress/platform/knsv-reset.html
+++ b/cypress/platform/knsv-reset.html
@@ -0,0 +1,306 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background: #333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+      }
+
+      h1 {
+        color: grey;
+      }
+
+      .mermaid2 {
+        display: none;
+      }
+
+      .mermaid svg {
+        /* font-size: 18px !important; */
+
+        /* background-color: #efefef;
+        background-image: radial-gradient(#fff 51%, transparent 91%),
+          radial-gradient(#fff 51%, transparent 91%);
+        background-size: 20px 20px;
+        background-position:
+          0 0,
+          10px 10px;
+        background-repeat: repeat; */
+      }
+
+      .malware {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+
+      /* tspan {
+              font-size: 6px !important;
+            } */
+    </style>
+  </head>
+
+  <body>
+    <pre id="diagram" class="mermaid"></pre>
+    <pre id="diagram2" class="mermaid"></pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
+      mermaid.registerLayoutLoaders(layouts);
+      mermaid.parseError = function (err, hash) {
+        console.error('Mermaid error: ', err);
+      };
+
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
+      let code = `
+      stateDiagram
+        S:S
+        T:T
+        U:U
+        state Z {
+          state X {
+            Y:Ypsilon
+          }
+        }
+        A
+
+        S --> T: angrepp
+        S --> T: angrepp
+        T --> U
+        Y --> V
+      C
+      D
+      E
+
+              `;
+      code = `
+flowchart TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+
+              `;
+      //       code = `
+      // flowchart BT
+      // A
+      //     subgraph one
+      //     a1 --> a2
+      //     end
+      //     subgraph two
+      //       a3
+      //     end
+
+      //               `;
+      //       code = `
+      // flowchart TB
+      //     subgraph one
+      //     a1-->a2
+      //     end`;
+      // let positions = JSON.parse(
+      //   '{"nodes":{"S":{"x":30.78125,"y":43.5},"Y":{"x":127.94140625,"y":50}},"edges":{}}'
+      // );
+
+      function exctractPositions(svg) {
+        const positions = { nodes: {}, edges: {} };
+
+        // Extract the viewbox paddings - TOSDO: update in collab
+        const viewBox = svg.getAttribute('viewBox').split(' ');
+        const viewBoxX = parseFloat(viewBox[0]);
+        const viewBoxY = parseFloat(viewBox[1]);
+        // console.log('viewBox:', viewBoxX, viewBoxY);
+        svg.querySelectorAll('[data-et="node"]').forEach((node) => {
+          if (node.tagName === 'g') {
+            // console.log('node:', node);
+            const id = node.dataset.id;
+            const bbox = node.getBBox();
+            const transform = node.getAttribute('transform');
+            const x = parseFloat(transform.split(',')[0].split('(')[1]);
+            const y = parseFloat(transform.split(',')[1].split(')')[0]);
+
+            // Get the bounding rectangle of the element
+            const rect = node.getBoundingClientRect();
+
+            // Get the absolute position relative to the document
+            const absoluteX = rect.left + window.pageXOffset + viewBoxX;
+            const absoluteY = rect.top + window.pageYOffset + viewBoxY;
+
+            positions.nodes[id] = {
+              x: absoluteX + rect.width / 2,
+              y: absoluteY + rect.height / 2,
+              width: rect.width,
+              height: rect.height,
+            };
+          }
+        });
+        svg.querySelectorAll('[data-et="cluster"]').forEach((node) => {
+          // console.log('cluster:', node);
+          if (node.tagName === 'g') {
+            const id = node.dataset.id;
+            // console.log('cluster:', node);
+
+            const transform = node.getAttribute('transform');
+            const rect = node.getBoundingClientRect();
+
+            // Get the absolute position relative to the document
+            const absoluteX = rect.left + window.pageXOffset + viewBoxX;
+            const absoluteY = rect.top + window.pageYOffset + viewBoxY;
+
+            positions.nodes[id] = {
+              x: absoluteX + rect.width / 2,
+              y: absoluteY + rect.height / 2,
+              width: rect.width,
+              height: rect.height,
+            };
+          }
+        });
+        svg.querySelectorAll('[data-et="edge"]').forEach((edge) => {
+          // if (node.tagName === 'g') {
+          const path = edge.getBoundingClientRect();
+
+          // Get the absolute position relative to the document
+          const absoluteX = path.left + window.pageXOffset + viewBoxX;
+          const absoluteY = path.top + window.pageYOffset + viewBoxY;
+          console.log(
+            'absoluteX:',
+            absoluteX,
+            'absoluteY:',
+            absoluteY,
+            'offset',
+            window.pageXOffset
+          );
+          const id = edge.dataset.id;
+          const points = JSON.parse(atob(edge.dataset.points));
+          console.log('edge:', points, absoluteX, absoluteY);
+          let minX = 10000;
+          let minY = 10000;
+          points.forEach((point) => {
+            if (point.x < minX) {
+              minX = point.x;
+            }
+            if (point.y < minY) {
+              minY = point.y;
+            }
+          });
+          let dx = absoluteX - minX;
+          let dy = absoluteY - minY;
+          if (dx < 1) {
+            dx = 0;
+          }
+          if (dy < 1) {
+            dy = 0;
+          }
+          positions.edges[id] = {
+            points: points.map((point) => {
+              console.log('point:', point.y, absoluteY);
+              return {
+                x: point.x + dx,
+                y: point.y + dy,
+              };
+            }),
+          };
+          // }
+        });
+        return positions;
+      }
+
+      const mode = 'reset';
+      if (mode === 'reset') {
+        mermaid.initialize({
+          startOnLoad: false,
+          layout: 'elk',
+          fontFamily: 'Kalam',
+          sequence: {
+            actorFontFamily: 'courier',
+            noteFontFamily: 'courier',
+            messageFontFamily: 'courier',
+          },
+          logLevel: 5,
+        });
+        const { svg } = await mermaid.render('the-id-of-the-svg', code);
+        const elem = document.querySelector('#diagram');
+        elem.innerHTML = svg;
+        elem.classList.remove('mermaid');
+        const positions = exctractPositions(elem.firstChild);
+        // console.log('Positions:', JSON.stringify(positions));
+        const { svg: svg2 } = await mermaid.render(
+          'the-id-of-the-svg2',
+          '---\n  config:\n    layout: fixed\n---' + code,
+          undefined,
+          positions
+        );
+        // console.log('svg2', svg2);
+        const elem2 = document.querySelector('#diagram2');
+        elem2.innerHTML = svg2;
+      } else {
+        mermaid.initialize({
+          startOnLoad: false,
+          // look: 'handdrawn',
+          layout: 'fixed',
+          fontFamily: 'Kalam',
+          sequence: {
+            actorFontFamily: 'courier',
+            noteFontFamily: 'courier',
+            messageFontFamily: 'courier',
+          },
+          logLevel: 0,
+        });
+        const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
+
+        // console.log(JSON.stringify(positions));
+        const elem = document.querySelector('#diagram');
+        elem.innerHTML = svg;
+      }
+    </script>
+  </body>
+</html>
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -338,6 +338,39 @@ flowchart TD


 </pre>
+      <pre id="diagram" class="mermaid">
+---
+  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
+
+
+</pre
+      >
      <pre id="diagram" class="mermaid2">
 ---
  title: hello2
@@ -394,7 +427,7 @@ flowchart LR
    </pre
      >

-      <pre id="diagram3" class="mermaid">
+      <pre id="diagram3" class="mermaid2">
 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);
--- 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);
--- 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);
  // });
--- 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)