marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-19 08:16:42 +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'); const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/); expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); 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 textElement = svgDraw.drawText(diagram, labelData);
const bbox = textElement.node().getBBox(); const textLength = textElement.node().getBBox().width;
const textLength = bbox.width;
if (textLength > maxWidth) { if (textLength > maxWidth) {
maxWidth = textLength; maxWidth = textLength;
} }
@@ -53,7 +52,7 @@ function drawActorLegend(diagram) {
} }
// TODO: Cleanup? // TODO: Cleanup?
const conf = getConfig().journey; const conf = getConfig().journey;
let LEFT_MARGIN = 0; let leftMargin = 0;
export const draw = function (text, id, version, diagObj) { export const draw = function (text, id, version, diagObj) {
const conf = getConfig().journey; const conf = getConfig().journey;
@@ -91,8 +90,8 @@ export const draw = function (text, id, version, diagObj) {
}); });
drawActorLegend(diagram); drawActorLegend(diagram);
LEFT_MARGIN = conf.leftMargin + maxWidth - 80; leftMargin = conf.leftMargin + maxWidth - 22.328125;
bounds.insert(0, 0, LEFT_MARGIN, Object.keys(actors).length * 50); bounds.insert(0, 0, leftMargin, Object.keys(actors).length * 50);
drawTasks(diagram, tasks, 0); drawTasks(diagram, tasks, 0);
const box = bounds.getBounds(); const box = bounds.getBounds();
@@ -100,23 +99,23 @@ export const draw = function (text, id, version, diagObj) {
diagram diagram
.append('text') .append('text')
.text(title) .text(title)
.attr('x', LEFT_MARGIN) .attr('x', leftMargin)
.attr('font-size', '4ex') .attr('font-size', '4ex')
.attr('font-weight', 'bold') .attr('font-weight', 'bold')
.attr('y', 25); .attr('y', 25);
} }
const height = box.stopy - box.starty + 2 * conf.diagramMarginY; 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); configureSvgSize(diagram, height, width, conf.useMaxWidth);
// Draw activity line // Draw activity line
diagram diagram
.append('line') .append('line')
.attr('x1', LEFT_MARGIN) .attr('x1', leftMargin)
.attr('y1', conf.height * 4) // One section head + one task + margins .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('y2', conf.height * 4)
.attr('stroke-width', 4) .attr('stroke-width', 4)
.attr('stroke', 'black') .attr('stroke', 'black')
@@ -242,7 +241,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) {
} }
const section = { const section = {
x: i * conf.taskMargin + i * conf.width + LEFT_MARGIN, x: i * conf.taskMargin + i * conf.width + leftMargin,
y: 50, y: 50,
text: task.section, text: task.section,
fill, fill,
@@ -266,7 +265,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) {
}, {}); }, {});
// Add some rendering data to the object // 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.y = taskPos;
task.width = conf.diagramMarginX; task.width = conf.diagramMarginX;
task.height = conf.diagramMarginY; task.height = conf.diagramMarginY;