diff --git a/.gitignore b/.gitignore index a1b467100..69f442484 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,4 @@ dist/classTest.html dist/sequenceTest.html .vscode/ +cypress/platform/current.html \ No newline at end of file diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index 4ea4cbcee..2c20090a4 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -512,7 +512,7 @@ describe('Flowchart', () => { ); }); - it('24: Keep node label text (if already defined) when a style is applied', () => { + it('24.1: Keep node label text (if already defined) when a style is applied', () => { imgSnapshotTest( `graph LR A(( )) -->|step 1| B(( )) @@ -524,4 +524,55 @@ describe('Flowchart', () => { { flowchart: { htmlLabels: false } } ); }); +it('24.2: Handle link click events (link, anchor, mailto, other protocol, script)', () => { + imgSnapshotTest( + `graph TB + TITLE["Link Click Events
(click the nodes below)"] + A[link test] + B[anchor test] + C[mailto test] + D[other protocol test] + E[script test] + TITLE --> A & B & C & D & E + click A "https://mermaid-js.github.io/mermaid/#/" "link test" + click B "#link-clicked" "anchor test" + click C "mailto:user@user.user" "mailto test" + click D "notes://do-your-thing/id" "other protocol test" + click E "javascript:alert('test')" "script test" + `, + { securityLevel: 'loose' } + ); + }); + + it('25: Set node text color according to style when html labels are enabled', () => { + imgSnapshotTest( + `graph LR + A[red
text] --> B(blue
text) + C[/red
text/] --> D{blue
text} + style A color:red; + style B color:blue; + style C stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style D stroke:#0000ff,fill:#ccccff,color:#0000ff + click B "index.html#link-clicked" "link test" + click D testClick "click test" + `, + { flowchart: { htmlLabels: true } } + ); + }); + + it('26: Set node text color according to style when html labels are disabled', () => { + imgSnapshotTest( + `graph LR + A[red
text] --> B(blue
text) + C[/red
text/] --> D{blue
text} + style A color:red; + style B color:blue; + style C stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style D stroke:#0000ff,fill:#ccccff,color:#0000ff + click B "index.html#link-clicked" "link test" + click D testClick "click test" + `, + { flowchart: { htmlLabels: false } } + ); + }); }); diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js index 3e0bf1e1c..db257f76c 100644 --- a/cypress/integration/rendering/stateDiagram.spec.js +++ b/cypress/integration/rendering/stateDiagram.spec.js @@ -319,7 +319,7 @@ describe('State diagram', () => { } ); }); - it('Simplest compone state', () => { + it('Simplest composit state', () => { imgSnapshotTest( ` stateDiagram @@ -332,5 +332,17 @@ describe('State diagram', () => { } ); }); + it('should handle multiple arrows from one node to another', () => { + imgSnapshotTest( + ` + stateDiagram + a --> b: Start + a --> b: Stop + `, + { + logLevel: 0, + } + ); + }); }); diff --git a/cypress/platform/current.html b/cypress/platform/current.html index d2e48875c..a5c6d2bec 100644 --- a/cypress/platform/current.html +++ b/cypress/platform/current.html @@ -5,33 +5,28 @@ rel="stylesheet" />

info below

- graph TB - A --> B - A ==> C - A .-> D - A === E - A -.- F - D -- Hello --> a - D-- text including R TD space --xb + stateDiagram + + NotFound --> NotFound: Status + NotFound --> NotFound: Stop +
+ + + diff --git a/dist/index.html b/dist/index.html index 2505d8010..47293b4b6 100644 --- a/dist/index.html +++ b/dist/index.html @@ -353,6 +353,33 @@ graph TB linkStyle 1 stroke:greenyellow,stroke-width:2px style C fill:greenyellow,stroke:green,stroke-width:4px +
+ graph TB + TITLE["Link Click Events
(click the nodes below)"] + A[link test] + B[anchor test] + C[mailto test] + D[other protocol test] + E[script test] + TITLE --> A & B & C & D & E + click A "https://mermaid-js.github.io/mermaid/#/" "link test" + click B "#link-clicked" "anchor test" + click C "mailto:user@user.user" "mailto test" + click D "notes://do-your-thing/id" "other protocol test" + click E "javascript:alert('test')" "script test" +
+
+
+ graph LR + A[red
text] --> B(blue
text) + C[/red
text/] --> D{blue
text} + style A color:red; + style B color:blue; + style C stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style D stroke:#0000ff,fill:#ccccff,color:#0000ff + click B "index.html#link-clicked" "link test" + click D testClick "click test" +

@@ -587,12 +614,15 @@ class Class10 { end note +

Anchor for "link-clicked" test

+