add more runnning examples

cypress/platform/ashish2.html

@@ -60,12 +60,12 @@
         title My day
         section section with no tasks
         section Go to work at the dog office
-          1930 : first step : second step
+          1930 : first step : second step is a long step
                : third step
           1940 : fourth step : fifth step
         section Go home
           1950 : India got independent and already won war against Pakistan
-          1960 : India fights poverty, looses war to China
+          1960 : India fights poverty, looses war to China and gets nuclear weapons from USA and USSR
           1970 : Green Revolution comes to india
         section Another section with no tasks
           I am a big big big tasks
@@ -81,7 +81,7 @@
           2300 BC : People arrive from Europe and settle in Britain. They bring farming and metalworking.
                : New styles of pottery and ways of burying the dead appear.
           2200 BC : The last major building works are completed at Stonehenge. People now bury their dead in stone circles.
-                  : The first metal objects are made in Britain.Some other nice things happen.
+                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
 
     </pre>
     <pre id="diagram" class="mermaid">
@@ -89,7 +89,7 @@
         title History of Social Media Platform
         section Rise of Social Media
           2002 : LinkedIn
-          2004 : Facebook : Google
+          2004 : Facebook : Google : Pixar
           2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
@@ -97,10 +97,13 @@
           2010 : Pinterest
     </pre>
     <pre id="diagram" class="mermaid">
+---
+timeline:disableMulticolor: true
+---
  timeline
         title History of Social Media Platform
           2002 : LinkedIn
-          2004 : Facebook : Google
+          2004 : Facebook : Google : Pixar
           2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
@@ -134,7 +137,7 @@ mindmap
         ::icon(mdi mdi-fire)
           gc7((grand<br/>grand<br/>child 8))
         </pre>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
       gantt
         title Style today marker (vertical line should be 5px wide and half-transparent blue)
         dateFormat YYYY-MM-DD
@@ -168,6 +171,9 @@ mindmap
         gantt: {
           useMaxWidth: false,
         },
+        timeline: {
+          disableMulticolor: false,
+        },
         useMaxWidth: false,
         lazyLoadedDiagrams: [
           // './mermaid-mindmap-detector.esm.mjs',

packages/mermaid-timeline/src/timelineRenderer.ts

@@ -38,11 +38,6 @@ export const draw = function (text, id, version, diagObj) {
       ? select(sandboxElement.nodes()[0].contentDocument.body)
       : select('body');
 
-  // Init bounds
-  bounds.init();
-
-
-
   const svg = root.select('#' + id);
 
   svg.append('g');
@@ -57,7 +52,6 @@ export const draw = function (text, id, version, diagObj) {
   //5. Initialize the diagram
   svgDraw.initGraphics(svg);
 
-  //bounds.insert(0, 0, LEFT_MARGIN, 0);
   // fetch Sections
   const sections = diagObj.db.getSections();
   // log sections
@@ -65,14 +59,16 @@ export const draw = function (text, id, version, diagObj) {
 
   let maxSectionHeight = 0;
   let maxTaskHeight = 0;
-  let sectionBeginX = 0;
+  //let sectionBeginX = 0;
+  let depthY = 0;
   let sectionBeginY = 0;
   let masterX = 50 + LEFT_MARGIN;
-  sectionBeginX = masterX;
+  //sectionBeginX = masterX;
   let masterY = 50;
   sectionBeginY=50;
   //draw sections
   let sectionNumber = 0;
+  let hasSections = true;
 
   //Calculate the max height of the sections
   sections.forEach(function (section) {
@@ -90,7 +86,8 @@ export const draw = function (text, id, version, diagObj) {
   });
 
 //tasks length and maxEventCount
-let maxEventCount = 0;
+  let maxEventCount = 0;
+  let maxEventLineLength = 0;
   log.info('tasks.length', tasks.length);
    //calculate max task height
   // for loop till tasks.length
@@ -111,6 +108,22 @@ let maxEventCount = 0;
 
     //calculate maxEventCount
     maxEventCount = Math.max(maxEventCount, task.events.length);
+    //calculate maxEventLineLength
+    let maxEventLineLengthTemp = 0;
+    for (let j = 0; j < task.events.length; j++) {
+      const event = task.events[j];
+       const eventNode = {
+      descr: event,
+      section: task.section,
+      number : task.section,
+      width: 150,
+      padding: 20,
+      maxHeight: 50,
+    };
+      maxEventLineLengthTemp += svgDraw.getVirtualNodeHeight(svg, eventNode, conf);
+    }
+    maxEventLineLength = Math.max(maxEventLineLength, maxEventLineLengthTemp);
+
   }
 
 
@@ -132,17 +145,13 @@ let maxEventCount = 0;
       log.info('sectionNode', sectionNode);
       const sectionNodeWrapper = svg.append('g');
       const node = svgDraw.drawNode(sectionNodeWrapper, sectionNode, sectionNumber, conf);
-      // add node to section list
+      log.info('sectionNode output', node);
-      //sectionList.push(node);
-      //const nodeHeight = node.height + 20;
-      //Post process the node
-      //append g
 
       sectionNodeWrapper.attr(
         'transform',
         `translate(${masterX}, ${sectionBeginY})`
       );
-      //maxSectionHeight = Math.max(maxSectionHeight, nodeHeight);
+
       masterY += maxSectionHeight + 50;
 
 
@@ -153,7 +162,7 @@ let maxEventCount = 0;
       if (tasksForSection.length > 0) {
 
 
-        drawTasks(svg, tasksForSection, sectionNumber, masterX, masterY, maxTaskHeight, conf, maxEventCount,false);
+        drawTasks(svg, tasksForSection, sectionNumber, masterX, masterY, maxTaskHeight, conf, maxEventCount,maxEventLineLength,maxSectionHeight,false);
       }
       // todo replace with total width of section and its tasks
       masterX += 200 * Math.max(tasksForSection.length, 1);
@@ -163,143 +172,44 @@ let maxEventCount = 0;
     });
   } else {
     //draw tasks
-    drawTasks(svg, tasks, sectionNumber, masterX, masterY, maxTaskHeight, conf, maxEventCount,true);
+    hasSections = false;
+    drawTasks(svg, tasks, sectionNumber, masterX, masterY, maxTaskHeight, conf, maxEventCount,maxEventLineLength,maxSectionHeight,true);
   }
 
+// Get BBox of the diagram
+  const box = svg.node().getBBox();
+  log.info('bounds', box);
 
-
-
-  // draw tasks
-  //drawTasks(svg, tasks, 0);
-
-  const box = bounds.getBounds();
   if (title) {
     svg
       .append('text')
       .text(title)
-      .attr('x', LEFT_MARGIN)
+      .attr('x', (box.width/2)-LEFT_MARGIN)
       .attr('font-size', '4ex')
       .attr('font-weight', 'bold')
-      .attr('y', 25);
+      .attr('y', 20);
   }
-
-  const height = box.stopy - box.starty + 2 * conf.diagramMarginY;
-  const width = LEFT_MARGIN + box.stopx + 2 * conf.diagramMarginX;
-
-// Setup the view box and size of the svg element
-  setupGraphViewbox(undefined, svg, conf.timeline.padding, conf.timeline.useMaxWidth);
-
   //5. Draw the diagram
- const maxTaskLength = 500;
+ depthY = hasSections?maxSectionHeight + maxTaskHeight + 150: maxTaskHeight + 100;
-
  // Draw activity line
   svg
     .append('line')
     .attr('x1', LEFT_MARGIN)
-    .attr('y1', maxSectionHeight + maxTaskHeight +150) // One section head + one task + margins
+    .attr('y1', depthY) // One section head + one task + margins
-    .attr('x2', tasks && tasks.length? (tasks.length*200)+ 400 :  400) // Subtract stroke width so arrow point is retained
+    .attr('x2', (box.width)+3*LEFT_MARGIN) // Subtract stroke width so arrow point is retained
-    .attr('y2', maxSectionHeight + maxTaskHeight +150)
+    .attr('y2', depthY)
     .attr('stroke-width', 4)
     .attr('stroke', 'black')
     .attr('marker-end', 'url(#arrowhead)');
 
-  const extraVertForTitle = title ? 70 : 0;
+  // Setup the view box and size of the svg element
-  svg.attr('viewBox', `${box.startx} -25 ${width} ${height + extraVertForTitle}`);
+  setupGraphViewbox(undefined, svg, conf.timeline.padding?conf.timeline.padding:50, conf.timeline.useMaxWidth?conf.timeline.useMaxWidth:false);
-  svg.attr('preserveAspectRatio', 'xMinYMin meet');
-  svg.attr('height', height + extraVertForTitle + 25);
 
   // addSVGAccessibilityFields(diagObj.db, diagram, id);
 };
 
-export const bounds = {
-  data: {
-    startx: undefined,
-    stopx: undefined,
-    starty: undefined,
-    stopy: undefined,
-  },
-  verticalPos: 0,
-
-  sequenceItems: [],
-  init: function () {
-    this.sequenceItems = [];
-    this.data = {
-      startx: undefined,
-      stopx: undefined,
-      starty: undefined,
-      stopy: undefined,
-    };
-    this.verticalPos = 0;
-  },
-  updateVal: function (obj, key, val, fun) {
-    if (typeof obj[key] === 'undefined') {
-      obj[key] = val;
-    } else {
-      obj[key] = fun(val, obj[key]);
-    }
-  },
-  updateBounds: function (startx, starty, stopx, stopy) {
-    const conf = getConfig().timeline;
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const _self = this;
-    let cnt = 0;
-    /** @param {any} type */
-    function updateFn(type) {
-      return function updateItemBounds(item) {
-        cnt++;
-        // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems
-        const n = _self.sequenceItems.length - cnt + 1;
-        _self.updateVal(item, 'starty', starty - n * conf.boxMargin, Math.min);
-        _self.updateVal(item, 'stopy', stopy + n * conf.boxMargin, Math.max);
-
-        _self.updateVal(bounds.data, 'startx', startx - n * conf.boxMargin, Math.min);
-        _self.updateVal(bounds.data, 'stopx', stopx + n * conf.boxMargin, Math.max);
-
-        if (!(type === 'activation')) {
-          _self.updateVal(item, 'startx', startx - n * conf.boxMargin, Math.min);
-          _self.updateVal(item, 'stopx', stopx + n * conf.boxMargin, Math.max);
-
-          _self.updateVal(bounds.data, 'starty', starty - n * conf.boxMargin, Math.min);
-          _self.updateVal(bounds.data, 'stopy', stopy + n * conf.boxMargin, Math.max);
-        }
-      };
-    }
-
-    this.sequenceItems.forEach(updateFn());
-  },
-  insert: function (startx, starty, stopx, stopy) {
-    const _startx = Math.min(startx, stopx);
-    const _stopx = Math.max(startx, stopx);
-    const _starty = Math.min(starty, stopy);
-    const _stopy = Math.max(starty, stopy);
-
-    this.updateVal(bounds.data, 'startx', _startx, Math.min);
-    this.updateVal(bounds.data, 'starty', _starty, Math.min);
-    this.updateVal(bounds.data, 'stopx', _stopx, Math.max);
-    this.updateVal(bounds.data, 'stopy', _stopy, Math.max);
-
-    this.updateBounds(_startx, _starty, _stopx, _stopy);
-  },
-  bumpVerticalPos: function (bump) {
-    this.verticalPos = this.verticalPos + bump;
-    this.data.stopy = this.verticalPos;
-  },
-  getVerticalPos: function () {
-    return this.verticalPos;
-  },
-  getBounds: function () {
-    return this.data;
-  },
-};
-
-
-
-export const drawTasks = function (diagram, tasks, sectionColor, masterX, masterY, maxTaskHeight,conf,maxEventCount, isWithoutSections) {
-
-  const taskBeginY = masterY;
-
-  const taskBeginX = masterX;
 
+export const drawTasks = function (diagram, tasks, sectionColor, masterX, masterY, maxTaskHeight,conf,maxEventCount,maxEventLineLength,maxSectionHeight, isWithoutSections) {
   // Draw the tasks
   for (let i = 0; i < tasks.length; i++) {
 
@@ -336,22 +246,18 @@ export const drawTasks = function (diagram, tasks, sectionColor, masterX, master
     if (task.events) {
     // draw a line between the task and the events
       const lineWrapper = diagram.append('g').attr('class', 'lineWrapper');
-
       let linelength = maxTaskHeight;
-
-
-
     //add margin to task
     masterY += 100;
      linelength = linelength+ drawEvents(diagram, task.events, sectionColor, masterX, masterY, conf);
-      masterY -= 100;
+    masterY -= 100;
 
       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  + linelength + maxEventCount * 100)
+    .attr('y2', masterY + maxTaskHeight + (isWithoutSections?maxTaskHeight:maxSectionHeight) + maxEventLineLength+ 120)
     .attr('stroke-width', 2)
     .attr('stroke', 'black')
     .attr('marker-end', 'url(#arrowhead)')
@@ -361,7 +267,7 @@ export const drawTasks = function (diagram, tasks, sectionColor, masterX, master
 
 
     masterX = masterX + 200;
-    if (isWithoutSections) {
+    if (isWithoutSections && !getConfig().timeline.disableMulticolor) {
        sectionColor++;
   }
   }

packages/mermaid/src/Diagram.ts

@@ -43,7 +43,7 @@ export class Diagram {
     this.parser.parser.yy = this.db;
     if (diagram.init) {
       diagram.init(cnf);
-      log.debug('Initialized diagram ' + this.type, cnf);
+      log.info('Initialized diagram ' + this.type, cnf);
     }
     this.txt += '\n';