From b113436055b3bf46ca86d45a0d03468fa2d266eb Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sun, 27 Oct 2019 16:58:32 +0100 Subject: [PATCH 1/2] #1033 Fix for diagram bounds and viewbox --- cypress/integration/rendering/current.spec.js | 30 +++++-------------- src/diagrams/state/stateRenderer.js | 29 ++++++++++++++---- src/mermaidAPI.js | 2 +- 3 files changed, 32 insertions(+), 29 deletions(-) diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js index 5a0501583..bb239bc8b 100644 --- a/cypress/integration/rendering/current.spec.js +++ b/cypress/integration/rendering/current.spec.js @@ -5,29 +5,15 @@ describe('State diagram', () => { it('should render a flowchart full of circles', () => { imgSnapshotTest( ` - graph LR - 47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget) - 37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget) - 35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary) - 41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary) - 44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary) - 46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary) - 40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary) - 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) - `, + stateDiagram + State1: The state with a note + `, {} ); }); }); + // note right of State1 + // Important information! You\ncan write + // notes with multiple lines... + // Here is another line... + // end note diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js index e0ba69a6a..31a640657 100644 --- a/src/diagrams/state/stateRenderer.js +++ b/src/diagrams/state/stateRenderer.js @@ -89,17 +89,34 @@ export const draw = function(text, id) { const rootDoc = stateDb.getRootDoc(); renderDoc(rootDoc, diagram); + const padding = conf.padding; const bounds = diagram.node().getBBox(); - diagram.attr('height', '100%'); - diagram.attr('style', `width: ${bounds.width * 3 + conf.padding * 2};`); + console.warn(bounds); + + 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( 'viewBox', - `${conf.padding * -1} ${conf.padding * -1} ` + - (bounds.width * 1.5 + conf.padding * 2) + - ' ' + - (bounds.height + conf.padding * 5) + `${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height ); + // 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 => { return text ? text.length * conf.fontSizeFactor : 1; diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 57563897f..94b0efe54 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -310,7 +310,7 @@ const config = { state: { dividerMargin: 10, sizeUnit: 5, - padding: 5, + padding: 8, textHeight: 10, titleShift: -15, noteMargin: 10, From 034a7c424ddc07ef1f17e5318792b2d1983e71f8 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sun, 27 Oct 2019 17:16:29 +0100 Subject: [PATCH 2/2] #1033 Better handling of multiline notes --- cypress/integration/rendering/current.spec.js | 11 ++++++----- src/diagrams/state/shapes.js | 11 ++++++++--- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js index bb239bc8b..1ed1c9d5c 100644 --- a/cypress/integration/rendering/current.spec.js +++ b/cypress/integration/rendering/current.spec.js @@ -7,13 +7,14 @@ describe('State diagram', () => { ` 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 `, {} ); }); }); - // note right of State1 - // Important information! You\ncan write - // notes with multiple lines... - // Here is another line... - // end note diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js index 79d46092b..c8cf18124 100644 --- a/src/diagrams/state/shapes.js +++ b/src/diagrams/state/shapes.js @@ -272,17 +272,22 @@ const _drawLongText = (_text, x, y, g) => { let text = _text.replace(/\r\n/g, '
'); text = text.replace(/\n/g, '
'); const lines = text.split(//gi); + + let tHeight = 1.25 * getConfig().state.noteMargin; for (const line of lines) { const txt = line.trim(); if (txt.length > 0) { const span = textElem.append('tspan'); span.text(txt); - const textBounds = span.node().getBBox(); - textHeight += textBounds.height; + if (tHeight === 0) { + const textBounds = span.node().getBBox(); + tHeight += textBounds.height; + } + // console.warn('textBounds', textBounds); + textHeight += tHeight; span.attr('x', x + 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 };