GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1035 from knsv/bug/1033_state_diagram_new_lines_in_notes

Browse Source 
Bug/1033 state diagram new lines in notes
This commit is contained in:
Knut Sveidqvist 2019-10-28 06:56:33 +01:00 committed by GitHub
commit d098051047
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,28 +5,15 @@ describe('State diagram', () => {
it('should render a flowchart full of circles', () => { it('should render a flowchart full of circles', () => {
imgSnapshotTest( imgSnapshotTest(
` `
graph LR stateDiagram
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget) State1: The state with a note
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget) note right of State1
35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary) Important information! You\ncan write
41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary) notes with multiple lines...
44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary) Here is another line...
46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary) And another line...
40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary) end note
38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary) `,
43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
`,
{} {}
); );
}); });

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

@ -272,17 +272,22 @@ const _drawLongText = (_text, x, y, g) => {
let text = _text.replace(/\r\n/g, '<br/>'); let text = _text.replace(/\r\n/g, '<br/>');
text = text.replace(/\n/g, '<br/>'); text = text.replace(/\n/g, '<br/>');
const lines = text.split(/<br\/?>/gi); const lines = text.split(/<br\/?>/gi);
let tHeight = 1.25 * getConfig().state.noteMargin;
for (const line of lines) { for (const line of lines) {
const txt = line.trim(); const txt = line.trim();
if (txt.length > 0) { if (txt.length > 0) {
const span = textElem.append('tspan'); const span = textElem.append('tspan');
span.text(txt); span.text(txt);
const textBounds = span.node().getBBox(); if (tHeight === 0) {
textHeight += textBounds.height; const textBounds = span.node().getBBox();
tHeight += textBounds.height;
}
// console.warn('textBounds', textBounds);
textHeight += tHeight;
span.attr('x', x + getConfig().state.noteMargin); span.attr('x', x + getConfig().state.noteMargin);
span.attr('y', y + textHeight + 1.25 * getConfig().state.noteMargin); span.attr('y', y + textHeight + 1.25 * getConfig().state.noteMargin);
// textWidth = Math.max(textBounds.width, textWidth);
} }
} }
return { textWidth: textElem.node().getBBox().width, textHeight }; return { textWidth: textElem.node().getBBox().width, textHeight };

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

@ -89,17 +89,34 @@ export const draw = function(text, id) {
const rootDoc = stateDb.getRootDoc(); const rootDoc = stateDb.getRootDoc();
renderDoc(rootDoc, diagram); renderDoc(rootDoc, diagram);
const padding = conf.padding;
const bounds = diagram.node().getBBox(); const bounds = diagram.node().getBBox();
diagram.attr('height', '100%'); console.warn(bounds);
diagram.attr('style', `width: ${bounds.width * 3 + conf.padding * 2};`);
const width = bounds.width + padding * 2;
const height = bounds.height + padding * 2;
// diagram.attr('height', '100%');
// diagram.attr('style', `width: ${bounds.width * 3 + conf.padding * 2};`);
// diagram.attr('height', height);
// Zoom in a bit
diagram.attr('width', width * 2);
// diagram.attr('height', bounds.height * 3 + conf.padding * 2);
diagram.attr( diagram.attr(
'viewBox', 'viewBox',
`${conf.padding * -1} ${conf.padding * -1} ` + `${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height
(bounds.width * 1.5 + conf.padding * 2) +
' ' +
(bounds.height + conf.padding * 5)
); );
// diagram.attr('transform', `translate(, 0)`);
// diagram.attr(
// 'viewBox',
// `${conf.padding * -1} ${conf.padding * -1} ` +
// (bounds.width * 1.5 + conf.padding * 2) +
// ' ' +
// (bounds.height + conf.padding * 5)
// );
}; };
const getLabelWidth = text => { const getLabelWidth = text => {
return text ? text.length * conf.fontSizeFactor : 1; return text ? text.length * conf.fontSizeFactor : 1;

2
src/mermaidAPI.js
View File

@ -310,7 +310,7 @@ const config = {
state: { state: {
dividerMargin: 10, dividerMargin: 10,
sizeUnit: 5, sizeUnit: 5,
padding: 5, padding: 8,
textHeight: 10, textHeight: 10,
titleShift: -15, titleShift: -15,
noteMargin: 10, noteMargin: 10,