diff --git a/cypress/platform/ashish2.html b/cypress/platform/ashish2.html
index 3fe223680..f1ebaa827 100644
--- a/cypress/platform/ashish2.html
+++ b/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.
@@ -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
+---
+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
grand
child 8))
-
+
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',
diff --git a/packages/mermaid-timeline/src/timelineRenderer.ts b/packages/mermaid-timeline/src/timelineRenderer.ts
index aa3e2199c..6fd68cf60 100644
--- a/packages/mermaid-timeline/src/timelineRenderer.ts
+++ b/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
- //sectionList.push(node);
- //const nodeHeight = node.height + 20;
- //Post process the node
- //append g
+ log.info('sectionNode output', node);
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('x2', tasks && tasks.length? (tasks.length*200)+ 400 : 400) // Subtract stroke width so arrow point is retained
- .attr('y2', maxSectionHeight + maxTaskHeight +150)
+ .attr('y1', depthY) // One section head + one task + margins
+ .attr('x2', (box.width)+3*LEFT_MARGIN) // Subtract stroke width so arrow point is retained
+ .attr('y2', depthY)
.attr('stroke-width', 4)
.attr('stroke', 'black')
.attr('marker-end', 'url(#arrowhead)');
- const extraVertForTitle = title ? 70 : 0;
- svg.attr('viewBox', `${box.startx} -25 ${width} ${height + extraVertForTitle}`);
- svg.attr('preserveAspectRatio', 'xMinYMin meet');
- svg.attr('height', height + extraVertForTitle + 25);
+ // Setup the view box and size of the svg element
+ setupGraphViewbox(undefined, svg, conf.timeline.padding?conf.timeline.padding:50, conf.timeline.useMaxWidth?conf.timeline.useMaxWidth:false);
// 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++;
}
}
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index a2349c255..e509962f6 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/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';