From c3b78a37a6d511b68298f55d2528e55a57c76126 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 29 Jan 2025 16:54:44 +0100
Subject: [PATCH] MC-2642 Removing code that makes class diagram arrows go
 wrong

---
 cypress/platform/knsv2.html                   | 108 ++++++++++++++++--
 .../rendering-elements/edges.js               | 104 +----------------
 2 files changed, 99 insertions(+), 113 deletions(-)
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 1195d51fc..75d1e0a9a 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -36,7 +36,7 @@
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        /* background: #333; */
+        background: #333;
         font-family: 'Arial';
         /* color: white; */
         /* font-size: 18px !important; */
@@ -105,10 +105,9 @@
   </head>
 
   <body>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
       flowchart LR
-        A e1@-.-> B
-        C e2@--> D
+        A e1@-.-> B & C e2@--> D
     </pre>
     <pre id="diagram4" class="mermaid2">
       flowchart LR
@@ -152,12 +151,12 @@ config:
     <pre id="diagram4" class="mermaid2">
 ---
 config:
-  theme: forest
-  look: classic
+  look: neo
+  theme: redux
+  layout: elk
 ---
       flowchart LR
         A e1@--> BB
-        e1@{ animation: fast}
     </pre>
     <hr />
     <pre id="diagram4" class="mermaid2">
@@ -180,12 +179,12 @@ config:
     <!-- Circle -->
     <hr />
 
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
       flowchart LR
         A e1@==o B
         e1@{ animate: true}
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   theme: forest
@@ -211,6 +210,93 @@ config:
         A e1@==o BB
         e1@{ animate: false}
     </pre>
+    <pre id="diagram4" class="mermaid">
+---
+config:
+  theme: redux-dark
+  layout: dagre
+---
+classDiagram
+direction TB
+    class Animal {
+	    +int age
+	    +String gender
+	    +isMammal()
+	    +mate()
+    }
+    class Duck {
+	    +String beakColor
+	    +swim()
+	    +quack()
+    }
+
+    class Zebra {
+	    +bool is_wild
+	    +run()
+    }
+    class UntitledClass {
+    }
+    class Animal_copy_1["Animal"] {
+	    +int age
+	    +String gender
+	    +isMammal()
+	    +mate()
+    }
+
+	note for Animal "This is a sample note"
+
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal_copy_1 "*" --|> "1" Animal
+    Animal_copy_1 .. UntitledClass
+    </pre>
+    <pre id="diagram4" class="mermaid">
+---
+config:
+  theme: redux-dark
+  layout: dagre
+---
+flowchart LR
+  classDef redNode fill:#D50000,color:#000000;
+  classDef pinkNode fill:#E1BEE7,color:#000000;
+  classDef yellowNode fill:#FFF9C4,color:#000000;
+  classDef blackNode fill:#000000,stroke:#FFD600,stroke-width:4px,stroke-dasharray: 0,color:#FFFFFF;
+  classDef greenNode fill:#00F840,color:#000000;
+  classDef reminderNode stroke:#FFD600,stroke-width:4px,stroke-dasharray: 0,fill:#000000,color:#FFFFFF;
+  classDef blueSubgraph fill:#BBDEFB;
+
+  subgraph subgraph_zv2q8ucnp["Shape descriptions"]
+      customer((Customer)):::redNode
+      Support["Support"]:::pinkNode
+      Technician{{Technician}}:::yellowNode
+      Decision{"Decision"}:::blackNode
+  end
+
+  A((Reported issue)):::redNode --> B["Ticket is created"]
+  B --> C{"Working hours?"}:::blackNode
+  C -- Yes --> E{{"Tickets are sent to day team for response"}}:::yellowNode
+  C -- No --> F["Tickets are sent to on-call staff for response"]:::pinkNode
+  E --> Worked{"Ticket being worked on?"}:::reminderNode
+  F --> Worked
+  Worked -- Yes --> G["Work on the tickets based on priority"]:::pinkNode
+  Worked -- No --> Reminder["Reminder is sent"]
+  Reminder --> Worked
+  G --> H["Team fixes the issue"]:::pinkNode
+  H --> I{"Is the issue resolved?"}:::reminderNode
+  I -- Yes --> Done["Ticket is closed and follow-up email is sent"]:::greenNode
+  I -- No --> H
+
+  class subgraph_zv2q8ucnp blueSubgraph
+
+  linkStyle 2 stroke:#00C853,fill:none
+  linkStyle 3 stroke:#D50000,fill:none
+  linkStyle 6 stroke:#00C853,fill:none
+  linkStyle 7 stroke:#D50000,fill:none
+  linkStyle 11 stroke:#00C853,fill:none
+  linkStyle 12 stroke:#D50000,fill:none
+
+    </pre>
 
     <!-- Next set of tests -->
     <hr />
@@ -356,7 +442,7 @@ config:
         alert('It worked');
       }
       await mermaid.initialize({
-        // theme: 'base',
+        theme: 'redux-dark',
         // theme: 'default',
         // theme: 'forest',
         // handDrawnSeed: 12,
@@ -364,7 +450,7 @@ config:
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
         // layout: 'dagre',
         // layout: 'elk',
-        // layout: 'fixed',
+        layout: 'sugiyama',
         // htmlLabels: false,
         flowchart: { titleTopMargin: 10 },
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index d75a71a12..bcca692af 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -58,7 +58,6 @@ export const insertEdgeLabel = async (elem, edge) => {
   label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
 
   // Make element accessible by id for positioning
-  log.debug('Inserting edge label abc88', edge.id, edge.label, edgeLabels.get(edge.id));
   edgeLabels.set(edge.id, edgeLabel);
 
   // Update the abstract data of the edge with the new information about its width and height
@@ -341,94 +340,6 @@ const cutPathAtIntersect = (_points, boundaryNode) => {
   return points;
 };
 
-// function extractCornerPoints(points) {
-//   const cornerPoints = [];
-//   const cornerPointPositions = [];
-//   for (let i = 1; i < points.length - 1; i++) {
-//     const prev = points[i - 1];
-//     const curr = points[i];
-//     const next = points[i + 1];
-//     if (
-//       prev.x === curr.x &&
-//       curr.y === next.y &&
-//       Math.abs(curr.x - next.x) > 5 &&
-//       Math.abs(curr.y - prev.y) > 5
-//     ) {
-//       cornerPoints.push(curr);
-//       cornerPointPositions.push(i);
-//     } else if (
-//       prev.y === curr.y &&
-//       curr.x === next.x &&
-//       Math.abs(curr.x - prev.x) > 5 &&
-//       Math.abs(curr.y - next.y) > 5
-//     ) {
-//       cornerPoints.push(curr);
-//       cornerPointPositions.push(i);
-//     }
-//   }
-//   return { cornerPoints, cornerPointPositions };
-// }
-
-// const findAdjacentPoint = function (pointA, pointB, distance) {
-//   const xDiff = pointB.x - pointA.x;
-//   const yDiff = pointB.y - pointA.y;
-//   const length = Math.sqrt(xDiff * xDiff + yDiff * yDiff);
-//   const ratio = distance / length;
-//   return { x: pointB.x - ratio * xDiff, y: pointB.y - ratio * yDiff };
-// };
-
-// 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, r);
-//       const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, r);
-
-//       const xDiff = newNextPoint.x - newPrevPoint.x;
-//       const yDiff = newNextPoint.y - newPrevPoint.y;
-//       newLineData.push(newPrevPoint);
-
-//       const a = Math.sqrt(2) * 2;
-//       let newCornerPoint = { x: cornerPoint.x, y: cornerPoint.y };
-//       if (Math.abs(nextPoint.x - prevPoint.x) > 10 && Math.abs(nextPoint.y - prevPoint.y) >= 10) {
-//         log.debug(
-//           'Corner point fixing',
-//           Math.abs(nextPoint.x - prevPoint.x),
-//           Math.abs(nextPoint.y - prevPoint.y)
-//         );
-
-//         if (cornerPoint.x === newPrevPoint.x) {
-//           newCornerPoint = {
-//             x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a,
-//             y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a,
-//           };
-//         } else {
-//           newCornerPoint = {
-//             x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a,
-//             y: yDiff < 0 ? newPrevPoint.y - r + a : newPrevPoint.y + r - a,
-//           };
-//         }
-//       } else {
-//         log.debug(
-//           'Corner point skipping fixing',
-//           Math.abs(nextPoint.x - prevPoint.x),
-//           Math.abs(nextPoint.y - prevPoint.y)
-//         );
-//       }
-//       newLineData.push(newCornerPoint, newNextPoint);
-//     } else {
-//       newLineData.push(lineData[i]);
-//     }
-//   }
-//   return newLineData;
-// };
-
 const generateDashArray = (len, oValueS, oValueE) => {
   const middleLength = len - oValueS - oValueE;
   const dashLength = 2; // Length of each dash
@@ -446,7 +357,6 @@ const generateDashArray = (len, oValueS, oValueE) => {
 
   return dashArray;
 };
-
 export const insertEdge = function (elem, edge, clusterDb, diagramType, startNode, endNode, id) {
   const { handDrawnSeed } = getConfig();
   let points = edge.points;
@@ -495,16 +405,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   }
 
   let lineData = points.filter((p) => !Number.isNaN(p.y));
-  // lineData = fixCorners(lineData);
-  let lastPoint = lineData[lineData.length - 1];
-  if (lineData.length > 1) {
-    lastPoint = lineData[lineData.length - 1];
-    const secondLastPoint = lineData[lineData.length - 2];
-    const diffX = (lastPoint.x - secondLastPoint.x) / 2;
-    const diffY = (lastPoint.y - secondLastPoint.y) / 2;
-    const midPoint = { x: secondLastPoint.x + diffX, y: secondLastPoint.y + diffY };
-    lineData.splice(-1, 0, midPoint);
-  }
+  //lineData = fixCorners(lineData);
   let curve = curveBasis;
   curve = curveLinear;
   switch (edge.curve) {
@@ -527,8 +428,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
 
   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':
