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:
commit
c56ccb3aa4
|
@ -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(
|
||||
`
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue