#5237 Handling tainted subgraphs

cypress/platform/knsv2.html

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

packages/mermaid-layout-elk/src/index.ts

@@ -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) => {
   const elk = new ELK();
 
@@ -461,7 +476,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',
     },
@@ -516,6 +531,7 @@ export const render = async (data4Layout, svg, element) => {
       if (node.dir) {
         node.layoutOptions = {
           'elk.direction': dir2ElkDirection(node.dir),
+          'elk.hierarchyHandling': 'SEPARATE_CHILDREN',
         };
       }
       delete node.x;
@@ -524,6 +540,17 @@ export const render = async (data4Layout, svg, element) => {
       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));
   const g = await elk.layout(elkGraph);
@@ -540,6 +567,7 @@ export const render = async (data4Layout, svg, element) => {
 
     const offset = calcOffset(sourceId, targetId, parentLookupDb);
 
+    if (edge.sections) {
       const src = edge.sections[0].startPoint;
       const dest = edge.sections[0].endPoint;
       const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : [];
@@ -552,20 +580,18 @@ export const render = async (data4Layout, svg, element) => {
         ...segPoints,
         { 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;
       positionEdgeLabel(edge, paths);
+    }
   });
 };