mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
#1295 Alternating graph directions for subgraphs
This commit is contained in:
parent
fd37edc53f
commit
76b4b88e4b
@ -15,6 +15,7 @@ import { logger as log } from '../logger';
|
||||
|
||||
const recursiveRender = (_elem, graph, diagramtype, 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
|
||||
if (!graph.nodes()) {
|
||||
log.trace('No nodes found for', graph);
|
||||
@ -59,7 +60,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
|
||||
// insertCluster(clusters, graph.node(v));
|
||||
} else {
|
||||
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));
|
||||
adjustClustersAndEdges(graph);
|
||||
log.warn('Graph after:', graphlib.json.write(graph));
|
||||
|
||||
log.warn('Graph ever after:', graph.graph());
|
||||
recursiveRender(elem, graph, diagramtype);
|
||||
};
|
||||
|
||||
|
@ -329,12 +329,14 @@ export const extractor = (graph, depth) => {
|
||||
depth
|
||||
);
|
||||
|
||||
const graphSettings = graph.graph();
|
||||
|
||||
const clusterGraph = new graphlib.Graph({
|
||||
multigraph: true,
|
||||
compound: true
|
||||
})
|
||||
.setGraph({
|
||||
rankdir: 'TB',
|
||||
rankdir: graphSettings.rankdir === 'TB' ? 'LR' : 'TB',
|
||||
// Todo: set proper spacing
|
||||
nodesep: 50,
|
||||
ranksep: 50,
|
||||
|
@ -404,24 +404,33 @@ const start = (parent, node) => {
|
||||
return shapeSvg;
|
||||
};
|
||||
|
||||
const forkJoin = (parent, node) => {
|
||||
const forkJoin = (parent, node, dir) => {
|
||||
const shapeSvg = parent
|
||||
.insert('g')
|
||||
.attr('class', 'node default')
|
||||
.attr('id', node.id);
|
||||
|
||||
let width = 70;
|
||||
let height = 10;
|
||||
|
||||
if (dir === 'LR') {
|
||||
width = 10;
|
||||
height = 70;
|
||||
}
|
||||
|
||||
const shape = shapeSvg
|
||||
.append('rect')
|
||||
.style('stroke', 'black')
|
||||
.style('fill', 'black')
|
||||
.attr('x', -35)
|
||||
.attr('y', -5)
|
||||
.attr('width', 70)
|
||||
.attr('height', 10)
|
||||
.attr('x', (-1 * width) / 2)
|
||||
.attr('y', (-1 * height) / 2)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.attr('class', 'fork-join');
|
||||
|
||||
updateNodeBounds(node, shape);
|
||||
node.height = node.height + node.padding / 2;
|
||||
node.width = node.width + node.padding / 2;
|
||||
node.intersect = function(point) {
|
||||
return intersect.rect(node, point);
|
||||
};
|
||||
@ -481,8 +490,8 @@ const shapes = {
|
||||
|
||||
let nodeElems = {};
|
||||
|
||||
export const insertNode = (elem, node) => {
|
||||
nodeElems[node.id] = shapes[node.shape](elem, node);
|
||||
export const insertNode = (elem, node, dir) => {
|
||||
nodeElems[node.id] = shapes[node.shape](elem, node, dir);
|
||||
};
|
||||
export const setNodeElem = (elem, node) => {
|
||||
nodeElems[node.id] = elem;
|
||||
|
Loading…
x
Reference in New Issue
Block a user