marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-21 01:06:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix some pixel issues

Browse Source 
Co-authored-by: pranavm2109 <mishrap@dickinson.edu>
This commit is contained in:
Shahir Ahmed
2025-03-19 22:51:02 -04:00
parent b322392f97
commit 2d583b186d
2 changed files with 9 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
cypress/integration/rendering/journey.spec.js
View File

@@ -169,7 +169,7 @@ section Checkout from website
{ journey: { useMaxWidth: true } } { journey: { useMaxWidth: true } }
); );
let diagramStartX; let diagramStartX, maxLineWidth;
// Get the diagram's left edge // Get the diagram's left edge
cy.contains('foreignobject', 'Sign Up') cy.contains('foreignobject', 'Sign Up')
@@ -178,22 +178,17 @@ section Checkout from website
}) })
.then(() => { .then(() => {
cy.get('text.legend').then(($lines) => { cy.get('text.legend').then(($lines) => {
// Check that there are two lines // Check that there are multiple lines
expect($lines.length).to.be.equal(9); expect($lines.length).to.be.equal(9);
// Check that all lines are under the max width // Check that all lines are under the max width
$lines.each((index, el) => { $lines.each((index, el) => {
const bbox = el.getBBox(); const bbox = el.getBBox();
expect(bbox.width).to.be.lte(320); expect(bbox.width).to.be.lte(320);
maxLineWidth = Math.max(maxLineWidth || 0, bbox.width);
}); });
// check baseline margin between diagram and legend is maintained expect(diagramStartX - 150).to.be.closeTo(maxLineWidth, 2);
const longestBBox = $lines.get(7).getBBox(); // longest Line's bbox
if (diagramStartX && longestBBox) {
const legendRightEdge = longestBBox.x + longestBBox.width;
const margin = diagramStartX - legendRightEdge;
expect(margin).to.be.closeTo(150, 2);
}
}); });
}); });
}); });

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

@@ -36,7 +36,7 @@ function drawActorLegend(diagram) {
// First, measure the full text width without wrapping. // First, measure the full text width without wrapping.
let measureText = diagram.append('text').attr('visibility', 'hidden').text(person); let measureText = diagram.append('text').attr('visibility', 'hidden').text(person);
const fullTextWidth = measureText.node().getBBox().width; const fullTextWidth = measureText.node().getBoundingClientRect().width;
measureText.remove(); measureText.remove();
let lines = []; let lines = [];
@@ -54,7 +54,7 @@ function drawActorLegend(diagram) {
// check the width of the line with the new word. // check the width of the line with the new word.
const testLine = currentLine ? `${currentLine} ${word}` : word; const testLine = currentLine ? `${currentLine} ${word}` : word;
measureText.text(testLine); measureText.text(testLine);
const textWidth = measureText.node().getBBox().width; const textWidth = measureText.node().getBoundingClientRect().width;
if (textWidth > maxLabelWidth) { if (textWidth > maxLabelWidth) {
// If adding the new word exceeds max width, push the current line. // If adding the new word exceeds max width, push the current line.
@@ -65,12 +65,12 @@ function drawActorLegend(diagram) {
// If the word itself is too long, break it with a hyphen. // If the word itself is too long, break it with a hyphen.
measureText.text(word); measureText.text(word);
if (measureText.node().getBBox().width > maxLabelWidth) { if (measureText.node().getBoundingClientRect().width > maxLabelWidth) {
let brokenWord = ''; let brokenWord = '';
for (const char of word) { for (const char of word) {
brokenWord += char; brokenWord += char;
measureText.text(brokenWord + '-'); measureText.text(brokenWord + '-');
if (measureText.node().getBBox().width > maxLabelWidth) { if (measureText.node().getBoundingClientRect().width > maxLabelWidth) {
// Push the broken part with a hyphen. // Push the broken part with a hyphen.
lines.push(brokenWord.slice(0, -1) + '-'); lines.push(brokenWord.slice(0, -1) + '-');
brokenWord = char; brokenWord = char;
@@ -102,7 +102,7 @@ function drawActorLegend(diagram) {
// Draw the text and measure the width. // Draw the text and measure the width.
const textElement = svgDraw.drawText(diagram, labelData); const textElement = svgDraw.drawText(diagram, labelData);
const lineWidth = textElement.node().getBBox().width; const lineWidth = textElement.node().getBoundingClientRect().width;
// Use conf.leftMargin as the initial spacing baseline, // Use conf.leftMargin as the initial spacing baseline,
// but expand maxWidth if the line is wider. // but expand maxWidth if the line is wider.