marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 14:29:25 +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 } }
);
let diagramStartX;
let diagramStartX, maxLineWidth;
// Get the diagram's left edge
cy.contains('foreignobject', 'Sign Up')
@@ -178,22 +178,17 @@ section Checkout from website
})
.then(() => {
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);
// Check that all lines are under the max width
$lines.each((index, el) => {
const bbox = el.getBBox();
expect(bbox.width).to.be.lte(320);
maxLineWidth = Math.max(maxLineWidth || 0, bbox.width);
});
// check baseline margin between diagram and legend is maintained
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);
}
expect(diagramStartX - 150).to.be.closeTo(maxLineWidth, 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.
let measureText = diagram.append('text').attr('visibility', 'hidden').text(person);
const fullTextWidth = measureText.node().getBBox().width;
const fullTextWidth = measureText.node().getBoundingClientRect().width;
measureText.remove();
let lines = [];
@@ -54,7 +54,7 @@ function drawActorLegend(diagram) {
// check the width of the line with the new word.
const testLine = currentLine ? `${currentLine} ${word}` : word;
measureText.text(testLine);
const textWidth = measureText.node().getBBox().width;
const textWidth = measureText.node().getBoundingClientRect().width;
if (textWidth > maxLabelWidth) {
// 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.
measureText.text(word);
if (measureText.node().getBBox().width > maxLabelWidth) {
if (measureText.node().getBoundingClientRect().width > maxLabelWidth) {
let brokenWord = '';
for (const char of word) {
brokenWord += char;
measureText.text(brokenWord + '-');
if (measureText.node().getBBox().width > maxLabelWidth) {
if (measureText.node().getBoundingClientRect().width > maxLabelWidth) {
// Push the broken part with a hyphen.
lines.push(brokenWord.slice(0, -1) + '-');
brokenWord = char;
@@ -102,7 +102,7 @@ function drawActorLegend(diagram) {
// Draw the text and measure the width.
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,
// but expand maxWidth if the line is wider.