mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
#1295 Render fix for flowchart, correct marker handling and some cleanup
This commit is contained in:
Knut Sveidqvist
parent
704d56d193
commit
c3f2e8dde1
@ -7,7 +7,7 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background: white;
|
||||
background: rgb(221, 208, 208);
|
||||
font-family: 'Arial';
|
||||
}
|
||||
h1 { color: white;}
|
||||
@ -98,9 +98,20 @@ flowchart TD
|
||||
d
|
||||
end
|
||||
end
|
||||
A -- oAo --> B
|
||||
A -- oAo --o B
|
||||
A --> C
|
||||
</div>
|
||||
<div class="mermaid" style="width: 100%; height: 100%;">
|
||||
flowchart TD
|
||||
subgraph A
|
||||
a
|
||||
end
|
||||
subgraph B
|
||||
b
|
||||
end
|
||||
c-->A
|
||||
c-->B
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 100%;">
|
||||
stateDiagram-v2
|
||||
[*] --> First
|
||||
|
||||
@ -3,7 +3,7 @@ import { logger as log } from '../logger'; // eslint-disable-line
|
||||
import createLabel from './createLabel';
|
||||
|
||||
const rect = (parent, node) => {
|
||||
log.info('Creating subgraph rect for ', node.id, node);
|
||||
log.trace('Creating subgraph rect for ', node.id, node);
|
||||
|
||||
// Add outer g element
|
||||
const shapeSvg = parent
|
||||
@ -25,7 +25,7 @@ const rect = (parent, node) => {
|
||||
const padding = 0 * node.padding;
|
||||
const halfPadding = padding / 2;
|
||||
|
||||
log.info('Data ', node, JSON.stringify(node));
|
||||
log.trace('Data ', node, JSON.stringify(node));
|
||||
// center the rect around its coordinate
|
||||
rect
|
||||
.attr('rx', node.rx)
|
||||
@ -35,9 +35,7 @@ const rect = (parent, node) => {
|
||||
.attr('width', node.width + padding)
|
||||
.attr('height', node.height + padding);
|
||||
|
||||
// log.info('bbox', bbox.width, node.x, node.width);
|
||||
// Center the label
|
||||
// label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
|
||||
label.attr(
|
||||
'transform',
|
||||
'translate(' +
|
||||
@ -130,9 +128,7 @@ const roundedWithTitle = (parent, node) => {
|
||||
.attr('width', node.width + padding)
|
||||
.attr('height', node.height + padding - bbox.height - 3);
|
||||
|
||||
// log.info('bbox', bbox.width, node.x, node.width);
|
||||
// Center the label
|
||||
// label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
|
||||
label.attr(
|
||||
'transform',
|
||||
'translate(' +
|
||||
@ -158,7 +154,7 @@ const shapes = { rect, roundedWithTitle, noteGroup };
|
||||
let clusterElems = {};
|
||||
|
||||
export const insertCluster = (elem, node) => {
|
||||
log.info('Inserting cluster');
|
||||
log.trace('Inserting cluster');
|
||||
const shape = node.shape || 'rect';
|
||||
clusterElems[node.id] = shapes[shape](elem, node);
|
||||
};
|
||||
|
||||
@ -64,7 +64,7 @@ const outsideNode = (node, point) => {
|
||||
};
|
||||
|
||||
const intersection = (node, outsidePoint, insidePoint) => {
|
||||
logger.info('intersection o:', outsidePoint, ' i:', insidePoint, node);
|
||||
logger.trace('intersection o:', outsidePoint, ' i:', insidePoint, node);
|
||||
const x = node.x;
|
||||
const y = node.y;
|
||||
|
||||
@ -98,11 +98,10 @@ const intersection = (node, outsidePoint, insidePoint) => {
|
||||
};
|
||||
|
||||
export const insertEdge = function(elem, edge, clusterDb, diagramType) {
|
||||
logger.info('\n\n\n\n');
|
||||
let points = edge.points;
|
||||
if (edge.toCluster) {
|
||||
logger.info('edge', edge);
|
||||
logger.info('to cluster', clusterDb[edge.toCluster]);
|
||||
logger.trace('edge', edge);
|
||||
logger.trace('to cluster', clusterDb[edge.toCluster]);
|
||||
points = [];
|
||||
let lastPointOutside;
|
||||
let isInside = false;
|
||||
@ -110,11 +109,11 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
|
||||
const node = clusterDb[edge.toCluster].node;
|
||||
|
||||
if (!outsideNode(node, point) && !isInside) {
|
||||
logger.info('inside', edge.toCluster, point, lastPointOutside);
|
||||
logger.trace('inside', edge.toCluster, point, lastPointOutside);
|
||||
|
||||
// First point inside the rect
|
||||
const insterection = intersection(node, lastPointOutside, point);
|
||||
logger.info('intersect', insterection);
|
||||
logger.trace('intersect', insterection);
|
||||
points.push(insterection);
|
||||
isInside = true;
|
||||
} else {
|
||||
@ -125,8 +124,8 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
|
||||
}
|
||||
|
||||
if (edge.fromCluster) {
|
||||
logger.info('edge', edge);
|
||||
logger.info('from cluster', clusterDb[edge.toCluster]);
|
||||
logger.trace('edge', edge);
|
||||
logger.trace('from cluster', clusterDb[edge.toCluster]);
|
||||
const updatedPoints = [];
|
||||
let lastPointOutside;
|
||||
let isInside = false;
|
||||
@ -135,17 +134,17 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
|
||||
const node = clusterDb[edge.fromCluster].node;
|
||||
|
||||
if (!outsideNode(node, point) && !isInside) {
|
||||
logger.info('inside', edge.toCluster, point);
|
||||
logger.trace('inside', edge.toCluster, point);
|
||||
|
||||
// First point inside the rect
|
||||
const insterection = intersection(node, lastPointOutside, point);
|
||||
// logger.info('intersect', intersection(node, lastPointOutside, point));
|
||||
// logger.trace('intersect', intersection(node, lastPointOutside, point));
|
||||
updatedPoints.unshift(insterection);
|
||||
// points.push(insterection);
|
||||
isInside = true;
|
||||
} else {
|
||||
// at the outside
|
||||
logger.info('Outside point', point);
|
||||
logger.trace('Outside point', point);
|
||||
if (!isInside) updatedPoints.unshift(point);
|
||||
}
|
||||
lastPointOutside = point;
|
||||
@ -195,7 +194,7 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
|
||||
url = url.replace(/\(/g, '\\(');
|
||||
url = url.replace(/\)/g, '\\)');
|
||||
}
|
||||
// logger.info('arrowType', edge.arrowType);
|
||||
logger.info('arrowType', edge.arrowType);
|
||||
switch (edge.arrowType) {
|
||||
case 'arrow_cross':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');
|
||||
|
||||
@ -9,30 +9,20 @@ import {
|
||||
findNonClusterChild
|
||||
} from './mermaid-graphlib';
|
||||
import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes';
|
||||
import { insertCluster, clear as clearClusters } from './clusters';
|
||||
import { insertCluster, clear as clearClusters, positionCluster } from './clusters';
|
||||
import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';
|
||||
import { logger as log } from '../logger';
|
||||
|
||||
// let clusterDb = {};
|
||||
|
||||
const getAnchorId = id => {
|
||||
// Only insert an achor once
|
||||
if (clusterDb[id]) {
|
||||
return clusterDb[id].id;
|
||||
}
|
||||
return id;
|
||||
};
|
||||
|
||||
const recursiveRender = (_elem, graph, diagramtype) => {
|
||||
log.info('Graph in recursive render:', graphlib.json.write(graph));
|
||||
const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
|
||||
log.trace('Graph in recursive render:', graphlib.json.write(graph), parentCluster);
|
||||
const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line
|
||||
if (!graph.nodes()) {
|
||||
log.info('No nodes found for', graph);
|
||||
log.trace('No nodes found for', graph);
|
||||
} else {
|
||||
log.info('Recursive render', graph.nodes());
|
||||
log.trace('Recursive render', graph.nodes());
|
||||
}
|
||||
if (graph.edges().length > 0) {
|
||||
log.info('Recursive edges', graph.edge(graph.edges()[0]));
|
||||
log.trace('Recursive edges', graph.edge(graph.edges()[0]));
|
||||
}
|
||||
const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line
|
||||
const edgePaths = elem.insert('g').attr('class', 'edgePaths');
|
||||
@ -43,11 +33,18 @@ const recursiveRender = (_elem, graph, diagramtype) => {
|
||||
// to the abstract node and is later used by dagre for the layout
|
||||
graph.nodes().forEach(function(v) {
|
||||
const node = graph.node(v);
|
||||
log.info('(Insert) Node ' + v + ': ' + JSON.stringify(graph.node(v)));
|
||||
if (typeof parentCluster !== 'undefined') {
|
||||
const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
|
||||
// data.clusterPositioning = true;
|
||||
log.trace('Setting data for cluster', data);
|
||||
graph.setNode(parentCluster.id, data);
|
||||
graph.setParent(v, parentCluster.id, data);
|
||||
}
|
||||
log.trace('(Insert) Node ' + v + ': ' + JSON.stringify(graph.node(v)));
|
||||
if (node.clusterNode) {
|
||||
// const children = graph.children(v);
|
||||
log.info('Cluster identified', v, node, graph.node(v));
|
||||
const newEl = recursiveRender(clusters, node.graph, diagramtype);
|
||||
log.trace('Cluster identified', v, node, graph.node(v));
|
||||
const newEl = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
|
||||
updateNodeBounds(node, newEl);
|
||||
setNodeElem(newEl, node);
|
||||
|
||||
@ -56,12 +53,12 @@ const recursiveRender = (_elem, graph, diagramtype) => {
|
||||
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));
|
||||
log.trace('Cluster - the non recursive path', v, node.id, node, graph);
|
||||
log.trace(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);
|
||||
log.trace('Node - the non recursive path', v, node.id, node);
|
||||
insertNode(nodes, graph.node(v));
|
||||
}
|
||||
}
|
||||
@ -74,22 +71,22 @@ const recursiveRender = (_elem, graph, diagramtype) => {
|
||||
graph.edges().forEach(function(e) {
|
||||
const edge = graph.edge(e.v, e.w, e.name);
|
||||
log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
|
||||
log.info('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e)));
|
||||
log.trace('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e)));
|
||||
|
||||
let v = e.v;
|
||||
let w = e.w;
|
||||
// Check if link is either from or to a cluster
|
||||
log.info('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);
|
||||
log.trace('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);
|
||||
// Todo handle case with links
|
||||
|
||||
// if (clusterDb[e.v] || clusterDb[e.w]) {
|
||||
// log.info('Fixing and trixing - removing', e.v, e.w, e.name);
|
||||
// log.trace('Fixing and trixing - removing', e.v, e.w, e.name);
|
||||
// v = getAnchorId(e.v, graph, nodes);
|
||||
// w = getAnchorId(e.w, graph, nodes);
|
||||
// graph.removeEdge(e.v, e.w, e.name);
|
||||
// if (v !== e.v) edge.fromCluster = e.v;
|
||||
// if (w !== e.w) edge.toCluster = e.w;
|
||||
// log.info('Fixing Replacing with', v, w, e.name);
|
||||
// log.trace('Fixing Replacing with', v, w, e.name);
|
||||
// graph.setEdge(v, w, edge, e.name);
|
||||
// }
|
||||
insertEdgeLabel(edgeLabels, edge);
|
||||
@ -98,17 +95,17 @@ const recursiveRender = (_elem, graph, diagramtype) => {
|
||||
graph.edges().forEach(function(e) {
|
||||
log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
|
||||
});
|
||||
log.info('#############################################');
|
||||
log.info('### Layout ###');
|
||||
log.info('#############################################');
|
||||
log.info(graph);
|
||||
log.trace('#############################################');
|
||||
log.trace('### Layout ###');
|
||||
log.trace('#############################################');
|
||||
log.trace(graph);
|
||||
dagre.layout(graph);
|
||||
log.warn('Graph after layout:', graphlib.json.write(graph));
|
||||
// Move the nodes to the correct place
|
||||
graph.nodes().forEach(function(v) {
|
||||
const node = graph.node(v);
|
||||
// log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
|
||||
log.info(
|
||||
// log.trace('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
|
||||
log.trace(
|
||||
'Position ' + v + ': (' + node.x,
|
||||
',' + node.y,
|
||||
') width: ',
|
||||
@ -118,6 +115,7 @@ const recursiveRender = (_elem, graph, diagramtype) => {
|
||||
);
|
||||
if (node && node.clusterNode) {
|
||||
// clusterDb[node.id].node = node;
|
||||
|
||||
positionNode(node);
|
||||
} else {
|
||||
// Non cluster node
|
||||
@ -135,7 +133,7 @@ const recursiveRender = (_elem, graph, diagramtype) => {
|
||||
// Move the edge labels to the correct place after layout
|
||||
graph.edges().forEach(function(e) {
|
||||
const edge = graph.edge(e);
|
||||
log.info('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);
|
||||
positionEdgeLabel(edge);
|
||||
|
||||
@ -16,7 +16,7 @@ const extension = (elem, type, id) => {
|
||||
elem
|
||||
.append('defs')
|
||||
.append('marker')
|
||||
.attr('id', 'extensionStart')
|
||||
.attr('id', type + '-extensionStart')
|
||||
.attr('class', 'extension ' + type)
|
||||
.attr('refX', 0)
|
||||
.attr('refY', 7)
|
||||
@ -29,7 +29,7 @@ const extension = (elem, type, id) => {
|
||||
elem
|
||||
.append('defs')
|
||||
.append('marker')
|
||||
.attr('id', 'extensionEnd ' + type)
|
||||
.attr('id', type + '-extensionEnd ' + type)
|
||||
.attr('class', 'extension ' + type)
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
@ -44,7 +44,7 @@ const composition = (elem, type) => {
|
||||
elem
|
||||
.append('defs')
|
||||
.append('marker')
|
||||
.attr('id', 'compositionStart')
|
||||
.attr('id', type + '-compositionStart')
|
||||
.attr('class', 'extension ' + type)
|
||||
.attr('refX', 0)
|
||||
.attr('refY', 7)
|
||||
@ -57,7 +57,7 @@ const composition = (elem, type) => {
|
||||
elem
|
||||
.append('defs')
|
||||
.append('marker')
|
||||
.attr('id', 'compositionEnd')
|
||||
.attr('id', type + '-compositionEnd')
|
||||
.attr('class', 'extension ' + type)
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
@ -71,7 +71,7 @@ const aggregation = (elem, type) => {
|
||||
elem
|
||||
.append('defs')
|
||||
.append('marker')
|
||||
.attr('id', 'aggregationStart')
|
||||
.attr('id', type + '-aggregationStart')
|
||||
.attr('class', 'extension ' + type)
|
||||
.attr('refX', 0)
|
||||
.attr('refY', 7)
|
||||
@ -84,7 +84,7 @@ const aggregation = (elem, type) => {
|
||||
elem
|
||||
.append('defs')
|
||||
.append('marker')
|
||||
.attr('id', 'aggregationEnd')
|
||||
.attr('id', type + '-aggregationEnd')
|
||||
.attr('class', type)
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
@ -98,7 +98,7 @@ const dependency = (elem, type) => {
|
||||
elem
|
||||
.append('defs')
|
||||
.append('marker')
|
||||
.attr('id', 'dependencyStart')
|
||||
.attr('id', type + '-dependencyStart')
|
||||
.attr('class', 'extension ' + type)
|
||||
.attr('refX', 0)
|
||||
.attr('refY', 7)
|
||||
@ -111,7 +111,7 @@ const dependency = (elem, type) => {
|
||||
elem
|
||||
.append('defs')
|
||||
.append('marker')
|
||||
.attr('id', 'dependencyEnd')
|
||||
.attr('id', type + '-dependencyEnd')
|
||||
.attr('class', type)
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
@ -158,7 +158,7 @@ const point = (elem, type) => {
|
||||
const circle = (elem, type) => {
|
||||
elem
|
||||
.append('marker')
|
||||
.attr('id', 'circleEnd')
|
||||
.attr('id', type + '-circleEnd')
|
||||
.attr('class', type)
|
||||
.attr('viewBox', '0 0 10 10')
|
||||
.attr('refX', 11)
|
||||
@ -177,7 +177,7 @@ const circle = (elem, type) => {
|
||||
|
||||
elem
|
||||
.append('marker')
|
||||
.attr('id', 'circleStart')
|
||||
.attr('id', type + '-circleStart')
|
||||
.attr('class', type)
|
||||
.attr('viewBox', '0 0 10 10')
|
||||
.attr('refX', -1)
|
||||
@ -197,7 +197,7 @@ const circle = (elem, type) => {
|
||||
const cross = (elem, type) => {
|
||||
elem
|
||||
.append('marker')
|
||||
.attr('id', 'crossEnd')
|
||||
.attr('id', type + '-crossEnd')
|
||||
.attr('class', type)
|
||||
.attr('viewBox', '0 0 11 11')
|
||||
.attr('refX', 12)
|
||||
@ -215,7 +215,7 @@ const cross = (elem, type) => {
|
||||
|
||||
elem
|
||||
.append('marker')
|
||||
.attr('id', 'crossStart')
|
||||
.attr('id', type + '-crossStart')
|
||||
.attr('class', type)
|
||||
.attr('viewBox', '0 0 11 11')
|
||||
.attr('refX', -1)
|
||||
|
||||
@ -19,7 +19,14 @@ export const clear = () => {
|
||||
const isDecendant = (id, ancenstorId) => {
|
||||
// if (id === ancenstorId) return true;
|
||||
|
||||
log.info('In isDecendant', ancenstorId, ' ', id, ' = ', decendants[ancenstorId].indexOf(id) >= 0);
|
||||
log.debug(
|
||||
'In isDecendant',
|
||||
ancenstorId,
|
||||
' ',
|
||||
id,
|
||||
' = ',
|
||||
decendants[ancenstorId].indexOf(id) >= 0
|
||||
);
|
||||
if (decendants[ancenstorId].indexOf(id) >= 0) return true;
|
||||
|
||||
return false;
|
||||
@ -30,7 +37,7 @@ const edgeInCluster = (edge, clusterId) => {
|
||||
if (!(edge.v === clusterId || edge.w === clusterId)) return false;
|
||||
|
||||
if (!decendants[clusterId]) {
|
||||
log.info('Tilt, ', clustedId, ',not in decendants');
|
||||
log.debug('Tilt, ', clustedId, ',not in decendants');
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -42,50 +49,6 @@ const edgeInCluster = (edge, clusterId) => {
|
||||
return false;
|
||||
};
|
||||
|
||||
const copyOld = (clusterId, graph, newGraph, rootId) => {
|
||||
log.info('Copying to', rootId, ' from ', clusterId, graph.node(clusterId), rootId);
|
||||
const nodes = graph.children(clusterId);
|
||||
log.info('Copying (nodes)', nodes);
|
||||
if (nodes) {
|
||||
nodes.forEach(node => {
|
||||
if (graph.children(node).length > 0) {
|
||||
copy(node, graph, newGraph, rootId);
|
||||
} else {
|
||||
// if (clusterId === rootId) {
|
||||
const data = graph.node(node);
|
||||
log.info('cp ', node, ' to ', rootId, ' with parent ', clusterId); //,node, data, ' parent is ', clusterId);
|
||||
newGraph.setNode(node, data);
|
||||
newGraph.setParent(node, clusterId);
|
||||
const edges = graph.edges(node);
|
||||
log.trace('Copying Edges', edges);
|
||||
edges.forEach(edge => {
|
||||
log.trace('Edge', edge);
|
||||
const data = graph.edge(edge.v, edge.w, edge.name);
|
||||
log.trace('Edge data', data, rootId);
|
||||
try {
|
||||
// Do not copy edges in and out of the root cluster, they belong to the parent graph
|
||||
if (edgeInCluster(edge, rootId)) {
|
||||
log.trace('Copying as ', edge.v, edge.w, data, edge.name);
|
||||
newGraph.setEdge(edge.v, edge.w, data, edge.name);
|
||||
log.trace('newGraph edges ', newGraph.edges(), newGraph.edge(newGraph.edges()[0]));
|
||||
} else {
|
||||
log.trace('Skipping copy of edge as ', rootId, edge.v, edge.w, clusterId);
|
||||
}
|
||||
} catch (e) {
|
||||
log.error(e);
|
||||
}
|
||||
});
|
||||
// } else {
|
||||
// log.info('Skipping leaf as root ', rootId, ' !== ', clusterId, ' leaf id = ', node);
|
||||
// }
|
||||
}
|
||||
// log.info('Removing node', node, graphlib.json.write(graph));
|
||||
log.info('Removing node', node);
|
||||
graph.removeNode(node);
|
||||
});
|
||||
}
|
||||
// newGraph.setNode(clusterId, graph.node(clusterId));
|
||||
};
|
||||
const copy = (clusterId, graph, newGraph, rootId) => {
|
||||
log.trace(
|
||||
'Copying children of ',
|
||||
@ -103,7 +66,7 @@ const copy = (clusterId, graph, newGraph, rootId) => {
|
||||
nodes.push(clusterId);
|
||||
}
|
||||
|
||||
log.info('Copying (nodes)', nodes);
|
||||
log.debug('Copying (nodes)', nodes);
|
||||
|
||||
nodes.forEach(node => {
|
||||
if (graph.children(node).length > 0) {
|
||||
@ -113,11 +76,11 @@ const copy = (clusterId, graph, newGraph, rootId) => {
|
||||
log.trace('cp ', node, ' to ', rootId, ' with parent ', clusterId); //,node, data, ' parent is ', clusterId);
|
||||
newGraph.setNode(node, data);
|
||||
if (clusterId !== rootId && node !== clusterId) {
|
||||
log.info('Setting parent', node, clusterId);
|
||||
log.debug('Setting parent', node, clusterId);
|
||||
newGraph.setParent(node, clusterId);
|
||||
}
|
||||
const edges = graph.edges(node);
|
||||
log.info('Copying Edges', edges);
|
||||
log.debug('Copying Edges', edges);
|
||||
edges.forEach(edge => {
|
||||
log.trace('Edge', edge);
|
||||
const data = graph.edge(edge.v, edge.w, edge.name);
|
||||
@ -136,12 +99,12 @@ const copy = (clusterId, graph, newGraph, rootId) => {
|
||||
}
|
||||
});
|
||||
}
|
||||
log.info('Removing node', node);
|
||||
log.debug('Removing node', node);
|
||||
graph.removeNode(node);
|
||||
});
|
||||
};
|
||||
export const extractDecendants = (id, graph) => {
|
||||
// log.info('Extracting ', id);
|
||||
// log.debug('Extracting ', id);
|
||||
const children = graph.children(id);
|
||||
let res = [].concat(children);
|
||||
|
||||
@ -153,66 +116,6 @@ export const extractDecendants = (id, graph) => {
|
||||
return res;
|
||||
};
|
||||
|
||||
export const extractGraphFromCluster = (clusterId, graph) => {
|
||||
log.info('Extracting graph ', clusterId);
|
||||
const clusterGraph = new graphlib.Graph({
|
||||
multigraph: true,
|
||||
compound: true
|
||||
})
|
||||
.setGraph({
|
||||
rankdir: 'TB',
|
||||
// Todo: set proper spacing
|
||||
nodesep: 50,
|
||||
ranksep: 50,
|
||||
marginx: 8,
|
||||
marginy: 8
|
||||
})
|
||||
.setDefaultEdgeLabel(function() {
|
||||
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 {};
|
||||
// });
|
||||
|
||||
log.trace('Extracting before copy', graphlib.json.write(graph));
|
||||
log.trace('Extracting before copy', graphlib.json.write(graph));
|
||||
copy(clusterId, graph, clusterGraph, clusterId);
|
||||
log.trace('Extracting after copy', graphlib.json.write(graph));
|
||||
log.trace('Extracting after copy', clusterGraph.nodes());
|
||||
graphs[clusterId] = clusterGraph;
|
||||
|
||||
// Remove references to extracted cluster
|
||||
// graph.edges().forEach(edge => {
|
||||
// if (isDecendant(edge.v, clusterId) || isDecendant(edge.w, clusterId)) {
|
||||
// graph.removeEdge(edge);
|
||||
// }
|
||||
// });
|
||||
// graph.nodes().forEach(node => {
|
||||
// if (isDecendant(node, clusterId)) {
|
||||
// log.info('Removing ', node, ' from ', clusterId);
|
||||
// graph.removeNode(node);
|
||||
// }
|
||||
// });
|
||||
return clusterGraph;
|
||||
};
|
||||
|
||||
/**
|
||||
* Validates the graph, checking that all parent child relation points to existing nodes and that
|
||||
* edges between nodes also ia correct. When not correct the function logs the discrepancies.
|
||||
@ -274,10 +177,10 @@ const getAnchorId = id => {
|
||||
|
||||
export const adjustClustersAndEdges = (graph, depth) => {
|
||||
if (!graph || depth > 10) {
|
||||
log.info('Opting out, no graph ');
|
||||
log.debug('Opting out, no graph ');
|
||||
return;
|
||||
} else {
|
||||
log.info('Opting in, graph ');
|
||||
log.debug('Opting in, graph ');
|
||||
}
|
||||
// Go through the nodes and for each cluster found, save a replacment node, this can be used when
|
||||
// faking a link to a cluster
|
||||
@ -291,7 +194,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
|
||||
findNonClusterChild(id, graph)
|
||||
);
|
||||
decendants[id] = extractDecendants(id, graph);
|
||||
clusterDb[id] = { id: findNonClusterChild(id, graph) };
|
||||
clusterDb[id] = { id: findNonClusterChild(id, graph), clusterData: graph.node(id) };
|
||||
}
|
||||
});
|
||||
|
||||
@ -300,9 +203,9 @@ export const adjustClustersAndEdges = (graph, depth) => {
|
||||
const children = graph.children(id);
|
||||
const edges = graph.edges();
|
||||
if (children.length > 0) {
|
||||
log.info('Cluster identified', id, decendants);
|
||||
log.debug('Cluster identified', id, decendants);
|
||||
edges.forEach(edge => {
|
||||
// log.info('Edge, decendants: ', edge, decendants[id]);
|
||||
// log.debug('Edge, decendants: ', edge, decendants[id]);
|
||||
|
||||
// Check if any edge leaves the cluster (not the actual cluster, thats a link from the box)
|
||||
if (edge.v !== id && edge.w !== id) {
|
||||
@ -314,8 +217,8 @@ export const adjustClustersAndEdges = (graph, depth) => {
|
||||
|
||||
// d1 xor d2 - if either d1 is true and d2 is false or the other way around
|
||||
if (d1 ^ d2) {
|
||||
log.info('Edge: ', edge, ' leaves cluster ', id);
|
||||
log.info('Decendants of ', id, ': ', decendants[id]);
|
||||
log.debug('Edge: ', edge, ' leaves cluster ', id);
|
||||
log.debug('Decendants of ', id, ': ', decendants[id]);
|
||||
clusterDb[id].externalConnections = true;
|
||||
}
|
||||
}
|
||||
@ -347,7 +250,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
|
||||
graph.setEdge(v, w, edge, e.name);
|
||||
}
|
||||
});
|
||||
log.info('Adjusted Graph', graphlib.json.write(graph));
|
||||
log.debug('Adjusted Graph', graphlib.json.write(graph));
|
||||
|
||||
log.trace(clusterDb);
|
||||
|
||||
@ -359,91 +262,8 @@ export const adjustClustersAndEdges = (graph, depth) => {
|
||||
// });
|
||||
};
|
||||
|
||||
export const transformClustersToNodes = (graph, depth) => {
|
||||
log.info('transformClustersToNodes - ', depth);
|
||||
if (depth > 10) {
|
||||
log.error('Bailing out');
|
||||
return;
|
||||
}
|
||||
// For clusters without incoming and/or outgoing edges, create a new cluster-node
|
||||
// containing the nodes and edges in the custer in a new graph
|
||||
// for (let i = 0;)
|
||||
const nodes = graph.nodes();
|
||||
let hasChildren = false;
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const node = nodes[i];
|
||||
const children = graph.children(node);
|
||||
hasChildren = hasChildren || children.length > 0;
|
||||
}
|
||||
|
||||
if (!hasChildren) {
|
||||
log.info('Done, no node has children', graph.nodes());
|
||||
return;
|
||||
}
|
||||
// const clusters = Object.keys(clusterDb);
|
||||
// clusters.forEach(clusterId => {
|
||||
log.info('Nodes = ', nodes);
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const node = nodes[i];
|
||||
|
||||
log.info(
|
||||
'Handling node',
|
||||
node,
|
||||
clusterDb,
|
||||
clusterDb[node] && !clusterDb[node].externalConnections,
|
||||
!graph.parent(node),
|
||||
graph.node(node)
|
||||
);
|
||||
// Note that the node might have been removed after the Object.keys call so better check
|
||||
// that it still is in the game
|
||||
if (clusterDb[node]) {
|
||||
if (
|
||||
!clusterDb[node].externalConnections &&
|
||||
!graph.parent(node) &&
|
||||
graph.children(node) &&
|
||||
graph.children(node).length > 0
|
||||
) {
|
||||
log.info('Cluster without external connections', node);
|
||||
// const parentGraph = parent && graphs[parent] ? graphs[parent] : graph;
|
||||
// New graph with the nodes in the cluster
|
||||
log.info('before Extracting ', node, ' parent is ', graph.parent(node));
|
||||
const clusterGraph = extractGraphFromCluster(node, graph);
|
||||
|
||||
if (clusterGraph) {
|
||||
log.trace('Cluster graph', clusterGraph.nodes());
|
||||
log.trace('Graph', graph.edges());
|
||||
|
||||
log.info('Creating node in original', node, clusterGraph);
|
||||
|
||||
// Create a new node in the original graph, this new node is not a cluster
|
||||
// but a regular node with the cluster content as a new attached graph
|
||||
graph.setNode(node, {
|
||||
clusterNode: true,
|
||||
id: node,
|
||||
clusterData: clusterDb[node],
|
||||
labelText: clusterDb[node].labelText,
|
||||
graph: clusterGraph
|
||||
});
|
||||
|
||||
// if any node in the clusterGraph still has children
|
||||
transformClustersToNodes(clusterGraph, depth + 1);
|
||||
}
|
||||
|
||||
// The original edges in and out of the cluster is applied
|
||||
// edges.forEach(edge => {
|
||||
// log.info('Setting edge', edge);
|
||||
// const data = graph.edge(edge);
|
||||
// graph.setEdge(edge.v, edge.w, data);
|
||||
// });
|
||||
}
|
||||
} else {
|
||||
log.info('Not a cluster ', node);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const extractor = (graph, depth) => {
|
||||
log.info('extractor - ', depth, graphlib.json.write(graph), graph.children('D'));
|
||||
log.debug('extractor - ', depth, graphlib.json.write(graph), graph.children('D'));
|
||||
if (depth > 10) {
|
||||
log.error('Bailing out');
|
||||
return;
|
||||
@ -460,16 +280,16 @@ export const extractor = (graph, depth) => {
|
||||
}
|
||||
|
||||
if (!hasChildren) {
|
||||
log.info('Done, no node has children', graph.nodes());
|
||||
log.debug('Done, no node has children', graph.nodes());
|
||||
return;
|
||||
}
|
||||
// const clusters = Object.keys(clusterDb);
|
||||
// clusters.forEach(clusterId => {
|
||||
log.info('Nodes = ', nodes, depth);
|
||||
log.debug('Nodes = ', nodes, depth);
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const node = nodes[i];
|
||||
|
||||
log.info(
|
||||
log.debug(
|
||||
'Extracting node',
|
||||
node,
|
||||
clusterDb,
|
||||
@ -484,7 +304,7 @@ export const extractor = (graph, depth) => {
|
||||
// that it still is in the game
|
||||
if (!clusterDb[node]) {
|
||||
// Skip if the node is not a cluster
|
||||
log.info('Not a cluster', node, depth);
|
||||
log.debug('Not a cluster', node, depth);
|
||||
// break;
|
||||
} else if (
|
||||
!clusterDb[node].externalConnections &&
|
||||
@ -492,7 +312,7 @@ export const extractor = (graph, depth) => {
|
||||
graph.children(node) &&
|
||||
graph.children(node).length > 0
|
||||
) {
|
||||
log.info(
|
||||
log.debug(
|
||||
'Cluster without external connections, without a parent and with children',
|
||||
node,
|
||||
depth
|
||||
@ -518,47 +338,14 @@ export const extractor = (graph, depth) => {
|
||||
graph.setNode(node, {
|
||||
clusterNode: true,
|
||||
id: node,
|
||||
clusterData: clusterDb[node],
|
||||
clusterData: clusterDb[node].clusterData,
|
||||
labelText: clusterDb[node].labelText,
|
||||
graph: clusterGraph
|
||||
});
|
||||
log.info('New graph after copy', graphlib.json.write(clusterGraph));
|
||||
log.info('Old graph after copy', graphlib.json.write(graph));
|
||||
|
||||
/*
|
||||
// New graph with the nodes in the cluster
|
||||
log.info('before Extracting ', node, ' parent is ', graph.parent(node));
|
||||
const clusterGraph = extractGraphFromCluster(node, graph);
|
||||
|
||||
if (clusterGraph) {
|
||||
log.trace('Cluster graph', clusterGraph.nodes());
|
||||
log.trace('Graph', graph.edges());
|
||||
|
||||
log.info('Creating node in original', node, clusterGraph);
|
||||
|
||||
// Create a new node in the original graph, this new node is not a cluster
|
||||
// but a regular node with the cluster content as a new attached graph
|
||||
graph.setNode(node, {
|
||||
clusterNode: true,
|
||||
id: node,
|
||||
clusterData: clusterDb[node],
|
||||
labelText: clusterDb[node].labelText,
|
||||
graph: clusterGraph
|
||||
});
|
||||
|
||||
// if any node in the clusterGraph still has children
|
||||
transformClustersToNodes(clusterGraph, depth + 1);
|
||||
}
|
||||
|
||||
// The original edges in and out of the cluster is applied
|
||||
// edges.forEach(edge => {
|
||||
// log.info('Setting edge', edge);
|
||||
// const data = graph.edge(edge);
|
||||
// graph.setEdge(edge.v, edge.w, data);
|
||||
// });
|
||||
*/
|
||||
log.debug('New graph after copy', graphlib.json.write(clusterGraph));
|
||||
log.debug('Old graph after copy', graphlib.json.write(graph));
|
||||
} else {
|
||||
log.info(
|
||||
log.debug(
|
||||
'Cluster ** ',
|
||||
node,
|
||||
' **not meeting the criteria !externalConnections:',
|
||||
@ -570,16 +357,16 @@ export const extractor = (graph, depth) => {
|
||||
graph.children('D'),
|
||||
depth
|
||||
);
|
||||
log.info(clusterDb);
|
||||
log.debug(clusterDb);
|
||||
}
|
||||
}
|
||||
|
||||
nodes = graph.nodes();
|
||||
log.info('New list of nodes', nodes);
|
||||
log.debug('New list of nodes', nodes);
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const node = nodes[i];
|
||||
const data = graph.node(node);
|
||||
log.info(' Now next leveö', node, data);
|
||||
log.debug(' Now next leveö', node, data);
|
||||
if (data.clusterNode) {
|
||||
extractor(data.graph, depth + 1);
|
||||
}
|
||||
|
||||
@ -248,7 +248,7 @@ const cylinder = (parent, node) => {
|
||||
const rect = (parent, node) => {
|
||||
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes);
|
||||
|
||||
logger.info('Classes = ', node.classes);
|
||||
logger.trace('Classes = ', node.classes);
|
||||
// add the rect
|
||||
const rect = shapeSvg.insert('rect', ':first-child');
|
||||
|
||||
@ -396,7 +396,22 @@ export const clear = () => {
|
||||
|
||||
export const positionNode = node => {
|
||||
const el = nodeElems[node.id];
|
||||
logger.debug('Transforming node', node);
|
||||
el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
|
||||
// el.attr('transform', 'translate(' + node.x / 2 + ', ' + 0 + ')');
|
||||
logger.trace(
|
||||
'Transforming node',
|
||||
node,
|
||||
'translate(' + (node.x - node.width / 2 - 5) + ', ' + (node.y - node.height / 2 - 5) + ')'
|
||||
);
|
||||
const padding = 8;
|
||||
if (node.clusterNode) {
|
||||
el.attr(
|
||||
'transform',
|
||||
'translate(' +
|
||||
(node.x - node.width / 2 - padding) +
|
||||
', ' +
|
||||
(node.y - node.height / 2 - padding) +
|
||||
')'
|
||||
);
|
||||
} else {
|
||||
el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
|
||||
}
|
||||
};
|
||||
|
||||
@ -188,6 +188,8 @@ export const addEdges = function(edges, g) {
|
||||
} else {
|
||||
edgeData.arrowhead = 'normal';
|
||||
}
|
||||
|
||||
logger.info(edgeData, edge);
|
||||
edgeData.arrowType = edge.type;
|
||||
|
||||
let style = '';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user