mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #2036 from mermaid-js/2035_grow_width_with_title 

State diagrams - Growing composite state width with title
This commit is contained in:
Knut Sveidqvist 2021-05-02 10:20:38 +02:00 committed by GitHub
parent 9cce3faba5 aa39dcc34f
commit c56ccb3aa4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -347,6 +347,19 @@ describe('State diagram', () => {
}
);
});
it('v2 width of compond state should grow with title if title is wider', () => {
imgSnapshotTest(
`
stateDiagram-v2
state "Long state name" as NotShooting {
a-->b
}
`,
{
logLevel: 0,
}
);
});
it('v2 Simplest composite state', () => {
imgSnapshotTest(
`

13
cypress/platform/knsv.html
View File

@ -55,7 +55,7 @@ flowchart TD
class T TestSub
linkStyle 0,1 color:orange, stroke: orange;
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
<div class="mermaid2" style="width: 100%; height: 20%;">
%% The width of composite states does not grow with the title
stateDiagram-v2
[*] --> Off
@ -67,15 +67,10 @@ stateDiagram-v2
Washing --> Finished
Finished --> [*]
</div>
<div class="mermaid2" style="width: 100%; height: 20%;">
<div class="mermaid" style="width: 100%; height: 20%;">
stateDiagram-v2
state "Not Shooting State" as NotShooting {
state "Configuring mode" as Configuring
[*] --> Idle
Idle : this is a string
Idle : this is another string
Idle --> Configuring : EvConfig
Configuring --> Idle : EvConfig
state "Long state name" as NotShooting {
a-->b
}
</div>

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

@ -136,18 +136,20 @@ const roundedWithTitle = (parent, node) => {
const padding = 0 * node.padding;
const halfPadding = padding / 2;
const width = node.width > bbox.width ? node.width : bbox.width + node.padding;
// center the rect around its coordinate
rect
.attr('class', 'outer')
.attr('x', node.x - node.width / 2 - halfPadding)
.attr('x', node.x - width / 2 - halfPadding)
.attr('y', node.y - node.height / 2 - halfPadding)
.attr('width', node.width + padding)
.attr('width', width + padding)
.attr('height', node.height + padding);
innerRect
.attr('class', 'inner')
.attr('x', node.x - node.width / 2 - halfPadding)
.attr('x', node.x - width / 2 - halfPadding)
.attr('y', node.y - node.height / 2 - halfPadding + bbox.height - 1)
.attr('width', node.width + padding)
.attr('width', width + padding)
.attr('height', node.height + padding - bbox.height - 3);
// Center the label