marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-12-04 19:44:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixes #4408: solve infinite loop on words that exceed width constraint with word break

Browse Source
This commit is contained in:
mikejeffers
2023-05-20 14:59:04 -04:00
parent b1590c2211
commit f535640c1e
1 changed files with 48 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
packages/mermaid/src/rendering-util/createText.js
View File

@@ -76,6 +76,22 @@ function createTspan(textElement, lineIndex, lineHeight) {
.attr('dy', lineHeight + 'em'); .attr('dy', lineHeight + 'em');
} }
/**
* Compute the width of rendered text
* @param {object} parentNode
* @param {number} lineHeight
* @param {string} text
* @returns {number}
*/
function testWidthOfText(parentNode, lineHeight, text) {
const testElement = parentNode.append('text').attr('y', '-10.1');
const testSpan = createTspan(testElement, 1, lineHeight);
updateTextContentAndStyles(testSpan, [{ content: text, type: 'normal' }]);
const val = testSpan.node().getComputedTextLength();
testElement.remove();
return val;
}
/** /**
* Creates a formatted text element by breaking lines and applying styles based on * Creates a formatted text element by breaking lines and applying styles based on
* the given structuredText. * the given structuredText.
@@ -93,32 +109,41 @@ function createFormattedText(width, g, structuredText, addBackground = false) {
// .attr('dominant-baseline', 'middle') // .attr('dominant-baseline', 'middle')
// .attr('text-anchor', 'middle'); // .attr('text-anchor', 'middle');
// .attr('text-anchor', 'middle'); // .attr('text-anchor', 'middle');
let lineIndex = -1; let lineIndex = 0;
structuredText.forEach((line) => { structuredText.forEach((line) => {
lineIndex++; /**
let tspan = createTspan(textElement, lineIndex, lineHeight); * Preprocess raw string content of line data
* Creating an array of strings pre-split to satisfy width limit
let words = [...line].reverse(); */
let currentWord; let fullStr = line.map((data) => data.content).join(' ');
let wrappedLine = []; let tempStr = '';
let linesUnderWidth = [];
while (words.length) { let prevIndex = 0;
currentWord = words.pop(); for (let i = 0; i <= fullStr.length; i++) {
wrappedLine.push(currentWord); tempStr = fullStr.slice(prevIndex, i);
log.info(tempStr, prevIndex, i);
updateTextContentAndStyles(tspan, wrappedLine); if (testWidthOfText(labelGroup, lineHeight, tempStr) > width) {
const subStr = fullStr.slice(prevIndex, i);
if (tspan.node().getComputedTextLength() > width) { // Break at space if any
wrappedLine.pop(); const lastSpaceIndex = subStr.lastIndexOf(' ');
words.push(currentWord); if (lastSpaceIndex > -1) {
i = prevIndex + lastSpaceIndex + 1;
updateTextContentAndStyles(tspan, wrappedLine); }
linesUnderWidth.push(fullStr.slice(prevIndex, i));
wrappedLine = []; prevIndex = i;
lineIndex++; tempStr = null;
tspan = createTspan(textElement, lineIndex, lineHeight);
} }
} }
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) { if (addBackground) {
const bbox = textElement.node().getBBox(); const bbox = textElement.node().getBBox();