Render the text and line in correct position

mermaid-js · Aug 17, 2023 · 2a0bfea · 2a0bfea
1 parent 6d55b70
commit 2a0bfea
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
@@ -946,7 +946,7 @@ context('Sequence diagram', () => {
       imgSnapshotTest(
         `
           sequenceDiagram
-          Alice -->> Bob: wrap: "\`This is a super long message with wrap enabled with **markdown bold, a whole lot of bold** and *italics*\`"
+          Alice -->> Bob: wrap: "\`This is a super long message with wrap enabled with **markdown bold, a whole lot of bold** and *italics*. Maybe the line isn't solved after all\`"
           `,
         {
           htmlLabels: true,

diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -387,6 +387,13 @@ const drawMessage = function (diagram, msgModel, lineStartY: number, diagObj: Di
 
   if (textType) {
     drawMarkdownText(diagram, textObj);
+
+    bounds.bumpVerticalPos(textObj.height);
+    //bounds.insert(msgModel.startx, msgModel.starty, msgModel.stopx, msgModel.stopy);
+    bounds.models.addMessage(msgModel);
+    //TODO figure out why 3 makes the padding between the line and markdown text
+    //to look like the padding between strings and lines
+    lineStartY += textObj.height - 3 * textObj.textMargin;
   } else {
     drawText(diagram, textObj);
   }

diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -210,7 +210,7 @@ export const drawMarkdownText = function (elem, textData) {
 
   const [_textFontSize, _textFontSizePx] = parseFontSize(textData.fontSize);
 
-  const yfunc = calculateYFunc(textData);
+  const yfunc = calculateYFunc(textData, bbox.height);
   textData = setXAndAnchor(textData);
 
   if (textData.anchor !== undefined) {
@@ -238,6 +238,8 @@ export const drawMarkdownText = function (elem, textData) {
   innerLabel.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
   messageLabel.attr('transform', `translate(${textData.x}, ${yfunc() + textData.textMargin})`);
 
+  textData.height = bbox.height;
+
   return labelText;
 };