Merge pull request #1315 from rmedaer/feature/multiline-sequence-message-alignment

Feature/Multiline sequence message alignment

Author: knsv

docs/mermaidAPI.md

@@ -174,6 +174,14 @@ margin around notes.
 Space between messages.
 **Default value 35**.
 
+### messageAlign
+
+Multiline message alignment. Possible values are:
+
+-   left
+-   center **default**
+-   right
+
 ### mirrorActors
 
 mirror actors under diagram.

src/diagrams/sequence/sequenceRenderer.js

@@ -24,6 +24,8 @@ const conf = {
   noteMargin: 10,
   // Space between messages
   messageMargin: 35,
+  // Multiline message alignment
+  messageAlign: 'center',
   // mirror actors under diagram
   mirrorActors: false,
   // Depending on css styling this might need adjustment
@@ -230,26 +232,38 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde
   const g = elem.append('g');
   const txtCenter = startx + (stopx - startx) / 2;
 
-  let textElem;
+  let textElems = [];
   let counterBreaklines = 0;
   let breaklineOffset = 17;
   const breaklines = msg.message.split(/<br\s*\/?>/gi);
   for (const breakline of breaklines) {
-    textElem = g
-      .append('text') // text label for the x axis
-      .attr('x', txtCenter)
-      .attr('y', verticalPos - 7 + counterBreaklines * breaklineOffset)
-      .style('text-anchor', 'middle')
-      .attr('class', 'messageText')
-      .text(breakline.trim());
+    textElems.push(
+      g
+        .append('text') // text label for the x axis
+        .attr('x', txtCenter)
+        .attr('y', verticalPos - 7 + counterBreaklines * breaklineOffset)
+        .style('text-anchor', 'middle')
+        .attr('class', 'messageText')
+        .text(breakline.trim())
+    );
     counterBreaklines++;
   }
   const offsetLineCounter = counterBreaklines - 1;
   const totalOffset = offsetLineCounter * breaklineOffset;
 
-  bounds.bumpVerticalPos(totalOffset);
+  let textWidths = textElems.map(function(textElem) {
+    return (textElem._groups || textElem)[0][0].getBBox().width;
+  });
+  let textWidth = Math.max(...textWidths);
+  for (const textElem of textElems) {
+    if (conf.messageAlign === 'left') {
+      textElem.attr('x', txtCenter - textWidth / 2).style('text-anchor', 'start');
+    } else if (conf.messageAlign === 'right') {
+      textElem.attr('x', txtCenter + textWidth / 2).style('text-anchor', 'end');
+    }
+  }
 
-  let textWidth = (textElem._groups || textElem)[0][0].getBBox().width;
+  bounds.bumpVerticalPos(totalOffset);
 
   let line;
   if (startx === stopx) {

src/mermaidAPI.js

@@ -229,6 +229,14 @@ const config = {
      */
     messageMargin: 35,
 
+    /**
+     * Multiline message alignment. Possible values are:
+     *   * left
+     *   * center **default**
+     *   * right
+     */
+    messageAlign: 'center',
+
     /**
      * mirror actors under diagram.
      * **Default value true**.
@@ -809,6 +817,7 @@ export default mermaidAPI;
  *       boxTextMargin:5,
  *       noteMargin:10,
  *       messageMargin:35,
+ *       messageAlign:'center',
  *       mirrorActors:true,
  *       bottomMarginAdj:1,
  *       useMaxWidth:true,