fix: fix incorrect edge zindex when ends has hight zindex (#6500)

* refactor: correct var name

* refactor: compute element zindex when add and update data stage

* refactor: adjust zIndex logic

* chore: commit changeset

---------

Co-authored-by: antv <[email protected]>

.changeset/tricky-camels-cross.md

@@ -0,0 +1,5 @@
+---
+'@antv/g6': patch
+---
+
+fix element z-index logic

packages/g6/__tests__/bugs/api-expand-element-z-index.spec.ts

@@ -15,21 +15,30 @@ describe('api expand element z-index', () => {
 
     await graph.draw();
 
-    // @ts-expect-error context is private
-    const context = graph.context;
+    const getZIndexOf = (id: string): number => {
+      // @ts-expect-error context is private
+      const context = graph.context;
+      return context.element!.getElement(id)!.style.zIndex;
+    };
+
+    expect(getZIndexOf('combo-1')).toBe(0);
+    expect(getZIndexOf('node-1')).toBe(0);
+    expect(graph.getComboData('combo-2').style?.zIndex).toBe(1);
+    expect(graph.getNodeData('node-2').style?.zIndex).toBe(2);
 
     graph.frontElement('node-1');
 
-    expect(context.element!.getElement('node-1')!.style.zIndex).toBe(1);
+    expect(getZIndexOf('node-1')).toBe(3);
 
     graph.frontElement('combo-1');
 
-    expect(context.element!.getElement('combo-1')!.style.zIndex).toBe(2);
+    expect(getZIndexOf('combo-1')).toBe(4);
 
     await graph.expandElement('combo-1', false);
-
     await graph.expandElement('combo-2', false);
 
-    expect(context.element!.getElement('node-2')!.style.zIndex).toBe(2);
+    expect(getZIndexOf('combo-1')).toBe(4);
+    expect(getZIndexOf('combo-2')).toBe(5);
+    expect(getZIndexOf('node-2')).toBe(6);
   });
 });

packages/g6/__tests__/bugs/element-set-position-to-origin.spec.ts

@@ -14,17 +14,17 @@ describe('element set position to origin', () => {
     // @ts-expect-error Property 'context' is protected
     const getElementOf = (id: ID) => graph.context.element!.getElement(id)!;
 
-    expect(graph.getNodeData('node-1').style).toEqual({});
+    expect(graph.getNodeData('node-1').style).toEqual({ zIndex: 0 });
     expect(getElementOf('node-1').style.transform).toBe('translate(0, 0)');
 
     graph.translateElementTo('node-1', [100, 100]);
 
-    expect(graph.getNodeData('node-1').style).toEqual({ x: 100, y: 100, z: 0 });
+    expect(graph.getNodeData('node-1').style).toEqual({ x: 100, y: 100, z: 0, zIndex: 0 });
     expect(getElementOf('node-1').style.transform).toBe('translate(100, 100)');
 
     graph.translateElementTo('node-1', [0, 0]);
 
-    expect(graph.getNodeData('node-1').style).toEqual({ x: 0, y: 0, z: 0 });
+    expect(graph.getNodeData('node-1').style).toEqual({ x: 0, y: 0, z: 0, zIndex: 0 });
     expect(getElementOf('node-1').style.transform).toBe('translate(0, 0)');
   });
 });

packages/g6/__tests__/bugs/model-add-edge-in-combo.spec.ts

@@ -0,0 +1,56 @@
+import { createGraph } from '@@/utils';
+
+describe('add edge in combo', () => {
+  it('add edge in combo without zIndex', async () => {
+    const graph = createGraph({
+      data: {
+        nodes: [
+          { id: 'node-1', combo: 'combo-1', style: { x: 100, y: 100 } },
+          { id: 'node-2', combo: 'combo-1', style: { x: 200, y: 200 } },
+        ],
+        combos: [{ id: 'combo-1' }],
+      },
+    });
+
+    await graph.draw();
+
+    expect(graph.getComboData('combo-1').style?.zIndex).toBe(0);
+    expect(graph.getNodeData('node-1').style?.zIndex).toBe(1);
+
+    graph.addEdgeData([{ id: 'edge', source: 'node-1', target: 'node-2' }]);
+    await graph.draw();
+
+    expect(graph.getEdgeData('edge').style?.zIndex).toBe(0);
+    // @ts-expect-error skip the type check
+    expect(graph.context.element?.getElement('edge')?.style.zIndex).toBe(0);
+  });
+
+  it('add edge in combo with zIndex', async () => {
+    const graph = createGraph({
+      data: {
+        nodes: [
+          { id: 'node-1', combo: 'combo-1', style: { x: 100, y: 100 } },
+          { id: 'node-2', combo: 'combo-1', style: { x: 200, y: 200 } },
+          { id: 'node-3', style: { x: 300, y: 300, zIndex: 5 } },
+        ],
+        combos: [{ id: 'combo-1' }],
+      },
+    });
+
+    await graph.draw();
+
+    expect(graph.getComboData('combo-1').style?.zIndex).toBe(0);
+
+    await graph.frontElement('combo-1');
+
+    expect(graph.getComboData('combo-1').style?.zIndex).toBe(5 + 1);
+    expect(graph.getNodeData('node-1').style?.zIndex).toBe(5 + 1 + 1);
+
+    graph.addEdgeData([{ id: 'edge', source: 'node-1', target: 'node-2' }]);
+    await graph.draw();
+
+    expect(graph.getEdgeData('edge').style?.zIndex).toBe(5 + 1);
+    // @ts-expect-error skip the type check
+    expect(graph.context.element?.getElement('edge')?.style.zIndex).toBe(5 + 1);
+  });
+});

packages/g6/__tests__/bugs/plugin-history-align-fields.spec.ts

@@ -24,15 +24,15 @@ describe('bug: plugin-history-align-fields', () => {
 
     await graph.render();
 
-    expect(graph.getNodeData('node-1').style).toEqual({ x: 50, y: 100 });
+    expect(graph.getNodeData('node-1').style).toEqual({ x: 50, y: 100, zIndex: 0 });
     expect(graph.getNodeData('node-1').data!.aaa).toEqual({
       bbb: false,
       ccc: true,
       ddd: '1234',
     });
 
     await graph.translateElementBy('node-1', [100, 100]);
-    expect(graph.getNodeData('node-1').style).toEqual({ x: 150, y: 200, z: 0 });
+    expect(graph.getNodeData('node-1').style).toEqual({ x: 150, y: 200, z: 0, zIndex: 0 });
     expect(graph.getNodeData('node-1').data!.aaa).toEqual({
       bbb: false,
       ccc: true,

packages/g6/__tests__/demos/element-position-combo.ts

@@ -26,6 +26,7 @@ export const elementPositionCombo: TestCase = async (context) => {
     },
     padding: 20,
     autoFit: 'view',
+    behaviors: ['hover-activate'],
   });
 
   await graph.render();