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

#5237 Fix for direction handling using ELK

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-05-16 14:36:02 +02:00
parent 7fb079ef3c
commit ff36301cc5
2 changed files with 49 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/mermaid-layout-elk/src/index.ts
View File

@@ -299,11 +299,11 @@ export const addEdges = function (dataForLayout, graph, svg) {
linkIdCnt[linkIdBase]++;
log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
}
const linkId = linkIdBase + '-' + linkIdCnt[linkIdBase];
const linkId = linkIdBase + '_' + linkIdCnt[linkIdBase];
edge.id = linkId;
log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
const linkNameStart = 'LS-' + edge.start;
const linkNameEnd = 'LE-' + edge.end;
const linkNameStart = 'LS_' + edge.start;
const linkNameEnd = 'LE_' + edge.end;
const edgeData = { style: '', labelStyle: '' };
edgeData.minlen = edge.length || 1;
@@ -436,6 +436,21 @@ export const addEdges = function (dataForLayout, graph, svg) {
return graph;
};
function dir2ElkDirection(dir) {
switch (dir) {
case 'LR':
return 'RIGHT';
case 'RL':
return 'LEFT';
case 'TB':
return 'DOWN';
case 'BT':
return 'UP';
default:
return 'DOWN';
}
}
export const render = async (data4Layout, svg, element) => {
const elk = new ELK();
@@ -446,7 +461,7 @@ export const render = async (data4Layout, svg, element) => {
let elkGraph = {
id: 'root',
layoutOptions: {
'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
// 'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]',
'elk.layered.spacing.edgeNodeBetweenLayers': '30',
},
@@ -458,23 +473,7 @@ export const render = async (data4Layout, svg, element) => {
// Set the direction of the graph based on the parsed information
const dir = data4Layout.direction || 'DOWN';
switch (dir) {
case 'BT':
elkGraph.layoutOptions['elk.direction'] = 'UP';
break;
case 'TB':
elkGraph.layoutOptions['elk.direction'] = 'DOWN';
break;
case 'LR':
elkGraph.layoutOptions['elk.direction'] = 'RIGHT';
break;
case 'RL':
elkGraph.layoutOptions['elk.direction'] = 'LEFT';
break;
default:
elkGraph.layoutOptions['elk.direction'] = 'DOWN';
break;
}
elkGraph.layoutOptions['elk.direction'] = dir2ElkDirection(dir);
// Create the lookup db for the subgraphs and their children to used when creating
// the tree structured graph
@@ -513,7 +512,12 @@ export const render = async (data4Layout, svg, element) => {
height: node?.labelData?.height || 100,
},
];
node['elk.direction'] = 'RIGHT';
// console.log('DAGA node dir: ', node.dir);
if (node.dir) {
node.layoutOptions = {
'elk.direction': dir2ElkDirection(node.dir),
};
}
delete node.x;
delete node.y;
delete node.width;