marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-06 15:49:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #18 from Mermaid-Chart/MC-2265/fix-failing-e2e-shapes-test

Browse Source 
MC-2265: Fix all failing E2E tests in Mermaid Alana
This commit is contained in:
Ashish Jain
2024-11-08 15:28:03 +01:00
committed by GitHub
parent 6db6beca4b 35fea81209
commit e842cf582b
5 changed files with 57 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/fresh-bears-doubt.md Normal file
View File

@@ -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.

4
cypress/integration/rendering/stateDiagram-v2.spec.js
View File

@@ -460,7 +460,7 @@ stateDiagram-v2
[*] --> State1 [*] --> State1
State1 --> [*] State1 --> [*]
`, `,
{ state: { useMaxWidth: true } } { state: { useMaxWidth: true }, look: 'classic' }
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%'); expect(svg).to.have.attr('width', '100%');
@@ -482,7 +482,7 @@ stateDiagram-v2
[*] --> State1 [*] --> State1
State1 --> [*] State1 --> [*]
`, `,
{ state: { useMaxWidth: false } } { state: { useMaxWidth: false }, look: 'classic' }
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
// const height = parseFloat(svg.attr('height')); // const height = parseFloat(svg.attr('height'));

4
cypress/integration/rendering/stateDiagram.spec.js
View File

@@ -338,7 +338,7 @@ describe('State diagram', () => {
[*] --> State1 [*] --> State1
State1 --> [*] State1 --> [*]
`, `,
{ state: { useMaxWidth: true } } { state: { useMaxWidth: true }, look: 'classic', theme: 'default' }
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%'); expect(svg).to.have.attr('width', '100%');
@@ -361,7 +361,7 @@ describe('State diagram', () => {
[*] --> State1 [*] --> State1
State1 --> [*] State1 --> [*]
`, `,
{ state: { useMaxWidth: false } } { state: { useMaxWidth: false }, look: 'classic', theme: 'default' }
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
// const height = parseFloat(svg.attr('height')); // const height = parseFloat(svg.attr('height'));

59
cypress/platform/knsv2.html
View File

@@ -91,70 +91,105 @@
<body> <body>
<pre id="diagram4" class="mermaid"> <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 flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' } nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' } nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
style A fill:#f9f,stroke:#333,stroke-width:4px style A fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' } nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
A:::AClass A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' } nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'square' } nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'square' } nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
style A fill:#f9f,stroke:#333,stroke-width:4px style A fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'square' } nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
A:::AClass A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'square' } nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' } nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' } nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
style A fill:#f9f,stroke:#333,stroke-width:4px style A fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' } nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
A:::AClass A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' } nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
A:::AClass A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' } nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
style A fill:#f9f,stroke:#333,stroke-width:4px style A fill:#f9f,stroke:#333,stroke-width:4px

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
View File

@@ -141,7 +141,7 @@ export async function tiltedCylinder<T extends SVGGraphicsElement>(
) { ) {
let x = rx * rx * (1 - (y * y) / (ry * ry)); let x = rx * rx * (1 - (y * y) / (ry * ry));
if (x != 0) { if (x != 0) {
x = Math.sqrt(x); x = Math.sqrt(Math.abs(x));
} }
x = rx - x; x = rx - x;
if (point.x - (node.x ?? 0) > 0) { if (point.x - (node.x ?? 0) > 0) {