marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-17 06:20:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix for links between composie states

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

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

19
cypress/platform/knsv.html
View File

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

5
src/dagre-wrapper/clusters.js
View File

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