Merge branch 'develop' of https://github.com/designsforhealth/mermaid into designsforhealth-develop

cypress/integration/rendering/sequencediagram.spec.js

@@ -52,6 +52,26 @@ context('Sequence diagram', () => {
       {}
     );
   });
+  it('should handle line breaks and wrap annotations', () => {
+    imgSnapshotTest(
+      `
+      sequenceDiagram
+      participant Alice
+      participant Bob
+      participant John as John<br/>Second Line
+      Alice ->> Bob: Hello Bob, how are you?
+      Bob-->>John: How about you John?
+      Note right of John: John thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+      Bob-->Alice: Checking with John...
+      Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
+      Bob-x John: Hey John -<br/>we're still waiting to know<br/>how you're doing
+      Note over John:nowrap: John's trying hard not to break his train of thought.
+      Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
+      Note over John: After a few more moments, John<br/>finally snaps out of it.
+    `,
+      {}
+    );
+  })
   it('should render loops with a slight margin', () => {
     imgSnapshotTest(
       `

dist/index.html

@@ -449,8 +449,13 @@ Bob-->>John: How about you John?
 end
 Bob--x Alice: I am good thanks!
 Bob-x John: I am good thanks!
-Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+Note right of John: John thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
 Bob-->Alice: Checking with John...
+Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
+Bob-x John: Hey John - we're still waiting to know<br/>how you're doing
+Note over John:nowrap: John's trying hard not to break his train of thought.
+Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
+Note over John: After a few more moments, John<br/>finally snaps out of it.
 end
 alt either this
 Alice->>John: Yes

dist/mermaid.core.js

@@ -17226,9 +17226,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "apply", function() { return apply; });
 /* harmony import */ var _mermaidAPI__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../mermaidAPI */ "./src/mermaidAPI.js");
 /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../config */ "./src/config.js");
-/* harmony import */ var _common_common__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../common/common */ "./src/diagrams/common/common.js");
-/* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../logger */ "./src/logger.js");
-
+/* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../logger */ "./src/logger.js");
 
 
 
@@ -17376,9 +17374,9 @@ var parseMessage = function parseMessage(str) {
 
   var message = {
     text: _str.replace(/^[:]?(?:no)?wrap:/, '').trim(),
-    wrap: _str.match(/^[:]?(?:no)?wrap:/) === null ? _common_common__WEBPACK_IMPORTED_MODULE_2__["default"].hasBreaks(_str) || undefined : _str.match(/^[:]?wrap:/) !== null ? true : _str.match(/^[:]?nowrap:/) !== null ? false : undefined
+    wrap: _str.match(/^[:]?wrap:/) !== null ? true : _str.match(/^[:]?nowrap:/) !== null ? false : undefined
   };
-  _logger__WEBPACK_IMPORTED_MODULE_3__["logger"].debug('parseMessage:', message);
+  _logger__WEBPACK_IMPORTED_MODULE_2__["logger"].debug('parseMessage:', message);
   return message;
 };
 var LINETYPE = {
@@ -17818,7 +17816,6 @@ var drawNote = function drawNote(elem, noteModel) {
   textObj.anchor = conf.noteAlign;
   textObj.textMargin = conf.noteMargin;
   textObj.valign = conf.noteAlign;
-  textObj.wrap = true;
   var textElem = Object(_svgDraw__WEBPACK_IMPORTED_MODULE_1__["drawText"])(g, textObj);
   var textHeight = Math.round(textElem.map(function (te) {
     return (te._groups || te)[0][0].getBBox().height;
@@ -17871,8 +17868,7 @@ var drawMessage = function drawMessage(g, msgModel) {
       starty = msgModel.starty,
       message = msgModel.message,
       type = msgModel.type,
-      sequenceIndex = msgModel.sequenceIndex,
-      wrap = msgModel.wrap;
+      sequenceIndex = msgModel.sequenceIndex;
   var lines = _common_common__WEBPACK_IMPORTED_MODULE_4__["default"].splitBreaks(message).length;
   var textDims = _utils__WEBPACK_IMPORTED_MODULE_7__["default"].calculateTextDimensions(message, messageFont(conf));
   var lineHeight = textDims.height / lines;
@@ -17892,7 +17888,6 @@ var drawMessage = function drawMessage(g, msgModel) {
   textObj.valign = conf.messageAlign;
   textObj.textMargin = conf.wrapPadding;
   textObj.tspan = false;
-  textObj.wrap = wrap;
   Object(_svgDraw__WEBPACK_IMPORTED_MODULE_1__["drawText"])(g, textObj);
   var totalOffset = textDims.height - 10;
   var textWidth = textDims.width;
@@ -18408,12 +18403,12 @@ var buildMessageModel = function buildMessageModel(msg, actors) {
   var toIdx = fromBounds[0] < toBounds[0] ? 0 : 1;
   var allBounds = fromBounds.concat(toBounds);
   var boundedWidth = Math.abs(toBounds[toIdx] - fromBounds[fromIdx]);
-  var msgDims = _utils__WEBPACK_IMPORTED_MODULE_7__["default"].calculateTextDimensions(msg.message, messageFont(conf));
 
   if (msg.wrap && msg.message) {
     msg.message = _utils__WEBPACK_IMPORTED_MODULE_7__["default"].wrapLabel(msg.message, Math.max(boundedWidth + 2 * conf.wrapPadding, conf.width), messageFont(conf));
   }
 
+  var msgDims = _utils__WEBPACK_IMPORTED_MODULE_7__["default"].calculateTextDimensions(msg.message, messageFont(conf));
   return {
     width: Math.max(msg.wrap ? 0 : msgDims.width + 2 * conf.wrapPadding, boundedWidth + 2 * conf.wrapPadding, conf.width),
     height: 0,
@@ -18605,7 +18600,7 @@ var drawRect = function drawRect(elem, rectData) {
 var drawText = function drawText(elem, textData) {
   var prevTextHeight = 0,
       textHeight = 0;
-  var lines = textData.wrap ? textData.text.split(_common_common__WEBPACK_IMPORTED_MODULE_0__["default"].lineBreakRegex) : [textData.text.replace(_common_common__WEBPACK_IMPORTED_MODULE_0__["default"].lineBreakRegex, ' ')];
+  var lines = textData.text.split(_common_common__WEBPACK_IMPORTED_MODULE_0__["default"].lineBreakRegex);
   var textElems = [];
   var dy = 0;
 

dist/mermaid.js

@@ -30304,7 +30304,7 @@ function addHtmlLabel(root, node) {
   var client = div.node().getBoundingClientRect();
   fo
     .attr("width", client.width)
-    .attr("height", client.height);
+    .attr("height", client.height); 
 
   return fo;
 }
@@ -65588,9 +65588,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "apply", function() { return apply; });
 /* harmony import */ var _mermaidAPI__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../mermaidAPI */ "./src/mermaidAPI.js");
 /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../config */ "./src/config.js");
-/* harmony import */ var _common_common__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../common/common */ "./src/diagrams/common/common.js");
-/* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../logger */ "./src/logger.js");
-
+/* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../logger */ "./src/logger.js");
 
 
 
@@ -65738,9 +65736,9 @@ var parseMessage = function parseMessage(str) {
 
   var message = {
     text: _str.replace(/^[:]?(?:no)?wrap:/, '').trim(),
-    wrap: _str.match(/^[:]?(?:no)?wrap:/) === null ? _common_common__WEBPACK_IMPORTED_MODULE_2__["default"].hasBreaks(_str) || undefined : _str.match(/^[:]?wrap:/) !== null ? true : _str.match(/^[:]?nowrap:/) !== null ? false : undefined
+    wrap: _str.match(/^[:]?wrap:/) !== null ? true : _str.match(/^[:]?nowrap:/) !== null ? false : undefined
   };
-  _logger__WEBPACK_IMPORTED_MODULE_3__["logger"].debug('parseMessage:', message);
+  _logger__WEBPACK_IMPORTED_MODULE_2__["logger"].debug('parseMessage:', message);
   return message;
 };
 var LINETYPE = {
@@ -66179,7 +66177,6 @@ var drawNote = function drawNote(elem, noteModel) {
   textObj.anchor = conf.noteAlign;
   textObj.textMargin = conf.noteMargin;
   textObj.valign = conf.noteAlign;
-  textObj.wrap = true;
   var textElem = Object(_svgDraw__WEBPACK_IMPORTED_MODULE_1__["drawText"])(g, textObj);
   var textHeight = Math.round(textElem.map(function (te) {
     return (te._groups || te)[0][0].getBBox().height;
@@ -66232,8 +66229,7 @@ var drawMessage = function drawMessage(g, msgModel) {
       starty = msgModel.starty,
       message = msgModel.message,
       type = msgModel.type,
-      sequenceIndex = msgModel.sequenceIndex,
-      wrap = msgModel.wrap;
+      sequenceIndex = msgModel.sequenceIndex;
   var lines = _common_common__WEBPACK_IMPORTED_MODULE_4__["default"].splitBreaks(message).length;
   var textDims = _utils__WEBPACK_IMPORTED_MODULE_7__["default"].calculateTextDimensions(message, messageFont(conf));
   var lineHeight = textDims.height / lines;
@@ -66253,7 +66249,6 @@ var drawMessage = function drawMessage(g, msgModel) {
   textObj.valign = conf.messageAlign;
   textObj.textMargin = conf.wrapPadding;
   textObj.tspan = false;
-  textObj.wrap = wrap;
   Object(_svgDraw__WEBPACK_IMPORTED_MODULE_1__["drawText"])(g, textObj);
   var totalOffset = textDims.height - 10;
   var textWidth = textDims.width;
@@ -66769,12 +66764,12 @@ var buildMessageModel = function buildMessageModel(msg, actors) {
   var toIdx = fromBounds[0] < toBounds[0] ? 0 : 1;
   var allBounds = fromBounds.concat(toBounds);
   var boundedWidth = Math.abs(toBounds[toIdx] - fromBounds[fromIdx]);
-  var msgDims = _utils__WEBPACK_IMPORTED_MODULE_7__["default"].calculateTextDimensions(msg.message, messageFont(conf));
 
   if (msg.wrap && msg.message) {
     msg.message = _utils__WEBPACK_IMPORTED_MODULE_7__["default"].wrapLabel(msg.message, Math.max(boundedWidth + 2 * conf.wrapPadding, conf.width), messageFont(conf));
   }
 
+  var msgDims = _utils__WEBPACK_IMPORTED_MODULE_7__["default"].calculateTextDimensions(msg.message, messageFont(conf));
   return {
     width: Math.max(msg.wrap ? 0 : msgDims.width + 2 * conf.wrapPadding, boundedWidth + 2 * conf.wrapPadding, conf.width),
     height: 0,
@@ -66966,7 +66961,7 @@ var drawRect = function drawRect(elem, rectData) {
 var drawText = function drawText(elem, textData) {
   var prevTextHeight = 0,
       textHeight = 0;
-  var lines = textData.wrap ? textData.text.split(_common_common__WEBPACK_IMPORTED_MODULE_0__["default"].lineBreakRegex) : [textData.text.replace(_common_common__WEBPACK_IMPORTED_MODULE_0__["default"].lineBreakRegex, ' ')];
+  var lines = textData.text.split(_common_common__WEBPACK_IMPORTED_MODULE_0__["default"].lineBreakRegex);
   var textElems = [];
   var dy = 0;
 

src/diagrams/sequence/sequenceDb.js

@@ -1,6 +1,5 @@
 import mermaidAPI from '../../mermaidAPI';
 import * as configApi from '../../config';
-import common from '../common/common';
 import { logger } from '../../logger';
 
 let prevActor = undefined;
@@ -138,9 +137,7 @@ export const parseMessage = function(str) {
   const message = {
     text: _str.replace(/^[:]?(?:no)?wrap:/, '').trim(),
     wrap:
-      _str.match(/^[:]?(?:no)?wrap:/) === null
-        ? common.hasBreaks(_str) || undefined
-        : _str.match(/^[:]?wrap:/) !== null
+      _str.match(/^[:]?wrap:/) !== null
         ? true
         : _str.match(/^[:]?nowrap:/) !== null
         ? false

src/diagrams/sequence/sequenceDiagram.spec.js

@@ -442,6 +442,87 @@ note right of 1: multiline<br \t/>text
     expect(messages[6].message).toBe('multiline<br \t/>text');
     expect(messages[7].message).toBe('multiline<br \t/>text');
   });
+  it('it should handle notes and messages without wrap specified', function () {
+    const str = `
+sequenceDiagram
+participant 1
+participant 2
+participant 3
+participant 4
+1->>2: single-line text
+note right of 2: single-line text
+2->>3:nowrap: single-line text
+note right of 3:nowrap: single-line text
+3->>4: multiline<br/>text
+note right of 4: multiline<br/>text
+4->>1:nowrap: multiline<br/>text
+note right of 1:nowrap: multiline<br/>text
+`;
+
+    mermaidAPI.parse(str);
+
+    const messages = parser.yy.getMessages();
+    expect(messages[0].message).toBe('single-line text');
+    expect(messages[1].message).toBe('single-line text');
+    expect(messages[2].message).toBe('single-line text');
+    expect(messages[3].message).toBe('single-line text');
+    expect(messages[4].message).toBe('multiline<br/>text');
+    expect(messages[5].message).toBe('multiline<br/>text');
+    expect(messages[6].message).toBe('multiline<br/>text');
+    expect(messages[7].message).toBe('multiline<br/>text');
+
+    // wrap indicates whether wrap is specified
+    expect(messages[0].wrap).toBe(false);
+    expect(messages[1].wrap).toBe(false);
+    expect(messages[2].wrap).toBe(false);
+    expect(messages[3].wrap).toBe(false);
+    expect(messages[4].wrap).toBe(false);
+    expect(messages[5].wrap).toBe(false);
+    expect(messages[6].wrap).toBe(false);
+    expect(messages[7].wrap).toBe(false);
+  })
+  it('it should handle notes and messages with wrap specified', function () {
+    const str = `
+sequenceDiagram
+participant 1
+participant 2
+participant 3
+participant 4
+1->>2:wrap: single-line text
+note right of 2:wrap: single-line text
+2->>3:wrap: multiline<br/>text
+note right of 3:wrap: multiline<br/>text
+`;
+
+    mermaidAPI.parse(str);
+
+    const messages = parser.yy.getMessages();
+    expect(messages[0].message).toBe('single-line text');
+    expect(messages[1].message).toBe('single-line text');
+    expect(messages[2].message).toBe('multiline<br/>text');
+    expect(messages[3].message).toBe('multiline<br/>text');
+    expect(messages[0].wrap).toBe(true);
+    expect(messages[1].wrap).toBe(true);
+    expect(messages[2].wrap).toBe(true);
+    expect(messages[3].wrap).toBe(true);
+  })
+  it('it should handle notes and messages with nowrap or line breaks', function () {
+    const str = `
+sequenceDiagram
+participant 1
+participant 2
+1->>2: single-line text
+note right of 2: single-line text
+`;
+
+    mermaidAPI.parse(str);
+
+    const messages = parser.yy.getMessages();
+    expect(messages[0].message).toBe('single-line text');
+    expect(messages[1].message).toBe('single-line text');
+    expect(messages[0].wrap).toBe(false);
+    expect(messages[1].wrap).toBe(false);
+  })
   it('it should handle notes over a single actor', function() {
     const str = `
 sequenceDiagram

src/diagrams/sequence/sequenceRenderer.js

@@ -226,7 +226,6 @@ const drawNote = function(elem, noteModel) {
   textObj.anchor = conf.noteAlign;
   textObj.textMargin = conf.noteMargin;
   textObj.valign = conf.noteAlign;
-  textObj.wrap = true;
 
   let textElem = drawText(g, textObj);
 
@@ -272,7 +271,7 @@ const actorFont = cnf => {
  */
 const drawMessage = function(g, msgModel) {
   bounds.bumpVerticalPos(10);
-  const { startx, stopx, starty, message, type, sequenceIndex, wrap } = msgModel;
+  const { startx, stopx, starty, message, type, sequenceIndex } = msgModel;
   const lines = common.splitBreaks(message).length;
   let textDims = utils.calculateTextDimensions(message, messageFont(conf));
   const lineHeight = textDims.height / lines;
@@ -293,7 +292,6 @@ const drawMessage = function(g, msgModel) {
   textObj.valign = conf.messageAlign;
   textObj.textMargin = conf.wrapPadding;
   textObj.tspan = false;
-  textObj.wrap = wrap;
 
   drawText(g, textObj);
 
@@ -971,7 +969,6 @@ const buildMessageModel = function(msg, actors) {
   const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1;
   const allBounds = fromBounds.concat(toBounds);
   const boundedWidth = Math.abs(toBounds[toIdx] - fromBounds[fromIdx]);
-  const msgDims = utils.calculateTextDimensions(msg.message, messageFont(conf));
   if (msg.wrap && msg.message) {
     msg.message = utils.wrapLabel(
       msg.message,
@@ -979,6 +976,8 @@ const buildMessageModel = function(msg, actors) {
       messageFont(conf)
     );
   }
+  const msgDims = utils.calculateTextDimensions(msg.message, messageFont(conf));
+
   return {
     width: Math.max(
       msg.wrap ? 0 : msgDims.width + 2 * conf.wrapPadding,

src/diagrams/sequence/svgDraw.js

@@ -21,9 +21,7 @@ export const drawRect = function(elem, rectData) {
 export const drawText = function(elem, textData) {
   let prevTextHeight = 0,
     textHeight = 0;
-  const lines = textData.wrap
-    ? textData.text.split(common.lineBreakRegex)
-    : [textData.text.replace(common.lineBreakRegex, ' ')];
+  const lines = textData.text.split(common.lineBreakRegex);
 
   let textElems = [];
   let dy = 0;

src/diagrams/sequence/svgDraw.spec.js

@@ -49,6 +49,58 @@ describe('svgDraw', function() {
       expect(rect.attr).not.toHaveBeenCalledWith('class', expect.anything());
     });
   });
+  describe('drawText', function() {
+    it('it should append a single element', function() {
+      const svg = MockD3('svg');
+      svgDraw.drawText(svg, {
+        x: 10,
+        y: 10,
+        dy: '1em',
+        text: 'One fine text message',
+        class: 'noteText',
+        fontFamily: 'courier',
+        fontSize: '10px',
+        fontWeight: '500',
+      });
+      expect(svg.__children.length).toBe(1);
+      const text = svg.__children[0];
+      expect(text.__name).toBe('text');
+      expect(text.attr).toHaveBeenCalledWith('x', 10);
+      expect(text.attr).toHaveBeenCalledWith('y', 10);
+      expect(text.attr).toHaveBeenCalledWith('dy', '1em');
+      expect(text.attr).toHaveBeenCalledWith('class', 'noteText');
+      expect(text.text).toHaveBeenCalledWith('One fine text message');
+      expect(text.style).toHaveBeenCalledWith('font-family', 'courier');
+      expect(text.style).toHaveBeenCalledWith('font-size', '10px');
+      expect(text.style).toHaveBeenCalledWith('font-weight', '500');
+    });
+    it('it should append a multiple elements', function() {
+      const svg = MockD3('svg');
+      svgDraw.drawText(svg, {
+        x: 10,
+        y: 10,
+        text: 'One fine text message<br>with multiple<br>fine lines',
+      });
+      expect(svg.__children.length).toBe(3);
+      const text1 = svg.__children[0];
+      expect(text1.__name).toBe('text');
+      expect(text1.attr).toHaveBeenCalledWith('x', 10);
+      expect(text1.attr).toHaveBeenCalledWith('y', 10);
+      expect(text1.text).toHaveBeenCalledWith('One fine text message');
+
+      const text2 = svg.__children[1];
+      expect(text2.__name).toBe('text');
+      expect(text2.attr).toHaveBeenCalledWith('x', 10);
+      expect(text2.attr).toHaveBeenCalledWith('y', 10);
+      expect(text2.text).toHaveBeenCalledWith('with multiple');
+
+      const text3 = svg.__children[2];
+      expect(text3.__name).toBe('text');
+      expect(text3.attr).toHaveBeenCalledWith('x', 10);
+      expect(text3.attr).toHaveBeenCalledWith('y', 10);
+      expect(text3.text).toHaveBeenCalledWith('fine lines');
+    });
+  });
   describe('drawBackgroundRect', function() {
     it('it should append a rect before the previous element within a given bound', function() {
       const svg = MockD3('svg');