Merge pull request #4416 from MikeJeffers/bug/4408

Fix #4408: Handle wrapping long words

cypress/integration/rendering/mindmap.spec.ts

@@ -52,6 +52,17 @@ root[A root with a long text that wraps to keep the node size in check]
     );
   });
 
+  it('a root with wrapping text and long words that exceed width', () => {
+    imgSnapshotTest(
+      `mindmap
+root[A few smaller words but then averylongsetofcharacterswithoutwhitespacetoseparate that we expect to wrapontonextlinesandnotexceedwidthparameters]
+    `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+  });
+
   it('a root with an icon', () => {
     imgSnapshotTest(
       `mindmap

packages/mermaid/src/rendering-util/createText.js

@@ -78,6 +78,22 @@ function createTspan(textElement, lineIndex, lineHeight) {
     .attr('dy', lineHeight + 'em');
 }
 
+/**
+ * Compute the width of rendered text
+ * @param {object} parentNode
+ * @param {number} lineHeight
+ * @param {string} text
+ * @returns {number}
+ */
+function computeWidthOfText(parentNode, lineHeight, text) {
+  const testElement = parentNode.append('text');
+  const testSpan = createTspan(testElement, 1, lineHeight);
+  updateTextContentAndStyles(testSpan, [{ content: text, type: 'normal' }]);
+  const textLength = testSpan.node().getComputedTextLength();
+  testElement.remove();
+  return textLength;
+}
+
 /**
  * Creates a formatted text element by breaking lines and applying styles based on
  * the given structuredText.
@@ -95,31 +111,44 @@ function createFormattedText(width, g, structuredText, addBackground = false) {
   // .attr('dominant-baseline', 'middle')
   // .attr('text-anchor', 'middle');
   // .attr('text-anchor', 'middle');
-  let lineIndex = -1;
+  let lineIndex = 0;
   structuredText.forEach((line) => {
-    lineIndex++;
-    let tspan = createTspan(textElement, lineIndex, lineHeight);
-
-    let words = [...line].reverse();
-    let currentWord;
-    let wrappedLine = [];
-
-    while (words.length) {
-      currentWord = words.pop();
-      wrappedLine.push(currentWord);
-
-      updateTextContentAndStyles(tspan, wrappedLine);
-
-      if (tspan.node().getComputedTextLength() > width) {
-        wrappedLine.pop();
-        words.push(currentWord);
-
-        updateTextContentAndStyles(tspan, wrappedLine);
-
-        wrappedLine = [];
-        lineIndex++;
-        tspan = createTspan(textElement, lineIndex, lineHeight);
+    /**
+     * Preprocess raw string content of line data
+     * Creating an array of strings pre-split to satisfy width limit
+     */
+    let fullStr = line.map((data) => data.content).join(' ');
+    let tempStr = '';
+    let linesUnderWidth = [];
+    let prevIndex = 0;
+    if (computeWidthOfText(labelGroup, lineHeight, fullStr) <= width) {
+      linesUnderWidth.push(fullStr);
+    } else {
+      for (let i = 0; i <= fullStr.length; i++) {
+        tempStr = fullStr.slice(prevIndex, i);
+        log.info(tempStr, prevIndex, i);
+        if (computeWidthOfText(labelGroup, lineHeight, tempStr) > width) {
+          const subStr = fullStr.slice(prevIndex, i);
+          // Break at space if any
+          const lastSpaceIndex = subStr.lastIndexOf(' ');
+          if (lastSpaceIndex > -1) {
+            i = prevIndex + lastSpaceIndex + 1;
+          }
+          linesUnderWidth.push(fullStr.slice(prevIndex, i).trim());
+          prevIndex = i;
+          tempStr = null;
+        }
       }
+      if (tempStr != null) {
+        linesUnderWidth.push(tempStr);
+      }
+    }
+    /** Add each prepared line as a tspan to the parent node */
+    const preparedLines = linesUnderWidth.map((w) => ({ content: w, type: line.type }));
+    for (const preparedLine of preparedLines) {
+      let tspan = createTspan(textElement, lineIndex, lineHeight);
+      updateTextContentAndStyles(tspan, [preparedLine]);
+      lineIndex++;
     }
   });
   if (addBackground) {