MC-1765: Removed curvature from inner rect composite

This commit is contained in:
Per Brolin
2024-06-19 09:49:04 +02:00
parent ba6f2b26a6
commit d6e8419360
3 changed files with 194 additions and 166 deletions

View File

@@ -111,51 +111,48 @@
</th>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
%%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
</td>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
stateId
</pre>
</td>
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -166,55 +163,55 @@ stateDiagram-v2
<div class="content">
<div class="pre-scrollable">
<pre>
state "description text" as s2
</pre>
state "description text" as s2
</pre>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
stateDiagram-v2
state "This is a state description" as s2
</pre>
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
stateDiagram-v2
state "This is a state description" as s2
</pre>
</td>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2
state "This is a state description" as s2
</pre>
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2
state "This is a state description" as s2
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
state "This is a state description" as s3
</pre>
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
state "This is a state description" as s3
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
state "This is a state description" as s3
</pre>
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
state "This is a state description" as s3
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
state "This is a state description" as s4
</pre>
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
state "This is a state description" as s4
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
state "This is a state description" as s4
</pre>
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
state "This is a state description" as s4
</pre>
</td>
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -225,59 +222,55 @@ stateDiagram-v2
<div class="content">
<div class="pre-scrollable">
<pre>
s2 : description text
</pre>
s2 : description text
</pre>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
stateDiagram-v2
s21 : This is a state description
</pre>
stateDiagram-v2
s21 : This is a state description
</pre>
</td>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2
s21 : This is a state description
</pre>
stateDiagram-v2
s21 : This is a state description
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s22 : This is a state description
</pre>
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s22 : This is a state description
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
s22 : This is a state description
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
s22 : This is a state description
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s23 : This is a state description
</pre>
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s23 : This is a state description
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s23 : This is a state description
</pre>
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s23 : This is a state description
</pre>
</td>
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -290,69 +283,55 @@ stateDiagram-v2
<div class="content">
<div class="pre-scrollable">
<pre>
s1 --> s2
</pre>
s1 --> s2
</pre>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
stateDiagram-v2
s31 --> s32
</pre>
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
stateDiagram-v2
s31 --> s32
</pre>
</td>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2
s31 --> s32
</pre>
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2
s31 --> s32
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s41 --> s42
</pre>
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s41 --> s42
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
s51 --> s52
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
s51 --> s52
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s61 --> s62
</pre>
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s61 --> s62
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s61 --> s62
</pre>
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
s61 --> s62
</pre>
</td>
</tr>
<!-- Separator row -->
<tr class="separator">
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -366,65 +345,51 @@ stateDiagram-v2
<div class="content">
<div class="pre-scrollable">
<pre>
s1 --> s2: A transition
</pre>
s1 --> s2: A transition
</pre>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
stateDiagram-v2
a1 --> a2: A transition
</pre>
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
stateDiagram-v2
a1 --> a2: A transition
</pre>
</td>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2
a1 --> a2: A transition
</pre>
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
stateDiagram-v2
a1 --> a2: A transition
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
a3 --> a4: A transition
</pre>
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
a3 --> a4: A transition
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
a5 --> a6: A transition
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
stateDiagram-v2
a5 --> a6: A transition
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
a7 --> a8: A transition
</pre>
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
a7 --> a8: A transition
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
a7 --> a8: A transition
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
a7 --> a8: A transition
</pre>
</td>
</tr>
@@ -1650,6 +1615,69 @@ direction LR
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
</tr>
<tr>
<th class="vertical-header">
<button class="collapsible">
Flow chart Node, rounded
</button>
<div class="content">
<div class="pre-scrollable">
<pre>
flowchart LR
rounded(rounded)
</pre>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
flowchart LR
rounded(rounded)
</pre>
</td>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
flowchart LR
rounded(rounded)
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
rounded(rounded)
</pre>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
flowchart LR
rounded(rounded)
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
rounded(rounded)
</pre>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
flowchart LR
rounded(rounded)
</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">