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

#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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
cypress/platform/current.html
View File

@ -70,7 +70,7 @@
Moving --> Crash Moving --> Crash
Crash --> [*] Crash --> [*]
</div> </div>
<div class="mermaid" style="width: 100%; height: 100%;"> <div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2 stateDiagram-v2
[*] --> First [*] --> First
First --> Second First --> Second
@ -84,6 +84,12 @@ stateDiagram-v2
[*] --> sec [*] --> sec
sec --> [*] sec --> [*]
} }
</div>
<div class="mermaid" style="width: 100%; height: 100%;">
flowchart TD
subgraph Apa
a --> b
end
</div> </div>
<div class="mermaid2" style="width: 100%; height: 100%;"> <div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2 stateDiagram-v2

17
src/dagre-wrapper/clusters.js
View File

@ -1,8 +1,10 @@
import intersectRect from './intersect/intersect-rect'; import intersectRect from './intersect/intersect-rect';
import { logger } from '../logger'; // eslint-disable-line import { logger as log } from '../logger'; // eslint-disable-line
import createLabel from './createLabel'; import createLabel from './createLabel';
const rect = (parent, node) => { const rect = (parent, node) => {
log.info('Creating subgraph rect for ', node.id, node);
// Add outer g element // Add outer g element
const shapeSvg = parent const shapeSvg = parent
.insert('g') .insert('g')
@ -22,7 +24,10 @@ const rect = (parent, node) => {
const padding = 0 * node.padding; const padding = 0 * node.padding;
const halfPadding = padding / 2; const halfPadding = padding / 2;
const width = node.width || 50;
const height = node.height || 50;
log.info('Data ', node, JSON.stringify(node));
// center the rect around its coordinate // center the rect around its coordinate
rect rect
.attr('rx', node.rx) .attr('rx', node.rx)
@ -32,7 +37,7 @@ const rect = (parent, node) => {
.attr('width', node.width + padding) .attr('width', node.width + padding)
.attr('height', node.height + padding); .attr('height', node.height + padding);
// logger.info('bbox', bbox.width, node.x, node.width); // log.info('bbox', bbox.width, node.x, node.width);
// Center the label // Center the label
// label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')'); // label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
label.attr( label.attr(
@ -127,7 +132,7 @@ const roundedWithTitle = (parent, node) => {
.attr('width', node.width + padding) .attr('width', node.width + padding)
.attr('height', node.height + padding - bbox.height - 3); .attr('height', node.height + padding - bbox.height - 3);
// logger.info('bbox', bbox.width, node.x, node.width); // log.info('bbox', bbox.width, node.x, node.width);
// Center the label // Center the label
// label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')'); // label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
label.attr( label.attr(
@ -155,7 +160,9 @@ const shapes = { rect, roundedWithTitle, noteGroup };
let clusterElems = {}; let clusterElems = {};
export const insertCluster = (elem, node) => { export const insertCluster = (elem, node) => {
clusterElems[node.id] = shapes[node.shape](elem, node); log.info('Inserting cluster');
const shape = node.shape || 'rect';
clusterElems[node.id] = shapes[shape](elem, node);
}; };
export const getClusterTitleWidth = (elem, node) => { export const getClusterTitleWidth = (elem, node) => {
const label = createLabel(node.labelText, node.labelStyle); const label = createLabel(node.labelText, node.labelStyle);
@ -170,6 +177,8 @@ export const clear = () => {
}; };
export const positionCluster = node => { export const positionCluster = node => {
log.info('Position cluster');
const el = clusterElems[node.id]; const el = clusterElems[node.id];
el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')'); el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
}; };

162
src/dagre-wrapper/index.js
View File

@ -1,62 +1,38 @@
import dagre from 'dagre'; import dagre from 'dagre';
import graphlib from 'graphlib';
import insertMarkers from './markers'; import insertMarkers from './markers';
import { clear as cleargraphlib, clusterDb, adjustClustersAndEdges } from './mermaid-graphlib'; import { updateNodeBounds } from './shapes/util';
import { insertNode, positionNode, clear as clearNodes } from './nodes'; import {
import { insertCluster, clear as clearClusters } from './clusters'; clear as clearGraphlib,
clusterDb,
adjustClustersAndEdges,
findNonClusterChild
} from './mermaid-graphlib';
import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes';
import { insertCluster, clear as clearClusters, positionCluster } from './clusters';
import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges'; import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';
import { logger } from '../logger'; import { logger as log } from '../logger';
// let clusterDb = {}; // let clusterDb = {};
const getAnchorId = id => { const getAnchorId = id => {
// Only insert an achor once // Only insert an achor once
if (clusterDb[id]) { if (clusterDb[id]) {
// if (!clusterDb[id].inserted) {
// // Create anchor node for cluster
// const anchorData = {
// shape: 'start',
// labelText: '',
// classes: '',
// style: '',
// id: id + '_anchor',
// type: 'anchor',
// padding: 0
// };
// insertNode(nodes, anchorData);
// graph.setNode(anchorData.id, anchorData);
// graph.setParent(anchorData.id, id);
// clusterDb[id].inserted = true;
// }
return clusterDb[id].id; return clusterDb[id].id;
} }
return id; return id;
}; };
const findNonClusterChild = (id, graph) => { const recursiveRender = (_elem, graph, diagramtype) => {
const node = graph.node(id); const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line
logger.info('identified node', node); if (!graph.nodes()) {
if (node.type !== 'group') { log.info('No nodes found for', graph);
return node.id; } else {
log.info('Recursive render', graph.edges());
} }
logger.info('identified node Not', node.id); if (graph.edges().length > 0) {
const children = graph.children(id); log.info('Recursive edges', graph.edge(graph.edges()[0]));
for (let i = 0; i < children.length; i++) {
const _id = findNonClusterChild(children[i], graph);
if (_id) {
return _id;
}
} }
};
export const render = (elem, graph, markers, diagramtype, id) => {
insertMarkers(elem, markers, diagramtype, id);
clearNodes();
clearEdges();
clearClusters();
adjustClustersAndEdges(graph);
const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line
const edgePaths = elem.insert('g').attr('class', 'edgePaths'); const edgePaths = elem.insert('g').attr('class', 'edgePaths');
const edgeLabels = elem.insert('g').attr('class', 'edgeLabels'); const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
@ -66,81 +42,115 @@ export const render = (elem, graph, markers, diagramtype, id) => {
// to the abstract node and is later used by dagre for the layout // to the abstract node and is later used by dagre for the layout
graph.nodes().forEach(function(v) { graph.nodes().forEach(function(v) {
const node = graph.node(v); const node = graph.node(v);
logger.info('Node ' + v + ': ' + JSON.stringify(graph.node(v))); log.info('(Insert) Node ' + v + ': ' + JSON.stringify(graph.node(v)));
if (node.type !== 'group') { if (node.clusterNode) {
insertNode(nodes, graph.node(v));
} else {
// const children = graph.children(v); // const children = graph.children(v);
// logger.info('Cluster identified', node.id, children[0], findNonClusterChild(node.id, graph)); log.info('Cluster identified', v, node, graph.node(v));
// clusterDb[node.id] = { id: findNonClusterChild(node.id, graph) }; const newEl = recursiveRender(clusters, node.graph, diagramtype);
updateNodeBounds(node, newEl);
setNodeElem(newEl, node);
log.info('Recursice render complete', newEl, node);
} else {
if (graph.children(v).length > 0) {
// This is a cluster but not to be rendered recusively
// Render as before
log.info('Cluster - the non recursive path', v, node.id, node, graph);
log.info(findNonClusterChild(node.id, graph));
clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };
// insertCluster(clusters, graph.node(v));
} else {
log.info('Node - the non recursive path', v, node.id, node);
insertNode(nodes, graph.node(v));
}
} }
}); });
logger.info('Clusters ', clusterDb); log.info('Clusters ', clusterDb);
// Insert labels, this will insert them into the dom so that the width can be calculated // Insert labels, this will insert them into the dom so that the width can be calculated
// Also figure out which edges point to/from clusters and adjust them accordingly // Also figure out which edges point to/from clusters and adjust them accordingly
// Edges from/to clusters really points to the first child in the cluster. // Edges from/to clusters really points to the first child in the cluster.
// TODO: pick optimal child in the cluster to us as link anchor // TODO: pick optimal child in the cluster to us as link anchor
graph.edges().forEach(function(e) { graph.edges().forEach(function(e) {
const edge = graph.edge(e); const edge = graph.edge(e.v, e.w, e.name);
logger.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e)); log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e))); log.info(
'Edge ' + e.v + ' -> ' + e.w + ': ',
e,
' ',
+JSON.stringify(graph.edge(e.v, e.w, e.name))
);
let v = e.v; let v = e.v;
let w = e.w; let w = e.w;
// Check if link is either from or to a cluster // Check if link is either from or to a cluster
logger.info( log.info('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);
'Fix',
clusterDb,
'ids:',
e.v,
e.w,
'Translateing: ',
clusterDb[e.v],
clusterDb[e.w]
);
if (clusterDb[e.v] || clusterDb[e.w]) { if (clusterDb[e.v] || clusterDb[e.w]) {
logger.info('Fixing and trixing - rwemoving', e.v, e.w, e.name); log.info('Fixing and trixing - removing', e.v, e.w, e.name);
v = getAnchorId(e.v, graph, nodes); v = getAnchorId(e.v, graph, nodes);
w = getAnchorId(e.w, graph, nodes); w = getAnchorId(e.w, graph, nodes);
graph.removeEdge(e.v, e.w, e.name); graph.removeEdge(e.v, e.w, e.name);
if (v !== e.v) edge.fromCluster = e.v; if (v !== e.v) edge.fromCluster = e.v;
if (w !== e.w) edge.toCluster = e.w; if (w !== e.w) edge.toCluster = e.w;
logger.info('Fixing Replacing with', v, w, e.name); log.info('Fixing Replacing with', v, w, e.name);
graph.setEdge(v, w, edge, e.name); graph.setEdge(v, w, edge, e.name);
} }
insertEdgeLabel(edgeLabels, edge); insertEdgeLabel(edgeLabels, edge);
}); });
graph.edges().forEach(function(e) { graph.edges().forEach(function(e) {
logger.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e)); log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
}); });
logger.info('#############################################'); log.info('#############################################');
logger.info('### Layout ###'); log.info('### Layout ###');
logger.info('#############################################'); log.info('#############################################');
logger.info(graph); log.info(graph);
dagre.layout(graph); dagre.layout(graph);
// Move the nodes to the correct place // Move the nodes to the correct place
graph.nodes().forEach(function(v) { graph.nodes().forEach(function(v) {
const node = graph.node(v); const node = graph.node(v);
logger.trace('Node ' + v + ': ' + JSON.stringify(graph.node(v))); log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
if (node.type !== 'group') { if (node && node.clusterNode) {
positionNode(node); // clusterDb[node.id].node = node;
// positionNode(node);
} else { } else {
insertCluster(clusters, node); // Non cluster node
clusterDb[node.id].node = node; if (graph.children(v).length > 0) {
// A cluster in the non-recurive way
// positionCluster(node);
insertCluster(clusters, node);
clusterDb[node.id].node = node;
} else {
positionNode(node);
}
} }
}); });
// Move the edge labels to the correct place after layout // Move the edge labels to the correct place after layout
graph.edges().forEach(function(e) { graph.edges().forEach(function(e) {
const edge = graph.edge(e); const edge = graph.edge(e);
logger.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge); log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
insertEdge(edgePaths, edge, clusterDb, diagramtype); insertEdge(edgePaths, edge, clusterDb, diagramtype);
positionEdgeLabel(edge); positionEdgeLabel(edge);
}); });
return elem;
};
export const render = (elem, graph, markers, diagramtype, id) => {
insertMarkers(elem, markers, diagramtype, id);
clearNodes();
clearEdges();
clearClusters();
clearGraphlib();
log.warn('Graph before:', graphlib.json.write(graph));
adjustClustersAndEdges(graph);
log.warn('Graph after:', graphlib.json.write(graph));
recursiveRender(elem, graph, diagramtype);
}; };
// const shapeDefinitions = {}; // const shapeDefinitions = {};

73
src/dagre-wrapper/mermaid-graphlib.js
View File

@ -13,7 +13,7 @@ export const clear = () => {
}; };
const copy = (clusterId, graph, newGraph, rootId) => { const copy = (clusterId, graph, newGraph, rootId) => {
logger.trace('Copying ', clusterId); logger.info('Copying ', clusterId, graph.node(clusterId));
const nodes = graph.children(clusterId); const nodes = graph.children(clusterId);
nodes.forEach(node => { nodes.forEach(node => {
if (graph.children(node).length > 0) { if (graph.children(node).length > 0) {
@ -21,22 +21,29 @@ const copy = (clusterId, graph, newGraph, rootId) => {
} }
const data = graph.node(node); const data = graph.node(node);
logger.trace(node, data, ' parent is ', clusterId); logger.info(node, data, ' parent is ', clusterId);
newGraph.setNode(node, data); newGraph.setNode(node, data);
newGraph.setParent(node, clusterId); newGraph.setParent(node, clusterId);
const edges = graph.edges(node); const edges = graph.edges(node);
graph.removeNode(node); logger.info('Copying Edges', edges);
logger.trace('Edges', edges);
edges.forEach(edge => { edges.forEach(edge => {
const data = graph.edge(edge); logger.info('Edge', edge);
// Do not copy edges in and out of the root cluster, they belong to the parent graph const data = graph.edge(edge.v, edge.w, edge.name);
if (!(edge.v === rootId || edge.w === rootId)) { logger.info('Edge data', data, rootId);
logger.trace('Copying as ', rootId, edge.v, edge.w, clusterId); try {
newGraph.setEdge(edge.v, edge.w, data); // Do not copy edges in and out of the root cluster, they belong to the parent graph
} else { if (!(edge.v === rootId || edge.w === rootId)) {
logger.trace('Skipping copy of edge as ', rootId, edge.v, edge.w, clusterId); logger.info('Copying as ', edge.v, edge.w, data, edge.name);
newGraph.setEdge(edge.v, edge.w, data, edge.name);
logger.info('newgrapg edges ', newGraph.edges(), newGraph.edge(newGraph.edges()[0]));
} else {
logger.info('Skipping copy of edge as ', rootId, edge.v, edge.w, clusterId);
}
} catch (e) {
logger.error(e);
} }
}); });
graph.removeNode(node);
}); });
newGraph.setNode(clusterId, graph.node(clusterId)); newGraph.setNode(clusterId, graph.node(clusterId));
}; };
@ -60,8 +67,8 @@ export const extractGraphFromCluster = (clusterId, graph) => {
.setGraph({ .setGraph({
rankdir: 'TB', rankdir: 'TB',
// Todo: set proper spacing // Todo: set proper spacing
nodesep: 10, nodesep: 50,
ranksep: 10, ranksep: 50,
marginx: 8, marginx: 8,
marginy: 8 marginy: 8
}) })
@ -69,6 +76,26 @@ export const extractGraphFromCluster = (clusterId, graph) => {
return {}; return {};
}); });
// const conf = getConfig().flowchart;
// const nodeSpacing = conf.nodeSpacing || 50;
// const rankSpacing = conf.rankSpacing || 50;
// // Create the input mermaid.graph
// const g = new graphlib.Graph({
// multigraph: true,
// compound: true
// })
// .setGraph({
// rankdir: 'TB',
// nodesep: nodeSpacing,
// ranksep: rankSpacing,
// marginx: 8,
// marginy: 8
// })
// .setDefaultEdgeLabel(function() {
// return {};
// });
copy(clusterId, graph, clusterGraph, clusterId); copy(clusterId, graph, clusterGraph, clusterId);
return clusterGraph; return clusterGraph;
@ -100,7 +127,7 @@ export const validate = graph => {
* @param {Finds a } id * @param {Finds a } id
* @param {*} graph * @param {*} graph
*/ */
const findNonClusterChild = (id, graph) => { export const findNonClusterChild = (id, graph) => {
// const node = graph.node(id); // const node = graph.node(id);
logger.trace('Searching', id); logger.trace('Searching', id);
const children = graph.children(id); const children = graph.children(id);
@ -141,7 +168,7 @@ export const adjustClustersAndEdges = graph => {
graph.nodes().forEach(function(id) { graph.nodes().forEach(function(id) {
const children = graph.children(id); const children = graph.children(id);
if (children.length > 0) { if (children.length > 0) {
logger.trace( logger.info(
'Cluster identified', 'Cluster identified',
id, id,
' Replacement id in edges: ', ' Replacement id in edges: ',
@ -157,13 +184,13 @@ export const adjustClustersAndEdges = graph => {
const children = graph.children(id); const children = graph.children(id);
const edges = graph.edges(); const edges = graph.edges();
if (children.length > 0) { if (children.length > 0) {
logger.trace('Cluster identified', id); logger.info('Cluster identified', id);
edges.forEach(edge => { edges.forEach(edge => {
logger.trace('Edge: ', edge, decendants[id]); logger.info('Edge: ', edge, decendants[id]);
// Check if any edge leaves the cluster (not the actual cluster, thats a link from the box) // Check if any edge leaves the cluster (not the actual cluster, thats a link from the box)
if (edge.v !== id && edge.w !== id) { if (edge.v !== id && edge.w !== id) {
if (decendants[id].indexOf(edge.v) < 0 || decendants[id].indexOf(edge.w) < 0) { if (decendants[id].indexOf(edge.v) < 0 || decendants[id].indexOf(edge.w) < 0) {
logger.trace('Edge: ', edge, ' leaves cluster ', id); logger.info('Edge: ', edge, ' leaves cluster ', id);
clusterDb[id].externalConnections = true; clusterDb[id].externalConnections = true;
} }
} }
@ -189,7 +216,13 @@ export const adjustClustersAndEdges = graph => {
// Create a new node in the original graph, this new node is not a cluster // Create a new node in the original graph, this new node is not a cluster
// but a regular node with the cluster dontent as a new attached graph // but a regular node with the cluster dontent as a new attached graph
graph.setNode(clusterId, { clusterNode: true, graph: clusterGraph }); graph.setNode(clusterId, {
clusterNode: true,
id: clusterId,
clusterData: clusterDb[clusterId],
labelText: clusterDb[clusterId].labelText,
graph: clusterGraph
});
// The original edges in and out of the cluster is applied // The original edges in and out of the cluster is applied
edges.forEach(edge => { edges.forEach(edge => {
@ -205,7 +238,7 @@ export const adjustClustersAndEdges = graph => {
graph.edges().forEach(function(e) { graph.edges().forEach(function(e) {
const edge = graph.edge(e); const edge = graph.edge(e);
logger.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e)); logger.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
logger.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e))); logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));
let v = e.v; let v = e.v;
let w = e.w; let w = e.w;

31
src/dagre-wrapper/mermaid-graphlib.spec.js
View File

@ -135,7 +135,7 @@ describe('Graphlib decorations', () => {
expect(newGraph.edges('a')).toEqual([{ v: 'a', w: 'b' }]); expect(newGraph.edges('a')).toEqual([{ v: 'a', w: 'b' }]);
}); });
it('It is possible to extract a clusters to a new graph 2', function () { it('It is possible to extract a clusters to a new graph 2 GLB1', function () {
/* /*
subgraph C1 subgraph C1
a --> b a --> b
@ -163,7 +163,7 @@ describe('Graphlib decorations', () => {
expect(g.children('C2')).toEqual([]); expect(g.children('C2')).toEqual([]);
expect(g.edges()).toEqual([{ v: 'C1', w: 'C2' }]); expect(g.edges()).toEqual([{ v: 'C1', w: 'C2' }]);
logger.info(C1.nodes()); logger.info(g.nodes());
expect(C1.nodes()).toEqual(['a', 'C1', 'b']); expect(C1.nodes()).toEqual(['a', 'C1', 'b']);
expect(C1.children('C1')).toEqual(['a', 'b']); expect(C1.children('C1')).toEqual(['a', 'b']);
expect(C1.edges()).toEqual([{ v: 'a', w: 'b' }]); expect(C1.edges()).toEqual([{ v: 'a', w: 'b' }]);
@ -200,7 +200,7 @@ describe('Graphlib decorations', () => {
expect(g.children('C1')).toEqual([]); expect(g.children('C1')).toEqual([]);
}); });
}); });
it('Validate should detect edges between clusters and transform clusters', function () { it('Validate should detect edges between clusters and transform clusters GLB4', function () {
/* /*
a --> b a --> b
subgraph C1 subgraph C1
@ -225,4 +225,29 @@ describe('Graphlib decorations', () => {
expect(g.nodes().length).toBe(2); expect(g.nodes().length).toBe(2);
expect(validate(g)).toBe(true); expect(validate(g)).toBe(true);
}); });
it('Validate should detect edges between clusters and transform clusters GLB5', function () {
/*
a --> b
subgraph C1
a
end
subgraph C2
b
end
C1 -->
*/
g.setNode('a', { data: 1 });
g.setNode('b', { data: 2 });
g.setParent('a', 'C1');
g.setParent('b', 'C2');
g.setParent('C1', 'C2');
// g.setEdge('a', 'b', { name: 'C1-internal-link' });
g.setEdge('C1', 'C2', { name: 'C1-external-link' });
logger.info(g.nodes())
adjustClustersAndEdges(g);
logger.info(g.nodes())
expect(g.nodes().length).toBe(2);
expect(validate(g)).toBe(true);
});
}); });

3
src/dagre-wrapper/nodes.js
View File

@ -387,6 +387,9 @@ let nodeElems = {};
export const insertNode = (elem, node) => { export const insertNode = (elem, node) => {
nodeElems[node.id] = shapes[node.shape](elem, node); nodeElems[node.id] = shapes[node.shape](elem, node);
}; };
export const setNodeElem = (elem, node) => {
nodeElems[node.id] = elem;
};
export const clear = () => { export const clear = () => {
nodeElems = {}; nodeElems = {};
}; };

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

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