From 20467bcbe6bc2dfb769c1a1c8c1e74ec8ec2b994 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Fri, 11 Jul 2025 13:53:17 +0530 Subject: [PATCH] resolve visual regression issues and fix broken diagram in PR --- .../mermaid/src/diagrams/timeline/svgDraw.js | 7 ++----- .../src/diagrams/timeline/timelineRenderer.ts | 16 ++++++---------- 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/packages/mermaid/src/diagrams/timeline/svgDraw.js b/packages/mermaid/src/diagrams/timeline/svgDraw.js index 927490607..17b3189d0 100644 --- a/packages/mermaid/src/diagrams/timeline/svgDraw.js +++ b/packages/mermaid/src/diagrams/timeline/svgDraw.js @@ -78,9 +78,8 @@ const processHtmlContent = async function (textElem, node, conf, isVirtual = fal foreignObject.attr('x', -node.width / 2).attr('y', 3); div.style('width', node.width + 'px'); - } else { - bbox.height = divBBox.height; } + bbox.height = divBBox.height; } } @@ -599,9 +598,7 @@ export const drawNode = async function (elem, node, fullSection, conf) { if (hasHtml) { const bbox = await processHtmlContent(textElem, node, conf, false); - - const fontSize = conf.fontSize?.replace ? conf.fontSize.replace('px', '') : conf.fontSize; - node.height = bbox.height + fontSize * 1.1 * 0.5 + node.padding; + node.height = bbox.height + node.padding; node.height = Math.max(node.height, node.maxHeight); node.width = node.width + 2 * node.padding; } else { diff --git a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts index fec244395..13bd6275e 100644 --- a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts +++ b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts @@ -126,6 +126,9 @@ export const draw = async function (text: string, id: string, version: string, d }; maxEventLineLengthTemp += await svgDraw.getVirtualNodeHeight(svg, eventNode, conf); } + if (task.events.length > 0) { + maxEventLineLengthTemp += (task.events.length - 1) * 10; + } maxEventLineLength = Math.max(maxEventLineLength, maxEventLineLengthTemp); } @@ -285,16 +288,9 @@ export const drawTasks = async function ( lineWrapper .append('line') .attr('x1', masterX + 190 / 2) - .attr('y1', masterY + maxTaskHeight) // One section head + one task + margins - .attr('x2', masterX + 190 / 2) // Subtract stroke width so arrow point is retained - .attr( - 'y2', - masterY + - maxTaskHeight + - (isWithoutSections ? maxTaskHeight : maxSectionHeight) + - maxEventLineLength + - 120 - ) + .attr('y1', masterY + maxTaskHeight) // Start from bottom of task box + .attr('x2', masterX + 190 / 2) // Same x coordinate for vertical line + .attr('y2', masterY + maxTaskHeight + 100 + maxEventLineLength + 100) // End at consistent depth with ample padding for visible dashed lines and arrowheads .attr('stroke-width', 2) .attr('stroke', 'black') .attr('marker-end', 'url(#arrowhead)')