Skip to content

Commit eed427b

Browse files
knsvknsv
committed
Adding simple direction logic
1 parent 027296d commit eed427b

2 files changed

Lines changed: 96 additions & 91 deletions

File tree

‎cypress/platform/knsv2.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
<body>
5757
<pre id="diagram" class="mermaid">
5858
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
59-
graph RL
59+
graph BT
6060
a{The cat in the hat} -- 1o --> b
6161
a -- 2o --> c
6262
a -- 3o --> d
@@ -272,7 +272,7 @@
272272
mermaid.initialize({
273273
theme: 'forest',
274274
startOnLoad: true,
275-
logLevel: 0,
275+
logLevel: 5,
276276
flowchart: {
277277
// defaultRenderer: 'elk',
278278
useMaxWidth: false,

‎packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js‎

Lines changed: 94 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -270,80 +270,122 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
270270
return graph;
271271
};
272272

273-
const getNextPosition = (position, direction) => {
274-
if (direction === 'in') {
275-
// switch (position) {
276-
// case 'north':
277-
// return 'east';
278-
// case 'east':
279-
// return 'west';
280-
// case 'west':
281-
// return 'south';
282-
// case 'south':
283-
// return 'north';
284-
// default:
285-
// return 'north';
286-
// }
287-
return 'north';
288-
} else {
289-
switch (position) {
290-
case 'south':
291-
return 'west';
292-
case 'west':
293-
return 'east';
294-
case 'east':
295-
return 'south';
296-
// case 'north':
297-
// return 'south';
298-
default:
299-
return 'south';
300-
}
301-
}
273+
const getNextPosition = (position, edgeDirection, graphDirection) => {
274+
const portPos = {
275+
TB: {
276+
in: {
277+
north: 'north',
278+
},
279+
out: {
280+
south: 'west',
281+
west: 'east',
282+
east: 'south',
283+
},
284+
},
285+
LR: {
286+
in: {
287+
west: 'west',
288+
},
289+
out: {
290+
east: 'south',
291+
south: 'north',
292+
north: 'east',
293+
},
294+
},
295+
RL: {
296+
in: {
297+
east: 'east',
298+
},
299+
out: {
300+
west: 'north',
301+
north: 'south',
302+
south: 'west',
303+
},
304+
},
305+
BT: {
306+
in: {
307+
south: 'south',
308+
},
309+
out: {
310+
north: 'east',
311+
east: 'west',
312+
west: 'north',
313+
},
314+
},
315+
};
316+
log.info('abc88', graphDirection, edgeDirection, position);
317+
return portPos[graphDirection][edgeDirection][position];
318+
// return 'south';
302319
};
303320

304-
const getNextPort = (node, direction) => {
321+
const getNextPort = (node, edgeDirection, graphDirection) => {
322+
log.info('getNextPort abc88', { node, edgeDirection, graphDirection });
305323
if (!portPos[node]) {
306-
portPos[node] = {
307-
inPosition: 'north',
308-
outPosition: 'south',
309-
};
324+
switch (graphDirection) {
325+
case 'TB':
326+
portPos[node] = {
327+
inPosition: 'north',
328+
outPosition: 'south',
329+
};
330+
break;
331+
case 'BT':
332+
portPos[node] = {
333+
inPosition: 'south',
334+
outPosition: 'north',
335+
};
336+
break;
337+
case 'RL':
338+
portPos[node] = {
339+
inPosition: 'east',
340+
outPosition: 'west',
341+
};
342+
break;
343+
case 'LR':
344+
portPos[node] = {
345+
inPosition: 'west',
346+
outPosition: 'east',
347+
};
348+
break;
349+
}
310350
}
311-
const result = direction === 'in' ? portPos[node].inPosition : portPos[node].outPosition;
312-
313-
if (direction === 'in') {
314-
portPos[node].inPosition = getNextPosition(portPos[node].inPosition, direction);
351+
const result = edgeDirection === 'in' ? portPos[node].inPosition : portPos[node].outPosition;
352+
353+
if (edgeDirection === 'in') {
354+
portPos[node].inPosition = getNextPosition(
355+
portPos[node].inPosition,
356+
edgeDirection,
357+
graphDirection
358+
);
315359
} else {
316-
portPos[node].outPosition = getNextPosition(portPos[node].outPosition, direction);
360+
portPos[node].outPosition = getNextPosition(
361+
portPos[node].outPosition,
362+
edgeDirection,
363+
graphDirection
364+
);
317365
}
318366
return result;
319367
};
320368

321-
const getEdgeStartEndPoint = (edge) => {
369+
const getEdgeStartEndPoint = (edge, dir) => {
322370
let source = edge.start;
323371
let target = edge.end;
324372

325373
const startNode = nodeDb[source];
326374
const endNode = nodeDb[target];
327-
console.log('getEdgeStartEndPoint abc77', { source, target, startNode, endNode });
328375

329376
if (!startNode || !endNode) {
330377
return { source, target };
331378
}
332379

333380
if (startNode.type === 'diamond') {
334-
source = `${source}-${getNextPort(source, 'out')}`;
381+
source = `${source}-${getNextPort(source, 'out', dir)}`;
335382
}
336383

337384
if (endNode.type === 'diamond') {
338-
target = `${target}-${getNextPort(target, 'in')}`;
385+
target = `${target}-${getNextPort(target, 'in', dir)}`;
339386
}
340387

341388
// Add the edge to the graph
342-
// graph.edges.push({
343-
// id: 'e' + edge.start + edge.end,
344-
// sources: [edge.start],
345-
// targets: [edge.end],
346-
console.log('getEdgeStartEndPoint abc78', { source, target });
347389
return { source, target };
348390
};
349391

@@ -358,10 +400,10 @@ const getEdgeStartEndPoint = (edge) => {
358400
* @param svg
359401
*/
360402
export const addEdges = function (edges, diagObj, graph, svg) {
361-
// log.info('abc78 edges = ', edges);
403+
log.info('abc78 edges = ', edges);
362404
const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
363405
let linkIdCnt = {};
364-
406+
let dir = diagObj.db.getDirection();
365407
let defaultStyle;
366408
let defaultLabelStyle;
367409

@@ -486,11 +528,10 @@ export const addEdges = function (edges, diagObj, graph, svg) {
486528
edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
487529

488530
const labelEl = insertEdgeLabel(labelsEl, edgeData);
489-
// console.log('labelEl', labelEl, edgeData.width);
490531

491532
// calculate start and end points of the edge
492-
const { source, target } = getEdgeStartEndPoint(edge);
493-
log.info('abc78 source and target', source, target);
533+
const { source, target } = getEdgeStartEndPoint(edge, dir);
534+
log.debug('abc78 source and target', source, target);
494535
// Add the edge to the graph
495536
graph.edges.push({
496537
id: 'e' + edge.start + edge.end,
@@ -500,7 +541,6 @@ export const addEdges = function (edges, diagObj, graph, svg) {
500541
labels: [
501542
{
502543
width: edgeData.width,
503-
// width: 80,
504544
height: edgeData.height,
505545
orgWidth: edgeData.width,
506546
orgHeight: edgeData.height,
@@ -512,8 +552,6 @@ export const addEdges = function (edges, diagObj, graph, svg) {
512552
},
513553
],
514554
edgeData,
515-
// targetPort: 'PortSide.NORTH',
516-
// id: cnt,
517555
});
518556
});
519557
return graph;
@@ -850,39 +888,6 @@ export const draw = async function (text, id, _version, diagObj) {
850888
}
851889
});
852890
insertChildren(graph.children, parentLookupDb);
853-
// graph.children[0].shape = 'rhombus';
854-
// graph.children[0].ports = [
855-
// {
856-
// id: 'a-p1',
857-
// layoutOptions: {
858-
// 'port.side': 'WEST',
859-
// },
860-
// },
861-
// {
862-
// id: 'a-p2',
863-
// layoutOptions: {
864-
// 'port.side': 'EAST',
865-
// },
866-
// },
867-
// {
868-
// id: 'a-p3',
869-
// layoutOptions: {
870-
// 'port.side': 'SOUTH',
871-
// },
872-
// },
873-
// {
874-
// id: 'a-p4',
875-
// layoutOptions: {
876-
// 'port.side': 'NORTH',
877-
// },
878-
// },
879-
// ];
880-
// graph.children[0].layoutOptions = {
881-
// portConstraints: 'FIXED_SIDE',
882-
// };
883-
// graph.edges[0].sources[0] = 'a-south';
884-
// graph.edges[1].sources[0] = 'a-west';
885-
// graph.edges[2].targets[0] = 'a-east';
886891
log.info('after layout', JSON.stringify(graph, null, 2));
887892
const g = await elk.layout(graph);
888893
drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0);

0 commit comments

Comments
 (0)