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

refactor: standardize variable naming and improve legend width calculations

Browse Source 
Co-authored-by: pranavm2109 <mishrap@dickinson.edu>
This commit is contained in:
Shahir Ahmed
2025-02-13 01:46:27 -05:00
parent d618b8398e
commit 5f7c68def7
2 changed files with 11 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -47,7 +47,7 @@ section Checkout from website
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
//expect(maxWidthValue).to.eq(700);
expect(maxWidthValue).to.eq(700);
});
});

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

@@ -43,8 +43,7 @@ function drawActorLegend(diagram) {
};
const textElement = svgDraw.drawText(diagram, labelData);
const bbox = textElement.node().getBBox();
const textLength = bbox.width;
const textLength = textElement.node().getBBox().width;
if (textLength > maxWidth) {
maxWidth = textLength;
}
@@ -53,7 +52,7 @@ function drawActorLegend(diagram) {
}
// TODO: Cleanup?
const conf = getConfig().journey;
let LEFT_MARGIN = 0;
let leftMargin = 0;
export const draw = function (text, id, version, diagObj) {
const conf = getConfig().journey;
@@ -91,8 +90,8 @@ export const draw = function (text, id, version, diagObj) {
});
drawActorLegend(diagram);
LEFT_MARGIN = conf.leftMargin + maxWidth - 80;
bounds.insert(0, 0, LEFT_MARGIN, Object.keys(actors).length * 50);
leftMargin = conf.leftMargin + maxWidth - 22.328125;
bounds.insert(0, 0, leftMargin, Object.keys(actors).length * 50);
drawTasks(diagram, tasks, 0);
const box = bounds.getBounds();
@@ -100,23 +99,23 @@ export const draw = function (text, id, version, diagObj) {
diagram
.append('text')
.text(title)
.attr('x', LEFT_MARGIN)
.attr('x', leftMargin)
.attr('font-size', '4ex')
.attr('font-weight', 'bold')
.attr('y', 25);
}
const height = box.stopy - box.starty + 2 * conf.diagramMarginY;
const width = LEFT_MARGIN + box.stopx + 2 * conf.diagramMarginX;
const width = leftMargin + box.stopx + 2 * conf.diagramMarginX;
configureSvgSize(diagram, height, width, conf.useMaxWidth);
// Draw activity line
diagram
.append('line')
.attr('x1', LEFT_MARGIN)
.attr('x1', leftMargin)
.attr('y1', conf.height * 4) // One section head + one task + margins
.attr('x2', width - LEFT_MARGIN - 4) // Subtract stroke width so arrow point is retained
.attr('x2', width - leftMargin - 4) // Subtract stroke width so arrow point is retained
.attr('y2', conf.height * 4)
.attr('stroke-width', 4)
.attr('stroke', 'black')
@@ -242,7 +241,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) {
}
const section = {
x: i * conf.taskMargin + i * conf.width + LEFT_MARGIN,
x: i * conf.taskMargin + i * conf.width + leftMargin,
y: 50,
text: task.section,
fill,
@@ -266,7 +265,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) {
}, {});
// Add some rendering data to the object
task.x = i * conf.taskMargin + i * conf.width + LEFT_MARGIN;
task.x = i * conf.taskMargin + i * conf.width + leftMargin;
task.y = taskPos;
task.width = conf.diagramMarginX;
task.height = conf.diagramMarginY;