GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

#5237 added state refactor test page

Browse Source
This commit is contained in:
Ashish Jain 2024-05-08 15:27:36 +02:00
parent 94bb43907d
commit f480fb7c85
1 changed files with 373 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

480
cypress/platform/state-refactor.html
View File

@ -17,88 +17,73 @@
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */
/* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */
} }
table { table {
width: 100%; width: 100%;
/* Makes the table take full width */
border-collapse: collapse; border-collapse: collapse;
/* Removes space between borders */
table-layout: fixed; table-layout: fixed;
/* Ensures that columns have consistent width */
} }
th, th,
td { td {
border: 1px solid black; border: 1px solid black;
/* Adds border to cells */
padding: 10px; padding: 10px;
/* Adds padding inside cells */
text-align: center; text-align: center;
/* Centers text in cells */
vertical-align: middle; vertical-align: middle;
/* Aligns content vertically in the middle */
} }
.separator { .separator {
height: 20px; height: 20px;
/* Height of the separator row */
background-color: #f0f0f0; background-color: #f0f0f0;
/* Light gray background for the separator */
} }
.vertical-header { .vertical-header {
/* writing-mode: vertical-rl; */
/* Rotates text for vertical headers */
text-align: center; text-align: center;
/* Centers the rotated text */
/* transform: rotate(180deg); */
/* Corrects the orientation of the text */
} }
h1 { .collapsible {
color: grey; background-color: #f9f9f9;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
} }
.active,
.collapsible:hover {
.mermaid2 { background-color: #ccc;
display: none;
} }
.mermaid svg { .collapsible:after {
/* font-size: 18px !important; */ content: '\002B';
background-color: #efefef; color: #777;
background-image: radial-gradient(#fff 51%, transparent 91%), font-weight: bold;
radial-gradient(#fff 51%, transparent 91%); float: right;
background-size: 20px 20px; margin-left: 2px;
background-position: 0 0, 10px 10px;
background-repeat: repeat;
} }
.malware { .active:after {
position: fixed; content: "\2212";
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 { .content {
font-size: 6px !important; padding: 0 5px;
} */ max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.content .pre-scrollable {
max-height: 200px;
overflow-y: scroll;
}
</style> </style>
</head> </head>
@ -112,12 +97,14 @@
<th>ELK with rough</th> <th>ELK with rough</th>
</tr> </tr>
<tr> <tr>
<th class="vertical-header">Simple State (only id) <th class="vertical-header">
<br /> <button class="collapsible">Simple State (only id)</button>
<br /> <div class="content">
<pre> <div class="pre-scrollable">
<pre>
stateId stateId
</pre> </pre>
</div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
@ -155,13 +142,16 @@ stateDiagram-v2
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr> </tr>
<tr> <tr>
<th class="vertical-header">State with description with `as` keyword <th class="vertical-header">
<br /> <button class="collapsible">State with description with `as` keyword</button>
<br /> <div class="content">
<pre> <div class="pre-scrollable">
<pre>
state "description text" as s2 state "description text" as s2
</pre> </pre>
</div>
</div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
@ -196,13 +186,16 @@ stateDiagram-v2
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr> </tr>
<tr> <tr>
<th class="vertical-header">State with description with `:` syntax <th class="vertical-header">
<br /> <button class="collapsible">State with description with `:` syntax</button>
<br /> <div class="content">
<pre> <div class="pre-scrollable">
<pre>
s2 : description text s2 : description text
</pre> </pre>
</div>
</div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
@ -239,15 +232,20 @@ stateDiagram-v2
<tr class="separator"> <tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr> </tr>
<tr> <tr>
<th class="vertical-header">State with transition <th class="vertical-header">
<br /> <button class="collapsible">
<br /> State with transition
<pre> </button>
<div class="content">
<div class="pre-scrollable">
<pre>
s1 --> s2 s1 --> s2
</pre> </pre>
</div>
</div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
@ -292,15 +290,20 @@ stateDiagram-v2
</tr> </tr>
</tr> </tr>
<tr> <tr>
<th class="vertical-header">State transition with label <th class="vertical-header">
<br /> <button class="collapsible">
<br /> State transition with label
<pre> </button>
<div class="content">
<div class="pre-scrollable">
<pre>
s1 --> s2: A transition s1 --> s2: A transition
</pre> </pre>
</div>
</div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
@ -344,17 +347,22 @@ stateDiagram-v2
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr> </tr>
</tr> </tr>
<tr> <tr>
<th class="vertical-header">Start & End <th class="vertical-header">
<br /> <button class="collapsible">
<br /> Start & End
<pre> </button>
<div class="content">
<div class="pre-scrollable">
<pre>
[*] --> test [*] --> test
test --> [*] test --> [*]
</pre> </pre>
</div>
</div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
@ -402,12 +410,15 @@ stateDiagram-v2
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr> </tr>
</tr> </tr>
<tr> <tr>
<th class="vertical-header">Composite state <th class="vertical-header">
<br /> <button class="collapsible">
<br /> Composite state
<pre> </button>
<div class="content">
<div class="pre-scrollable">
<pre>
[*] --> First [*] --> First
state First { state First {
@ -416,6 +427,8 @@ stateDiagram-v2
} }
</pre> </pre>
</div>
</div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
@ -476,12 +489,15 @@ stateDiagram-v2
</tr> </tr>
</tr> </tr>
<tr> <tr>
<th class="vertical-header">Nested Composite state <th class="vertical-header">
<br /> <button class="collapsible">
<br /> Nested Composite state
<pre> </button>
<div class="content">
<div class="pre-scrollable">
<pre>
[*] --> Level1 [*] --> Level1
@ -502,6 +518,8 @@ stateDiagram-v2
</pre> </pre>
</div>
</div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
@ -602,11 +620,14 @@ stateDiagram-v2
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr> </tr>
<tr> <tr>
<th class="vertical-header">Composite state with transition <th class="vertical-header">
<br /> <button class="collapsible">
<br /> Composite state with transition
<pre> </button>
<div class="content">
<div class="pre-scrollable">
<pre>
[*] --> B1 [*] --> B1
B1 --> B2 B1 --> B2
B1 --> B3 B1 --> B3
@ -627,6 +648,8 @@ stateDiagram-v2
</pre> </pre>
</div>
</div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
@ -725,11 +748,15 @@ stateDiagram-v2
</tr> </tr>
<tr> <tr>
<th class="vertical-header">Choice <th class="vertical-header">
<br /> <button class="collapsible">
<br />
<pre> Choice
</button>
<div class="content">
<div class="pre-scrollable">
<pre>
state if_state &lt;&lt;choice&gt;&gt; state if_state &lt;&lt;choice&gt;&gt;
[*] --> IsPositive [*] --> IsPositive
IsPositive --> if_state IsPositive --> if_state
@ -740,6 +767,8 @@ stateDiagram-v2
</pre> </pre>
</div>
</div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
@ -792,11 +821,14 @@ stateDiagram-v2
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr> </tr>
<tr> <tr>
<th class="vertical-header">Fork & Join <th class="vertical-header">
<br /> <button class="collapsible">
<br /> Fork & Join
<pre> </button>
<div class="content">
<div class="pre-scrollable">
<pre>
state fork_state &lt;&lt;fork&gt;&gt; state fork_state &lt;&lt;fork&gt;&gt;
[*] --> fork_state [*] --> fork_state
fork_state --> State2 fork_state --> State2
@ -811,6 +843,8 @@ stateDiagram-v2
</pre> </pre>
</div>
</div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
@ -885,11 +919,14 @@ stateDiagram-v2
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr> </tr>
<tr> <tr>
<th class="vertical-header">Notes <th class="vertical-header">
<br /> <button class="collapsible">
<br /> Notes
<pre> </button>
<div class="content">
<div class="pre-scrollable">
<pre>
TN1: The state with a note TN1: The state with a note
note right of TN1 note right of TN1
@ -899,6 +936,8 @@ stateDiagram-v2
note left of TN2 : note text note left of TN2 : note text
</pre> </pre>
</div>
</div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
@ -954,6 +993,217 @@ stateDiagram-v2
</pre> </pre>
</td> </td>
</tr> </tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr>
<tr>
<th class="vertical-header">
<button class="collapsible">
Concurrent states
</button>
<div class="content">
<div class="pre-scrollable">
<pre>
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
</pre>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"handdrawn": true} }%%
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%%
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
</pre>
</td>
<td>
<pre id="diagram4" class="mermaid">
%%{init: {"handdrawn": true, "layout": "elk"} }%%
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
</pre>
</td>
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr>
<tr>
<th class="vertical-header">
<button class="collapsible">
Directions
</button>
<div class="content">
<div class="pre-scrollable">
<pre>
direction LR
[*] --> D1
D1 --> D2
D2 --> D3
state D3 {
direction TB
D11 --> D22
}
D2 --> D4
</pre>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
stateDiagram-v2
direction LR
[*] --> D1
D1 --> D2
D2 --> D3
state D3 {
direction TB
D11 --> D22
}
D2 --> D4
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"handdrawn": true} }%%
stateDiagram-v2
direction LR
[*] --> D1
D1 --> D2
D2 --> D3
state D3 {
direction TB
D11 --> D22
}
D2 --> D4
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%%
stateDiagram-v2
direction LR
[*] --> D1
D1 --> D2
D2 --> D3
state D3 {
direction TB
D11 --> D22
}
D2 --> D4
</pre>
</td>
<td>
<pre id="diagram4" class="mermaid">
%%{init: {"handdrawn": true, "layout": "elk"} }%%
stateDiagram-v2
direction LR
[*] --> D1
D1 --> D2
D2 --> D3
state D3 {
direction TB
D11 --> D22
}
D2 --> D4
</pre>
</td>
</tr>
<!-- Separator row --> <!-- Separator row -->
<tr class="separator"> <tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@ -997,6 +1247,20 @@ stateDiagram-v2
console.error(err); console.error(err);
}; };
var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script> </script>
</body> </body>