Fix for flowcharts
This commit is contained in:
parent
023781716f
commit
1675174b2a
|
@ -51,12 +51,17 @@
|
||||||
"Magnesium" : 10.01
|
"Magnesium" : 10.01
|
||||||
"Iron" : 5
|
"Iron" : 5
|
||||||
</div>
|
</div>
|
||||||
<div class="mermaid" style="width: 50%;">
|
<div class="mermaid2" style="width: 50%;">
|
||||||
gitGraph:
|
gitGraph
|
||||||
|
commit
|
||||||
|
commit
|
||||||
|
branch develop
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
|
checkout main
|
||||||
|
commit
|
||||||
|
commit
|
||||||
</div>
|
</div>
|
||||||
<div class="mermaid2" style="width: 50%;">
|
<div class="mermaid2" style="width: 50%;">
|
||||||
sequenceDiagram
|
sequenceDiagram
|
||||||
|
@ -138,7 +143,7 @@ stateDiagram
|
||||||
Inactive --> Idle: ACT
|
Inactive --> Idle: ACT
|
||||||
Active --> Active: LOG
|
Active --> Active: LOG
|
||||||
</div>
|
</div>
|
||||||
<div class="mermaid2" style="width: 100%;">
|
<div class="mermaid" style="width: 100%;">
|
||||||
graph TB
|
graph TB
|
||||||
accTitle: My flowchart
|
accTitle: My flowchart
|
||||||
accDescr: My flowchart Description
|
accDescr: My flowchart Description
|
||||||
|
|
|
@ -63,8 +63,11 @@ class Diagram {
|
||||||
this.parser.parser.yy = gitGraphAst;
|
this.parser.parser.yy = gitGraphAst;
|
||||||
this.db = gitGraphAst;
|
this.db = gitGraphAst;
|
||||||
this.renderer = gitGraphRenderer;
|
this.renderer = gitGraphRenderer;
|
||||||
|
this.txt = this.txt + '\n';
|
||||||
break;
|
break;
|
||||||
case 'flowchart':
|
case 'flowchart':
|
||||||
|
flowRenderer.setConf(cnf.flowchart);
|
||||||
|
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
||||||
flowDb.clear();
|
flowDb.clear();
|
||||||
this.parser = flowParser;
|
this.parser = flowParser;
|
||||||
this.parser.parser.yy = flowDb;
|
this.parser.parser.yy = flowDb;
|
||||||
|
@ -72,6 +75,8 @@ class Diagram {
|
||||||
this.renderer = flowRenderer;
|
this.renderer = flowRenderer;
|
||||||
break;
|
break;
|
||||||
case 'flowchart-v2':
|
case 'flowchart-v2':
|
||||||
|
flowRendererV2.setConf(cnf.flowchart);
|
||||||
|
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
||||||
flowDb.clear();
|
flowDb.clear();
|
||||||
this.parser = flowParser;
|
this.parser = flowParser;
|
||||||
this.parser.parser.yy = flowDb;
|
this.parser.parser.yy = flowDb;
|
||||||
|
@ -172,7 +177,7 @@ class Diagram {
|
||||||
const error = { str, hash };
|
const error = { str, hash };
|
||||||
throw error;
|
throw error;
|
||||||
};
|
};
|
||||||
this.parser.parse(txt);
|
this.parser.parse(this.txt);
|
||||||
}
|
}
|
||||||
getParser() {
|
getParser() {
|
||||||
return this.parser;
|
return this.parser;
|
||||||
|
|
|
@ -1,10 +1,6 @@
|
||||||
import graphlib from 'graphlib';
|
import graphlib from 'graphlib';
|
||||||
import { select, curveLinear, selectAll } from 'd3';
|
import { select, curveLinear, selectAll } from 'd3';
|
||||||
|
|
||||||
import flowDb from './flowDb';
|
|
||||||
import flow from './parser/flow';
|
|
||||||
import { getConfig } from '../../config';
|
import { getConfig } from '../../config';
|
||||||
|
|
||||||
import dagreD3 from 'dagre-d3';
|
import dagreD3 from 'dagre-d3';
|
||||||
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
|
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
|
||||||
import { log } from '../../logger';
|
import { log } from '../../logger';
|
||||||
|
@ -30,8 +26,9 @@ export const setConf = function (cnf) {
|
||||||
* @param root
|
* @param root
|
||||||
* @param doc
|
* @param doc
|
||||||
* @param _doc
|
* @param _doc
|
||||||
|
* @param diagObj
|
||||||
*/
|
*/
|
||||||
export const addVertices = function (vert, g, svgId, root, _doc) {
|
export const addVertices = function (vert, g, svgId, root, _doc, diagObj) {
|
||||||
const securityLevel = getConfig().securityLevel;
|
const securityLevel = getConfig().securityLevel;
|
||||||
|
|
||||||
const svg = !root ? select(`[id="${svgId}"]`) : root.select(`[id="${svgId}"]`);
|
const svg = !root ? select(`[id="${svgId}"]`) : root.select(`[id="${svgId}"]`);
|
||||||
|
@ -144,7 +141,7 @@ export const addVertices = function (vert, g, svgId, root, _doc) {
|
||||||
}
|
}
|
||||||
// Add the node
|
// Add the node
|
||||||
log.warn('Adding node', vertex.id, vertex.domId);
|
log.warn('Adding node', vertex.id, vertex.domId);
|
||||||
g.setNode(flowDb.lookUpDomId(vertex.id), {
|
g.setNode(diagObj.db.lookUpDomId(vertex.id), {
|
||||||
labelType: 'svg',
|
labelType: 'svg',
|
||||||
labelStyle: styles.labelStyle,
|
labelStyle: styles.labelStyle,
|
||||||
shape: _shape,
|
shape: _shape,
|
||||||
|
@ -153,7 +150,7 @@ export const addVertices = function (vert, g, svgId, root, _doc) {
|
||||||
ry: radious,
|
ry: radious,
|
||||||
class: classStr,
|
class: classStr,
|
||||||
style: styles.style,
|
style: styles.style,
|
||||||
id: flowDb.lookUpDomId(vertex.id),
|
id: diagObj.db.lookUpDomId(vertex.id),
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -163,8 +160,9 @@ export const addVertices = function (vert, g, svgId, root, _doc) {
|
||||||
*
|
*
|
||||||
* @param {object} edges The edges to add to the graph
|
* @param {object} edges The edges to add to the graph
|
||||||
* @param {object} g The graph object
|
* @param {object} g The graph object
|
||||||
|
* @param diagObj
|
||||||
*/
|
*/
|
||||||
export const addEdges = function (edges, g) {
|
export const addEdges = function (edges, g, diagObj) {
|
||||||
let cnt = 0;
|
let cnt = 0;
|
||||||
|
|
||||||
let defaultStyle;
|
let defaultStyle;
|
||||||
|
@ -264,7 +262,7 @@ export const addEdges = function (edges, g) {
|
||||||
edgeData.minlen = edge.length || 1;
|
edgeData.minlen = edge.length || 1;
|
||||||
|
|
||||||
// Add the edge to the graph
|
// Add the edge to the graph
|
||||||
g.setEdge(flowDb.lookUpDomId(edge.start), flowDb.lookUpDomId(edge.end), edgeData, cnt);
|
g.setEdge(diagObj.db.lookUpDomId(edge.start), diagObj.db.lookUpDomId(edge.end), edgeData, cnt);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -272,18 +270,16 @@ export const addEdges = function (edges, g) {
|
||||||
* Returns the all the styles from classDef statements in the graph definition.
|
* Returns the all the styles from classDef statements in the graph definition.
|
||||||
*
|
*
|
||||||
* @param text
|
* @param text
|
||||||
|
* @param diagObj
|
||||||
* @returns {object} ClassDef styles
|
* @returns {object} ClassDef styles
|
||||||
*/
|
*/
|
||||||
export const getClasses = function (text) {
|
export const getClasses = function (text, diagObj) {
|
||||||
log.info('Extracting classes');
|
log.info('Extracting classes');
|
||||||
flowDb.clear();
|
diagObj.db.clear();
|
||||||
try {
|
try {
|
||||||
const parser = flow.parser;
|
|
||||||
parser.yy = flowDb;
|
|
||||||
|
|
||||||
// Parse the graph definition
|
// Parse the graph definition
|
||||||
parser.parse(text);
|
diagObj.parse(text);
|
||||||
return flowDb.getClasses();
|
return diagObj.db.getClasses();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -294,14 +290,12 @@ export const getClasses = function (text) {
|
||||||
*
|
*
|
||||||
* @param text
|
* @param text
|
||||||
* @param id
|
* @param id
|
||||||
|
* @param _version
|
||||||
|
* @param diagObj
|
||||||
*/
|
*/
|
||||||
export const draw = function (text, id) {
|
export const draw = function (text, id, _version, diagObj) {
|
||||||
log.info('Drawing flowchart');
|
log.info('Drawing flowchart');
|
||||||
flowDb.clear();
|
diagObj.db.clear();
|
||||||
flowDb.setGen('gen-1');
|
|
||||||
const parser = flow.parser;
|
|
||||||
parser.yy = flowDb;
|
|
||||||
|
|
||||||
const securityLevel = getConfig().securityLevel;
|
const securityLevel = getConfig().securityLevel;
|
||||||
let sandboxElement;
|
let sandboxElement;
|
||||||
if (securityLevel === 'sandbox') {
|
if (securityLevel === 'sandbox') {
|
||||||
|
@ -314,14 +308,14 @@ export const draw = function (text, id) {
|
||||||
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
|
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
|
||||||
|
|
||||||
// Parse the graph definition
|
// Parse the graph definition
|
||||||
// try {
|
try {
|
||||||
parser.parse(text);
|
diagObj.parser.parse(text);
|
||||||
// } catch (err) {
|
} catch (err) {
|
||||||
// log.debug('Parsing failed');
|
log.debug('Parsing failed');
|
||||||
// }
|
}
|
||||||
|
|
||||||
// Fetch the default direction, use TD if none was found
|
// Fetch the default direction, use TD if none was found
|
||||||
let dir = flowDb.getDirection();
|
let dir = diagObj.db.getDirection();
|
||||||
if (typeof dir === 'undefined') {
|
if (typeof dir === 'undefined') {
|
||||||
dir = 'TD';
|
dir = 'TD';
|
||||||
}
|
}
|
||||||
|
@ -347,17 +341,17 @@ export const draw = function (text, id) {
|
||||||
});
|
});
|
||||||
|
|
||||||
let subG;
|
let subG;
|
||||||
const subGraphs = flowDb.getSubGraphs();
|
const subGraphs = diagObj.db.getSubGraphs();
|
||||||
for (let i = subGraphs.length - 1; i >= 0; i--) {
|
for (let i = subGraphs.length - 1; i >= 0; i--) {
|
||||||
subG = subGraphs[i];
|
subG = subGraphs[i];
|
||||||
flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
|
diagObj.db.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fetch the vertices/nodes and edges/links from the parsed graph definition
|
// Fetch the vertices/nodes and edges/links from the parsed graph definition
|
||||||
const vert = flowDb.getVertices();
|
const vert = diagObj.db.getVertices();
|
||||||
log.warn('Get vertices', vert);
|
log.warn('Get vertices', vert);
|
||||||
|
|
||||||
const edges = flowDb.getEdges();
|
const edges = diagObj.db.getEdges();
|
||||||
|
|
||||||
let i = 0;
|
let i = 0;
|
||||||
for (i = subGraphs.length - 1; i >= 0; i--) {
|
for (i = subGraphs.length - 1; i >= 0; i--) {
|
||||||
|
@ -369,14 +363,14 @@ export const draw = function (text, id) {
|
||||||
log.warn(
|
log.warn(
|
||||||
'Setting subgraph',
|
'Setting subgraph',
|
||||||
subG.nodes[j],
|
subG.nodes[j],
|
||||||
flowDb.lookUpDomId(subG.nodes[j]),
|
diagObj.db.lookUpDomId(subG.nodes[j]),
|
||||||
flowDb.lookUpDomId(subG.id)
|
diagObj.db.lookUpDomId(subG.id)
|
||||||
);
|
);
|
||||||
g.setParent(flowDb.lookUpDomId(subG.nodes[j]), flowDb.lookUpDomId(subG.id));
|
g.setParent(diagObj.db.lookUpDomId(subG.nodes[j]), diagObj.db.lookUpDomId(subG.id));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
addVertices(vert, g, id, root, doc);
|
addVertices(vert, g, id, root, doc, diagObj);
|
||||||
addEdges(edges, g);
|
addEdges(edges, g, diagObj);
|
||||||
|
|
||||||
// Create the renderer
|
// Create the renderer
|
||||||
const Render = dagreD3.render;
|
const Render = dagreD3.render;
|
||||||
|
@ -427,28 +421,28 @@ export const draw = function (text, id) {
|
||||||
const svg = root.select(`[id="${id}"]`);
|
const svg = root.select(`[id="${id}"]`);
|
||||||
|
|
||||||
// Adds title and description to the flow chart
|
// 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.
|
// Run the renderer. This is what draws the final graph.
|
||||||
const element = root.select('#' + id + ' g');
|
const element = root.select('#' + id + ' g');
|
||||||
render(element, g);
|
render(element, g);
|
||||||
|
|
||||||
element.selectAll('g.node').attr('title', function () {
|
element.selectAll('g.node').attr('title', function () {
|
||||||
return flowDb.getTooltip(this.id);
|
return diagObj.db.getTooltip(this.id);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Index nodes
|
// Index nodes
|
||||||
flowDb.indexNodes('subGraph' + i);
|
diagObj.db.indexNodes('subGraph' + i);
|
||||||
|
|
||||||
// reposition labels
|
// reposition labels
|
||||||
for (i = 0; i < subGraphs.length; i++) {
|
for (i = 0; i < subGraphs.length; i++) {
|
||||||
subG = subGraphs[i];
|
subG = subGraphs[i];
|
||||||
if (subG.title !== 'undefined') {
|
if (subG.title !== 'undefined') {
|
||||||
const clusterRects = doc.querySelectorAll(
|
const clusterRects = doc.querySelectorAll(
|
||||||
'#' + id + ' [id="' + flowDb.lookUpDomId(subG.id) + '"] rect'
|
'#' + id + ' [id="' + diagObj.db.lookUpDomId(subG.id) + '"] rect'
|
||||||
);
|
);
|
||||||
const clusterEl = doc.querySelectorAll(
|
const clusterEl = doc.querySelectorAll(
|
||||||
'#' + id + ' [id="' + flowDb.lookUpDomId(subG.id) + '"]'
|
'#' + id + ' [id="' + diagObj.db.lookUpDomId(subG.id) + '"]'
|
||||||
);
|
);
|
||||||
|
|
||||||
const xPos = clusterRects[0].x.baseVal.value;
|
const xPos = clusterRects[0].x.baseVal.value;
|
||||||
|
@ -492,7 +486,7 @@ export const draw = function (text, id) {
|
||||||
const vertex = vert[key];
|
const vertex = vert[key];
|
||||||
|
|
||||||
if (vertex.link) {
|
if (vertex.link) {
|
||||||
const node = root.select('#' + id + ' [id="' + flowDb.lookUpDomId(key) + '"]');
|
const node = root.select('#' + id + ' [id="' + diagObj.db.lookUpDomId(key) + '"]');
|
||||||
if (node) {
|
if (node) {
|
||||||
const link = doc.createElementNS('http://www.w3.org/2000/svg', 'a');
|
const link = doc.createElementNS('http://www.w3.org/2000/svg', 'a');
|
||||||
link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));
|
link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
import { curveBasis, line, select } from 'd3';
|
import { select } from 'd3';
|
||||||
import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
|
import { configureSvgSize } from '../../utils';
|
||||||
import db from './gitGraphAst';
|
|
||||||
import gitGraphParser from './parser/gitGraph';
|
|
||||||
import { log } from '../../logger';
|
import { log } from '../../logger';
|
||||||
import { getConfig } from '../../config';
|
import { getConfig } from '../../config';
|
||||||
import addSVGAccessibilityFields from '../../accessibility';
|
import addSVGAccessibilityFields from '../../accessibility';
|
||||||
|
@ -515,23 +513,17 @@ const drawBranches = (svg, branches) => {
|
||||||
* @param txt
|
* @param txt
|
||||||
* @param id
|
* @param id
|
||||||
* @param ver
|
* @param ver
|
||||||
|
* @param diagObj
|
||||||
*/
|
*/
|
||||||
export const draw = function (txt, id, ver) {
|
export const draw = function (txt, id, ver, diagObj) {
|
||||||
clear();
|
clear();
|
||||||
const conf = getConfig();
|
const conf = getConfig();
|
||||||
const gitGraphConfig = getConfig().gitGraph;
|
const gitGraphConfig = getConfig().gitGraph;
|
||||||
// try {
|
// try {
|
||||||
const parser = gitGraphParser.parser;
|
|
||||||
parser.yy = db;
|
|
||||||
parser.yy.clear();
|
|
||||||
|
|
||||||
log.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
|
log.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
|
||||||
// // Parse the graph definition
|
|
||||||
parser.parse(txt + '\n');
|
|
||||||
|
|
||||||
const direction = db.getDirection();
|
allCommitsDict = diagObj.db.getCommits();
|
||||||
allCommitsDict = db.getCommits();
|
const branches = diagObj.db.getBranchesAsObjArray();
|
||||||
const branches = db.getBranchesAsObjArray();
|
|
||||||
|
|
||||||
// Position branches vertically
|
// Position branches vertically
|
||||||
let pos = 0;
|
let pos = 0;
|
||||||
|
@ -543,7 +535,7 @@ export const draw = function (txt, id, ver) {
|
||||||
const diagram = select(`[id="${id}"]`);
|
const diagram = select(`[id="${id}"]`);
|
||||||
|
|
||||||
// Adds title and description to the flow chart
|
// Adds title and description to the flow chart
|
||||||
addSVGAccessibilityFields(parser.yy, diagram, id);
|
addSVGAccessibilityFields(diagObj.db, diagram, id);
|
||||||
|
|
||||||
drawCommits(diagram, allCommitsDict, false);
|
drawCommits(diagram, allCommitsDict, false);
|
||||||
if (gitGraphConfig.showBranches) {
|
if (gitGraphConfig.showBranches) {
|
||||||
|
|
|
@ -317,7 +317,7 @@ const render = function (id, _txt, cb, container) {
|
||||||
|
|
||||||
// classDef
|
// classDef
|
||||||
if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
|
if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
|
||||||
const classes = flowRenderer.getClasses(txt);
|
const classes = flowRenderer.getClasses(txt, diag);
|
||||||
const htmlLabels = cnf.htmlLabels || cnf.flowchart.htmlLabels;
|
const htmlLabels = cnf.htmlLabels || cnf.flowchart.htmlLabels;
|
||||||
for (const className in classes) {
|
for (const className in classes) {
|
||||||
if (htmlLabels) {
|
if (htmlLabels) {
|
||||||
|
@ -366,17 +366,13 @@ const render = function (id, _txt, cb, container) {
|
||||||
diag.renderer.draw(txt, id, pkg.version, diag);
|
diag.renderer.draw(txt, id, pkg.version, diag);
|
||||||
break;
|
break;
|
||||||
case 'gitGraph':
|
case 'gitGraph':
|
||||||
gitGraphRenderer.draw(txt, id, pkg.version, diag);
|
diag.renderer.draw(txt, id, pkg.version, diag);
|
||||||
break;
|
break;
|
||||||
case 'flowchart':
|
case 'flowchart':
|
||||||
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
diag.renderer.draw(txt, id, pkg.version, diag);
|
||||||
flowRenderer.setConf(cnf.flowchart);
|
|
||||||
flowRenderer.draw(txt, id, pkg.version, diag);
|
|
||||||
break;
|
break;
|
||||||
case 'flowchart-v2':
|
case 'flowchart-v2':
|
||||||
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
diag.renderer.draw(txt, id, pkg.version, diag);
|
||||||
flowRendererV2.setConf(cnf.flowchart);
|
|
||||||
flowRendererV2.draw(txt, id, pkg.version, diag);
|
|
||||||
break;
|
break;
|
||||||
case 'sequence':
|
case 'sequence':
|
||||||
diag.renderer.setConf(cnf.sequence);
|
diag.renderer.setConf(cnf.sequence);
|
||||||
|
|
Loading…
Reference in New Issue