marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-06 15:49:44 +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> <body>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
graph RL graph BT
a{The cat in the hat} -- 1o --> b a{The cat in the hat} -- 1o --> b
a -- 2o --> c a -- 2o --> c
a -- 3o --> d a -- 3o --> d
@@ -272,7 +272,7 @@ mindmap
mermaid.initialize({ mermaid.initialize({
theme: 'forest', theme: 'forest',
startOnLoad: true, startOnLoad: true,
logLevel: 0, logLevel: 5,
flowchart: { flowchart: {
// defaultRenderer: 'elk', // defaultRenderer: 'elk',
useMaxWidth: false, useMaxWidth: false,

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