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 Alternating graph directions for subgraphs

Browse Source
This commit is contained in:
Knut Sveidqvist 2020-04-26 12:57:45 +02:00
parent fd37edc53f
commit 76b4b88e4b
3 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,7 @@ import { logger as log } from '../logger';
const recursiveRender = (_elem, graph, diagramtype, parentCluster) => { const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
log.info('Graph in recursive render:', graphlib.json.write(graph), parentCluster); log.info('Graph in recursive render:', graphlib.json.write(graph), parentCluster);
const dir = graph.graph().rankdir;
const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line
if (!graph.nodes()) { if (!graph.nodes()) {
log.trace('No nodes found for', graph); log.trace('No nodes found for', graph);
@ -59,7 +60,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
// insertCluster(clusters, graph.node(v)); // insertCluster(clusters, graph.node(v));
} else { } else {
log.trace('Node - the non recursive path', v, node.id, node); log.trace('Node - the non recursive path', v, node.id, node);
insertNode(nodes, graph.node(v)); insertNode(nodes, graph.node(v), dir);
} }
} }
}); });
@ -138,7 +139,7 @@ export const render = (elem, graph, markers, diagramtype, id) => {
log.warn('Graph before:', graphlib.json.write(graph)); log.warn('Graph before:', graphlib.json.write(graph));
adjustClustersAndEdges(graph); adjustClustersAndEdges(graph);
log.warn('Graph after:', graphlib.json.write(graph)); log.warn('Graph after:', graphlib.json.write(graph));
log.warn('Graph ever after:', graph.graph());
recursiveRender(elem, graph, diagramtype); recursiveRender(elem, graph, diagramtype);
}; };

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

@ -329,12 +329,14 @@ export const extractor = (graph, depth) => {
depth depth
); );
const graphSettings = graph.graph();
const clusterGraph = new graphlib.Graph({ const clusterGraph = new graphlib.Graph({
multigraph: true, multigraph: true,
compound: true compound: true
}) })
.setGraph({ .setGraph({
rankdir: 'TB', rankdir: graphSettings.rankdir === 'TB' ? 'LR' : 'TB',
// Todo: set proper spacing // Todo: set proper spacing
nodesep: 50, nodesep: 50,
ranksep: 50, ranksep: 50,

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

@ -404,24 +404,33 @@ const start = (parent, node) => {
return shapeSvg; return shapeSvg;
}; };
const forkJoin = (parent, node) => { const forkJoin = (parent, node, dir) => {
const shapeSvg = parent const shapeSvg = parent
.insert('g') .insert('g')
.attr('class', 'node default') .attr('class', 'node default')
.attr('id', node.id); .attr('id', node.id);
let width = 70;
let height = 10;
if (dir === 'LR') {
width = 10;
height = 70;
}
const shape = shapeSvg const shape = shapeSvg
.append('rect') .append('rect')
.style('stroke', 'black') .style('stroke', 'black')
.style('fill', 'black') .style('fill', 'black')
.attr('x', -35) .attr('x', (-1 * width) / 2)
.attr('y', -5) .attr('y', (-1 * height) / 2)
.attr('width', 70) .attr('width', width)
.attr('height', 10) .attr('height', height)
.attr('class', 'fork-join'); .attr('class', 'fork-join');
updateNodeBounds(node, shape); updateNodeBounds(node, shape);
node.height = node.height + node.padding / 2; node.height = node.height + node.padding / 2;
node.width = node.width + node.padding / 2;
node.intersect = function(point) { node.intersect = function(point) {
return intersect.rect(node, point); return intersect.rect(node, point);
}; };
@ -481,8 +490,8 @@ const shapes = {
let nodeElems = {}; let nodeElems = {};
export const insertNode = (elem, node) => { export const insertNode = (elem, node, dir) => {
nodeElems[node.id] = shapes[node.shape](elem, node); nodeElems[node.id] = shapes[node.shape](elem, node, dir);
}; };
export const setNodeElem = (elem, node) => { export const setNodeElem = (elem, node) => {
nodeElems[node.id] = elem; nodeElems[node.id] = elem;