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', () => {
|
it('v2 Simplest composite state', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
|
|
|
@ -55,7 +55,7 @@ flowchart TD
|
||||||
class T TestSub
|
class T TestSub
|
||||||
linkStyle 0,1 color:orange, stroke: orange;
|
linkStyle 0,1 color:orange, stroke: orange;
|
||||||
</div>
|
</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
|
%% The width of composite states does not grow with the title
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
[*] --> Off
|
[*] --> Off
|
||||||
|
@ -67,15 +67,10 @@ stateDiagram-v2
|
||||||
Washing --> Finished
|
Washing --> Finished
|
||||||
Finished --> [*]
|
Finished --> [*]
|
||||||
</div>
|
</div>
|
||||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
state "Not Shooting State" as NotShooting {
|
state "Long state name" as NotShooting {
|
||||||
state "Configuring mode" as Configuring
|
a-->b
|
||||||
[*] --> Idle
|
|
||||||
Idle : this is a string
|
|
||||||
Idle : this is another string
|
|
||||||
Idle --> Configuring : EvConfig
|
|
||||||
Configuring --> Idle : EvConfig
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -136,18 +136,20 @@ const roundedWithTitle = (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 ? node.width : bbox.width + node.padding;
|
||||||
|
|
||||||
// center the rect around its coordinate
|
// center the rect around its coordinate
|
||||||
rect
|
rect
|
||||||
.attr('class', 'outer')
|
.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('y', node.y - node.height / 2 - halfPadding)
|
||||||
.attr('width', node.width + padding)
|
.attr('width', width + padding)
|
||||||
.attr('height', node.height + padding);
|
.attr('height', node.height + padding);
|
||||||
innerRect
|
innerRect
|
||||||
.attr('class', 'inner')
|
.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('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);
|
.attr('height', node.height + padding - bbox.height - 3);
|
||||||
|
|
||||||
// Center the label
|
// Center the label
|
||||||
|
|
Loading…
Reference in New Issue