Skip to content

Commit 027296d

Browse files
knsvknsv
committed
Working version before applying direction logic
1 parent a956be7 commit 027296d

3 files changed

Lines changed: 170 additions & 11 deletions

File tree

‎cypress/platform/knsv2.html‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,17 @@
5454
</style>
5555
</head>
5656
<body>
57-
<pre id="diagram" class="mermaid2">
57+
<pre id="diagram" class="mermaid">
5858
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
59-
graph TB
60-
a --> b
61-
a --> c
62-
b --> d
63-
c --> d
59+
graph RL
60+
a{The cat in the hat} -- 1o --> b
61+
a -- 2o --> c
62+
a -- 3o --> d
63+
g --2i--> a
64+
d --1i--> a
65+
h --3i -->a
66+
b --> d(The dog in the hog)
67+
c --> d
6468
</pre>
6569
<pre id="diagram" class="mermaid2">
6670
flowchart-elk TB
@@ -227,7 +231,7 @@
227231
Customer->>+Merchant: Receives goods or services
228232
</pre
229233
>
230-
<pre id="diagram" class="mermaid">
234+
<pre id="diagram" class="mermaid2">
231235
mindmap
232236
root((mindmap))
233237
Origins
@@ -247,7 +251,7 @@
247251
Mermaid
248252
</pre>
249253
<br />
250-
<pre id="diagram" class="mermaid">
254+
<pre id="diagram" class="mermaid2">
251255
example-diagram
252256
</pre>
253257

‎packages/mermaid/src/dagre-wrapper/nodes.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1007,6 +1007,7 @@ const class_box = (parent, node) => {
10071007
};
10081008

10091009
const shapes = {
1010+
rhombus: question,
10101011
question,
10111012
rect,
10121013
labelRect,

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

Lines changed: 157 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import { interpolateToCurve, getStylesFromArray } from '../../../utils';
1313
import ELK from 'elkjs/lib/elk.bundled.js';
1414
const elk = new ELK();
1515

16+
const portPos = {};
17+
1618
const conf = {};
1719
export const setConf = function (cnf) {
1820
const keys = Object.keys(cnf);
@@ -95,8 +97,36 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
9597
labelData.labelNode = vertexNode;
9698
}
9799

100+
const ports = [
101+
{
102+
id: vertex.id + '-west',
103+
layoutOptions: {
104+
'port.side': 'WEST',
105+
},
106+
},
107+
{
108+
id: vertex.id + '-east',
109+
layoutOptions: {
110+
'port.side': 'EAST',
111+
},
112+
},
113+
{
114+
id: vertex.id + '-south',
115+
layoutOptions: {
116+
'port.side': 'SOUTH',
117+
},
118+
},
119+
{
120+
id: vertex.id + '-north',
121+
layoutOptions: {
122+
'port.side': 'NORTH',
123+
},
124+
},
125+
];
126+
98127
let radious = 0;
99128
let _shape = '';
129+
let layoutOptions = {};
100130
// Set the shape based parameters
101131
switch (vertex.type) {
102132
case 'round':
@@ -108,6 +138,9 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
108138
break;
109139
case 'diamond':
110140
_shape = 'question';
141+
layoutOptions = {
142+
portConstraints: 'FIXED_SIDE',
143+
};
111144
break;
112145
case 'hexagon':
113146
_shape = 'hexagon';
@@ -184,8 +217,10 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
184217

185218
const data = {
186219
id: vertex.id,
220+
ports: vertex.type === 'diamond' ? ports : [],
187221
// labelStyle: styles.labelStyle,
188222
// shape: _shape,
223+
layoutOptions,
189224
labelText: vertexText,
190225
labelData,
191226
// labels: [{ text: vertexText }],
@@ -235,6 +270,83 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
235270
return graph;
236271
};
237272

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+
}
302+
};
303+
304+
const getNextPort = (node, direction) => {
305+
if (!portPos[node]) {
306+
portPos[node] = {
307+
inPosition: 'north',
308+
outPosition: 'south',
309+
};
310+
}
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);
315+
} else {
316+
portPos[node].outPosition = getNextPosition(portPos[node].outPosition, direction);
317+
}
318+
return result;
319+
};
320+
321+
const getEdgeStartEndPoint = (edge) => {
322+
let source = edge.start;
323+
let target = edge.end;
324+
325+
const startNode = nodeDb[source];
326+
const endNode = nodeDb[target];
327+
console.log('getEdgeStartEndPoint abc77', { source, target, startNode, endNode });
328+
329+
if (!startNode || !endNode) {
330+
return { source, target };
331+
}
332+
333+
if (startNode.type === 'diamond') {
334+
source = `${source}-${getNextPort(source, 'out')}`;
335+
}
336+
337+
if (endNode.type === 'diamond') {
338+
target = `${target}-${getNextPort(target, 'in')}`;
339+
}
340+
341+
// 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 });
347+
return { source, target };
348+
};
349+
238350
/**
239351
* Add edges to graph based on parsed graph definition
240352
*
@@ -375,11 +487,15 @@ export const addEdges = function (edges, diagObj, graph, svg) {
375487

376488
const labelEl = insertEdgeLabel(labelsEl, edgeData);
377489
// console.log('labelEl', labelEl, edgeData.width);
490+
491+
// calculate start and end points of the edge
492+
const { source, target } = getEdgeStartEndPoint(edge);
493+
log.info('abc78 source and target', source, target);
378494
// Add the edge to the graph
379495
graph.edges.push({
380496
id: 'e' + edge.start + edge.end,
381-
sources: [edge.start],
382-
targets: [edge.end],
497+
sources: [source],
498+
targets: [target],
383499
labelEl: labelEl,
384500
labels: [
385501
{
@@ -624,12 +740,15 @@ export const draw = async function (text, id, _version, diagObj) {
624740
'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
625741
'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]',
626742
'elk.layered.spacing.edgeNodeBetweenLayers': '30',
743+
// 'elk.layered.mergeEdges': 'true',
627744
'elk.direction': 'DOWN',
745+
// 'elk.ports.sameLayerEdges': true,
746+
// 'nodePlacement.strategy': 'SIMPLE',
628747
},
629748
children: [],
630749
edges: [],
631750
};
632-
log.info('Drawing flowchart using v3 renderer');
751+
log.info('Drawing flowchart using v3 renderer', elk);
633752

634753
// Set the direction,
635754
// Fetch the default direction, use TD if none was found
@@ -731,8 +850,43 @@ export const draw = async function (text, id, _version, diagObj) {
731850
}
732851
});
733852
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';
886+
log.info('after layout', JSON.stringify(graph, null, 2));
734887
const g = await elk.layout(graph);
735888
drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0);
889+
log.info('after layout', g);
736890
g.edges?.map((edge) => {
737891
insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb);
738892
});

0 commit comments

Comments
 (0)