Merge pull request #6038 from mermaid-js/fix-for-tilted-cylinder-inte…

…rsect Fix for intersection issue
mermaid-js · Nov 8, 2024 · c8ce416 · c8ce416
2 parents c218e36 + 1388662
commit c8ce416
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 13 deletions.
diff --git a/.changeset/fresh-bears-doubt.md b/.changeset/fresh-bears-doubt.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Intersection calculations for tilted cylinder/DAS when using handdrawn look. Some random seeds could cause the calculations to break.
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -89,70 +89,105 @@
 
   <body>
     <pre id="diagram4" class="mermaid">
+---
+config:
+    look: handDrawn
+    theme: default
+---
+flowchart LR
+    n00@{ shape: triangle, label: 'This is a label for triangle shape' }
+    n11@{ shape: sloped-rectangle, label: 'This is a label for sloped-rectangle shape' }
+    n22@{ shape: horizontal-cylinder, label: 'This is a label for horizontal-cylinder shape' }
+    n33@{ shape: flipped-triangle, label: 'This is a label for flipped-triangle shape' }
+    n44@{ shape: hourglass, label: 'This is a label for hourglass shape' }
+    n00 --> n11
+    n00 --> n22
+    n00 --> n33
+    n00 --> n44
+    n11 --> n22
+    n11 --> n33
+    n11 --> n44
+    n22 --> n33
+    n22 --> n44
+    n33 --> n44
+    </pre>
+    <pre id="diagram4" class="mermaid">
+---
+config:
+    look: handDrawn
+    theme: default
+---
+flowchart LR
+    n22@{ shape: h-cyl }
+    n00 --> n11
+    n00 --> n22
+    n11 --> n22
+    </pre>
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
   A:::AClass
   classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
   style A fill:#f9f,stroke:#333,stroke-width:4px

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
@@ -125,7 +125,7 @@ export async function tiltedCylinder<T extends SVGGraphicsElement>(
     ) {
       let x = rx * rx * (1 - (y * y) / (ry * ry));
       if (x != 0) {
-        x = Math.sqrt(x);
+        x = Math.sqrt(Math.abs(x));
       }
       x = rx - x;
       if (point.x - (node.x ?? 0) > 0) {