alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test(edges): zindex in sub flows

Browse Source
This commit is contained in:
moklick
2025-06-26 12:12:13 +02:00
parent 323f07dd01
commit a7abcc0517
5 changed files with 94 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/react/src/examples/Subflow/index.tsx
View File

@@ -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' },
];

33
examples/react/src/generic-tests/edges/general.ts
View File

@@ -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',

33
examples/svelte/src/generic-tests/edges/general.ts
View File

@@ -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',

5
packages/system/src/utils/edges/general.ts
View File

@@ -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,

21
tests/playwright/e2e/edges.spec.ts
View File

@@ -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');
});
});
});