marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-08 01:56:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

#1110 Adding tests for this case and some calcuations for width

Browse Source
This commit is contained in:
Knut Sveidqvist
2019-12-02 21:10:37 +01:00
parent 32b60edda7
commit 346328156a
5 changed files with 286 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
cypress/integration/rendering/current.spec.js
View File

@@ -2,19 +2,20 @@
import { imgSnapshotTest } from '../../helpers/util';
describe('State diagram', () => {
it('should render a flowchart full of circles', () => {
it('should render a state with states in it', () => {
imgSnapshotTest(
`
stateDiagram
State1: The state with a note
note right of State1
Important information! You\ncan write
notes with multiple lines...
Here is another line...
And another line...
end note
stateDiagram
state PersonalizedCockpit {
Other
state Parent {
C
}
}
`,
{}
{
logLevel: 0,
}
);
});
});

45
cypress/integration/rendering/stateDiagram.spec.js
View File

@@ -106,6 +106,22 @@ describe('State diagram', () => {
);
cy.get('svg');
});
it('should render a note with multiple lines in it', () => {
imgSnapshotTest(
`
stateDiagram
State1: The state with a note
note right of State1
Important information! You\ncan write
notes with multiple lines...
Here is another line...
And another line...
end note
`,
{}
);
});
it('should render a states with descriptions including multi-line descriptions', () => {
imgSnapshotTest(
`
@@ -276,4 +292,33 @@ describe('State diagram', () => {
);
cy.get('svg');
});
it('should render a state with states in it', () => {
imgSnapshotTest(
`
stateDiagram
state PilotCockpit {
state Parent {
C
}
}
`,
{
logLevel: 0,
}
);
});
it('Simplest compone state', () => {
imgSnapshotTest(
`
stateDiagram
state Parent {
C
}
`,
{
logLevel: 0,
}
);
});
});

53
cypress/platform/current.html
View File

@@ -8,12 +8,55 @@
</head>
<body>
<h1>info below</h1>
<div class="mermaid">graph TB
a --> b
a --> c
a --> d
<div style="display: flex;">
<div class="mermaid">stateDiagram
state P {
Child
}
</div>
<div class="mermaid">stateDiagram
state P {
state Par {
Child
}
}
</div>
<div class="mermaid">stateDiagram
state P {
state GPar {
state Parent {
TheLongChild
}
}
}
</div>
</div>
<div style="display: flex;">
<div class="mermaid">stateDiagram
state Parent {
C
}
</div>
<script src="./mermaid.js"></script>
<div class="mermaid">stateDiagram
state PilotCockpit {
state Parent {
C
}
}
</div>
<div class="mermaid">stateDiagram
state PilotCockpit {
state GParent {
state Parent {
Child
}
}
}
</div>
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',

207
src/diagrams/state/shapes.js
View File

@@ -129,7 +129,131 @@ export const drawDescrState = (g, stateDef) => {
* Adds the creates a box around the existing content and adds a
* panel for the id on top of the content.
*/
export const addIdAndBox = (g, stateDef) => {
/**
* Function that creates an title row and a frame around a substate for a composit state diagram.
* The function returns a new d3 svg object with updated width and height properties;
* @param {*} g The d3 svg object for the substate to framed
* @param {*} stateDef The info about the
*/
export const addTitleAndBox = (g, stateDef) => {
const pad = getConfig().state.padding;
const dblPad = 2 * getConfig().state.padding;
const orgBox = g.node().getBBox();
const orgWidth = orgBox.width;
const orgX = orgBox.x;
const title = g
.append('text')
.attr('x', 0)
.attr('y', getConfig().state.titleShift)
.attr('font-size', getConfig().state.fontSize)
.attr('class', 'state-title')
.text(stateDef.id);
const titleBox = title.node().getBBox();
const titleWidth = titleBox.width + dblPad;
let width = Math.max(titleWidth, orgWidth); // + dblPad;
if (width === orgWidth) {
width = width + dblPad;
}
let startX;
startX = orgBox.x - pad;
// const lineY = 1 - getConfig().state.textHeight;
// const descrLine = g
// .append('line') // text label for the x axis
// .attr('x1', 0)
// .attr('y1', lineY)
// .attr('y2', lineY)
// .attr('class', 'descr-divider');
const graphBox = g.node().getBBox();
// console.warn(width / 2, titleWidth / 2, getConfig().state.padding, orgBox);
if (titleWidth > orgWidth) {
startX = (orgWidth - width) / 2 + pad;
} else {
startX = orgX - pad;
}
// descrLine.attr('x2', graphBox.width + getConfig().state.padding);
if (stateDef.doc) {
// console.warn(
// stateDef.id,
// ' orgWidth: ',
// orgWidth,
// ' adjusted orgWidth: ',
// orgWidth - dblPad,
// titleWidth,
// stateDef.doc
// );
// startX = orgX - (orgWidth - width) / 2 - pad;
// console.warn(' orgX: ', orgX, graphBox.x);
console.warn(
stateDef.id,
'orgX: ',
orgX,
'width: ',
width,
'titleWidth: ',
titleWidth,
'orgWidth: ',
orgWidth,
'width',
width
);
}
if (Math.abs(orgX - graphBox.x) < pad) {
console.warn('resetting startX', startX);
startX = orgX - (titleWidth - orgWidth) / 2;
}
console.warn('startX', startX);
// // White color
// g.insert('rect', ':first-child')
// .attr('x', graphBox.x)
// .attr('y', lineY)
// .attr('class', 'composit')
// .attr('width', graphBox.width + getConfig().state.padding)
// .attr(
// 'height',
// graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
// )
// .attr('rx', '0');
title.attr('x', startX + pad);
if (titleWidth <= orgWidth) title.attr('x', startX + width / 2 - pad / 2);
// // Title background
g.insert('rect', ':first-child')
.attr('x', startX)
.attr(
'y',
getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
)
.attr('width', width)
// Just needs to be higher then the descr line, will be clipped by the white color box
.attr('height', getConfig().state.textHeight * 3)
.attr('rx', getConfig().state.radius);
// Full background
g.insert('rect', ':first-child')
.attr('x', startX)
.attr(
'y',
getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
)
.attr('width', width)
.attr('height', graphBox.height + 3 + 2 * getConfig().state.textHeight)
.attr('rx', getConfig().state.radius);
return g;
};
export const addTitleAndBoxOrg = (g, stateDef) => {
const pad = getConfig().state.padding;
const dblPad = 2 * getConfig().state.padding;
const orgBox = g.node().getBBox();
const orgWidth = orgBox.width + dblPad;
const orgX = orgBox.x;
// TODO Move hardcodings to conf
// const addTspan = function(textEl, txt, isFirst) {
// const tSpan = textEl
@@ -140,60 +264,87 @@ export const addIdAndBox = (g, stateDef) => {
// tSpan.attr('dy', getConfig().state.textHeight);
// }
// };
/*
ct = tw/2
cg = gw/2
*/
const title = g
.append('text')
.attr('x', 2 * getConfig().state.padding)
.attr('x', 0)
.attr('y', getConfig().state.titleShift)
.attr('font-size', getConfig().state.fontSize)
.attr('class', 'state-title')
.text(stateDef.id);
const titleBox = title.node().getBBox();
const lineY = 1 - getConfig().state.textHeight;
const descrLine = g
.append('line') // text label for the x axis
.attr('x1', 0)
.attr('y1', lineY)
.attr('y2', lineY)
.attr('class', 'descr-divider');
const titleWidth = titleBox.width + dblPad;
const width = Math.max(titleWidth, orgWidth + dblPad);
let startX;
startX = orgBox.x - pad;
// const lineY = 1 - getConfig().state.textHeight;
// const descrLine = g
// .append('line') // text label for the x axis
// .attr('x1', 0)
// .attr('y1', lineY)
// .attr('y2', lineY)
// .attr('class', 'descr-divider');
const graphBox = g.node().getBBox();
title.attr('x', graphBox.width / 2 - titleBox.width / 2);
descrLine.attr('x2', graphBox.width + getConfig().state.padding);
// console.warn(width / 2, titleWidth / 2, getConfig().state.padding, orgBox);
if (titleWidth > orgWidth) {
title.attr('x', (orgWidth - width) / 2 + pad);
startX = (orgWidth - width) / 2;
}
if (titleWidth <= orgWidth) title.attr('x', (orgWidth - width) / 2);
// descrLine.attr('x2', graphBox.width + getConfig().state.padding);
// White color
g.insert('rect', ':first-child')
.attr('x', graphBox.x)
.attr('y', lineY)
.attr('class', 'composit')
.attr('width', graphBox.width + getConfig().state.padding)
.attr(
'height',
graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
)
.attr('rx', '0');
if (stateDef.doc) {
console.warn(
stateDef.id,
' orgWidth: ',
orgWidth,
' adjusted orgWidth: ',
orgWidth - dblPad,
titleWidth,
width,
stateDef.doc
);
startX = orgX - (orgWidth - width) / 2 - pad;
console.warn(' orgX: ', orgX);
}
// // White color
// g.insert('rect', ':first-child')
// .attr('x', graphBox.x)
// .attr('y', lineY)
// .attr('class', 'composit')
// .attr('width', graphBox.width + getConfig().state.padding)
// .attr(
// 'height',
// graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
// )
// .attr('rx', '0');
// Title background
// // Title background
g.insert('rect', ':first-child')
.attr('x', graphBox.x)
.attr('x', startX)
.attr(
'y',
getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
)
.attr('width', graphBox.width + getConfig().state.padding)
.attr('width', width)
// Just needs to be higher then the descr line, will be clipped by the white color box
.attr('height', getConfig().state.textHeight * 3)
.attr('rx', getConfig().state.radius);
// Full background
g.insert('rect', ':first-child')
.attr('x', graphBox.x)
.attr('x', startX)
.attr(
'y',
getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
)
.attr('width', graphBox.width + getConfig().state.padding)
.attr('width', width)
.attr('height', graphBox.height + 3 + 2 * getConfig().state.textHeight)
.attr('rx', getConfig().state.radius);

6
src/diagrams/state/stateRenderer.js
View File

@@ -5,7 +5,7 @@ import { logger } from '../../logger';
import stateDb from './stateDb';
import { parser } from './parser/stateDiagram';
// import idCache from './id-cache';
import { drawState, addIdAndBox, drawEdge } from './shapes';
import { drawState, addTitleAndBox, drawEdge } from './shapes';
import { getConfig } from '../../config';
parser.yy = stateDb;
@@ -100,7 +100,7 @@ export const draw = function(text, id) {
// diagram.attr('height', height);
// Zoom in a bit
diagram.attr('width', width * 2);
diagram.attr('width', width);
// diagram.attr('height', bounds.height * 3 + conf.padding * 2);
diagram.attr(
'viewBox',
@@ -189,7 +189,7 @@ const renderDoc = (doc, diagram, parentId) => {
if (first) {
// first = false;
sub = addIdAndBox(sub, stateDef);
sub = addTitleAndBox(sub, stateDef);
let boxBounds = sub.node().getBBox();
node.width = boxBounds.width;
node.height = boxBounds.height + 2 * conf.padding;