test(edges): zindex in sub flows

examples/react/src/examples/Subflow/index.tsx

@@ -152,10 +152,10 @@ const initialEdges: Edge[] = [
     },
   },
   { id: 'e1-3', source: '1', target: '3' },
-  { id: 'e3-4', source: '3', target: '4', zIndex: 100 },
+  { id: 'e3-4', source: '3', target: '4' },
   { id: 'e3-4b', source: '3', target: '4b' },
   { id: 'e4a-4b1', source: '4a', target: '4b1' },
-  { id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 },
+  { id: 'e4a-4b2', source: '4a', target: '4b2' },
   { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
 ];
 

examples/react/src/generic-tests/edges/general.ts

@@ -62,6 +62,29 @@ export default {
         data: { label: '11' },
         position: { x: 100, y: 500 },
       },
+      {
+        id: '12',
+        data: { label: '12' },
+        position: { x: 100, y: 600 },
+        width: 200,
+        height: 100,
+      },
+      {
+        id: '12-a',
+        parentId: '12',
+        data: { label: '12-a' },
+        position: { x: 10, y: 20 },
+        width: 50,
+        height: 50,
+      },
+      {
+        id: '12-b',
+        parentId: '12',
+        data: { label: '12-b' },
+        position: { x: 140, y: 20 },
+        width: 50,
+        height: 50,
+      },
       // {
       // 	id: '12',
       // 	data: { label: '12' },
@@ -145,6 +168,16 @@ export default {
         markerEnd: { type: MarkerType.Arrow },
         markerStart: { type: MarkerType.ArrowClosed },
       },
+      {
+        id: 'subflow-edge',
+        source: '11',
+        target: '12-a',
+      },
+      {
+        id: 'subflow-edge-2',
+        source: '12-a',
+        target: '12-b',
+      },
       // {
       // 	id: 'updatable',
       // 	source: '9',

examples/svelte/src/generic-tests/edges/general.ts

@@ -61,6 +61,29 @@ export default {
 				id: '11',
 				data: { label: '11' },
 				position: { x: 100, y: 500 }
+			},
+			{
+				id: '12',
+				data: { label: '12' },
+				position: { x: 100, y: 600 },
+				width: 200,
+				height: 100
+			},
+			{
+				id: '12-a',
+				parentId: '12',
+				data: { label: '12-a' },
+				position: { x: 10, y: 20 },
+				width: 50,
+				height: 50
+			},
+			{
+				id: '12-b',
+				parentId: '12',
+				data: { label: '12-b' },
+				position: { x: 140, y: 20 },
+				width: 50,
+				height: 50
 			}
 			// {
 			// 	id: '12',
@@ -142,6 +165,16 @@ export default {
 				label: 'markers',
 				markerEnd: { type: MarkerType.Arrow },
 				markerStart: { type: MarkerType.ArrowClosed }
+			},
+			{
+				id: 'subflow-edge',
+				source: '11',
+				target: '12-a'
+			},
+			{
+				id: 'subflow-edge-2',
+				source: '12-a',
+				target: '12-b'
 			}
 			// {
 			// 	id: 'updatable',

packages/system/src/utils/edges/general.ts

@@ -30,6 +30,11 @@ export type GetEdgeZIndexParams = {
   elevateOnSelect?: boolean;
 };
 
+/**
+ * Returns the z-index for an edge based on the node it connects and whether it is selected.
+ * By default, edges are rendered below nodes. This behaviour is different for edges that are
+ * connected to nodes with a parent, as they are rendered above the parent node.
+ */
 export function getElevatedEdgeZIndex({
   sourceNode,
   targetNode,

tests/playwright/e2e/edges.spec.ts

@@ -153,5 +153,26 @@ test.describe('Edges', () => {
       await expect(edge).toHaveAttribute('marker-start', "url('#1__type=arrowclosed')");
       await expect(edge).toHaveAttribute('marker-end', "url('#1__type=arrow')");
     });
+
+    test('z-index', async ({ page }) => {
+      const svg = page.locator('svg', { has: page.locator('[data-id="edge-with-class"]') });
+
+      await expect(svg).toBeAttached();
+      await expect(svg).toHaveCSS('z-index', '0');
+    });
+
+    test('sub flow: normal node to child node, z-index', async ({ page }) => {
+      const svg = page.locator('svg', { has: page.locator('[data-id="subflow-edge"]') });
+
+      await expect(svg).toBeAttached();
+      await expect(svg).toHaveCSS('z-index', '1');
+    });
+
+    test('sub flow: child node to child node, z-index', async ({ page }) => {
+      const svg = page.locator('svg', { has: page.locator('[data-id="subflow-edge-2"]') });
+
+      await expect(svg).toBeAttached();
+      await expect(svg).toHaveCSS('z-index', '1');
+    });
   });
 });