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 Handling tainted subgraphs

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-05-17 09:30:51 +02:00
parent ff36301cc5
commit 47d4929bc6
2 changed files with 55 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
cypress/platform/knsv2.html
View File

@@ -95,9 +95,10 @@ stateDiagram-v2
state Active { state Active {
direction BT direction BT
[*] --> NumLockOff [*] --> Inner
NumLockOff --> NumLockOn : EvNumLockPressed Inner --> NumLockOn : EvNumLockPressed
} }
%% Outer --> Inner
</pre </pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">

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

@@ -451,6 +451,21 @@ function dir2ElkDirection(dir) {
} }
} }
function setIncludeChildrenPolicy(nodeId: string, ancestorId: string) {
const node = nodeDb[nodeId];
if (!node) {
return;
}
if (node?.layoutOptions === undefined) {
node.layoutOptions = {};
}
node.layoutOptions['elk.hierarchyHandling'] = 'INCLUDE_CHILDREN';
if (node.id !== ancestorId) {
setIncludeChildrenPolicy(node.parentId, ancestorId);
}
}
export const render = async (data4Layout, svg, element) => { export const render = async (data4Layout, svg, element) => {
const elk = new ELK(); const elk = new ELK();
@@ -461,7 +476,7 @@ export const render = async (data4Layout, svg, element) => {
let elkGraph = { let elkGraph = {
id: 'root', id: 'root',
layoutOptions: { layoutOptions: {
// 'elk.hierarchyHandling': 'INCLUDE_CHILDREN', 'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]', 'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]',
'elk.layered.spacing.edgeNodeBetweenLayers': '30', 'elk.layered.spacing.edgeNodeBetweenLayers': '30',
}, },
@@ -516,6 +531,7 @@ export const render = async (data4Layout, svg, element) => {
if (node.dir) { if (node.dir) {
node.layoutOptions = { node.layoutOptions = {
'elk.direction': dir2ElkDirection(node.dir), 'elk.direction': dir2ElkDirection(node.dir),
'elk.hierarchyHandling': 'SEPARATE_CHILDREN',
}; };
} }
delete node.x; delete node.x;
@@ -524,6 +540,17 @@ export const render = async (data4Layout, svg, element) => {
delete node.height; delete node.height;
} }
}); });
elkGraph.edges.forEach((edge) => {
const source = edge.sources[0];
const target = edge.targets[0];
if (nodeDb[source].parentId !== nodeDb[target].parentId) {
const ancestorId = findCommonAncestor(source, target, parentLookupDb);
// an edge that breaks a subgraph has been identified, set configuration accordingly
setIncludeChildrenPolicy(source, ancestorId);
setIncludeChildrenPolicy(target, ancestorId);
}
});
log.info('before layout', JSON.stringify(elkGraph, null, 2)); log.info('before layout', JSON.stringify(elkGraph, null, 2));
const g = await elk.layout(elkGraph); const g = await elk.layout(elkGraph);
@@ -540,32 +567,31 @@ export const render = async (data4Layout, svg, element) => {
const offset = calcOffset(sourceId, targetId, parentLookupDb); const offset = calcOffset(sourceId, targetId, parentLookupDb);
const src = edge.sections[0].startPoint; if (edge.sections) {
const dest = edge.sections[0].endPoint; const src = edge.sections[0].startPoint;
const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : []; const dest = edge.sections[0].endPoint;
const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : [];
const segPoints = segments.map((segment) => { const segPoints = segments.map((segment) => {
return { x: segment.x + offset.x, y: segment.y + offset.y }; return { x: segment.x + offset.x, y: segment.y + offset.y };
}); });
edge.points = [ edge.points = [
{ x: src.x + offset.x, y: src.y + offset.y }, { x: src.x + offset.x, y: src.y + offset.y },
...segPoints, ...segPoints,
{ x: dest.x + offset.x, y: dest.y + offset.y }, { x: dest.x + offset.x, y: dest.y + offset.y },
]; ];
console.log( const paths = insertEdge(
'DAGA org points: ', edgesEl,
[ edge,
{ x: src.x, y: src.y }, clusterDb,
{ x: dest.x, y: dest.y }, data4Layout.type,
], g,
'points: ', data4Layout.diagramId
edge.points );
);
const paths = insertEdge(edgesEl, edge, clusterDb, data4Layout.type, g, data4Layout.diagramId); edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2;
edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2;
edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2; positionEdgeLabel(edge, paths);
edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2; }
positionEdgeLabel(edge, paths);
}); });
}; };