marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-17 14:29:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

wraps long text into new line

Browse Source 
Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>
This commit is contained in:
Shahir Ahmed
2025-02-25 15:21:08 -05:00
parent 4f592115e0
commit d47e4724cb
1 changed files with 53 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
View File

@@ -19,11 +19,14 @@ let maxWidth = 0;
function drawActorLegend(diagram) {
const conf = getConfig().journey;
maxWidth = 0;
// Draw the actors
let yPos = 60;
const getRemInPx = (rem) => {
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
};
Object.keys(actors).forEach((person) => {
const colour = actors[person].color;
const circleData = {
cx: 20,
cy: yPos,
@@ -34,20 +37,56 @@ function drawActorLegend(diagram) {
};
svgDraw.drawCircle(diagram, circleData);
// Create temporary text element to measure width
const tempText = diagram.append('text').attr('visibility', 'hidden').text(person);
const textWidth = tempText.node().getBBox().width;
tempText.remove();
const maxLineLength = getRemInPx(15);
let lines = [];
if (textWidth > maxLineLength) {
// Break the text into chunks regardless of word boundaries
let currentText = '';
const measureText = diagram.append('text').attr('visibility', 'hidden');
for (const element of person) {
currentText += element;
measureText.text(currentText);
const currentWidth = measureText.node().getBBox().width;
if (currentWidth > maxLineLength && currentText.length > 1) {
// Add hyphen only if we're breaking within a word
lines.push(currentText.slice(0, -1) + '-');
currentText = element;
}
}
if (currentText) {
lines.push(currentText);
}
measureText.remove();
} else {
lines = [person];
}
// Draw the text lines
lines.forEach((line, index) => {
const labelData = {
x: 40,
y: yPos + 7,
y: yPos + 7 + index * 20,
fill: '#666',
text: person,
text: line,
textMargin: conf.boxTextMargin | 5,
};
const textElement = svgDraw.drawText(diagram, labelData);
const textLength = textElement.node().getBBox().width;
if (textLength > maxWidth && textLength > conf?.leftMargin - textLength) {
maxWidth = textLength;
const lineWidth = textElement.node().getBBox().width;
if (lineWidth > maxWidth && lineWidth > conf?.leftMargin - lineWidth) {
maxWidth = lineWidth;
}
yPos += 20;
});
yPos += Math.max(20, lines.length * 20);
});
}
// TODO: Cleanup?