mermaid-js#5858 - fix: Timeline node width made dynamic

- Refactored timelineRenderer.drawEvents - Added DEFAULT_NODE_WIDTH of 150 - Used conf?.timeline?.width as a dynamic value, or default value if not provided - Added integration tests in cypress/integration/rendering/timeline.spec.ts to cover changes
afmireski · Nov 30, 2024 · 146b86c · 146b86c
1 parent cc29437
commit 146b86c
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 1 deletion.
diff --git a/cypress/integration/rendering/timeline.spec.ts b/cypress/integration/rendering/timeline.spec.ts
@@ -161,4 +161,42 @@ describe('Timeline diagram', () => {
       {}
     );
   });
+
+  it('11: should render a simple timeline with a custom width of 300', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'timeline': { 'width': 300 } } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {
+        timeline: {
+          width: 300,
+        },
+      }
+    );
+  });
+
+  it('12: should render a simple timeline with default width of 150', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'timeline': { 'width': 150 } } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
 });
diff --git a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
@@ -322,14 +322,19 @@ export const drawEvents = function (
   let maxEventHeight = 0;
   const eventBeginY = masterY;
   masterY = masterY + 100;
+
+  const DEFAULT_NODE_WIDTH = 150;
+
+  const nodeWidth = conf?.timeline?.width ?? DEFAULT_NODE_WIDTH;
+
   // Draw the events
   for (const event of events) {
     // create node from event
     const eventNode: Block<string, number> = {
       descr: event,
       section: sectionColor,
       number: sectionColor,
-      width: 150,
+      width: nodeWidth,
       padding: 20,
       maxHeight: 50,
     };