GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-02-04 07:13:25 +08:00
Code Issues Projects Releases Wiki Activity

#2028 basic render

Browse Source
This commit is contained in:
ashishj 2023-05-10 20:09:39 +02:00
parent e506893a0e
commit 2c9da722d6
3 changed files with 119 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
cypress/platform/knsv2.html
View File

@ -59,7 +59,7 @@
<body>
<pre id="diagram" class="mermaid">
flowchart LR
swimlane
subgraph "`one`"
start -- l1 --> cat --> rat
end
@ -71,9 +71,6 @@ flowchart LR
end
</pre>
<!-- cat --> monkey
dog --> cat
monkey --> cow -->
<!-- <div id="cy"></div> -->
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->

2
packages/mermaid/src/diagrams/flowchart/parser/flow.jison
View File

@ -84,7 +84,7 @@ that id.
<click>[\s\n] this.popState();
<click>[^\s\n]* return 'CLICK';
"swimlane" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';}
"swimlane" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';}
"flowchart-elk" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';}
"graph" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';}
"flowchart" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';}

187
packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js
View File

@ -22,9 +22,48 @@ export const setConf = function (cnf) {
*
* @param element
* @param graph
* @param layout
* @param elem
* @param conf
*/
function swimlaneRender(element, graph) {
return graph;
function swimlaneRender(layout, elem, conf) {
// draw nodes from layout.graph to element
const nodes = layout.graph.nodes();
// for each node, draw a rect, with a child text inside as label
for (const node of nodes) {
const nodeElem = elem.append('g');
nodeElem.attr(
'class',
'swimlane-node-'+node+ + (' lane-' + node.lane)
);
// Create the wrapped text element
const textElem = nodeElem.append('g');
console.log('node',node);
console.log('node.x',layout.graph.node(node).x);
console.log('node.y',layout.graph.node(node).y);
const txt = textElem
.append('text')
.text(node)
.attr('x', layout.graph.node(node).x)
.attr('y', layout.graph.node(node).y)
.attr('dy', '1em')
.attr('alignment-baseline', 'middle')
.attr('dominant-baseline', 'middle')
.attr('text-anchor', 'middle')
const bbox = txt.node().getBBox();
textElem.attr('transform', 'translate(' + layout.graph.node(node).x/2 + ', ' + layout.graph.node(node).y/2 + ')');
}
return elem;
}
/**
@ -73,7 +112,11 @@ export const draw = async function (text, id, _version, diagObj) {
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
const g = setupGraphViewbox(diagObj);
// create g as a graphlib graph using setupGraph from setup-graph.js
const g = setupGraph(diagObj, id, root, doc);
let subG;
const subGraphs = diagObj.db.getSubGraphs();
log.info('Subgraphs - ', subGraphs);
@ -93,98 +136,102 @@ export const draw = async function (text, id, _version, diagObj) {
// Fetch the vertices/nodes and edges/links from the parsed graph definition
const vert = diagObj.db.getVertices();
const edges = diagObj.db.getEdges();
// const edges = diagObj.db.getEdges();
log.info('Edges', edges);
let i = 0;
for (i = subGraphs.length - 1; i >= 0; i--) {
// for (let i = 0; i < subGraphs.length; i++) {
subG = subGraphs[i];
// log.info('Edges', edges);
// let i = 0;
// for (i = subGraphs.length - 1; i >= 0; i--) {
// // for (let i = 0; i < subGraphs.length; i++) {
// subG = subGraphs[i];
selectAll('cluster').append('text');
// selectAll('cluster').append('text');
for (let j = 0; j < subG.nodes.length; j++) {
log.info('Setting up subgraphs', subG.nodes[j], subG.id);
g.setParent(subG.nodes[j], subG.id);
}
}
setupGraph(diagObj, id, root, doc);
// for (let j = 0; j < subG.nodes.length; j++) {
// log.info('Setting up subgraphs', subG.nodes[j], subG.id);
// g.setParent(subG.nodes[j], subG.id);
// }
// }
// setupGraph(diagObj, id, root, doc);
// Add custom shapes
// flowChartShapes.addToRenderV2(addShape);
// Set up an SVG group so that we can translate the final graph.
const svg = root.select(`[id="${id}"]`);
// const svg = root.select(`[id="${id}"]`);
const svg = root.select('#' + id);
svg.append('g');
// Run the renderer. This is what draws the final graph.
const element = root.select('#' + id + ' g');
// const element = root.select('#' + id + ' g');
console.log('diagObj',diagObj);
console.log('subGraphs', diagObj.db.getSubGraphs());
const layout = swimlaneLayout(g, diagObj);
swimlaneRender(layout, svg, conf);
// await render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
swimlaneLayout(g, conf);
swimlaneRender(element, g, conf);
await render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
// utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
setupGraphViewbox(g, svg, conf.diagramPadding, conf.useMaxWidth);
// Index nodes
diagObj.db.indexNodes('subGraph' + i);
// diagObj.db.indexNodes('subGraph' + i);
// Add label rects for non html labels
if (!conf.htmlLabels) {
const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
for (const label of labels) {
// Get dimensions of label
const dim = label.getBBox();
// if (!conf.htmlLabels) {
// const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
// for (const label of labels) {
// // Get dimensions of label
// const dim = label.getBBox();
const rect = doc.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('rx', 0);
rect.setAttribute('ry', 0);
rect.setAttribute('width', dim.width);
rect.setAttribute('height', dim.height);
// const rect = doc.createElementNS('http://www.w3.org/2000/svg', 'rect');
// rect.setAttribute('rx', 0);
// rect.setAttribute('ry', 0);
// rect.setAttribute('width', dim.width);
// rect.setAttribute('height', dim.height);
label.insertBefore(rect, label.firstChild);
}
}
// label.insertBefore(rect, label.firstChild);
// }
// }
// If node has a link, wrap it in an anchor SVG object.
const keys = Object.keys(vert);
keys.forEach(function (key) {
const vertex = vert[key];
// const keys = Object.keys(vert);
// keys.forEach(function (key) {
// const vertex = vert[key];
if (vertex.link) {
const node = select('#' + id + ' [id="' + key + '"]');
if (node) {
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', 'href', vertex.link);
link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener');
if (securityLevel === 'sandbox') {
link.setAttributeNS('http://www.w3.org/2000/svg', 'target', '_top');
} else if (vertex.linkTarget) {
link.setAttributeNS('http://www.w3.org/2000/svg', 'target', vertex.linkTarget);
}
// if (vertex.link) {
// const node = select('#' + id + ' [id="' + key + '"]');
// if (node) {
// 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', 'href', vertex.link);
// link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener');
// if (securityLevel === 'sandbox') {
// link.setAttributeNS('http://www.w3.org/2000/svg', 'target', '_top');
// } else if (vertex.linkTarget) {
// link.setAttributeNS('http://www.w3.org/2000/svg', 'target', vertex.linkTarget);
// }
const linkNode = node.insert(function () {
return link;
}, ':first-child');
// const linkNode = node.insert(function () {
// return link;
// }, ':first-child');
const shape = node.select('.label-container');
if (shape) {
linkNode.append(function () {
return shape.node();
});
}
// const shape = node.select('.label-container');
// if (shape) {
// linkNode.append(function () {
// return shape.node();
// });
// }
const label = node.select('.label');
if (label) {
linkNode.append(function () {
return label.node();
});
}
}
}
});
// const label = node.select('.label');
// if (label) {
// linkNode.append(function () {
// return label.node();
// });
// }
// }
// }
//});
};
export default {