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

Adding simple direction logic

Browse Source
This commit is contained in:
Knut Sveidqvist
2023-02-15 14:10:38 +01:00
parent 027296df68
commit eed427b4ac
2 changed files with 95 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cypress/platform/knsv2.html
View File

@@ -56,7 +56,7 @@
<body>
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
graph RL
graph BT
a{The cat in the hat} -- 1o --> b
a -- 2o --> c
a -- 3o --> d
@@ -272,7 +272,7 @@ mindmap
mermaid.initialize({
theme: 'forest',
startOnLoad: true,
logLevel: 0,
logLevel: 5,
flowchart: {
// defaultRenderer: 'elk',
useMaxWidth: false,

171
packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
View File

@@ -270,80 +270,122 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
return graph;
};
const getNextPosition = (position, direction) => {
if (direction === 'in') {
// switch (position) {
// case 'north':
// return 'east';
// case 'east':
// return 'west';
// case 'west':
const getNextPosition = (position, edgeDirection, graphDirection) => {
const portPos = {
TB: {
in: {
north: 'north',
},
out: {
south: 'west',
west: 'east',
east: 'south',
},
},
LR: {
in: {
west: 'west',
},
out: {
east: 'south',
south: 'north',
north: 'east',
},
},
RL: {
in: {
east: 'east',
},
out: {
west: 'north',
north: 'south',
south: 'west',
},
},
BT: {
in: {
south: 'south',
},
out: {
north: 'east',
east: 'west',
west: 'north',
},
},
};
log.info('abc88', graphDirection, edgeDirection, position);
return portPos[graphDirection][edgeDirection][position];
// return 'south';
// case 'south':
// return 'north';
// default:
// return 'north';
// }
return 'north';
} else {
switch (position) {
case 'south':
return 'west';
case 'west':
return 'east';
case 'east':
return 'south';
// case 'north':
// return 'south';
default:
return 'south';
}
}
};
const getNextPort = (node, direction) => {
const getNextPort = (node, edgeDirection, graphDirection) => {
log.info('getNextPort abc88', { node, edgeDirection, graphDirection });
if (!portPos[node]) {
switch (graphDirection) {
case 'TB':
portPos[node] = {
inPosition: 'north',
outPosition: 'south',
};
break;
case 'BT':
portPos[node] = {
inPosition: 'south',
outPosition: 'north',
};
break;
case 'RL':
portPos[node] = {
inPosition: 'east',
outPosition: 'west',
};
break;
case 'LR':
portPos[node] = {
inPosition: 'west',
outPosition: 'east',
};
break;
}
const result = direction === 'in' ? portPos[node].inPosition : portPos[node].outPosition;
}
const result = edgeDirection === 'in' ? portPos[node].inPosition : portPos[node].outPosition;
if (direction === 'in') {
portPos[node].inPosition = getNextPosition(portPos[node].inPosition, direction);
if (edgeDirection === 'in') {
portPos[node].inPosition = getNextPosition(
portPos[node].inPosition,
edgeDirection,
graphDirection
);
} else {
portPos[node].outPosition = getNextPosition(portPos[node].outPosition, direction);
portPos[node].outPosition = getNextPosition(
portPos[node].outPosition,
edgeDirection,
graphDirection
);
}
return result;
};
const getEdgeStartEndPoint = (edge) => {
const getEdgeStartEndPoint = (edge, dir) => {
let source = edge.start;
let target = edge.end;
const startNode = nodeDb[source];
const endNode = nodeDb[target];
console.log('getEdgeStartEndPoint abc77', { source, target, startNode, endNode });
if (!startNode || !endNode) {
return { source, target };
}
if (startNode.type === 'diamond') {
source = `${source}-${getNextPort(source, 'out')}`;
source = `${source}-${getNextPort(source, 'out', dir)}`;
}
if (endNode.type === 'diamond') {
target = `${target}-${getNextPort(target, 'in')}`;
target = `${target}-${getNextPort(target, 'in', dir)}`;
}
// Add the edge to the graph
// graph.edges.push({
// id: 'e' + edge.start + edge.end,
// sources: [edge.start],
// targets: [edge.end],
console.log('getEdgeStartEndPoint abc78', { source, target });
return { source, target };
};
@@ -358,10 +400,10 @@ const getEdgeStartEndPoint = (edge) => {
* @param svg
*/
export const addEdges = function (edges, diagObj, graph, svg) {
// log.info('abc78 edges = ', edges);
log.info('abc78 edges = ', edges);
const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
let linkIdCnt = {};
let dir = diagObj.db.getDirection();
let defaultStyle;
let defaultLabelStyle;
@@ -486,11 +528,10 @@ export const addEdges = function (edges, diagObj, graph, svg) {
edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
const labelEl = insertEdgeLabel(labelsEl, edgeData);
// console.log('labelEl', labelEl, edgeData.width);
// calculate start and end points of the edge
const { source, target } = getEdgeStartEndPoint(edge);
log.info('abc78 source and target', source, target);
const { source, target } = getEdgeStartEndPoint(edge, dir);
log.debug('abc78 source and target', source, target);
// Add the edge to the graph
graph.edges.push({
id: 'e' + edge.start + edge.end,
@@ -500,7 +541,6 @@ export const addEdges = function (edges, diagObj, graph, svg) {
labels: [
{
width: edgeData.width,
// width: 80,
height: edgeData.height,
orgWidth: edgeData.width,
orgHeight: edgeData.height,
@@ -512,8 +552,6 @@ export const addEdges = function (edges, diagObj, graph, svg) {
},
],
edgeData,
// targetPort: 'PortSide.NORTH',
// id: cnt,
});
});
return graph;
@@ -850,39 +888,6 @@ export const draw = async function (text, id, _version, diagObj) {
}
});
insertChildren(graph.children, parentLookupDb);
// graph.children[0].shape = 'rhombus';
// graph.children[0].ports = [
// {
// id: 'a-p1',
// layoutOptions: {
// 'port.side': 'WEST',
// },
// },
// {
// id: 'a-p2',
// layoutOptions: {
// 'port.side': 'EAST',
// },
// },
// {
// id: 'a-p3',
// layoutOptions: {
// 'port.side': 'SOUTH',
// },
// },
// {
// id: 'a-p4',
// layoutOptions: {
// 'port.side': 'NORTH',
// },
// },
// ];
// graph.children[0].layoutOptions = {
// portConstraints: 'FIXED_SIDE',
// };
// graph.edges[0].sources[0] = 'a-south';
// graph.edges[1].sources[0] = 'a-west';
// graph.edges[2].targets[0] = 'a-east';
log.info('after layout', JSON.stringify(graph, null, 2));
const g = await elk.layout(graph);
drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0);