marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-19 07:19:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

#1295 Recursive rendering, draft

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-04-11 17:16:01 +02:00
parent 8455db6fae
commit 22e17172dd
7 changed files with 211 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/diagrams/flowchart/flowRenderer-v2.js
View File

@@ -314,8 +314,10 @@ export const draw = function(text, id) {
let subG;
const subGraphs = flowDb.getSubGraphs();
logger.info('Subgraphs - ', subGraphs);
for (let i = subGraphs.length - 1; i >= 0; i--) {
subG = subGraphs[i];
logger.info('Subgraph - ', subG);
flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
}
@@ -347,7 +349,7 @@ export const draw = function(text, id) {
// Run the renderer. This is what draws the final graph.
const element = d3.select('#' + id + ' g');
render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
dagre.layout(g);
// dagre.layout(g);
element.selectAll('g.node').attr('title', function() {
return flowDb.getTooltip(this.id);
@@ -378,27 +380,27 @@ export const draw = function(text, id) {
// Index nodes
flowDb.indexNodes('subGraph' + i);
// reposition labels
for (i = 0; i < subGraphs.length; i++) {
subG = subGraphs[i];
// // reposition labels
// for (i = 0; i < subGraphs.length; i++) {
// subG = subGraphs[i];
if (subG.title !== 'undefined') {
const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
// if (subG.title !== 'undefined') {
// const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
// const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
const xPos = clusterRects[0].x.baseVal.value;
const yPos = clusterRects[0].y.baseVal.value;
const width = clusterRects[0].width.baseVal.value;
const cluster = d3.select(clusterEl[0]);
const te = cluster.select('.label');
te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`);
te.attr('id', id + 'Text');
// const xPos = clusterRects[0].x.baseVal.value;
// const yPos = clusterRects[0].y.baseVal.value;
// const width = clusterRects[0].width.baseVal.value;
// const cluster = d3.select(clusterEl[0]);
// const te = cluster.select('.label');
// te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`);
// te.attr('id', id + 'Text');
for (let j = 0; j < subG.classes.length; j++) {
clusterEl[0].classList.add(subG.classes[j]);
}
}
}
// for (let j = 0; j < subG.classes.length; j++) {
// clusterEl[0].classList.add(subG.classes[j]);
// }
// }
// }
// Add label rects for non html labels
if (!conf.htmlLabels) {