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

Bug/1033 state diagram new lines in notes

cypress/integration/rendering/current.spec.js

@@ -5,28 +5,15 @@ describe('State diagram', () => {
   it('should render a flowchart full of circles', () => {
     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)
-      `,
       {}
     );
   });

src/diagrams/state/shapes.js

@@ -272,17 +272,22 @@ const _drawLongText = (_text, x, y, g) => {
   let text = _text.replace(/\r\n/g, '<br/>');
   text = text.replace(/\n/g, '<br/>');
   const lines = text.split(/<br\/?>/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();
+      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('y', y + textHeight + 1.25 * getConfig().state.noteMargin);
-      // textWidth = Math.max(textBounds.width, textWidth);
     }
   }
   return { textWidth: textElem.node().getBBox().width, textHeight };

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%');
+  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(
     '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 => {
   return text ? text.length * conf.fontSizeFactor : 1;

src/mermaidAPI.js

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