marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-04 21:04:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

add more runnning examples

Browse Source
This commit is contained in:
ashishj
2022-12-15 17:00:53 +01:00
parent 14ff8a8570
commit 2141057ab4
3 changed files with 55 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
cypress/platform/ashish2.html
View File

@@ -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',

178
packages/mermaid-timeline/src/timelineRenderer.ts
View File

@@ -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++;
}
}

2
packages/mermaid/src/Diagram.ts
View File

@@ -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';