Fix for links between composie states

This commit is contained in:
Knut Sveidqvist
2021-05-16 10:44:34 +02:00
parent 3dc7b68d08
commit 84941607df
3 changed files with 19 additions and 7 deletions

View File

@@ -401,7 +401,7 @@ stateDiagram-v2
it('v2 should handle different rendering directions in composite states', () => {
imgSnapshotTest(
`
stateDiagram
stateDiagram-v2
direction LR
state A {
direction BT

View File

@@ -28,13 +28,26 @@
<div class="flex">
<div class="mermaid" style="width: 100%; height: 20%;">
stateDiagram-v2
state S1 {
sub1 -->sub2
}
state S2 {
sub4
}
S1 --> S2
sub1 --> sub4
</div>
<div class="mermaid3" style="width: 100%; height: 20%;">
stateDiagram
state CompositeState {
YourState123456789012345123456789123456789012345123456789123456789012345123456789123456789012345123456789 --> MyState:a label
}
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
<div class="mermaid3" style="width: 100%; height: 20%;">
flowchart
subgraph CompositeState
subgraph AnotherCompositeStateCompositeStateCompositeStateCompositeState
@@ -43,7 +56,7 @@ subgraph CompositeState
end
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
<div class="mermaid3" style="width: 100%; height: 20%;">
stateDiagram-v2
state CompositeState {
state AnotherCompositeState1234567890 {
@@ -52,7 +65,7 @@ stateDiagram-v2
}
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
<div class="mermaid3" style="width: 100%; height: 20%;">
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
flowchart LR

View File

@@ -37,7 +37,7 @@ const rect = (parent, node) => {
const padding = 0 * node.padding;
const halfPadding = padding / 2;
const width = node.width <= bbox.width + padding ? bbox.width + padding : node.width + padding;
const width = node.width <= bbox.width + padding ? bbox.width + padding : node.width;
if (node.width <= bbox.width + padding) {
node.diff = (bbox.width - node.width) / 2;
} else {
@@ -143,8 +143,7 @@ const roundedWithTitle = (parent, node) => {
const padding = 0 * node.padding;
const halfPadding = padding / 2;
const width =
node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width + node.padding;
const width = node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width;
if (node.width <= bbox.width + node.padding) {
node.diff = (bbox.width + node.padding - node.width) / 2;
}