From 5318ec6dbf23eeea12cd21b9347e081cee8bead6 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Mon, 4 Jul 2022 15:33:39 +0200 Subject: [PATCH] Handling gantt and flowchart-v2 --- cypress/platform/knsv.html | 36 ++++++++++++- src/Diagram.js | 4 ++ src/diagrams/flowchart/flowDb.js | 1 - src/diagrams/flowchart/flowRenderer-v2.js | 63 +++++++++-------------- src/diagrams/gantt/ganttRenderer.js | 33 ++++++------ 5 files changed, 78 insertions(+), 59 deletions(-) diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index db9cad57f..70011ed1a 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -134,6 +134,38 @@ requirementDiagram test_req - traces -> test_req2 test_req - contains -> test_req3 test_req <- copies - test_entity2 + +
+gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + excludes weekends + %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".) + + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d + Functionality added :milestone, 2014-01-25, 0d + + section Documentation + Describe gantt syntax :active, a1, after des1, 3d + Add gantt diagram to demo page :after a1 , 20h + Add another diagram to demo page :doc1, after a1 , 48h + + section Last section + Describe gantt syntax :after doc1, 3d + Add gantt diagram to demo page :20h + Add another diagram to demo page :48h
stateDiagram @@ -143,8 +175,8 @@ stateDiagram Inactive --> Idle: ACT Active --> Active: LOG
-
- graph TB +
+ flowchart TB accTitle: My flowchart accDescr: My flowchart Description subgraph One diff --git a/src/Diagram.js b/src/Diagram.js index 3d7a1cbe0..4d60c5353 100644 --- a/src/Diagram.js +++ b/src/Diagram.js @@ -69,6 +69,7 @@ class Diagram { flowRenderer.setConf(cnf.flowchart); cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; flowDb.clear(); + flowDb.setGen('gen-1'); this.parser = flowParser; this.parser.parser.yy = flowDb; this.db = flowDb; @@ -78,6 +79,7 @@ class Diagram { flowRendererV2.setConf(cnf.flowchart); cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; flowDb.clear(); + flowDb.setGen('gen-2'); this.parser = flowParser; this.parser.parser.yy = flowDb; this.db = flowDb; @@ -101,6 +103,8 @@ class Diagram { this.txt = this.txt + '\n'; break; case 'gantt': + cnf.gantt.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; + ganttRenderer.setConf(cnf.gantt); this.parser = ganttParser; this.parser.parser.yy = ganttDb; this.db = ganttDb; diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js index 5cdec50bf..c35816fec 100644 --- a/src/diagrams/flowchart/flowDb.js +++ b/src/diagrams/flowchart/flowDb.js @@ -489,7 +489,6 @@ export const addSubGraph = function (_id, list, _title) { const { nodeList: nl, dir } = uniq(nodeList.concat.apply(nodeList, list)); nodeList = nl; if (version === 'gen-1') { - log.warn('LOOKING UP'); for (let i = 0; i < nodeList.length; i++) { nodeList[i] = lookUpDomId(nodeList[i]); } diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js index 7c719ecad..9fc28f266 100644 --- a/src/diagrams/flowchart/flowRenderer-v2.js +++ b/src/diagrams/flowchart/flowRenderer-v2.js @@ -28,8 +28,9 @@ export const setConf = function (cnf) { * @param svgId * @param root * @param doc + * @param diagObj */ -export const addVertices = function (vert, g, svgId, root, doc) { +export const addVertices = function (vert, g, svgId, root, doc, diagObj) { const svg = root.select(`[id="${svgId}"]`); const keys = Object.keys(vert); @@ -152,8 +153,8 @@ export const addVertices = function (vert, g, svgId, root, doc) { id: vertex.id, link: vertex.link, linkTarget: vertex.linkTarget, - tooltip: flowDb.getTooltip(vertex.id) || '', - domId: flowDb.lookUpDomId(vertex.id), + tooltip: diagObj.db.getTooltip(vertex.id) || '', + domId: diagObj.db.lookUpDomId(vertex.id), haveCallback: vertex.haveCallback, width: vertex.type === 'group' ? 500 : undefined, dir: vertex.dir, @@ -171,7 +172,7 @@ export const addVertices = function (vert, g, svgId, root, doc) { class: classStr, style: styles.style, id: vertex.id, - domId: flowDb.lookUpDomId(vertex.id), + domId: diagObj.db.lookUpDomId(vertex.id), width: vertex.type === 'group' ? 500 : undefined, type: vertex.type, dir: vertex.dir, @@ -186,8 +187,9 @@ export const addVertices = function (vert, g, svgId, root, doc) { * * @param {object} edges The edges to add to the graph * @param {object} g The graph object + * @param diagObj */ -export const addEdges = function (edges, g) { +export const addEdges = function (edges, g, diagObj) { log.info('abc78 edges = ', edges); let cnt = 0; let linkIdCnt = {}; @@ -304,11 +306,7 @@ export const addEdges = function (edges, g) { edgeData.arrowheadStyle = 'fill: #333'; edgeData.labelpos = 'c'; } - // if (evaluate(getConfig().flowchart.htmlLabels) && false) { - // // eslint-disable-line - // edgeData.labelType = 'html'; - // edgeData.label = `${edge.text}`; - // } else { + edgeData.labelType = 'text'; edgeData.label = edge.text.replace(common.lineBreakRegex, '\n'); @@ -317,7 +315,6 @@ export const addEdges = function (edges, g) { } edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:'); - // } edgeData.id = linkId; edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd; @@ -331,22 +328,19 @@ export const addEdges = function (edges, g) { * Returns the all the styles from classDef statements in the graph definition. * * @param text + * @param diagObj * @returns {object} ClassDef styles */ -export const getClasses = function (text) { +export const getClasses = function (text, diagObj) { log.info('Extracting classes'); - flowDb.clear(); - const parser = flow.parser; - parser.yy = flowDb; - + diagObj.db.clear(); try { // Parse the graph definition - parser.parse(text); + diagObj.parse(text); + return diagObj.db.getClasses(); } catch (e) { return; } - - return flowDb.getClasses(); }; /** @@ -356,22 +350,15 @@ export const getClasses = function (text) { * @param id */ -export const draw = function (text, id) { +export const draw = function (text, id, _version, diagObj) { log.info('Drawing flowchart'); - flowDb.clear(); + diagObj.db.clear(); flowDb.setGen('gen-2'); - const parser = flow.parser; - parser.yy = flowDb; - // Parse the graph definition - // try { - parser.parse(text); - // } catch (err) { - // log.debug('Parsing failed'); - // } + diagObj.parser.parse(text); // Fetch the default direction, use TD if none was found - let dir = flowDb.getDirection(); + let dir = diagObj.db.getDirection(); if (typeof dir === 'undefined') { dir = 'TD'; } @@ -409,18 +396,18 @@ export const draw = function (text, id) { }); let subG; - const subGraphs = flowDb.getSubGraphs(); + const subGraphs = diagObj.db.getSubGraphs(); log.info('Subgraphs - ', subGraphs); for (let i = subGraphs.length - 1; i >= 0; i--) { subG = subGraphs[i]; log.info('Subgraph - ', subG); - flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes, subG.dir); + diagObj.db.addVertex(subG.id, subG.title, 'group', undefined, subG.classes, subG.dir); } // Fetch the vertices/nodes and edges/links from the parsed graph definition - const vert = flowDb.getVertices(); + const vert = diagObj.db.getVertices(); - const edges = flowDb.getEdges(); + const edges = diagObj.db.getEdges(); log.info(edges); let i = 0; @@ -435,8 +422,8 @@ export const draw = function (text, id) { g.setParent(subG.nodes[j], subG.id); } } - addVertices(vert, g, id, root, doc); - addEdges(edges, g); + addVertices(vert, g, id, root, doc, diagObj); + addEdges(edges, g, diagObj); // Add custom shapes // flowChartShapes.addToRenderV2(addShape); @@ -445,7 +432,7 @@ export const draw = function (text, id) { const svg = root.select(`[id="${id}"]`); // Adds title and description to the flow chart - addSVGAccessibilityFields(parser.yy, svg, id); + addSVGAccessibilityFields(diagObj.db, svg, id); // Run the renderer. This is what draws the final graph. const element = root.select('#' + id + ' g'); @@ -454,7 +441,7 @@ export const draw = function (text, id) { setupGraphViewbox(g, svg, conf.diagramPadding, conf.useMaxWidth); // Index nodes - flowDb.indexNodes('subGraph' + i); + diagObj.db.indexNodes('subGraph' + i); // Add label rects for non html labels if (!conf.htmlLabels) { diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index 0065f14d9..56b3e00b1 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -11,23 +11,20 @@ import { axisTop, timeFormat, } from 'd3'; -import { parser } from './parser/gantt'; import common from '../common/common'; -import ganttDb from './ganttDb'; import { getConfig } from '../../config'; import { configureSvgSize } from '../../utils'; import addSVGAccessibilityFields from '../../accessibility'; -parser.yy = ganttDb; export const setConf = function () { log.debug('Something is calling, setConf, remove the call'); }; let w; -export const draw = function (text, id) { +export const draw = function (text, id, version, diagObj) { const conf = getConfig().gantt; - parser.yy.clear(); - parser.parse(text); + // diagObj.db.clear(); + // parser.parse(text); const securityLevel = getConfig().securityLevel; // Handle root and Document for when rendering in sanbox mode @@ -52,7 +49,7 @@ export const draw = function (text, id) { w = conf.useWidth; } - const taskArray = parser.yy.getTasks(); + const taskArray = diagObj.db.getTasks(); // Set height based on number of tasks const h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding; @@ -109,12 +106,12 @@ export const draw = function (text, id) { svg .append('text') - .text(parser.yy.getDiagramTitle()) + .text(diagObj.db.getDiagramTitle()) .attr('x', w / 2) .attr('y', conf.titleTopMargin) .attr('class', 'titleText'); - addSVGAccessibilityFields(parser.yy, svg, id); + addSVGAccessibilityFields(diagObj.db, svg, id); /** * @param tasks @@ -139,8 +136,8 @@ export const draw = function (text, id) { pageWidth, pageHeight, tasks, - parser.yy.getExcludes(), - parser.yy.getIncludes() + diagObj.db.getExcludes(), + diagObj.db.getIncludes() ); makeGrid(leftPadding, topPadding, pageWidth, pageHeight); drawRects(tasks, gap, topPadding, leftPadding, barHeight, colorScale, pageWidth, pageHeight); @@ -187,7 +184,7 @@ export const draw = function (text, id) { // Draw the rects representing the tasks const rectangles = svg.append('g').selectAll('rect').data(theArray).enter(); - const links = ganttDb.getLinks(); + const links = diagObj.db.getLinks(); // Render the tasks with links // Render the other tasks @@ -430,14 +427,14 @@ export const draw = function (text, id) { 0 ); const maxTime = tasks.reduce((max, { endTime }) => (max ? Math.max(max, endTime) : endTime), 0); - const dateFormat = parser.yy.getDateFormat(); + const dateFormat = diagObj.db.getDateFormat(); if (!minTime || !maxTime) return; const excludeRanges = []; let range = null; let d = moment(minTime); while (d.valueOf() <= maxTime) { - if (parser.yy.isInvalidDate(d, dateFormat, excludes, includes)) { + if (diagObj.db.isInvalidDate(d, dateFormat, excludes, includes)) { if (!range) { range = { start: d.clone(), @@ -495,7 +492,7 @@ export const draw = function (text, id) { function makeGrid(theSidePad, theTopPad, w, h) { let bottomXAxis = axisBottom(timeScale) .tickSize(-h + theTopPad + conf.gridLineStartPadding) - .tickFormat(timeFormat(parser.yy.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); + .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); svg .append('g') @@ -509,10 +506,10 @@ export const draw = function (text, id) { .attr('font-size', 10) .attr('dy', '1em'); - if (ganttDb.topAxisEnabled() || conf.topAxis) { + if (diagObj.db.topAxisEnabled() || conf.topAxis) { let topXAxis = axisTop(timeScale) .tickSize(-h + theTopPad + conf.gridLineStartPadding) - .tickFormat(timeFormat(parser.yy.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); + .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); svg .append('g') @@ -592,7 +589,7 @@ export const draw = function (text, id) { * @param h */ function drawToday(theSidePad, theTopPad, w, h) { - const todayMarker = ganttDb.getTodayMarker(); + const todayMarker = diagObj.db.getTodayMarker(); if (todayMarker === 'off') { return; }