From 0ec431f5791c07c471f07773250e47e2b31bdf35 Mon Sep 17 00:00:00 2001 From: antv Date: Fri, 8 Nov 2024 17:11:34 +0800 Subject: [PATCH 1/4] refactor: correct var name --- packages/g6/src/runtime/graph.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/g6/src/runtime/graph.ts b/packages/g6/src/runtime/graph.ts index 33b9179dc57..e00c6848a4f 100644 --- a/packages/g6/src/runtime/graph.ts +++ b/packages/g6/src/runtime/graph.ts @@ -1682,13 +1682,13 @@ export class Graph extends EventEmitter { const elementType = model.getElementType(_id); if (elementType === 'combo') { const ancestor = model.getAncestorsData(_id, COMBO_KEY).at(-1) || this.getComboData(_id); - const combos = [ancestor, ...model.getDescendantsData(idOf(ancestor))]; + const descendants = [ancestor, ...model.getDescendantsData(idOf(ancestor))]; const delta = zIndex - element!.getElementZIndex(_id); - combos.forEach((combo) => { + descendants.forEach((combo) => { zIndexes[idOf(combo)] = this.getElementZIndex(idOf(combo)) + delta; }); - const { internal } = getSubgraphRelatedEdges(combos.map(idOf), (id) => model.getRelatedEdgesData(id)); + const { internal } = getSubgraphRelatedEdges(descendants.map(idOf), (id) => model.getRelatedEdgesData(id)); internal.forEach((edge) => { const edgeId = idOf(edge); zIndexes[edgeId] = this.getElementZIndex(edgeId) + delta; From 20c25aaad2c2cd4cf4460a377a437cc1cdb98c3b Mon Sep 17 00:00:00 2001 From: antv Date: Tue, 12 Nov 2024 17:44:22 +0800 Subject: [PATCH 2/4] refactor: compute element zindex when add and update data stage --- .../bugs/api-expand-element-z-index.spec.ts | 21 +- .../element-set-position-to-origin.spec.ts | 6 +- .../bugs/model-add-edge-in-combo.spec.ts | 53 +++ .../bugs/plugin-history-align-fields.spec.ts | 4 +- .../collapse-combo-2-0.svg | 14 +- .../collapse-combo-2-500.svg | 14 +- .../expand-combo-1-0.svg | 14 +- .../expand-combo-1-1000.svg | 14 +- .../expand-combo-1-500.svg | 14 +- .../collapse-expand-node/collapse-A-0.svg | 12 +- .../collapse-expand-node/collapse-A-500.svg | 12 +- .../collapse-expand-node/expand-A-0.svg | 14 +- .../collapse-expand-node/expand-A-1000.svg | 28 +- .../collapse-expand-node/expand-A-500.svg | 28 +- .../collapse-expand-node/expand-B-again-0.svg | 6 +- .../expand-B-again-1000.svg | 12 +- .../expand-B-again-500.svg | 12 +- .../collapse-expand/expand-combo-1.svg | 14 +- .../behaviors/drag-element-combo/default.svg | 14 +- .../drag-combo-2-after-drop-into.svg | 20 +- .../drag-node-2-after-drop-out.svg | 14 +- .../drag-node-2-before-drop-out.svg | 14 +- .../drag-combo-shadow-after-drag.svg | 10 +- .../drag-element/drag-combo-shadow.svg | 10 +- .../behaviors/drag-element/drag-combo.svg | 10 +- .../behaviors/drag-element/hideEdge-out.svg | 20 +- .../drag-element/shadow-after-drag.svg | 20 +- .../behaviors/drag-element/shadow.svg | 20 +- .../snapshots/elements/combo/combo-zIndex.svg | 10 +- .../snapshots/elements/combo/default.svg | 14 +- .../elements/position-combo/default.svg | 32 +- .../layouts/combo-layout/combined.svg | 14 +- .../plugin-history/create-edge-redo.svg | 38 +-- .../plugin-history/create-edge-undo.svg | 24 +- .../history/plugin-history/create-edge.svg | 38 +-- .../history/plugin-history/expand-redo.svg | 42 +-- .../plugins/history/plugin-history/expand.svg | 14 +- .../plugin-history/hideElement-redo.svg | 24 +- .../plugin-history/hideElement-undo.svg | 24 +- .../history/plugin-history/hideElement.svg | 24 +- .../plugin-history/setElementZIndex-redo.svg | 24 +- .../plugin-history/setElementZIndex-undo.svg | 24 +- .../snapshots/plugins/tooltip/combo.svg | 14 +- .../snapshots/plugins/tooltip/edge.svg | 14 +- .../snapshots/plugins/tooltip/hover.svg | 14 +- .../snapshots/plugins/tooltip/node.svg | 14 +- .../plugins/tooltip/show-tooltip-by-id.svg | 14 +- .../g6/__tests__/unit/runtime/data.spec.ts | 306 +++++++++++------- .../unit/runtime/graph/graph.spec.ts | 67 ++-- packages/g6/src/elements/combos/base-combo.ts | 9 +- packages/g6/src/runtime/data.ts | 137 +++++++- packages/g6/src/runtime/element.ts | 5 +- 52 files changed, 810 insertions(+), 574 deletions(-) create mode 100644 packages/g6/__tests__/bugs/model-add-edge-in-combo.spec.ts diff --git a/packages/g6/__tests__/bugs/api-expand-element-z-index.spec.ts b/packages/g6/__tests__/bugs/api-expand-element-z-index.spec.ts index fc71b6f936f..4e2d22e0f2f 100644 --- a/packages/g6/__tests__/bugs/api-expand-element-z-index.spec.ts +++ b/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('combo-2')).toBe(1); // not exists because it is collapsed + expect(getZIndexOf('node-1')).toBe(2); + // expect(getZIndexOf('node-2')).toBe(1 + 2); graph.frontElement('node-1'); - expect(context.element!.getElement('node-1')!.style.zIndex).toBe(1); + expect(getZIndexOf('node-1')).toBe(2); graph.frontElement('combo-1'); - expect(context.element!.getElement('combo-1')!.style.zIndex).toBe(2); + expect(getZIndexOf('combo-1')).toBe(3); 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(3); + expect(getZIndexOf('combo-2')).toBe(4); + expect(getZIndexOf('node-2')).toBe(4 + 2); }); }); diff --git a/packages/g6/__tests__/bugs/element-set-position-to-origin.spec.ts b/packages/g6/__tests__/bugs/element-set-position-to-origin.spec.ts index d1e8d26a482..041cd020299 100644 --- a/packages/g6/__tests__/bugs/element-set-position-to-origin.spec.ts +++ b/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: 2 }); 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: 2 }); 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: 2 }); expect(getElementOf('node-1').style.transform).toBe('translate(0, 0)'); }); }); diff --git a/packages/g6/__tests__/bugs/model-add-edge-in-combo.spec.ts b/packages/g6/__tests__/bugs/model-add-edge-in-combo.spec.ts new file mode 100644 index 00000000000..8e25312c30b --- /dev/null +++ b/packages/g6/__tests__/bugs/model-add-edge-in-combo.spec.ts @@ -0,0 +1,53 @@ +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(); + + graph.addEdgeData([{ id: 'edge', source: 'node-1', target: 'node-2' }]); + await graph.draw(); + + expect(graph.getEdgeData('edge').style?.zIndex).toBe(1); + // @ts-expect-error skip the type check + expect(graph.context.element?.getElement('edge')?.style.zIndex).toBe(1); + }); + + 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 + 2); + + graph.addEdgeData([{ id: 'edge', source: 'node-1', target: 'node-2' }]); + await graph.draw(); + + expect(graph.getEdgeData('edge').style?.zIndex).toBe(5 + 1 + 1); + // @ts-expect-error skip the type check + expect(graph.context.element?.getElement('edge')?.style.zIndex).toBe(5 + 1 + 1); + }); +}); diff --git a/packages/g6/__tests__/bugs/plugin-history-align-fields.spec.ts b/packages/g6/__tests__/bugs/plugin-history-align-fields.spec.ts index ef8b39493a0..ddc3738c9ef 100644 --- a/packages/g6/__tests__/bugs/plugin-history-align-fields.spec.ts +++ b/packages/g6/__tests__/bugs/plugin-history-align-fields.spec.ts @@ -24,7 +24,7 @@ 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: 2 }); expect(graph.getNodeData('node-1').data!.aaa).toEqual({ bbb: false, ccc: true, @@ -32,7 +32,7 @@ describe('bug: plugin-history-align-fields', () => { }); 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: 2 }); expect(graph.getNodeData('node-1').data!.aaa).toEqual({ bbb: false, ccc: true, diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-0.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-0.svg index 1f50e1b7be3..a324692beee 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-0.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-0.svg @@ -34,13 +34,6 @@ - - - - - - - @@ -53,6 +46,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-500.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-500.svg index 4c2997f623e..aa9b5d3e8d4 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-500.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-500.svg @@ -34,13 +34,6 @@ - - - - - - - @@ -53,6 +46,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-0.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-0.svg index 89c9802a607..1d81e51d553 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-0.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-0.svg @@ -34,13 +34,6 @@ - - - - - - - @@ -53,6 +46,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-1000.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-1000.svg index 3568cf2797f..9345a8a19b0 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-1000.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-1000.svg @@ -34,13 +34,6 @@ - - - - - - - @@ -53,6 +46,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-500.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-500.svg index 0aa290a2d7c..6ee3700f06e 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-500.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-500.svg @@ -34,13 +34,6 @@ - - - - - - - @@ -53,6 +46,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/collapse-A-0.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/collapse-A-0.svg index e6ba708e874..086c9731205 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/collapse-A-0.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/collapse-A-0.svg @@ -81,38 +81,38 @@ - + - B + D - + - D + E - + - E + B diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/collapse-A-500.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/collapse-A-500.svg index bea9c736c0d..3b3d6a0e35a 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/collapse-A-500.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/collapse-A-500.svg @@ -81,38 +81,38 @@ - + - B + D - + - D + E - + - E + B diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-A-0.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-A-0.svg index 920f326cff6..37c6ded83ef 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-A-0.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-A-0.svg @@ -52,7 +52,7 @@ - A + D @@ -64,7 +64,7 @@ - B + E @@ -76,7 +76,7 @@ - D + C @@ -88,7 +88,7 @@ - E + F @@ -100,7 +100,7 @@ - C + G @@ -112,7 +112,7 @@ - F + B @@ -124,7 +124,7 @@ - G + A diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-A-1000.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-A-1000.svg index 91089661813..733720d531c 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-A-1000.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-A-1000.svg @@ -45,86 +45,86 @@ - + - A + D - + - B + E - + - D + C - + - E + F - + - C + G - + - F + B - + - G + A diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-A-500.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-A-500.svg index 24937b15bcc..1e88144c200 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-A-500.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-A-500.svg @@ -45,86 +45,86 @@ - + - A + D - + - B + E - + - D + C - + - E + F - + - C + G - + - F + B - + - G + A diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-B-again-0.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-B-again-0.svg index 01fd356b3a3..0b501ea92f0 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-B-again-0.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-B-again-0.svg @@ -100,7 +100,7 @@ - B + D @@ -112,7 +112,7 @@ - D + E @@ -124,7 +124,7 @@ - E + B diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-B-again-1000.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-B-again-1000.svg index d643d2c3eaf..aa123ffb83a 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-B-again-1000.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-B-again-1000.svg @@ -93,38 +93,38 @@ - + - B + D - + - D + E - + - E + B diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-B-again-500.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-B-again-500.svg index 5a0d1fbab98..bebd8c7f1e3 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-B-again-500.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-node/expand-B-again-500.svg @@ -93,38 +93,38 @@ - + - B + D - + - D + E - + - E + B diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand/expand-combo-1.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand/expand-combo-1.svg index c7d31e1b061..49d0781e1be 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand/expand-combo-1.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand/expand-combo-1.svg @@ -46,6 +46,13 @@ + + + + + + + @@ -70,13 +77,6 @@ - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/default.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/default.svg index 1f50e1b7be3..a324692beee 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/default.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/default.svg @@ -34,13 +34,6 @@ - - - - - - - @@ -53,6 +46,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-combo-2-after-drop-into.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-combo-2-after-drop-into.svg index d42e1e6f557..2fc6e29369c 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-combo-2-after-drop-into.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-combo-2-after-drop-into.svg @@ -22,26 +22,26 @@ - + - + - + - - combo-2 + + node-3 - + - + - + - - node-3 + + combo-2 diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-after-drop-out.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-after-drop-out.svg index d361d5cd3e0..3b8848eea5a 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-after-drop-out.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-after-drop-out.svg @@ -34,13 +34,6 @@ - - - - - - - @@ -53,6 +46,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-before-drop-out.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-before-drop-out.svg index 58b9f343fe1..69ee3a47223 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-before-drop-out.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-before-drop-out.svg @@ -34,13 +34,6 @@ - - - - - - - @@ -53,6 +46,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow-after-drag.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow-after-drag.svg index 6750f8e8125..6000bb43c35 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow-after-drag.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow-after-drag.svg @@ -23,6 +23,11 @@ + + + + + @@ -33,11 +38,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow.svg index 0ae1e6181e3..05504a4233e 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow.svg @@ -23,6 +23,11 @@ + + + + + @@ -33,11 +38,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo.svg index 5840fda54c3..fe57a5c134e 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo.svg @@ -23,6 +23,11 @@ + + + + + @@ -33,11 +38,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-out.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-out.svg index 656c41b34dd..b6c9017851c 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-out.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-out.svg @@ -38,16 +38,6 @@ - - - - - - - - - - @@ -58,6 +48,16 @@ + + + + + + + + + + diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow-after-drag.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow-after-drag.svg index 1318ac3d80b..0196411cd55 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow-after-drag.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow-after-drag.svg @@ -38,16 +38,6 @@ - - - - - - - - - - @@ -58,6 +48,16 @@ + + + + + + + + + + diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow.svg index f4be7e42d21..2e7da7f9c39 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow.svg @@ -38,16 +38,6 @@ - - - - - - - - - - @@ -58,6 +48,16 @@ + + + + + + + + + + diff --git a/packages/g6/__tests__/snapshots/elements/combo/combo-zIndex.svg b/packages/g6/__tests__/snapshots/elements/combo/combo-zIndex.svg index 21c48dfd623..954c5d271f9 100644 --- a/packages/g6/__tests__/snapshots/elements/combo/combo-zIndex.svg +++ b/packages/g6/__tests__/snapshots/elements/combo/combo-zIndex.svg @@ -20,6 +20,11 @@ + + + + + @@ -27,11 +32,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/elements/combo/default.svg b/packages/g6/__tests__/snapshots/elements/combo/default.svg index f85b65a8d39..fb76d74fd65 100644 --- a/packages/g6/__tests__/snapshots/elements/combo/default.svg +++ b/packages/g6/__tests__/snapshots/elements/combo/default.svg @@ -34,13 +34,6 @@ - - - - - - - @@ -53,6 +46,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/snapshots/elements/position-combo/default.svg b/packages/g6/__tests__/snapshots/elements/position-combo/default.svg index 63ae903b0a5..332fffab149 100644 --- a/packages/g6/__tests__/snapshots/elements/position-combo/default.svg +++ b/packages/g6/__tests__/snapshots/elements/position-combo/default.svg @@ -27,62 +27,62 @@ - + - node-1 + node-3 - + - + - + - - node-2 + + combo-3 - + - node-3 + node-1 - + - node-4 + node-2 - + - + - + - - combo-3 + + node-4 diff --git a/packages/g6/__tests__/snapshots/layouts/combo-layout/combined.svg b/packages/g6/__tests__/snapshots/layouts/combo-layout/combined.svg index b451cf25584..4f49dfcccc7 100644 --- a/packages/g6/__tests__/snapshots/layouts/combo-layout/combined.svg +++ b/packages/g6/__tests__/snapshots/layouts/combo-layout/combined.svg @@ -464,13 +464,6 @@ - - - - - - - @@ -855,6 +848,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/create-edge-redo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/create-edge-redo.svg index e0d800a250d..3a996f6b2ab 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/create-edge-redo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/create-edge-redo.svg @@ -3,25 +3,6 @@ - - - - - - - - - - - - - - - node-1 - - - - @@ -60,6 +41,25 @@ + + + + + + + + + + + + + + + node-1 + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/create-edge-undo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/create-edge-undo.svg index 6d8b344230b..a3fc07e5ac6 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/create-edge-undo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/create-edge-undo.svg @@ -3,18 +3,6 @@ - - - - - - - - node-1 - - - - @@ -53,6 +41,18 @@ + + + + + + + + node-1 + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/create-edge.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/create-edge.svg index e0d800a250d..3a996f6b2ab 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/create-edge.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/create-edge.svg @@ -3,25 +3,6 @@ - - - - - - - - - - - - - - - node-1 - - - - @@ -60,6 +41,25 @@ + + + + + + + + + + + + + + + node-1 + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand-redo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand-redo.svg index c4f68a2344a..49d0781e1be 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand-redo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand-redo.svg @@ -15,26 +15,33 @@ - + - + - + - - node-2 + + combo-1 - + + + + + + + + - node-3 + node-1 @@ -46,33 +53,26 @@ - + - + - + - - combo-1 + + node-2 - - - - - - - - + - node-1 + node-3 diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand.svg index c7d31e1b061..49d0781e1be 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand.svg @@ -46,6 +46,13 @@ + + + + + + + @@ -70,13 +77,6 @@ - - - - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-redo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-redo.svg index 6fc0b8ed6a4..3226c1ac5d5 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-redo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-redo.svg @@ -15,18 +15,6 @@ - - - - - - - - node-1 - - - - @@ -53,6 +41,18 @@ + + + + + + + + node-1 + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-undo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-undo.svg index 1c2c6fa268d..869996fa13e 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-undo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-undo.svg @@ -15,18 +15,6 @@ - - - - - - - - node-1 - - - - @@ -53,6 +41,18 @@ + + + + + + + + node-1 + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement.svg index 6fc0b8ed6a4..3226c1ac5d5 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement.svg @@ -15,18 +15,6 @@ - - - - - - - - node-1 - - - - @@ -53,6 +41,18 @@ + + + + + + + + node-1 + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementZIndex-redo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementZIndex-redo.svg index 6d8b344230b..a3fc07e5ac6 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementZIndex-redo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementZIndex-redo.svg @@ -3,18 +3,6 @@ - - - - - - - - node-1 - - - - @@ -53,6 +41,18 @@ + + + + + + + + node-1 + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementZIndex-undo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementZIndex-undo.svg index 6d8b344230b..a3fc07e5ac6 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementZIndex-undo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementZIndex-undo.svg @@ -3,18 +3,6 @@ - - - - - - - - node-1 - - - - @@ -53,6 +41,18 @@ + + + + + + + + node-1 + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/tooltip/combo.svg b/packages/g6/__tests__/snapshots/plugins/tooltip/combo.svg index 4667f78223f..20dcdae21e2 100644 --- a/packages/g6/__tests__/snapshots/plugins/tooltip/combo.svg +++ b/packages/g6/__tests__/snapshots/plugins/tooltip/combo.svg @@ -436,13 +436,6 @@ - - - - - - - @@ -827,6 +820,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/tooltip/edge.svg b/packages/g6/__tests__/snapshots/plugins/tooltip/edge.svg index 4667f78223f..20dcdae21e2 100644 --- a/packages/g6/__tests__/snapshots/plugins/tooltip/edge.svg +++ b/packages/g6/__tests__/snapshots/plugins/tooltip/edge.svg @@ -436,13 +436,6 @@ - - - - - - - @@ -827,6 +820,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/tooltip/hover.svg b/packages/g6/__tests__/snapshots/plugins/tooltip/hover.svg index 4667f78223f..20dcdae21e2 100644 --- a/packages/g6/__tests__/snapshots/plugins/tooltip/hover.svg +++ b/packages/g6/__tests__/snapshots/plugins/tooltip/hover.svg @@ -436,13 +436,6 @@ - - - - - - - @@ -827,6 +820,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/tooltip/node.svg b/packages/g6/__tests__/snapshots/plugins/tooltip/node.svg index 4667f78223f..20dcdae21e2 100644 --- a/packages/g6/__tests__/snapshots/plugins/tooltip/node.svg +++ b/packages/g6/__tests__/snapshots/plugins/tooltip/node.svg @@ -436,13 +436,6 @@ - - - - - - - @@ -827,6 +820,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/tooltip/show-tooltip-by-id.svg b/packages/g6/__tests__/snapshots/plugins/tooltip/show-tooltip-by-id.svg index 4667f78223f..20dcdae21e2 100644 --- a/packages/g6/__tests__/snapshots/plugins/tooltip/show-tooltip-by-id.svg +++ b/packages/g6/__tests__/snapshots/plugins/tooltip/show-tooltip-by-id.svg @@ -436,13 +436,6 @@ - - - - - - - @@ -827,6 +820,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/unit/runtime/data.spec.ts b/packages/g6/__tests__/unit/runtime/data.spec.ts index bf4d4a6032b..436c75c66ac 100644 --- a/packages/g6/__tests__/unit/runtime/data.spec.ts +++ b/packages/g6/__tests__/unit/runtime/data.spec.ts @@ -33,7 +33,7 @@ describe('DataController', () => { controller.addComboData([{ id: 'combo-1' }]); - expect(controller.getComboData(['combo-1'])).toEqual([{ id: 'combo-1', data: {}, style: {} }]); + expect(controller.getComboData(['combo-1'])).toEqual([{ id: 'combo-1', data: {}, style: { zIndex: 0 } }]); }); it('setData', () => { @@ -42,11 +42,11 @@ describe('DataController', () => { controller.addData(clone(data)); controller.setData({ - nodes: [{ id: 'node-4', data: { value: 4 }, style: { fill: 'yellow' } }], + nodes: [{ id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 2 } }], }); expect(controller.getData()).toEqual({ - nodes: [{ id: 'node-4', data: { value: 4 }, style: { fill: 'yellow' } }], + nodes: [{ id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 2 } }], edges: [], combos: [], }); @@ -57,10 +57,21 @@ describe('DataController', () => { controller.addData(clone(data)); - expect(controller.getData()).toEqual(data); + expect(controller.getData()).toEqual({ + nodes: [ + { id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 2 } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 2 } }, + { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 2 } }, + ], + edges: [ + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, + { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 1 } }, + ], + combos: [{ id: 'combo-1', data: {}, style: { zIndex: 0 } }], + }); controller.addData({ - nodes: [{ id: 'node-4', data: { value: 4 }, style: { fill: 'yellow' } }], + nodes: [{ id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 2 } }], }); expect(controller.hasNode('node-4')).toBe(true); @@ -79,20 +90,20 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-1', data: { value: 1 }, style: { fill: 'red' } }, - { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green' } }, - { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue' } }, - { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow' } }, - { id: 'node-5', data: { value: 5 }, combo: 'combo-2', style: { fill: 'black' } }, + { id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 2 } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 2 } }, + { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 2 } }, + { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 2 } }, + { id: 'node-5', data: { value: 5 }, combo: 'combo-2', style: { fill: 'black', zIndex: 2 } }, ], edges: [ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: {} }, - { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: {} }, - { id: 'edge-3', source: 'node-1', target: 'node-5', data: { weight: 3 }, style: {} }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, + { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 1 } }, + { id: 'edge-3', source: 'node-1', target: 'node-5', data: { weight: 3 }, style: { zIndex: 1 } }, ], combos: [ - { id: 'combo-1', data: {}, style: {} }, - { id: 'combo-2', data: {}, style: {} }, + { id: 'combo-1', data: {}, style: { zIndex: 0 } }, + { id: 'combo-2', data: {}, style: { zIndex: 0 } }, ], }); }); @@ -102,13 +113,11 @@ describe('DataController', () => { controller.addData(clone(data)); - expect(controller.getData()).toEqual(data); - - expect(controller.getNodeData(['node-2'])).toEqual(data.nodes.slice(1, 2)); + expect(controller.getNodeData(['node-2']).map(idOf)).toEqual(data.nodes.slice(1, 2).map(idOf)); - expect(controller.getEdgeData(['edge-1'])).toEqual(data.edges.slice(0, 1)); + expect(controller.getEdgeData(['edge-1']).map(idOf)).toEqual(data.edges.slice(0, 1).map(idOf)); - expect(controller.getComboData(['combo-1'])).toEqual(data.combos.slice(0, 1)); + expect(controller.getComboData(['combo-1']).map(idOf)).toEqual(data.combos.slice(0, 1).map(idOf)); expect(controller.getChildrenData('combo-1').map(idOf)).toEqual(['node-2', 'node-3']); @@ -137,17 +146,17 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-1', data: { value: 666 }, combo: 'combo-2', style: { fill: 'pink', lineWidth: 2 } }, - { id: 'node-2', data: { value: 2 }, combo: 'combo-2', style: { fill: 'green' } }, - { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue' } }, + { id: 'node-1', data: { value: 666 }, combo: 'combo-2', style: { fill: 'pink', lineWidth: 2, zIndex: 2 } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-2', style: { fill: 'green', zIndex: 2 } }, + { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 2 } }, ], edges: [ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 678 }, style: {} }, - { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 666 }, style: {} }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 678 }, style: { zIndex: 1 } }, + { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 666 }, style: { zIndex: 1 } }, ], combos: [ - { id: 'combo-1', data: { value: 100 }, style: { stroke: 'blue' } }, - { id: 'combo-2', data: {}, style: {} }, + { id: 'combo-1', data: { value: 100 }, style: { stroke: 'blue', zIndex: 0 } }, + { id: 'combo-2', data: {}, style: { zIndex: 0 } }, ], }); }); @@ -158,7 +167,7 @@ describe('DataController', () => { // no changes controller.updateNodeData([{ id: 'node-1', data: { value: 1 }, style: { fill: 'red' } }]); - expect(controller.getNodeData()).toEqual([{ id: 'node-1', data: { value: 1 }, style: { fill: 'red' } }]); + expect(controller.getNodeData()).toEqual([{ id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 2 } }]); }); it('updateEdgeData', () => { @@ -171,20 +180,20 @@ describe('DataController', () => { controller.updateEdgeData([{ id: 'edge-1', data: { weight: 1 } }]); expect(controller.getEdgeData()).toEqual([ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: {} }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, ]); // update source controller.updateEdgeData([{ id: 'edge-1', source: 'node-2' }]); expect(controller.getEdgeData()).toEqual([ - { id: 'edge-1', source: 'node-2', target: 'node-2', data: { weight: 1 }, style: {} }, + { id: 'edge-1', source: 'node-2', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, ]); // update target controller.updateEdgeData([{ id: 'edge-1', target: 'node-1' }]); expect(controller.getEdgeData()).toEqual([ - { id: 'edge-1', source: 'node-2', target: 'node-1', data: { weight: 1 }, style: {} }, + { id: 'edge-1', source: 'node-2', target: 'node-1', data: { weight: 1 }, style: { zIndex: 1 } }, ]); }); @@ -214,13 +223,13 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-1', data: {}, combo: 'combo-1', style: { x: 50, y: 50 } }, - { id: 'node-2', data: {}, combo: 'combo-1', style: { x: 100, y: 100 } }, + { id: 'node-1', data: {}, combo: 'combo-1', style: { x: 50, y: 50, zIndex: 2 } }, + { id: 'node-2', data: {}, combo: 'combo-1', style: { x: 100, y: 100, zIndex: 2 } }, ], edges: [], combos: [ - { id: 'combo-1', data: {}, style: { x: 100, y: 100, z: 0 } }, - { id: 'combo-2', data: {}, style: {} }, + { id: 'combo-1', data: {}, style: { x: 100, y: 100, z: 0, zIndex: 0 } }, + { id: 'combo-2', data: {}, style: { zIndex: 0 } }, ], }); @@ -228,13 +237,13 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-1', data: {}, combo: 'combo-1', style: { x: 50, y: 50 } }, - { id: 'node-2', data: {}, combo: 'combo-1', style: { x: 100, y: 100 } }, + { id: 'node-1', data: {}, combo: 'combo-1', style: { x: 50, y: 50, zIndex: 2 } }, + { id: 'node-2', data: {}, combo: 'combo-1', style: { x: 100, y: 100, zIndex: 2 } }, ], edges: [], combos: [ - { id: 'combo-1', data: {}, style: { x: 100, y: 100, z: 0, fill: 'pink' } }, - { id: 'combo-2', data: {}, style: {} }, + { id: 'combo-1', data: {}, style: { x: 100, y: 100, z: 0, fill: 'pink', zIndex: 0 } }, + { id: 'combo-2', data: {}, style: { zIndex: 0 } }, ], }); @@ -252,8 +261,8 @@ describe('DataController', () => { controller.translateComboBy('combo-1', [100, 100]); expect(controller.getData()).toEqual({ - nodes: [{ id: 'node-1', data: {}, combo: 'combo-1', style: { x: 100, y: 100, z: 0 } }], - combos: [{ id: 'combo-1', data: {}, style: { x: 100, y: 100, z: 0 } }], + nodes: [{ id: 'node-1', data: {}, combo: 'combo-1', style: { x: 100, y: 100, z: 0, zIndex: 2 } }], + combos: [{ id: 'combo-1', data: {}, style: { x: 100, y: 100, z: 0, zIndex: 0 } }], edges: [], }); }); @@ -273,9 +282,9 @@ describe('DataController', () => { controller.translateComboBy('combo-1', [66, 67]); expect(controller.getNodeData()).toEqual([ - { id: 'node-1', data: {}, style: {} }, - { id: 'node-2', combo: 'combo-1', data: {}, style: { x: 66, y: 117, z: 0, fill: 'green' } }, - { id: 'node-3', combo: 'combo-1', data: {}, style: { x: 166, y: 167, z: 0, fill: 'blue' } }, + { id: 'node-1', data: {}, style: { zIndex: 2 } }, + { id: 'node-2', combo: 'combo-1', data: {}, style: { x: 66, y: 117, z: 0, fill: 'green', zIndex: 2 } }, + { id: 'node-3', combo: 'combo-1', data: {}, style: { x: 166, y: 167, z: 0, fill: 'blue', zIndex: 2 } }, ]); }); @@ -291,7 +300,7 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [], edges: [], - combos: [{ id: 'combo-1', data: {}, style: { x: 100, y: 100, z: 0 } }], + combos: [{ id: 'combo-1', data: {}, style: { x: 100, y: 100, z: 0, zIndex: 0 } }], }); }); @@ -310,10 +319,10 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-1', data: {}, combo: 'combo-1', style: { x: 100, y: 100, z: 0 } }, - { id: 'node-2', data: {}, combo: 'combo-1', style: { x: 110, y: 110, z: 0 } }, + { id: 'node-1', data: {}, combo: 'combo-1', style: { x: 100, y: 100, z: 0, zIndex: 2 } }, + { id: 'node-2', data: {}, combo: 'combo-1', style: { x: 110, y: 110, z: 0, zIndex: 2 } }, ], - combos: [{ id: 'combo-1', data: {}, style: { x: 100, y: 100, z: 0 } }], + combos: [{ id: 'combo-1', data: {}, style: { x: 100, y: 100, z: 0, zIndex: 0 } }], edges: [], }); }); @@ -331,21 +340,21 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green' } }, - { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue' } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 2 } }, + { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 2 } }, ], - edges: [{ id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: {} }], - combos: [{ id: 'combo-1', data: {}, style: {} }], + edges: [{ id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 1 } }], + combos: [{ id: 'combo-1', data: {}, style: { zIndex: 0 } }], }); controller.removeComboData(['combo-1']); expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-2', data: { value: 2 }, combo: undefined, style: { fill: 'green' } }, - { id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue' } }, + { id: 'node-2', data: { value: 2 }, combo: undefined, style: { fill: 'green', zIndex: 2 } }, + { id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue', zIndex: 2 } }, ], - edges: [{ id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: {} }], + edges: [{ id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 1 } }], combos: [], }); @@ -355,8 +364,8 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-2', data: { value: 2 }, combo: undefined, style: { fill: 'green', combo: undefined } }, - { id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue' } }, + { id: 'node-2', data: { value: 2 }, combo: undefined, style: { fill: 'green', zIndex: 2 } }, + { id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue', zIndex: 2 } }, ], edges: [], combos: [], @@ -367,7 +376,7 @@ describe('DataController', () => { controller.removeNodeData(['node-2']); expect(controller.getData()).toEqual({ - nodes: [{ id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue' } }], + nodes: [{ id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue', zIndex: 2 } }], edges: [], combos: [], }); @@ -378,19 +387,19 @@ describe('DataController', () => { controller.addData(clone(data)); - expect(controller.getParentData('node-2', 'combo')).toEqual(data.combos[0]); + expect(controller.getParentData('node-2', 'combo')?.id).toEqual(data.combos[0].id); controller.removeComboData(['combo-1']); expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-1', data: { value: 1 }, style: { fill: 'red' } }, - { id: 'node-2', data: { value: 2 }, combo: undefined, style: { fill: 'green' } }, - { id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue' } }, + { id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 2 } }, + { id: 'node-2', data: { value: 2 }, combo: undefined, style: { fill: 'green', zIndex: 2 } }, + { id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue', zIndex: 2 } }, ], edges: [ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: {} }, - { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: {} }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, + { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 1 } }, ], combos: [], }); @@ -415,21 +424,29 @@ describe('DataController', () => { controller.addData(data); + expect(controller.getComboData(['combo-1'])[0].style?.zIndex).toEqual(1); + expect(controller.getComboData(['combo-2'])[0].style?.zIndex).toEqual(0); expect(controller.getParentData('node-1', 'combo')?.id).toEqual('combo-1'); expect(controller.getParentData('combo-1', 'combo')?.id).toEqual('combo-2'); + // combo-1 删除后，node-1、node-2、node-3 会被移动到 combo-2 + // after combo-1 is removed, node-1, node-2, node-3 will be moved to combo-2 + // 迁移后 combo-2 的 zIndex 不会被更新 + // after migration, the zIndex of combo-2 will not be updated controller.removeComboData(['combo-1']); + expect(controller.getComboData(['combo-2'])[0].style?.zIndex).toEqual(0); + expect(controller.getParentData('combo-2', 'combo')).toEqual(undefined); expect(controller.getParentData('node-1', 'combo')?.id).toEqual('combo-2'); expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-1', data: {}, style: {}, combo: 'combo-2' }, - { id: 'node-2', data: {}, style: {}, combo: 'combo-2' }, - { id: 'node-3', data: {}, style: {}, combo: 'combo-2' }, + { id: 'node-1', data: {}, style: { zIndex: 3 }, combo: 'combo-2' }, + { id: 'node-2', data: {}, style: { zIndex: 3 }, combo: 'combo-2' }, + { id: 'node-3', data: {}, style: { zIndex: 3 }, combo: 'combo-2' }, ], edges: [], - combos: [{ id: 'combo-2', data: {}, style: {} }], + combos: [{ id: 'combo-2', data: {}, style: { zIndex: 0 } }], }); }); @@ -438,17 +455,9 @@ describe('DataController', () => { controller.addData(clone(data)); - controller.setData({ - nodes: [ - { id: 'node-3', data: { value: 3 }, combo: 'combo-2', style: { fill: 'pink' } }, - { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow' } }, - ], - combos: [{ id: 'combo-2' }], - }); - - const changes = controller.getChanges(); + const changes1 = controller.getChanges(); - expect(changes).toEqual([ + expect(changes1).toEqual([ { value: { id: 'combo-1', data: {}, style: {} }, type: 'ComboAdded' }, { value: { id: 'node-1', data: { value: 1 }, style: { fill: 'red' } }, type: 'NodeAdded' }, { value: { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green' } }, type: 'NodeAdded' }, @@ -472,48 +481,109 @@ describe('DataController', () => { value: { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: {} }, type: 'EdgeAdded', }, + // 更新 zIndex / update zIndex + { + value: { id: 'combo-1', data: {}, style: { zIndex: 0 } }, + original: { id: 'combo-1', data: {}, style: {} }, + type: 'ComboUpdated', + }, + { + value: { id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 2 } }, + original: { id: 'node-1', data: { value: 1 }, style: { fill: 'red' } }, + type: 'NodeUpdated', + }, + { + value: { id: 'node-2', combo: 'combo-1', data: { value: 2 }, style: { fill: 'green', zIndex: 2 } }, + original: { id: 'node-2', combo: 'combo-1', data: { value: 2 }, style: { fill: 'green' } }, + type: 'NodeUpdated', + }, + { + value: { id: 'node-3', combo: 'combo-1', data: { value: 3 }, style: { fill: 'blue', zIndex: 2 } }, + original: { id: 'node-3', combo: 'combo-1', data: { value: 3 }, style: { fill: 'blue' } }, + type: 'NodeUpdated', + }, + { + value: { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, + original: { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: {} }, + type: 'EdgeUpdated', + }, + { + value: { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 1 } }, + original: { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: {} }, + type: 'EdgeUpdated', + }, + ]); + + controller.clearChanges(); + + controller.setData({ + nodes: [ + { id: 'node-3', data: { value: 3 }, combo: 'combo-2', style: { fill: 'pink' } }, + { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow' } }, + ], + combos: [{ id: 'combo-2' }], + }); + + const changes2 = controller.getChanges(); + + expect(changes2).toEqual([ { value: { id: 'combo-2' }, type: 'ComboAdded' }, { value: { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow' } }, type: 'NodeAdded' }, { - value: { id: 'node-3', data: { value: 3 }, combo: 'combo-2', style: { fill: 'pink' } }, - original: { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue' } }, + value: { id: 'combo-2', data: {}, style: { zIndex: 0 } }, + original: { id: 'combo-2', data: {}, style: {} }, + type: 'ComboUpdated', + }, + { + value: { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 2 } }, + original: { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow' } }, + type: 'NodeUpdated', + }, + { + value: { id: 'node-3', combo: 'combo-2', data: { value: 3 }, style: { fill: 'pink', zIndex: 2 } }, + original: { id: 'node-3', combo: 'combo-1', data: { value: 3 }, style: { fill: 'blue', zIndex: 2 } }, type: 'NodeUpdated', }, // 移动节点后更新 combo / update combo after move node { - value: { id: 'combo-2', data: {}, style: {} }, - original: { id: 'combo-2', data: {}, style: {} }, + value: { id: 'combo-2', data: {}, style: { zIndex: 0 } }, + original: { id: 'combo-2', data: {}, style: { zIndex: 0 } }, type: 'ComboUpdated', }, { - value: { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: {} }, + value: { id: 'node-3', combo: 'combo-2', data: { value: 3 }, style: { fill: 'pink', zIndex: 2 } }, + original: { id: 'node-3', combo: 'combo-2', data: { value: 3 }, style: { fill: 'pink', zIndex: 2 } }, + type: 'NodeUpdated', + }, + { + value: { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, type: 'EdgeRemoved', }, { - value: { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: {} }, + value: { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 1 } }, type: 'EdgeRemoved', }, - { value: { id: 'node-1', data: { value: 1 }, style: { fill: 'red' } }, type: 'NodeRemoved' }, + { value: { id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 2 } }, type: 'NodeRemoved' }, { - value: { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green' } }, + value: { id: 'node-2', combo: 'combo-1', data: { value: 2 }, style: { fill: 'green', zIndex: 2 } }, type: 'NodeRemoved', }, // 移除节点后更新 combo / update combo after remove node { - value: { id: 'combo-1', data: {}, style: {} }, - original: { id: 'combo-1', data: {}, style: {} }, + value: { id: 'combo-1', data: {}, style: { zIndex: 0 } }, + original: { id: 'combo-1', data: {}, style: { zIndex: 0 } }, type: 'ComboUpdated', }, - { value: { id: 'combo-1', data: {}, style: {} }, type: 'ComboRemoved' }, + { value: { id: 'combo-1', data: {}, style: { zIndex: 0 } }, type: 'ComboRemoved' }, ]); - expect(reduceDataChanges(changes)).toEqual([ + expect(reduceDataChanges([...changes1, ...changes2])).toEqual([ { type: 'NodeAdded', - value: { id: 'node-3', data: { value: 3 }, combo: 'combo-2', style: { fill: 'pink' } }, + value: { id: 'node-3', combo: 'combo-2', data: { value: 3 }, style: { fill: 'pink', zIndex: 2 } }, }, - { value: { id: 'combo-2', data: {}, style: {} }, type: 'ComboAdded' }, - { value: { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow' } }, type: 'NodeAdded' }, + { type: 'ComboAdded', value: { id: 'combo-2', data: {}, style: { zIndex: 0 } } }, + { type: 'NodeAdded', value: { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 2 } } }, ]); }); @@ -531,12 +601,12 @@ describe('DataController', () => { const changes = controller.getChanges(); expect(reduceDataChanges(changes)).toEqual([ - { value: { id: 'combo-2', data: {}, style: {} }, type: 'ComboAdded' }, + { value: { id: 'combo-2', data: {}, style: { zIndex: 0 } }, type: 'ComboAdded' }, { type: 'NodeAdded', - value: { id: 'node-3', data: { value: 3 }, combo: 'combo-2', style: { fill: 'pink' } }, + value: { id: 'node-3', data: { value: 3 }, combo: 'combo-2', style: { fill: 'pink', zIndex: 2 } }, }, - { value: { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow' } }, type: 'NodeAdded' }, + { value: { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 2 } }, type: 'NodeAdded' }, ]); }); @@ -565,11 +635,11 @@ describe('DataController', () => { controller.addData(clone(data)); - expect(controller.getElementDataById('node-1')).toEqual(data.nodes[0]); + expect(controller.getElementDataById('node-1').id).toEqual(data.nodes[0].id); - expect(controller.getElementDataById('edge-1')).toEqual(data.edges[0]); + expect(controller.getElementDataById('edge-1').id).toEqual(data.edges[0].id); - expect(controller.getElementDataById('combo-1')).toEqual(data.combos[0]); + expect(controller.getElementDataById('combo-1').id).toEqual(data.combos[0].id); expect(() => { controller.getElementDataById('undefined'); @@ -581,13 +651,13 @@ describe('DataController', () => { controller.addData(clone(data)); - expect(controller.getNodeLikeData(['node-1'])[0]).toEqual(data.nodes[0]); + expect(controller.getNodeLikeData(['node-1'])[0].id).toEqual(data.nodes[0].id); expect(controller.getNodeLikeData(['edge-1'])[0]).toEqual(undefined); - expect(controller.getNodeLikeData(['combo-1'])[0]).toEqual(data.combos[0]); + expect(controller.getNodeLikeData(['combo-1'])[0].id).toEqual(data.combos[0].id); - expect(controller.getNodeLikeData()).toEqual([...data.combos, ...data.nodes]); + expect(controller.getNodeLikeData().map(idOf)).toEqual([...data.combos, ...data.nodes].map(idOf)); }); it('getRootsData', () => { @@ -647,14 +717,14 @@ describe('DataController', () => { controller.addData(clone(data)); - expect(controller.getChildrenData('combo-1')).toEqual(data.nodes.slice(1)); + expect(controller.getChildrenData('combo-1').map(idOf)).toEqual(data.nodes.slice(1).map(idOf)); controller.updateNodeData([{ id: 'node-1', combo: 'combo-1' }]); expect(controller.getChildrenData('combo-1')?.sort((a, b) => (a.id < b.id ? -1 : 1))).toEqual([ - { id: 'node-1', data: { value: 1 }, combo: 'combo-1', style: { fill: 'red' } }, - { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green' } }, - { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue' } }, + { id: 'node-1', data: { value: 1 }, combo: 'combo-1', style: { fill: 'red', zIndex: 2 } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 2 } }, + { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 2 } }, ]); controller.addComboData([{ id: 'combo-2' }]); @@ -665,12 +735,12 @@ describe('DataController', () => { ]); expect(controller.getChildrenData('combo-1')).toEqual([ - { id: 'node-1', data: { value: 1 }, combo: 'combo-1', style: { fill: 'red' } }, + { id: 'node-1', data: { value: 1 }, combo: 'combo-1', style: { fill: 'red', zIndex: 2 } }, ]); expect(controller.getChildrenData('combo-2')).toEqual([ - { id: 'node-2', data: { value: 2 }, combo: 'combo-2', style: { fill: 'green' } }, - { id: 'node-3', data: { value: 3 }, combo: 'combo-2', style: { fill: 'blue' } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-2', style: { fill: 'green', zIndex: 2 } }, + { id: 'node-3', data: { value: 3 }, combo: 'combo-2', style: { fill: 'blue', zIndex: 2 } }, ]); }); @@ -683,7 +753,7 @@ describe('DataController', () => { controller.updateNodeData([{ id: 'node-1', combo: 'combo-1' }]); - expect(controller.getParentData('node-1', 'combo')).toEqual(data.combos[0]); + expect(controller.getParentData('node-1', 'combo')?.id).toEqual(data.combos[0].id); expect(controller.getParentData('combo-3', 'combo')).toEqual(undefined); }); @@ -694,21 +764,21 @@ describe('DataController', () => { controller.addData(clone(data)); expect(controller.getRelatedEdgesData('node-1')).toEqual([ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: {} }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, ]); controller.addEdgeData([{ id: 'edge-3', source: 'node-1', target: 'node-3', data: { weight: 3 } }]); expect(controller.getRelatedEdgesData('node-1')).toEqual([ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: {} }, - { id: 'edge-3', source: 'node-1', target: 'node-3', data: { weight: 3 }, style: {} }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, + { id: 'edge-3', source: 'node-1', target: 'node-3', data: { weight: 3 }, style: { zIndex: 1 } }, ]); expect(controller.getRelatedEdgesData('node-1', 'in')).toEqual([]); expect(controller.getRelatedEdgesData('node-1', 'out')).toEqual([ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: {} }, - { id: 'edge-3', source: 'node-1', target: 'node-3', data: { weight: 3 }, style: {} }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, + { id: 'edge-3', source: 'node-1', target: 'node-3', data: { weight: 3 }, style: { zIndex: 1 } }, ]); }); @@ -718,14 +788,14 @@ describe('DataController', () => { controller.addData(clone(data)); expect(controller.getNeighborNodesData('node-1')).toEqual([ - { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green' } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 2 } }, ]); controller.addEdgeData([{ id: 'edge-3', source: 'node-1', target: 'node-3', data: { weight: 3 } }]); expect(controller.getNeighborNodesData('node-1')).toEqual([ - { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green' } }, - { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue' } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 2 } }, + { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 2 } }, ]); }); diff --git a/packages/g6/__tests__/unit/runtime/graph/graph.spec.ts b/packages/g6/__tests__/unit/runtime/graph/graph.spec.ts index 874c58a76f6..50d6673dfbd 100644 --- a/packages/g6/__tests__/unit/runtime/graph/graph.spec.ts +++ b/packages/g6/__tests__/unit/runtime/graph/graph.spec.ts @@ -132,20 +132,20 @@ describe('Graph', () => { }); expect(graph.getData()).toEqual({ nodes: [ - { id: 'node-1', data: {}, style: {} }, - { id: 'node-2', data: {}, style: {} }, + { id: 'node-1', data: {}, style: { zIndex: 2 } }, + { id: 'node-2', data: {}, style: { zIndex: 2 } }, ], - edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: {} }], + edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { zIndex: 1 } }], combos: [], }); graph.updateData({ edges: [{ id: 'edge-1', style: { lineWidth: 5 } }] }); expect(graph.getData()).toEqual({ nodes: [ - { id: 'node-1', data: {}, style: {} }, - { id: 'node-2', data: {}, style: {} }, + { id: 'node-1', data: {}, style: { zIndex: 2 } }, + { id: 'node-2', data: {}, style: { zIndex: 2 } }, ], - edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { lineWidth: 5 } }], + edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { lineWidth: 5, zIndex: 1 } }], combos: [], }); }); @@ -160,22 +160,22 @@ describe('Graph', () => { g.updateData((data) => { expect(data).toEqual({ nodes: [ - { id: 'node-1', data: {}, style: {} }, - { id: 'node-2', data: {}, style: {} }, + { id: 'node-1', data: {}, style: { zIndex: 2 } }, + { id: 'node-2', data: {}, style: { zIndex: 2 } }, ], - edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: {} }], + edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { zIndex: 1 } }], combos: [], }); return { nodes: [{ id: 'node-1', data: { value: 1 } }] }; }); - expect(g.getNodeData('node-1')).toEqual({ id: 'node-1', data: { value: 1 }, style: {} }); + expect(g.getNodeData('node-1')).toEqual({ id: 'node-1', data: { value: 1 }, style: { zIndex: 2 } }); g.setData((data) => { expect(data).toEqual({ nodes: [ - { id: 'node-1', data: { value: 1 }, style: {} }, - { id: 'node-2', data: {}, style: {} }, + { id: 'node-1', data: { value: 1 }, style: { zIndex: 2 } }, + { id: 'node-2', data: {}, style: { zIndex: 2 } }, ], - edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: {} }], + edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { zIndex: 1 } }], combos: [], }); return { nodes: [], edges: [] }; @@ -188,7 +188,7 @@ describe('Graph', () => { }); return { nodes: [{ id: 'node-1' }] }; }); - expect(g.getNodeData('node-1')).toEqual({ id: 'node-1', data: {}, style: {} }); + expect(g.getNodeData('node-1')).toEqual({ id: 'node-1', data: {}, style: { zIndex: 2 } }); }); it('getElementData', () => { @@ -216,7 +216,10 @@ describe('Graph', () => { expect(graph.getEdgeData().map(idOf)).toEqual(['edge-1', 'edge-2']); expect(graph.getComboData('combo-1').id).toEqual('combo-1'); expect(graph.getComboData(['combo-1']).map(idOf)).toEqual(['combo-1']); - expect(graph.getComboData().map(idOf)).toEqual(['combo-2', 'combo-1']); + expect(graph.getComboData()).toEqual([ + { id: 'combo-2', data: {}, style: { zIndex: 0 } }, + { id: 'combo-1', combo: 'combo-2', data: {}, style: { zIndex: 1 } }, + ]); expect(graph.getChildrenData('combo-1').map(idOf)).toEqual(['node-3', 'node-4']); expect(graph.getDescendantsData('combo-2').map(idOf)).toEqual(['combo-1', 'node-3', 'node-4']); graph.removeComboData(['combo-2']); @@ -224,13 +227,13 @@ describe('Graph', () => { graph.updateEdgeData([{ id: 'edge-2', style: { lineWidth: 10 } }]); graph.updateComboData([{ id: 'combo-1', style: { stroke: 'red' } }]); expect(graph.getNodeData()).toEqual([ - { id: 'node-1', data: {}, style: {} }, - { id: 'node-2', data: {}, style: {} }, - { id: 'node-3', data: {}, combo: 'combo-1', style: { x: 100, y: 100 } }, - { id: 'node-4', data: {}, combo: 'combo-1', style: {} }, + { id: 'node-1', data: {}, style: { zIndex: 2 } }, + { id: 'node-2', data: {}, style: { zIndex: 2 } }, + { id: 'node-3', data: {}, combo: 'combo-1', style: { x: 100, y: 100, zIndex: 3 } }, + { id: 'node-4', data: {}, combo: 'combo-1', style: { zIndex: 3 } }, ]); expect(graph.getEdgeData().map(idOf)).toEqual(['edge-1', 'edge-2']); - expect(graph.getComboData()).toEqual([{ id: 'combo-1', data: {}, style: { stroke: 'red' } }]); + expect(graph.getComboData()).toEqual([{ id: 'combo-1', data: {}, style: { stroke: 'red', zIndex: 1 } }]); graph.removeComboData(['combo-1']); graph.removeNodeData(['node-3', 'node-4']); expect(graph.getNodeData().map(idOf)).toEqual(['node-1', 'node-2']); @@ -245,20 +248,20 @@ describe('Graph', () => { }, }); g.addNodeData((data) => { - expect(data).toEqual([{ id: 'node-1', data: {}, style: {} }]); + expect(data).toEqual([{ id: 'node-1', data: {}, style: { zIndex: 2 } }]); return [{ id: 'node-2' }]; }); expect(g.getNodeData().map(idOf)).toEqual(['node-1', 'node-2']); g.updateNodeData((data) => { expect(data).toEqual([ - { id: 'node-1', data: {}, style: {} }, - { id: 'node-2', data: {}, style: {} }, + { id: 'node-1', data: {}, style: { zIndex: 2 } }, + { id: 'node-2', data: {}, style: { zIndex: 2 } }, ]); return [{ id: 'node-2', style: { x: 100 } }]; }); expect(g.getNodeData()).toEqual([ - { id: 'node-1', data: {}, style: {} }, - { id: 'node-2', data: {}, style: { x: 100 } }, + { id: 'node-1', data: {}, style: { zIndex: 2 } }, + { id: 'node-2', data: {}, style: { x: 100, zIndex: 2 } }, ]); g.addEdgeData((data) => { @@ -267,11 +270,11 @@ describe('Graph', () => { }); expect(g.getEdgeData().map(idOf)).toEqual(['edge-1']); g.updateEdgeData((data) => { - expect(data).toEqual([{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: {} }]); - return [{ id: 'edge-1', style: { lineWidth: 5 } }]; + expect(data).toEqual([{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { zIndex: 1 } }]); + return [{ id: 'edge-1', style: { lineWidth: 5, zIndex: 1 } }]; }); expect(g.getEdgeData()).toEqual([ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { lineWidth: 5 } }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { lineWidth: 5, zIndex: 1 } }, ]); g.addComboData((data) => { @@ -280,10 +283,10 @@ describe('Graph', () => { }); expect(g.getComboData().map(idOf)).toEqual(['combo-1']); g.updateComboData((data) => { - expect(data).toEqual([{ id: 'combo-1', data: {}, style: {} }]); + expect(data).toEqual([{ id: 'combo-1', data: {}, style: { zIndex: 0 } }]); return [{ id: 'combo-1', style: { stroke: 'red' } }]; }); - expect(g.getComboData()).toEqual([{ id: 'combo-1', data: {}, style: { stroke: 'red' } }]); + expect(g.getComboData()).toEqual([{ id: 'combo-1', data: {}, style: { stroke: 'red', zIndex: 0 } }]); g.removeEdgeData((data) => { expect(data.length).toBe(1); @@ -325,7 +328,7 @@ describe('Graph', () => { }); it('getNeighborNodesData', () => { - expect(graph.getNeighborNodesData('node-1')).toEqual([{ id: 'node-2', data: {}, style: {} }]); + expect(graph.getNeighborNodesData('node-1')).toEqual([{ id: 'node-2', data: {}, style: { zIndex: 2 } }]); }); it('getParentData', () => { @@ -374,7 +377,7 @@ describe('Graph', () => { expect(graph.getElementState('node-1')).toEqual(['selected']); expect(graph.getElementState('node-2')).toEqual([]); expect(graph.getElementDataByState('node', 'selected')).toEqual([ - { id: 'node-1', data: {}, style: {}, states: ['selected'] }, + { id: 'node-1', data: {}, style: { zIndex: 2 }, states: ['selected'] }, ]); }); diff --git a/packages/g6/src/elements/combos/base-combo.ts b/packages/g6/src/elements/combos/base-combo.ts index eb5b2de2c42..bffdd9c8d58 100644 --- a/packages/g6/src/elements/combos/base-combo.ts +++ b/packages/g6/src/elements/combos/base-combo.ts @@ -1,6 +1,5 @@ import { AABB, BaseStyleProps, DisplayObject, DisplayObjectConfig, Group } from '@antv/g'; import { isFunction } from '@antv/util'; -import { COMBO_KEY } from '../../constants'; import type { CollapsedMarkerStyleProps, Combo, @@ -196,11 +195,6 @@ export abstract class BaseCombo): number { - const ancestors = this.context.model.getAncestorsData(this.id, COMBO_KEY) || []; - return ancestors.length; - } - public getComboPosition(attributes: Required): Point { const { x = 0, y = 0, collapsed, context, childrenData = [] } = attributes; @@ -223,10 +217,9 @@ export abstract class BaseCombo) { - const { zIndex = this.getComboZIndex(attributes) } = attributes; const [x, y] = this.getComboPosition(attributes); // x/y will be used to calculate position later. - return { x, y, transform: [['translate', x, y]], zIndex }; + return { x, y, transform: [['translate', x, y]] }; } protected updateComboPosition(attributes: Required) { diff --git a/packages/g6/src/runtime/data.ts b/packages/g6/src/runtime/data.ts index a306dbb719a..07fece74904 100644 --- a/packages/g6/src/runtime/data.ts +++ b/packages/g6/src/runtime/data.ts @@ -1,5 +1,5 @@ import { Graph as GraphLib } from '@antv/graphlib'; -import { get, isUndefined, set, uniq } from '@antv/util'; +import { isNumber, isUndefined, uniq } from '@antv/util'; import { COMBO_KEY, ChangeType, TREE_KEY } from '../constants'; import type { ComboData, EdgeData, GraphData, NodeData } from '../spec'; import type { @@ -104,6 +104,10 @@ export class DataController { this.batchCount--; } + protected isBatching() { + return this.batchCount > 0; + } + /** * 执行操作而不会留下记录 * @@ -301,23 +305,28 @@ export class DataController { const comboDiff = arrayDiff(originalCombos, modifiedCombos, (combo) => idOf(combo), isElementDataEqual); this.batch(() => { - this.addData({ + const dataToAdd = { nodes: nodeDiff.enter, edges: edgeDiff.enter, combos: comboDiff.enter, - }); + }; + this.addData(dataToAdd); + this.computeZIndex(dataToAdd, 'add', true); - this.updateData({ + const dataToUpdate = { nodes: nodeDiff.update, edges: edgeDiff.update, combos: comboDiff.update, - }); + }; + this.updateData(dataToUpdate); + this.computeZIndex(dataToUpdate, 'update', true); - this.removeData({ + const dataToRemove = { nodes: nodeDiff.exit.map(idOf), edges: edgeDiff.exit.map(idOf), combos: comboDiff.exit.map(idOf), - }); + }; + this.removeData(dataToRemove); }); } @@ -329,6 +338,7 @@ export class DataController { this.addNodeData(nodes); this.addEdgeData(edges); }); + this.computeZIndex(data, 'add'); } public addNodeData(nodes: NodeData[] = []) { @@ -340,6 +350,8 @@ export class DataController { }), ); this.updateNodeLikeHierarchy(nodes); + + this.computeZIndex({ nodes }, 'add'); } public addEdgeData(edges: EdgeData[] = []) { @@ -350,6 +362,8 @@ export class DataController { return toGraphlibData(edge); }), ); + + this.computeZIndex({ edges }, 'add'); } public addComboData(combos: ComboData[] = []) { @@ -369,6 +383,8 @@ export class DataController { ); this.updateNodeLikeHierarchy(combos); + + this.computeZIndex({ combos }, 'add'); } public addChildrenData(parentId: ID, childrenData: NodeData[]) { @@ -379,6 +395,97 @@ export class DataController { this.addEdgeData(childrenId.map((childId) => ({ source: parentId, target: childId }))); } + /** + * 计算 zIndex + * + * Calculate zIndex + * @param data - 新增的数据 | newly added data + * @param type - 操作类型 | operation type + * @param force - 忽略批处理 | ignore batch processing + * @remarks + * 调用该函数的情况： + * - 新增元素 + * - 更新节点/组合的 combo + * - 更新节点的 children + */ + protected computeZIndex(data: PartialGraphData, type: 'add' | 'update', force = false) { + if (!force && this.isBatching()) return; + this.batch(() => { + const { nodes = [], edges = [], combos = [] } = data; + + combos.forEach((combo) => { + const id = idOf(combo); + if (type === 'add' && isNumber(combo.style?.zIndex)) return; + if (type === 'update' && !('combo' in combo)) return; + + const ancestors = this.getAncestorsData(id, COMBO_KEY); + const zIndex = ancestors.length ? (ancestors[0].style?.zIndex ?? 0) + 1 : 0; + + this.preventUpdateNodeLikeHierarchy(() => { + this.updateComboData([{ id, style: { zIndex } }]); + }); + }); + + for (let index = 0; index < nodes.length; index++) { + const node = nodes[index]; + const id = idOf(node); + if (type === 'add' && isNumber(node.style?.zIndex)) continue; + if (type === 'update' && !('combo' in node) && !('children' in node)) continue; + + const ancestors = this.getAncestorsData(id, COMBO_KEY); + const zIndex = ancestors.length ? (ancestors[0].style?.zIndex ?? 0) + 2 : 2; + + this.preventUpdateNodeLikeHierarchy(() => { + this.updateNodeData([{ id, style: { zIndex } }]); + }); + } + + edges.forEach((edge) => { + if (isNumber(edge.style?.zIndex)) return; + + let { id, source, target } = edge; + if (!id) id = idOf(edge); + else { + const datum = this.getEdgeDatum(id); + source = datum.source; + target = datum.target; + } + + if (!source || !target) return; + + const sourceType = this.getElementType(source); + const targetType = this.getElementType(target); + + const sourceZIndex = this.getNodeLikeDatum(source)?.style?.zIndex; + const targetZIndex = this.getNodeLikeDatum(target)?.style?.zIndex; + + let zIndex = 1; + if (sourceType === 'node' && targetType === 'node') { + const sZ = sourceZIndex ?? 2; + const tZ = targetZIndex ?? 2; + // 边的 zIndex 不能大于其任何一个端点 + // The zIndex of the edge cannot be greater than any of its endpoints + zIndex = Math.min(sZ, tZ) - 1; + } else if (sourceType === 'combo' && targetType === 'combo') { + zIndex = Math.max(sourceZIndex ?? 0, targetZIndex ?? 0) + 1; + } else if (sourceType === 'node' && targetType === 'combo') { + const sZ = sourceZIndex ?? 2; + // 边的 zIndex 不能大于其源节点，但可以大于目标 combo + // The zIndex of the edge cannot be greater than its source node, but can be greater than the target combo + zIndex = sZ - 1; + } else { + // sourceType === 'combo' && targetType === 'node' + const tZ = targetZIndex ?? 2; + // 边的 zIndex 不能大于其目标节点，但可以大于源 combo + // The zIndex of the edge cannot be greater than its target node, but can be greater than the source combo + zIndex = tZ - 1; + } + + this.updateEdgeData([{ id: idOf(edge), style: { zIndex } }]); + }); + }); + } + protected updateNodeLikeHierarchy(data: NodeLikeData[]) { if (!this.enableUpdateNodeLikeHierarchy) return; const { model } = this; @@ -427,6 +534,7 @@ export class DataController { this.updateComboData(combos); this.updateEdgeData(edges); }); + this.computeZIndex(data, 'update'); } public updateNodeData(nodes: PartialNodeLikeData[] = []) { @@ -447,6 +555,8 @@ export class DataController { this.updateNodeLikeHierarchy(modifiedNodes); }); + + this.computeZIndex({ nodes }, 'update'); } /** @@ -496,6 +606,8 @@ export class DataController { model.mergeEdgeData(id, updatedData); }); }); + + this.computeZIndex({ edges }, 'update'); } public updateComboData(combos: PartialNodeLikeData[] = []) { @@ -516,6 +628,8 @@ export class DataController { this.updateNodeLikeHierarchy(modifiedCombos); }); + + this.computeZIndex({ combos }, 'update'); } /** @@ -532,15 +646,6 @@ export class DataController { const elementData = this.getNodeLikeDatum(id); const originalParentId = parentIdOf(elementData); - if (parent) { - const parentData = this.getNodeLikeDatum(parent); - if (parentData.style?.zIndex !== undefined) { - const zIndex = get(parentData, ['style', 'zIndex'], 0) + (this.isCombo(parent) ? 1 : 0); - set(elementData, ['style', 'zIndex'], zIndex); - } - } - // Sync data - if (originalParentId !== parent && hierarchyKey === COMBO_KEY) { const modifiedDatum = { id, combo: parent }; if (this.isCombo(id)) this.syncComboDatum(modifiedDatum); diff --git a/packages/g6/src/runtime/element.ts b/packages/g6/src/runtime/element.ts index 7a3c29f8045..e77930f6893 100644 --- a/packages/g6/src/runtime/element.ts +++ b/packages/g6/src/runtime/element.ts @@ -825,9 +825,12 @@ export class ElementController { ); } } + + const defaultValue = { node: 2, edge: 1, combo: 0 }; + return ( Math.max( - 0, + defaultValue[elementType] - 1, ...Object.values(data) .flat() .map((datum) => { From c6634355fe4a94a0a82396c3d6fb24c496c65c48 Mon Sep 17 00:00:00 2001 From: antv Date: Tue, 12 Nov 2024 22:08:00 +0800 Subject: [PATCH 3/4] refactor: adjust zIndex logic --- .../bugs/api-expand-element-z-index.spec.ts | 16 +- .../element-set-position-to-origin.spec.ts | 6 +- .../bugs/model-add-edge-in-combo.spec.ts | 13 +- .../bugs/plugin-history-align-fields.spec.ts | 4 +- .../__tests__/demos/element-position-combo.ts | 1 + .../click-custom-edge4.svg | 20 +- .../click-edge1-move.svg | 10 +- .../click-edge4-combo.svg | 20 +- .../drag-custom-edge4.svg | 20 +- .../drag-edge1-move.svg | 10 +- .../drag-edge4-combo.svg | 20 +- .../collapse-combo-1-expand-combo-2-0.svg | 24 +- .../collapse-combo-1-expand-combo-2-1000.svg | 24 +- .../collapse-combo-1-expand-combo-2-500.svg | 24 +- .../collapse-combo-2-0.svg | 24 +- .../collapse-combo-2-500.svg | 24 +- .../collapse-expand-combo/default.svg | 24 +- .../expand-combo-1-0.svg | 24 +- .../expand-combo-1-1000.svg | 24 +- .../expand-combo-1-500.svg | 24 +- .../behaviors/collapse-expand/default.svg | 24 +- .../collapse-expand/expand-combo-1.svg | 24 +- .../behaviors/drag-element-combo/default.svg | 24 +- .../drag-node-2-after-drop-out.svg | 24 +- .../drag-node-2-before-drop-out.svg | 24 +- .../behaviors/drag-element/after-drag.svg | 40 +-- .../behaviors/drag-element/default.svg | 40 +-- .../drag-combo-shadow-after-drag.svg | 20 +- .../drag-element/drag-combo-shadow.svg | 20 +- .../behaviors/drag-element/drag-combo.svg | 20 +- .../behaviors/drag-element/hideEdge-both.svg | 50 ++-- .../behaviors/drag-element/hideEdge-in.svg | 40 +-- .../behaviors/drag-element/hideEdge-out.svg | 30 +-- .../drag-element/shadow-after-drag.svg | 20 +- .../behaviors/drag-element/shadow.svg | 20 +- .../behaviors/focus-element/default.svg | 40 +-- .../behaviors/focus-element/focus-combo.svg | 40 +-- .../behaviors/focus-element/focus-node-1.svg | 40 +-- .../behaviors/focus-element/focus-node-2.svg | 40 +-- .../behaviors/focus-element/focus-node-3.svg | 40 +-- .../behaviors/focus-element/focus-node-4.svg | 40 +-- .../drag-combo-A-over-C.svg | 152 +++++------ .../drag-combo-C-over-A.svg | 128 ++++----- .../element-combo-drag/collapse-combo-0.svg | 10 +- .../bugs/element-combo-drag/default.svg | 10 +- .../default.svg | 10 +- .../update collapsed combo.svg | 10 +- .../snapshots/elements/combo/combo-zIndex.svg | 10 +- .../snapshots/elements/combo/default.svg | 24 +- .../elements/combo/rect-collapse-center.svg | 24 +- .../elements/position-combo/default.svg | 32 +-- .../snapshots/elements/z-index/default.svg | 72 ++--- .../elements/z-index/drag-combo-1.svg | 24 +- .../elements/z-index/drag-combo-2.svg | 24 +- .../elements/z-index/drag-combo-3.svg | 44 ++-- .../elements/z-index/drag-overlap-combo-3.svg | 44 ++-- .../z-index/drag-overlap-combo-4(1).svg | 20 +- .../z-index/drag-overlap-combo-4(2).svg | 20 +- .../z-index/drag-overlap-combo-4(3).svg | 20 +- .../elements/z-index/drag-overlap-node-1.svg | 72 ++--- .../elements/z-index/drag-overlap-node-2.svg | 66 ++--- .../elements/z-index/drag-overlap-node-3.svg | 42 +-- .../layouts/combo-layout/combined.svg | 246 +++++++++--------- .../layouts/dagre/antv-flow-combo.svg | 156 +++++------ .../history/plugin-history/addData-redo.svg | 48 ++-- .../history/plugin-history/addData-undo.svg | 24 +- .../history/plugin-history/addData.svg | 48 ++-- .../history/plugin-history/collapse-undo.svg | 24 +- .../plugin-history/deleteData-undo.svg | 14 +- .../history/plugin-history/expand-redo.svg | 24 +- .../history/plugin-history/expand-undo.svg | 24 +- .../plugins/history/plugin-history/expand.svg | 24 +- .../plugin-history/hideElement-redo.svg | 24 +- .../plugin-history/hideElement-undo.svg | 24 +- .../history/plugin-history/hideElement.svg | 24 +- .../plugin-history/setElementsState-redo.svg | 30 +-- .../plugin-history/setElementsState-undo.svg | 24 +- .../plugin-history/setElementsState.svg | 30 +-- .../plugin-history/updateData-redo.svg | 24 +- .../plugin-history/updateData-undo.svg | 24 +- .../history/plugin-history/updateData.svg | 24 +- .../snapshots/plugins/tooltip/combo.svg | 240 ++++++++--------- .../snapshots/plugins/tooltip/edge.svg | 240 ++++++++--------- .../snapshots/plugins/tooltip/hover.svg | 240 ++++++++--------- .../snapshots/plugins/tooltip/node.svg | 240 ++++++++--------- .../plugins/tooltip/show-tooltip-by-id.svg | 240 ++++++++--------- .../snapshots/runtime/element/default.svg | 30 +-- .../runtime/graph/graph/after-layout.svg | 10 +- .../runtime/graph/graph/after-rotate-90.svg | 10 +- .../graph/graph/after-translate-node-1.svg | 10 +- .../runtime/graph/graph/after-translate.svg | 10 +- .../runtime/graph/graph/after-zoom-2.svg | 10 +- .../g6/__tests__/unit/runtime/data.spec.ts | 168 ++++++------ .../unit/runtime/element/z-index.spec.ts | 2 +- .../unit/runtime/graph/graph.spec.ts | 54 ++-- .../g6/__tests__/unit/utils/z-index.spec.ts | 9 + .../g6/src/plugins/edge-filter-lens/index.ts | 1 + packages/g6/src/runtime/data.ts | 98 ++++--- packages/g6/src/runtime/element.ts | 63 +---- packages/g6/src/runtime/graph.ts | 10 +- packages/g6/src/utils/z-index.ts | 11 + 101 files changed, 2213 insertions(+), 2217 deletions(-) create mode 100644 packages/g6/__tests__/unit/utils/z-index.spec.ts create mode 100644 packages/g6/src/utils/z-index.ts diff --git a/packages/g6/__tests__/bugs/api-expand-element-z-index.spec.ts b/packages/g6/__tests__/bugs/api-expand-element-z-index.spec.ts index 4e2d22e0f2f..a23cc1ba976 100644 --- a/packages/g6/__tests__/bugs/api-expand-element-z-index.spec.ts +++ b/packages/g6/__tests__/bugs/api-expand-element-z-index.spec.ts @@ -22,23 +22,23 @@ describe('api expand element z-index', () => { }; expect(getZIndexOf('combo-1')).toBe(0); - // expect(getZIndexOf('combo-2')).toBe(1); // not exists because it is collapsed - expect(getZIndexOf('node-1')).toBe(2); - // expect(getZIndexOf('node-2')).toBe(1 + 2); + 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(getZIndexOf('node-1')).toBe(2); + expect(getZIndexOf('node-1')).toBe(3); graph.frontElement('combo-1'); - expect(getZIndexOf('combo-1')).toBe(3); + expect(getZIndexOf('combo-1')).toBe(4); await graph.expandElement('combo-1', false); await graph.expandElement('combo-2', false); - expect(getZIndexOf('combo-1')).toBe(3); - expect(getZIndexOf('combo-2')).toBe(4); - expect(getZIndexOf('node-2')).toBe(4 + 2); + expect(getZIndexOf('combo-1')).toBe(4); + expect(getZIndexOf('combo-2')).toBe(5); + expect(getZIndexOf('node-2')).toBe(6); }); }); diff --git a/packages/g6/__tests__/bugs/element-set-position-to-origin.spec.ts b/packages/g6/__tests__/bugs/element-set-position-to-origin.spec.ts index 041cd020299..d00ccf1317f 100644 --- a/packages/g6/__tests__/bugs/element-set-position-to-origin.spec.ts +++ b/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({ zIndex: 2 }); + 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, zIndex: 2 }); + 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, zIndex: 2 }); + 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)'); }); }); diff --git a/packages/g6/__tests__/bugs/model-add-edge-in-combo.spec.ts b/packages/g6/__tests__/bugs/model-add-edge-in-combo.spec.ts index 8e25312c30b..cf4748da657 100644 --- a/packages/g6/__tests__/bugs/model-add-edge-in-combo.spec.ts +++ b/packages/g6/__tests__/bugs/model-add-edge-in-combo.spec.ts @@ -14,12 +14,15 @@ describe('add edge in combo', () => { 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(1); + expect(graph.getEdgeData('edge').style?.zIndex).toBe(0); // @ts-expect-error skip the type check - expect(graph.context.element?.getElement('edge')?.style.zIndex).toBe(1); + expect(graph.context.element?.getElement('edge')?.style.zIndex).toBe(0); }); it('add edge in combo with zIndex', async () => { @@ -41,13 +44,13 @@ describe('add edge in combo', () => { 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 + 2); + 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 + 1); + 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 + 1); + expect(graph.context.element?.getElement('edge')?.style.zIndex).toBe(5 + 1); }); }); diff --git a/packages/g6/__tests__/bugs/plugin-history-align-fields.spec.ts b/packages/g6/__tests__/bugs/plugin-history-align-fields.spec.ts index ddc3738c9ef..2be8a231b4f 100644 --- a/packages/g6/__tests__/bugs/plugin-history-align-fields.spec.ts +++ b/packages/g6/__tests__/bugs/plugin-history-align-fields.spec.ts @@ -24,7 +24,7 @@ describe('bug: plugin-history-align-fields', () => { await graph.render(); - expect(graph.getNodeData('node-1').style).toEqual({ x: 50, y: 100, zIndex: 2 }); + 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, @@ -32,7 +32,7 @@ describe('bug: plugin-history-align-fields', () => { }); await graph.translateElementBy('node-1', [100, 100]); - expect(graph.getNodeData('node-1').style).toEqual({ x: 150, y: 200, z: 0, zIndex: 2 }); + 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, diff --git a/packages/g6/__tests__/demos/element-position-combo.ts b/packages/g6/__tests__/demos/element-position-combo.ts index 26b0d0b85e9..5230a183b93 100644 --- a/packages/g6/__tests__/demos/element-position-combo.ts +++ b/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(); diff --git a/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-click/click-custom-edge4.svg b/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-click/click-custom-edge4.svg index 63904589b9d..0125d393a8c 100644 --- a/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-click/click-custom-edge4.svg +++ b/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-click/click-custom-edge4.svg @@ -3,6 +3,16 @@ + + + + + + + + + + @@ -43,16 +53,6 @@ - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-click/click-edge1-move.svg b/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-click/click-edge1-move.svg index 41a7a8e7fc8..5a29e5ec67d 100644 --- a/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-click/click-edge1-move.svg +++ b/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-click/click-edge1-move.svg @@ -13,6 +13,11 @@ + + + + + @@ -38,11 +43,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-click/click-edge4-combo.svg b/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-click/click-edge4-combo.svg index a214bfc6202..5c0705cd4fd 100644 --- a/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-click/click-edge4-combo.svg +++ b/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-click/click-edge4-combo.svg @@ -3,6 +3,16 @@ + + + + + + + + + + @@ -43,16 +53,6 @@ - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-drag/drag-custom-edge4.svg b/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-drag/drag-custom-edge4.svg index 63904589b9d..0125d393a8c 100644 --- a/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-drag/drag-custom-edge4.svg +++ b/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-drag/drag-custom-edge4.svg @@ -3,6 +3,16 @@ + + + + + + + + + + @@ -43,16 +53,6 @@ - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-drag/drag-edge1-move.svg b/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-drag/drag-edge1-move.svg index 41a7a8e7fc8..5a29e5ec67d 100644 --- a/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-drag/drag-edge1-move.svg +++ b/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-drag/drag-edge1-move.svg @@ -13,6 +13,11 @@ + + + + + @@ -38,11 +43,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-drag/drag-edge4-combo.svg b/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-drag/drag-edge4-combo.svg index a214bfc6202..5c0705cd4fd 100644 --- a/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-drag/drag-edge4-combo.svg +++ b/packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-drag/drag-edge4-combo.svg @@ -3,6 +3,16 @@ + + + + + + + + + + @@ -43,16 +53,6 @@ - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-1-expand-combo-2-0.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-1-expand-combo-2-0.svg index 0b7a718cd3d..0ce37da559d 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-1-expand-combo-2-0.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-1-expand-combo-2-0.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -41,18 +53,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-1-expand-combo-2-1000.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-1-expand-combo-2-1000.svg index abb95edadd5..23458b9207e 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-1-expand-combo-2-1000.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-1-expand-combo-2-1000.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -41,18 +53,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-1-expand-combo-2-500.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-1-expand-combo-2-500.svg index 61d3174f3b2..514e01cef32 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-1-expand-combo-2-500.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-1-expand-combo-2-500.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -41,18 +53,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-0.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-0.svg index a324692beee..df0b16a7c0d 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-0.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-0.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -34,18 +46,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-500.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-500.svg index aa9b5d3e8d4..de303260276 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-500.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/collapse-combo-2-500.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -34,18 +46,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/default.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/default.svg index 3f694ad964c..72001fb0c84 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/default.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/default.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -41,18 +53,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-0.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-0.svg index 1d81e51d553..8febbded7e9 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-0.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-0.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -34,18 +46,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-1000.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-1000.svg index 9345a8a19b0..1bcd05792c0 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-1000.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-1000.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -34,18 +46,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-500.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-500.svg index 6ee3700f06e..56c8dfa8090 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-500.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand-combo/expand-combo-1-500.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -34,18 +46,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand/default.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand/default.svg index 3f694ad964c..72001fb0c84 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand/default.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand/default.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -41,18 +53,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/collapse-expand/expand-combo-1.svg b/packages/g6/__tests__/snapshots/behaviors/collapse-expand/expand-combo-1.svg index 49d0781e1be..21b6585d98c 100644 --- a/packages/g6/__tests__/snapshots/behaviors/collapse-expand/expand-combo-1.svg +++ b/packages/g6/__tests__/snapshots/behaviors/collapse-expand/expand-combo-1.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -34,18 +46,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/default.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/default.svg index a324692beee..df0b16a7c0d 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/default.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/default.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -34,18 +46,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-after-drop-out.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-after-drop-out.svg index 3b8848eea5a..a9d56a966aa 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-after-drop-out.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-after-drop-out.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -34,18 +46,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-before-drop-out.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-before-drop-out.svg index 69ee3a47223..ef9d27079b6 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-before-drop-out.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element-combo/drag-node-2-before-drop-out.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -34,18 +46,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/after-drag.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/after-drag.svg index 6d629468343..7e698de7ccf 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/after-drag.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/after-drag.svg @@ -3,6 +3,26 @@ + + + + + + + + + + + + + + + + + + + + @@ -28,16 +48,6 @@ - - - - - - - - - - @@ -48,21 +58,11 @@ - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/default.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/default.svg index 41dabab50cf..62c1d23e3bf 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/default.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/default.svg @@ -3,6 +3,26 @@ + + + + + + + + + + + + + + + + + + + + @@ -28,16 +48,6 @@ - - - - - - - - - - @@ -48,21 +58,11 @@ - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow-after-drag.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow-after-drag.svg index 6000bb43c35..6ee4bf71dd8 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow-after-drag.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow-after-drag.svg @@ -3,6 +3,11 @@ + + + + + @@ -23,11 +28,6 @@ - - - - - @@ -48,6 +48,11 @@ + + + + + @@ -58,11 +63,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow.svg index 05504a4233e..f4ebfcae045 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo-shadow.svg @@ -3,6 +3,11 @@ + + + + + @@ -23,11 +28,6 @@ - - - - - @@ -48,6 +48,11 @@ + + + + + @@ -58,11 +63,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo.svg index fe57a5c134e..c7df908399c 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/drag-combo.svg @@ -3,6 +3,11 @@ + + + + + @@ -23,11 +28,6 @@ - - - - - @@ -48,6 +48,11 @@ + + + + + @@ -58,11 +63,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-both.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-both.svg index c2a4629a684..d6532496de3 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-both.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-both.svg @@ -3,6 +3,26 @@ + + + + + + + + + + + + + + + + + + + + @@ -18,6 +38,11 @@ + + + + + @@ -28,16 +53,6 @@ - - - - - - - - - - @@ -48,21 +63,6 @@ - - - - - - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-in.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-in.svg index 0e6b6b98c37..8129d8338a7 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-in.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-in.svg @@ -3,6 +3,21 @@ + + + + + + + + + + + + + + + @@ -18,6 +33,11 @@ + + + + + @@ -28,16 +48,6 @@ - - - - - - - - - - @@ -48,16 +58,6 @@ - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-out.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-out.svg index b6c9017851c..1cefa8205fe 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-out.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/hideEdge-out.svg @@ -3,6 +3,11 @@ + + + + + @@ -18,6 +23,11 @@ + + + + + @@ -28,6 +38,11 @@ + + + + + @@ -38,16 +53,6 @@ - - - - - - - - - - @@ -58,11 +63,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow-after-drag.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow-after-drag.svg index 0196411cd55..a5c9392bd38 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow-after-drag.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow-after-drag.svg @@ -3,6 +3,11 @@ + + + + + @@ -18,6 +23,11 @@ + + + + + @@ -38,16 +48,6 @@ - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow.svg b/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow.svg index 2e7da7f9c39..917d51a4396 100644 --- a/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow.svg +++ b/packages/g6/__tests__/snapshots/behaviors/drag-element/shadow.svg @@ -3,6 +3,11 @@ + + + + + @@ -18,6 +23,11 @@ + + + + + @@ -38,16 +48,6 @@ - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/focus-element/default.svg b/packages/g6/__tests__/snapshots/behaviors/focus-element/default.svg index 41dabab50cf..62c1d23e3bf 100644 --- a/packages/g6/__tests__/snapshots/behaviors/focus-element/default.svg +++ b/packages/g6/__tests__/snapshots/behaviors/focus-element/default.svg @@ -3,6 +3,26 @@ + + + + + + + + + + + + + + + + + + + + @@ -28,16 +48,6 @@ - - - - - - - - - - @@ -48,21 +58,11 @@ - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-combo.svg b/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-combo.svg index 7e3f04b44dc..e8e267214be 100644 --- a/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-combo.svg +++ b/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-combo.svg @@ -3,6 +3,26 @@ + + + + + + + + + + + + + + + + + + + + @@ -28,16 +48,6 @@ - - - - - - - - - - @@ -48,21 +58,11 @@ - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-1.svg b/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-1.svg index b25f57bb75c..7b89f6551d3 100644 --- a/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-1.svg +++ b/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-1.svg @@ -3,6 +3,26 @@ + + + + + + + + + + + + + + + + + + + + @@ -28,16 +48,6 @@ - - - - - - - - - - @@ -48,21 +58,11 @@ - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-2.svg b/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-2.svg index 48b3573ef41..5efc1af78cb 100644 --- a/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-2.svg +++ b/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-2.svg @@ -3,6 +3,26 @@ + + + + + + + + + + + + + + + + + + + + @@ -28,16 +48,6 @@ - - - - - - - - - - @@ -48,21 +58,11 @@ - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-3.svg b/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-3.svg index 614636756bb..ead48e2c5cb 100644 --- a/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-3.svg +++ b/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-3.svg @@ -3,6 +3,26 @@ + + + + + + + + + + + + + + + + + + + + @@ -28,16 +48,6 @@ - - - - - - - - - - @@ -48,21 +58,11 @@ - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-4.svg b/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-4.svg index db3d12f3307..5ae21e03254 100644 --- a/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-4.svg +++ b/packages/g6/__tests__/snapshots/behaviors/focus-element/focus-node-4.svg @@ -3,6 +3,26 @@ + + + + + + + + + + + + + + + + + + + + @@ -28,16 +48,6 @@ - - - - - - - - - - @@ -48,21 +58,11 @@ - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/bugs/behaviors-drag-element-combo/drag-combo-A-over-C.svg b/packages/g6/__tests__/snapshots/bugs/behaviors-drag-element-combo/drag-combo-A-over-C.svg index 6dc8c5abc04..850efa74a3f 100644 --- a/packages/g6/__tests__/snapshots/bugs/behaviors-drag-element-combo/drag-combo-A-over-C.svg +++ b/packages/g6/__tests__/snapshots/bugs/behaviors-drag-element-combo/drag-combo-A-over-C.svg @@ -3,30 +3,6 @@ - - - - - - - - B - - - - - - - - - - - - C - - - - @@ -50,19 +26,91 @@ - + - + + + + + + + + + 0 + + + + + + + + + + + + 1 + + + + + + + + + + + + 2 + + + + + + + + + + + + 3 + + + + + + + + + + + + B + + + + + + + + + + + + C + + + + - + - + @@ -147,54 +195,6 @@ - - - - - - - - 0 - - - - - - - - - - - - 1 - - - - - - - - - - - - 2 - - - - - - - - - - - - 3 - - - - diff --git a/packages/g6/__tests__/snapshots/bugs/behaviors-drag-element-combo/drag-combo-C-over-A.svg b/packages/g6/__tests__/snapshots/bugs/behaviors-drag-element-combo/drag-combo-C-over-A.svg index 62e44bb38fc..2319b5caad3 100644 --- a/packages/g6/__tests__/snapshots/bugs/behaviors-drag-element-combo/drag-combo-C-over-A.svg +++ b/packages/g6/__tests__/snapshots/bugs/behaviors-drag-element-combo/drag-combo-C-over-A.svg @@ -3,18 +3,6 @@ - - - - - - - - B - - - - @@ -38,19 +26,79 @@ - + - + + + + + + + + + 0 + + + + + + + + + + + + 1 + + + + + + + + + + + + 2 + + + + + + + + + + + + 3 + + + + + + + + + + + + B + + + + - + - + @@ -135,54 +183,6 @@ - - - - - - - - 0 - - - - - - - - - - - - 1 - - - - - - - - - - - - 2 - - - - - - - - - - - - 3 - - - - diff --git a/packages/g6/__tests__/snapshots/bugs/element-combo-drag/collapse-combo-0.svg b/packages/g6/__tests__/snapshots/bugs/element-combo-drag/collapse-combo-0.svg index 8ea5736c48f..7b65a3ab8fd 100644 --- a/packages/g6/__tests__/snapshots/bugs/element-combo-drag/collapse-combo-0.svg +++ b/packages/g6/__tests__/snapshots/bugs/element-combo-drag/collapse-combo-0.svg @@ -3,6 +3,11 @@ + + + + + @@ -22,11 +27,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/bugs/element-combo-drag/default.svg b/packages/g6/__tests__/snapshots/bugs/element-combo-drag/default.svg index fa33733f891..ffb99440db4 100644 --- a/packages/g6/__tests__/snapshots/bugs/element-combo-drag/default.svg +++ b/packages/g6/__tests__/snapshots/bugs/element-combo-drag/default.svg @@ -3,6 +3,11 @@ + + + + + @@ -25,11 +30,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/bugs/plugin-minimap-combo-collapsed/default.svg b/packages/g6/__tests__/snapshots/bugs/plugin-minimap-combo-collapsed/default.svg index 7ba0fe4b9c8..6fd77d05878 100644 --- a/packages/g6/__tests__/snapshots/bugs/plugin-minimap-combo-collapsed/default.svg +++ b/packages/g6/__tests__/snapshots/bugs/plugin-minimap-combo-collapsed/default.svg @@ -3,6 +3,11 @@ + + + + + @@ -20,11 +25,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/bugs/plugin-minimap-combo-collapsed/update collapsed combo.svg b/packages/g6/__tests__/snapshots/bugs/plugin-minimap-combo-collapsed/update collapsed combo.svg index b840d58f65b..75ca0d06bfc 100644 --- a/packages/g6/__tests__/snapshots/bugs/plugin-minimap-combo-collapsed/update collapsed combo.svg +++ b/packages/g6/__tests__/snapshots/bugs/plugin-minimap-combo-collapsed/update collapsed combo.svg @@ -3,6 +3,11 @@ + + + + + @@ -22,11 +27,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/elements/combo/combo-zIndex.svg b/packages/g6/__tests__/snapshots/elements/combo/combo-zIndex.svg index 954c5d271f9..845130d763c 100644 --- a/packages/g6/__tests__/snapshots/elements/combo/combo-zIndex.svg +++ b/packages/g6/__tests__/snapshots/elements/combo/combo-zIndex.svg @@ -8,6 +8,11 @@ + + + + + @@ -20,11 +25,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/elements/combo/default.svg b/packages/g6/__tests__/snapshots/elements/combo/default.svg index fb76d74fd65..6e48887bfe3 100644 --- a/packages/g6/__tests__/snapshots/elements/combo/default.svg +++ b/packages/g6/__tests__/snapshots/elements/combo/default.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -34,18 +46,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/elements/combo/rect-collapse-center.svg b/packages/g6/__tests__/snapshots/elements/combo/rect-collapse-center.svg index ba319e15c7c..18530115415 100644 --- a/packages/g6/__tests__/snapshots/elements/combo/rect-collapse-center.svg +++ b/packages/g6/__tests__/snapshots/elements/combo/rect-collapse-center.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -34,18 +46,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/elements/position-combo/default.svg b/packages/g6/__tests__/snapshots/elements/position-combo/default.svg index 332fffab149..cfea96b2465 100644 --- a/packages/g6/__tests__/snapshots/elements/position-combo/default.svg +++ b/packages/g6/__tests__/snapshots/elements/position-combo/default.svg @@ -15,18 +15,6 @@ - - - - - - - - combo-1 - - - - @@ -39,14 +27,14 @@ - + - + - + - combo-3 + combo-1 @@ -75,6 +63,18 @@ + + + + + + + + combo-3 + + + + diff --git a/packages/g6/__tests__/snapshots/elements/z-index/default.svg b/packages/g6/__tests__/snapshots/elements/z-index/default.svg index 3c5fc5e7d3f..7967427085c 100644 --- a/packages/g6/__tests__/snapshots/elements/z-index/default.svg +++ b/packages/g6/__tests__/snapshots/elements/z-index/default.svg @@ -3,42 +3,6 @@ - - - - - - - - combo-1 - - - - - - - - - - - - combo-4 - - - - - - - - - - - - combo-2 - - - - @@ -96,6 +60,42 @@ + + + + + + + + combo-1 + + + + + + + + + + + + combo-4 + + + + + + + + + + + + combo-2 + + + + diff --git a/packages/g6/__tests__/snapshots/elements/z-index/drag-combo-1.svg b/packages/g6/__tests__/snapshots/elements/z-index/drag-combo-1.svg index 5b2efe64076..0c1922bc74a 100644 --- a/packages/g6/__tests__/snapshots/elements/z-index/drag-combo-1.svg +++ b/packages/g6/__tests__/snapshots/elements/z-index/drag-combo-1.svg @@ -3,18 +3,6 @@ - - - - - - - - combo-4 - - - - @@ -36,6 +24,18 @@ + + + + + + + + combo-4 + + + + diff --git a/packages/g6/__tests__/snapshots/elements/z-index/drag-combo-2.svg b/packages/g6/__tests__/snapshots/elements/z-index/drag-combo-2.svg index 33bf0e9533e..2709f8a220c 100644 --- a/packages/g6/__tests__/snapshots/elements/z-index/drag-combo-2.svg +++ b/packages/g6/__tests__/snapshots/elements/z-index/drag-combo-2.svg @@ -3,18 +3,6 @@ - - - - - - - - combo-4 - - - - @@ -36,6 +24,18 @@ + + + + + + + + combo-4 + + + + diff --git a/packages/g6/__tests__/snapshots/elements/z-index/drag-combo-3.svg b/packages/g6/__tests__/snapshots/elements/z-index/drag-combo-3.svg index e573c03ac3e..622ece3e294 100644 --- a/packages/g6/__tests__/snapshots/elements/z-index/drag-combo-3.svg +++ b/packages/g6/__tests__/snapshots/elements/z-index/drag-combo-3.svg @@ -3,18 +3,6 @@ - - - - - - - - combo-4 - - - - @@ -36,6 +24,18 @@ + + + + + + + + combo-4 + + + + @@ -60,26 +60,26 @@ - + - + - + - - combo-1 + + node-3 - + - + - + - - node-3 + + combo-1 diff --git a/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-3.svg b/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-3.svg index bf388aa35ff..efd00ccf21b 100644 --- a/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-3.svg +++ b/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-3.svg @@ -3,18 +3,6 @@ - - - - - - - - combo-4 - - - - @@ -36,6 +24,18 @@ + + + + + + + + combo-4 + + + + @@ -60,26 +60,26 @@ - + - + - + - - combo-1 + + node-3 - + - + - + - - node-3 + + combo-1 diff --git a/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-4(1).svg b/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-4(1).svg index e3260b627d9..320a5f851da 100644 --- a/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-4(1).svg +++ b/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-4(1).svg @@ -48,26 +48,26 @@ - + - + - + - - combo-1 + + node-3 - + - + - + - - node-3 + + combo-1 diff --git a/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-4(2).svg b/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-4(2).svg index 07f13720da6..6411eacf21d 100644 --- a/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-4(2).svg +++ b/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-4(2).svg @@ -48,26 +48,26 @@ - + - + - + - - combo-1 + + node-3 - + - + - + - - node-3 + + combo-1 diff --git a/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-4(3).svg b/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-4(3).svg index 3ca009c9382..686eabc11d2 100644 --- a/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-4(3).svg +++ b/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-combo-4(3).svg @@ -48,26 +48,26 @@ - + - + - + - - combo-1 + + node-3 - + - + - + - - node-3 + + combo-1 diff --git a/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-node-1.svg b/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-node-1.svg index f295b0b9220..8fe64673be3 100644 --- a/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-node-1.svg +++ b/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-node-1.svg @@ -3,42 +3,6 @@ - - - - - - - - combo-1 - - - - - - - - - - - - combo-4 - - - - - - - - - - - - combo-2 - - - - @@ -84,6 +48,42 @@ + + + + + + + + combo-1 + + + + + + + + + + + + combo-4 + + + + + + + + + + + + combo-2 + + + + diff --git a/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-node-2.svg b/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-node-2.svg index 94d5bd92646..95eca91589f 100644 --- a/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-node-2.svg +++ b/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-node-2.svg @@ -3,6 +3,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + node-3 + + + + @@ -39,39 +72,6 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - node-3 - - - - diff --git a/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-node-3.svg b/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-node-3.svg index 829c6b55b8c..307476250b5 100644 --- a/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-node-3.svg +++ b/packages/g6/__tests__/snapshots/elements/z-index/drag-overlap-node-3.svg @@ -3,6 +3,27 @@ + + + + + + + + + + + + + + + + + + + + + @@ -39,27 +60,6 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/g6/__tests__/snapshots/layouts/combo-layout/combined.svg b/packages/g6/__tests__/snapshots/layouts/combo-layout/combined.svg index 4f49dfcccc7..91670e023ae 100644 --- a/packages/g6/__tests__/snapshots/layouts/combo-layout/combined.svg +++ b/packages/g6/__tests__/snapshots/layouts/combo-layout/combined.svg @@ -3,6 +3,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 20 + + + + + + + + + + + + 21 + + + + + + + + + + + + 22 + + + + + + + + + + + + 25 + + + + + + + + + + + + 26 + + + + @@ -39,18 +127,6 @@ - - - - - - - - d - - - - @@ -324,13 +400,6 @@ - - - - - - - @@ -345,20 +414,6 @@ - - - - - - - - - - - - - - @@ -366,20 +421,6 @@ - - - - - - - - - - - - - - @@ -408,20 +449,6 @@ - - - - - - - - - - - - - - @@ -457,13 +484,6 @@ - - - - - - - @@ -704,148 +724,128 @@ - + - 20 + 23 - + - 21 + 24 - + - 22 + 27 - + - 23 + 28 - + - 24 + 29 - + - 25 + 30 - + - 26 + 31 - + - + - + - - 27 + + d - + + - - - - - - 28 - - + + - + + - - - - - - 29 - - + + - + + - - - - - - 30 - - + + - + + - - - - - - 31 - - + + diff --git a/packages/g6/__tests__/snapshots/layouts/dagre/antv-flow-combo.svg b/packages/g6/__tests__/snapshots/layouts/dagre/antv-flow-combo.svg index 8dcad80190d..7f39f831729 100644 --- a/packages/g6/__tests__/snapshots/layouts/dagre/antv-flow-combo.svg +++ b/packages/g6/__tests__/snapshots/layouts/dagre/antv-flow-combo.svg @@ -3,6 +3,84 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 0 + + + + + + + + + + + + 1 + + + + + + + + + + + + 2 + + + + + + + + + + + + 3 + + + + @@ -39,26 +117,6 @@ - - - - - - - - - - - - - - - - - - - - @@ -69,16 +127,6 @@ - - - - - - - - - - @@ -159,54 +207,6 @@ - - - - - - - - 0 - - - - - - - - - - - - 1 - - - - - - - - - - - - 2 - - - - - - - - - - - - 3 - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/addData-redo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/addData-redo.svg index bb969f1b69c..5655957cd92 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/addData-redo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/addData-redo.svg @@ -15,32 +15,18 @@ - + - - - - - - combo-1 - - + - + - - 2 + + node-5 - - - - - - - @@ -60,18 +46,32 @@ - + - + - + - - node-5 + + combo-1 + + + + + + + 2 + + + + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/addData-undo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/addData-undo.svg index d1737993105..1f6c1653719 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/addData-undo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/addData-undo.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -41,18 +53,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/addData.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/addData.svg index bb969f1b69c..5655957cd92 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/addData.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/addData.svg @@ -15,32 +15,18 @@ - + - - - - - - combo-1 - - + - + - - 2 + + node-5 - - - - - - - @@ -60,18 +46,32 @@ - + - + - + - - node-5 + + combo-1 + + + + + + + 2 + + + + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/collapse-undo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/collapse-undo.svg index 6e7f8208603..a3da050f25c 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/collapse-undo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/collapse-undo.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -41,18 +53,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/deleteData-undo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/deleteData-undo.svg index d1737993105..8a506db804a 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/deleteData-undo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/deleteData-undo.svg @@ -34,13 +34,6 @@ - - - - - - - @@ -53,6 +46,13 @@ + + + + + + + diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand-redo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand-redo.svg index 49d0781e1be..21b6585d98c 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand-redo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand-redo.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -34,18 +46,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand-undo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand-undo.svg index 6e7f8208603..a3da050f25c 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand-undo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand-undo.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -41,18 +53,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand.svg index 49d0781e1be..21b6585d98c 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/expand.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -34,18 +46,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-redo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-redo.svg index 3226c1ac5d5..6fc0b8ed6a4 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-redo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-redo.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -41,18 +53,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-undo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-undo.svg index 869996fa13e..1c2c6fa268d 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-undo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement-undo.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -41,18 +53,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement.svg index 3226c1ac5d5..6fc0b8ed6a4 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/hideElement.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -41,18 +53,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementsState-redo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementsState-redo.svg index ac7748722da..4e85e719ee5 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementsState-redo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementsState-redo.svg @@ -15,6 +15,21 @@ + + + + + + + + + + + node-1 + + + + @@ -41,21 +56,6 @@ - - - - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementsState-undo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementsState-undo.svg index 6e7f8208603..a3da050f25c 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementsState-undo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementsState-undo.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -41,18 +53,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementsState.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementsState.svg index ac7748722da..4e85e719ee5 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementsState.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/setElementsState.svg @@ -15,6 +15,21 @@ + + + + + + + + + + + node-1 + + + + @@ -41,21 +56,6 @@ - - - - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/updateData-redo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/updateData-redo.svg index df7e55a762e..52c8ba785ab 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/updateData-redo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/updateData-redo.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -41,18 +53,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/updateData-undo.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/updateData-undo.svg index d1737993105..1f6c1653719 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/updateData-undo.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/updateData-undo.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -41,18 +53,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/updateData.svg b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/updateData.svg index df7e55a762e..52c8ba785ab 100644 --- a/packages/g6/__tests__/snapshots/plugins/history/plugin-history/updateData.svg +++ b/packages/g6/__tests__/snapshots/plugins/history/plugin-history/updateData.svg @@ -15,6 +15,18 @@ + + + + + + + + node-1 + + + + @@ -41,18 +53,6 @@ - - - - - - - - node-1 - - - - diff --git a/packages/g6/__tests__/snapshots/plugins/tooltip/combo.svg b/packages/g6/__tests__/snapshots/plugins/tooltip/combo.svg index 20dcdae21e2..ace905807cf 100644 --- a/packages/g6/__tests__/snapshots/plugins/tooltip/combo.svg +++ b/packages/g6/__tests__/snapshots/plugins/tooltip/combo.svg @@ -3,6 +3,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 20 + + + + + + + + + + + + 21 + + + + + + + + + + + + 22 + + + + + + + + + + + + 25 + + + + + + + + + + + + 26 + + + + @@ -18,11 +106,6 @@ - - - - - @@ -296,13 +379,6 @@ - - - - - - - @@ -317,20 +393,6 @@ - - - - - - - - - - - - - - @@ -338,20 +400,6 @@ - - - - - - - - - - - - - - @@ -380,20 +428,6 @@ - - - - - - - - - - - - - - @@ -429,13 +463,6 @@ - - - - - - - @@ -676,148 +703,121 @@ - + - 20 + 23 - + - 21 + 24 - + - 22 + 27 - + - 23 + 28 - + - 24 + 29 - + - 25 + 30 - + - 26 + 31 - + - - - - - - 27 - - + - + + - - - - - - 28 - - + + - + + - - - - - - 29 - - + + - + + - - - - - - 30 - - + + - + + - - - - - - 31 - - + + diff --git a/packages/g6/__tests__/snapshots/plugins/tooltip/edge.svg b/packages/g6/__tests__/snapshots/plugins/tooltip/edge.svg index 20dcdae21e2..ace905807cf 100644 --- a/packages/g6/__tests__/snapshots/plugins/tooltip/edge.svg +++ b/packages/g6/__tests__/snapshots/plugins/tooltip/edge.svg @@ -3,6 +3,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 20 + + + + + + + + + + + + 21 + + + + + + + + + + + + 22 + + + + + + + + + + + + 25 + + + + + + + + + + + + 26 + + + + @@ -18,11 +106,6 @@ - - - - - @@ -296,13 +379,6 @@ - - - - - - - @@ -317,20 +393,6 @@ - - - - - - - - - - - - - - @@ -338,20 +400,6 @@ - - - - - - - - - - - - - - @@ -380,20 +428,6 @@ - - - - - - - - - - - - - - @@ -429,13 +463,6 @@ - - - - - - - @@ -676,148 +703,121 @@ - + - 20 + 23 - + - 21 + 24 - + - 22 + 27 - + - 23 + 28 - + - 24 + 29 - + - 25 + 30 - + - 26 + 31 - + - - - - - - 27 - - + - + + - - - - - - 28 - - + + - + + - - - - - - 29 - - + + - + + - - - - - - 30 - - + + - + + - - - - - - 31 - - + + diff --git a/packages/g6/__tests__/snapshots/plugins/tooltip/hover.svg b/packages/g6/__tests__/snapshots/plugins/tooltip/hover.svg index 20dcdae21e2..ace905807cf 100644 --- a/packages/g6/__tests__/snapshots/plugins/tooltip/hover.svg +++ b/packages/g6/__tests__/snapshots/plugins/tooltip/hover.svg @@ -3,6 +3,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 20 + + + + + + + + + + + + 21 + + + + + + + + + + + + 22 + + + + + + + + + + + + 25 + + + + + + + + + + + + 26 + + + + @@ -18,11 +106,6 @@ - - - - - @@ -296,13 +379,6 @@ - - - - - - - @@ -317,20 +393,6 @@ - - - - - - - - - - - - - - @@ -338,20 +400,6 @@ - - - - - - - - - - - - - - @@ -380,20 +428,6 @@ - - - - - - - - - - - - - - @@ -429,13 +463,6 @@ - - - - - - - @@ -676,148 +703,121 @@ - + - 20 + 23 - + - 21 + 24 - + - 22 + 27 - + - 23 + 28 - + - 24 + 29 - + - 25 + 30 - + - 26 + 31 - + - - - - - - 27 - - + - + + - - - - - - 28 - - + + - + + - - - - - - 29 - - + + - + + - - - - - - 30 - - + + - + + - - - - - - 31 - - + + diff --git a/packages/g6/__tests__/snapshots/plugins/tooltip/node.svg b/packages/g6/__tests__/snapshots/plugins/tooltip/node.svg index 20dcdae21e2..ace905807cf 100644 --- a/packages/g6/__tests__/snapshots/plugins/tooltip/node.svg +++ b/packages/g6/__tests__/snapshots/plugins/tooltip/node.svg @@ -3,6 +3,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 20 + + + + + + + + + + + + 21 + + + + + + + + + + + + 22 + + + + + + + + + + + + 25 + + + + + + + + + + + + 26 + + + + @@ -18,11 +106,6 @@ - - - - - @@ -296,13 +379,6 @@ - - - - - - - @@ -317,20 +393,6 @@ - - - - - - - - - - - - - - @@ -338,20 +400,6 @@ - - - - - - - - - - - - - - @@ -380,20 +428,6 @@ - - - - - - - - - - - - - - @@ -429,13 +463,6 @@ - - - - - - - @@ -676,148 +703,121 @@ - + - 20 + 23 - + - 21 + 24 - + - 22 + 27 - + - 23 + 28 - + - 24 + 29 - + - 25 + 30 - + - 26 + 31 - + - - - - - - 27 - - + - + + - - - - - - 28 - - + + - + + - - - - - - 29 - - + + - + + - - - - - - 30 - - + + - + + - - - - - - 31 - - + + diff --git a/packages/g6/__tests__/snapshots/plugins/tooltip/show-tooltip-by-id.svg b/packages/g6/__tests__/snapshots/plugins/tooltip/show-tooltip-by-id.svg index 20dcdae21e2..ace905807cf 100644 --- a/packages/g6/__tests__/snapshots/plugins/tooltip/show-tooltip-by-id.svg +++ b/packages/g6/__tests__/snapshots/plugins/tooltip/show-tooltip-by-id.svg @@ -3,6 +3,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 20 + + + + + + + + + + + + 21 + + + + + + + + + + + + 22 + + + + + + + + + + + + 25 + + + + + + + + + + + + 26 + + + + @@ -18,11 +106,6 @@ - - - - - @@ -296,13 +379,6 @@ - - - - - - - @@ -317,20 +393,6 @@ - - - - - - - - - - - - - - @@ -338,20 +400,6 @@ - - - - - - - - - - - - - - @@ -380,20 +428,6 @@ - - - - - - - - - - - - - - @@ -429,13 +463,6 @@ - - - - - - - @@ -676,148 +703,121 @@ - + - 20 + 23 - + - 21 + 24 - + - 22 + 27 - + - 23 + 28 - + - 24 + 29 - + - 25 + 30 - + - 26 + 31 - + - - - - - - 27 - - + - + + - - - - - - 28 - - + + - + + - - - - - - 29 - - + + - + + - - - - - - 30 - - + + - + + - - - - - - 31 - - + + diff --git a/packages/g6/__tests__/snapshots/runtime/element/default.svg b/packages/g6/__tests__/snapshots/runtime/element/default.svg index e8d06f2d440..1eb402087b9 100644 --- a/packages/g6/__tests__/snapshots/runtime/element/default.svg +++ b/packages/g6/__tests__/snapshots/runtime/element/default.svg @@ -3,11 +3,6 @@ - - - - - @@ -15,25 +10,30 @@ - - + - - + + + - - + - + - + - + + - + + + + + + diff --git a/packages/g6/__tests__/snapshots/runtime/graph/graph/after-layout.svg b/packages/g6/__tests__/snapshots/runtime/graph/graph/after-layout.svg index 6e58ee5aa81..0dc186927fb 100644 --- a/packages/g6/__tests__/snapshots/runtime/graph/graph/after-layout.svg +++ b/packages/g6/__tests__/snapshots/runtime/graph/graph/after-layout.svg @@ -3,6 +3,11 @@ + + + + + @@ -10,11 +15,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/runtime/graph/graph/after-rotate-90.svg b/packages/g6/__tests__/snapshots/runtime/graph/graph/after-rotate-90.svg index 60420104073..cbfd3dff839 100644 --- a/packages/g6/__tests__/snapshots/runtime/graph/graph/after-rotate-90.svg +++ b/packages/g6/__tests__/snapshots/runtime/graph/graph/after-rotate-90.svg @@ -3,6 +3,11 @@ + + + + + @@ -10,11 +15,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/runtime/graph/graph/after-translate-node-1.svg b/packages/g6/__tests__/snapshots/runtime/graph/graph/after-translate-node-1.svg index 544b01459d4..8f8837cbc01 100644 --- a/packages/g6/__tests__/snapshots/runtime/graph/graph/after-translate-node-1.svg +++ b/packages/g6/__tests__/snapshots/runtime/graph/graph/after-translate-node-1.svg @@ -3,6 +3,11 @@ + + + + + @@ -10,11 +15,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/runtime/graph/graph/after-translate.svg b/packages/g6/__tests__/snapshots/runtime/graph/graph/after-translate.svg index ed8e3ea88f2..e6ea54ae2d3 100644 --- a/packages/g6/__tests__/snapshots/runtime/graph/graph/after-translate.svg +++ b/packages/g6/__tests__/snapshots/runtime/graph/graph/after-translate.svg @@ -3,6 +3,11 @@ + + + + + @@ -10,11 +15,6 @@ - - - - - diff --git a/packages/g6/__tests__/snapshots/runtime/graph/graph/after-zoom-2.svg b/packages/g6/__tests__/snapshots/runtime/graph/graph/after-zoom-2.svg index f73d5b1c89a..e7a9767cfa0 100644 --- a/packages/g6/__tests__/snapshots/runtime/graph/graph/after-zoom-2.svg +++ b/packages/g6/__tests__/snapshots/runtime/graph/graph/after-zoom-2.svg @@ -3,6 +3,11 @@ + + + + + @@ -10,11 +15,6 @@ - - - - - diff --git a/packages/g6/__tests__/unit/runtime/data.spec.ts b/packages/g6/__tests__/unit/runtime/data.spec.ts index 436c75c66ac..53c71b926f1 100644 --- a/packages/g6/__tests__/unit/runtime/data.spec.ts +++ b/packages/g6/__tests__/unit/runtime/data.spec.ts @@ -42,11 +42,11 @@ describe('DataController', () => { controller.addData(clone(data)); controller.setData({ - nodes: [{ id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 2 } }], + nodes: [{ id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 0 } }], }); expect(controller.getData()).toEqual({ - nodes: [{ id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 2 } }], + nodes: [{ id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 0 } }], edges: [], combos: [], }); @@ -59,19 +59,19 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 2 } }, - { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 2 } }, - { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 2 } }, + { id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 0 } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 1 } }, + { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 1 } }, ], edges: [ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, - { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 1 } }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 0 } }, + { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 0 } }, ], combos: [{ id: 'combo-1', data: {}, style: { zIndex: 0 } }], }); controller.addData({ - nodes: [{ id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 2 } }], + nodes: [{ id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 0 } }], }); expect(controller.hasNode('node-4')).toBe(true); @@ -90,16 +90,16 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 2 } }, - { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 2 } }, - { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 2 } }, - { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 2 } }, - { id: 'node-5', data: { value: 5 }, combo: 'combo-2', style: { fill: 'black', zIndex: 2 } }, + { id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 0 } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 1 } }, + { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 1 } }, + { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 0 } }, + { id: 'node-5', data: { value: 5 }, combo: 'combo-2', style: { fill: 'black', zIndex: 1 } }, ], edges: [ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, - { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 1 } }, - { id: 'edge-3', source: 'node-1', target: 'node-5', data: { weight: 3 }, style: { zIndex: 1 } }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 0 } }, + { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 0 } }, + { id: 'edge-3', source: 'node-1', target: 'node-5', data: { weight: 3 }, style: { zIndex: 0 } }, ], combos: [ { id: 'combo-1', data: {}, style: { zIndex: 0 } }, @@ -146,13 +146,13 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-1', data: { value: 666 }, combo: 'combo-2', style: { fill: 'pink', lineWidth: 2, zIndex: 2 } }, - { id: 'node-2', data: { value: 2 }, combo: 'combo-2', style: { fill: 'green', zIndex: 2 } }, - { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 2 } }, + { id: 'node-1', data: { value: 666 }, combo: 'combo-2', style: { fill: 'pink', lineWidth: 2, zIndex: 1 } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-2', style: { fill: 'green', zIndex: 1 } }, + { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 1 } }, ], edges: [ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 678 }, style: { zIndex: 1 } }, - { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 666 }, style: { zIndex: 1 } }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 678 }, style: { zIndex: 0 } }, + { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 666 }, style: { zIndex: 0 } }, ], combos: [ { id: 'combo-1', data: { value: 100 }, style: { stroke: 'blue', zIndex: 0 } }, @@ -167,7 +167,7 @@ describe('DataController', () => { // no changes controller.updateNodeData([{ id: 'node-1', data: { value: 1 }, style: { fill: 'red' } }]); - expect(controller.getNodeData()).toEqual([{ id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 2 } }]); + expect(controller.getNodeData()).toEqual([{ id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 0 } }]); }); it('updateEdgeData', () => { @@ -180,20 +180,20 @@ describe('DataController', () => { controller.updateEdgeData([{ id: 'edge-1', data: { weight: 1 } }]); expect(controller.getEdgeData()).toEqual([ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: -1 } }, ]); // update source controller.updateEdgeData([{ id: 'edge-1', source: 'node-2' }]); expect(controller.getEdgeData()).toEqual([ - { id: 'edge-1', source: 'node-2', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, + { id: 'edge-1', source: 'node-2', target: 'node-2', data: { weight: 1 }, style: { zIndex: -1 } }, ]); // update target controller.updateEdgeData([{ id: 'edge-1', target: 'node-1' }]); expect(controller.getEdgeData()).toEqual([ - { id: 'edge-1', source: 'node-2', target: 'node-1', data: { weight: 1 }, style: { zIndex: 1 } }, + { id: 'edge-1', source: 'node-2', target: 'node-1', data: { weight: 1 }, style: { zIndex: -1 } }, ]); }); @@ -223,8 +223,8 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-1', data: {}, combo: 'combo-1', style: { x: 50, y: 50, zIndex: 2 } }, - { id: 'node-2', data: {}, combo: 'combo-1', style: { x: 100, y: 100, zIndex: 2 } }, + { id: 'node-1', data: {}, combo: 'combo-1', style: { x: 50, y: 50, zIndex: 1 } }, + { id: 'node-2', data: {}, combo: 'combo-1', style: { x: 100, y: 100, zIndex: 1 } }, ], edges: [], combos: [ @@ -237,8 +237,8 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-1', data: {}, combo: 'combo-1', style: { x: 50, y: 50, zIndex: 2 } }, - { id: 'node-2', data: {}, combo: 'combo-1', style: { x: 100, y: 100, zIndex: 2 } }, + { id: 'node-1', data: {}, combo: 'combo-1', style: { x: 50, y: 50, zIndex: 1 } }, + { id: 'node-2', data: {}, combo: 'combo-1', style: { x: 100, y: 100, zIndex: 1 } }, ], edges: [], combos: [ @@ -261,7 +261,7 @@ describe('DataController', () => { controller.translateComboBy('combo-1', [100, 100]); expect(controller.getData()).toEqual({ - nodes: [{ id: 'node-1', data: {}, combo: 'combo-1', style: { x: 100, y: 100, z: 0, zIndex: 2 } }], + nodes: [{ id: 'node-1', data: {}, combo: 'combo-1', style: { x: 100, y: 100, z: 0, zIndex: 1 } }], combos: [{ id: 'combo-1', data: {}, style: { x: 100, y: 100, z: 0, zIndex: 0 } }], edges: [], }); @@ -282,9 +282,9 @@ describe('DataController', () => { controller.translateComboBy('combo-1', [66, 67]); expect(controller.getNodeData()).toEqual([ - { id: 'node-1', data: {}, style: { zIndex: 2 } }, - { id: 'node-2', combo: 'combo-1', data: {}, style: { x: 66, y: 117, z: 0, fill: 'green', zIndex: 2 } }, - { id: 'node-3', combo: 'combo-1', data: {}, style: { x: 166, y: 167, z: 0, fill: 'blue', zIndex: 2 } }, + { id: 'node-1', data: {}, style: { zIndex: 0 } }, + { id: 'node-2', combo: 'combo-1', data: {}, style: { x: 66, y: 117, z: 0, fill: 'green', zIndex: 1 } }, + { id: 'node-3', combo: 'combo-1', data: {}, style: { x: 166, y: 167, z: 0, fill: 'blue', zIndex: 1 } }, ]); }); @@ -319,8 +319,8 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-1', data: {}, combo: 'combo-1', style: { x: 100, y: 100, z: 0, zIndex: 2 } }, - { id: 'node-2', data: {}, combo: 'combo-1', style: { x: 110, y: 110, z: 0, zIndex: 2 } }, + { id: 'node-1', data: {}, combo: 'combo-1', style: { x: 100, y: 100, z: 0, zIndex: 1 } }, + { id: 'node-2', data: {}, combo: 'combo-1', style: { x: 110, y: 110, z: 0, zIndex: 1 } }, ], combos: [{ id: 'combo-1', data: {}, style: { x: 100, y: 100, z: 0, zIndex: 0 } }], edges: [], @@ -340,10 +340,10 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 2 } }, - { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 2 } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 1 } }, + { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 1 } }, ], - edges: [{ id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 1 } }], + edges: [{ id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 0 } }], combos: [{ id: 'combo-1', data: {}, style: { zIndex: 0 } }], }); @@ -351,10 +351,10 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-2', data: { value: 2 }, combo: undefined, style: { fill: 'green', zIndex: 2 } }, - { id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue', zIndex: 2 } }, + { id: 'node-2', data: { value: 2 }, combo: undefined, style: { fill: 'green', zIndex: 1 } }, + { id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue', zIndex: 1 } }, ], - edges: [{ id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 1 } }], + edges: [{ id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 0 } }], combos: [], }); @@ -364,8 +364,8 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-2', data: { value: 2 }, combo: undefined, style: { fill: 'green', zIndex: 2 } }, - { id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue', zIndex: 2 } }, + { id: 'node-2', data: { value: 2 }, combo: undefined, style: { fill: 'green', zIndex: 1 } }, + { id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue', zIndex: 1 } }, ], edges: [], combos: [], @@ -376,7 +376,7 @@ describe('DataController', () => { controller.removeNodeData(['node-2']); expect(controller.getData()).toEqual({ - nodes: [{ id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue', zIndex: 2 } }], + nodes: [{ id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue', zIndex: 1 } }], edges: [], combos: [], }); @@ -393,13 +393,13 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 2 } }, - { id: 'node-2', data: { value: 2 }, combo: undefined, style: { fill: 'green', zIndex: 2 } }, - { id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue', zIndex: 2 } }, + { id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 0 } }, + { id: 'node-2', data: { value: 2 }, combo: undefined, style: { fill: 'green', zIndex: 1 } }, + { id: 'node-3', data: { value: 3 }, combo: undefined, style: { fill: 'blue', zIndex: 1 } }, ], edges: [ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, - { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 1 } }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 0 } }, + { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 0 } }, ], combos: [], }); @@ -441,9 +441,9 @@ describe('DataController', () => { expect(controller.getData()).toEqual({ nodes: [ - { id: 'node-1', data: {}, style: { zIndex: 3 }, combo: 'combo-2' }, - { id: 'node-2', data: {}, style: { zIndex: 3 }, combo: 'combo-2' }, - { id: 'node-3', data: {}, style: { zIndex: 3 }, combo: 'combo-2' }, + { id: 'node-1', data: {}, style: { zIndex: 2 }, combo: 'combo-2' }, + { id: 'node-2', data: {}, style: { zIndex: 2 }, combo: 'combo-2' }, + { id: 'node-3', data: {}, style: { zIndex: 2 }, combo: 'combo-2' }, ], edges: [], combos: [{ id: 'combo-2', data: {}, style: { zIndex: 0 } }], @@ -488,27 +488,27 @@ describe('DataController', () => { type: 'ComboUpdated', }, { - value: { id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 2 } }, + value: { id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 0 } }, original: { id: 'node-1', data: { value: 1 }, style: { fill: 'red' } }, type: 'NodeUpdated', }, { - value: { id: 'node-2', combo: 'combo-1', data: { value: 2 }, style: { fill: 'green', zIndex: 2 } }, + value: { id: 'node-2', combo: 'combo-1', data: { value: 2 }, style: { fill: 'green', zIndex: 1 } }, original: { id: 'node-2', combo: 'combo-1', data: { value: 2 }, style: { fill: 'green' } }, type: 'NodeUpdated', }, { - value: { id: 'node-3', combo: 'combo-1', data: { value: 3 }, style: { fill: 'blue', zIndex: 2 } }, + value: { id: 'node-3', combo: 'combo-1', data: { value: 3 }, style: { fill: 'blue', zIndex: 1 } }, original: { id: 'node-3', combo: 'combo-1', data: { value: 3 }, style: { fill: 'blue' } }, type: 'NodeUpdated', }, { - value: { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, + value: { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 0 } }, original: { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: {} }, type: 'EdgeUpdated', }, { - value: { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 1 } }, + value: { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 0 } }, original: { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: {} }, type: 'EdgeUpdated', }, @@ -535,13 +535,13 @@ describe('DataController', () => { type: 'ComboUpdated', }, { - value: { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 2 } }, + value: { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 0 } }, original: { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow' } }, type: 'NodeUpdated', }, { - value: { id: 'node-3', combo: 'combo-2', data: { value: 3 }, style: { fill: 'pink', zIndex: 2 } }, - original: { id: 'node-3', combo: 'combo-1', data: { value: 3 }, style: { fill: 'blue', zIndex: 2 } }, + value: { id: 'node-3', combo: 'combo-2', data: { value: 3 }, style: { fill: 'pink', zIndex: 1 } }, + original: { id: 'node-3', combo: 'combo-1', data: { value: 3 }, style: { fill: 'blue', zIndex: 1 } }, type: 'NodeUpdated', }, // 移动节点后更新 combo / update combo after move node @@ -551,21 +551,21 @@ describe('DataController', () => { type: 'ComboUpdated', }, { - value: { id: 'node-3', combo: 'combo-2', data: { value: 3 }, style: { fill: 'pink', zIndex: 2 } }, - original: { id: 'node-3', combo: 'combo-2', data: { value: 3 }, style: { fill: 'pink', zIndex: 2 } }, + value: { id: 'node-3', combo: 'combo-2', data: { value: 3 }, style: { fill: 'pink', zIndex: 1 } }, + original: { id: 'node-3', combo: 'combo-2', data: { value: 3 }, style: { fill: 'pink', zIndex: 1 } }, type: 'NodeUpdated', }, { - value: { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, + value: { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 0 } }, type: 'EdgeRemoved', }, { - value: { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 1 } }, + value: { id: 'edge-2', source: 'node-2', target: 'node-3', data: { weight: 2 }, style: { zIndex: 0 } }, type: 'EdgeRemoved', }, - { value: { id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 2 } }, type: 'NodeRemoved' }, + { value: { id: 'node-1', data: { value: 1 }, style: { fill: 'red', zIndex: 0 } }, type: 'NodeRemoved' }, { - value: { id: 'node-2', combo: 'combo-1', data: { value: 2 }, style: { fill: 'green', zIndex: 2 } }, + value: { id: 'node-2', combo: 'combo-1', data: { value: 2 }, style: { fill: 'green', zIndex: 1 } }, type: 'NodeRemoved', }, // 移除节点后更新 combo / update combo after remove node @@ -580,10 +580,10 @@ describe('DataController', () => { expect(reduceDataChanges([...changes1, ...changes2])).toEqual([ { type: 'NodeAdded', - value: { id: 'node-3', combo: 'combo-2', data: { value: 3 }, style: { fill: 'pink', zIndex: 2 } }, + value: { id: 'node-3', combo: 'combo-2', data: { value: 3 }, style: { fill: 'pink', zIndex: 1 } }, }, { type: 'ComboAdded', value: { id: 'combo-2', data: {}, style: { zIndex: 0 } } }, - { type: 'NodeAdded', value: { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 2 } } }, + { type: 'NodeAdded', value: { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 0 } } }, ]); }); @@ -604,9 +604,9 @@ describe('DataController', () => { { value: { id: 'combo-2', data: {}, style: { zIndex: 0 } }, type: 'ComboAdded' }, { type: 'NodeAdded', - value: { id: 'node-3', data: { value: 3 }, combo: 'combo-2', style: { fill: 'pink', zIndex: 2 } }, + value: { id: 'node-3', data: { value: 3 }, combo: 'combo-2', style: { fill: 'pink', zIndex: 1 } }, }, - { value: { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 2 } }, type: 'NodeAdded' }, + { value: { id: 'node-4', data: { value: 4 }, style: { fill: 'yellow', zIndex: 0 } }, type: 'NodeAdded' }, ]); }); @@ -722,9 +722,9 @@ describe('DataController', () => { controller.updateNodeData([{ id: 'node-1', combo: 'combo-1' }]); expect(controller.getChildrenData('combo-1')?.sort((a, b) => (a.id < b.id ? -1 : 1))).toEqual([ - { id: 'node-1', data: { value: 1 }, combo: 'combo-1', style: { fill: 'red', zIndex: 2 } }, - { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 2 } }, - { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 2 } }, + { id: 'node-1', data: { value: 1 }, combo: 'combo-1', style: { fill: 'red', zIndex: 1 } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 1 } }, + { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 1 } }, ]); controller.addComboData([{ id: 'combo-2' }]); @@ -735,12 +735,12 @@ describe('DataController', () => { ]); expect(controller.getChildrenData('combo-1')).toEqual([ - { id: 'node-1', data: { value: 1 }, combo: 'combo-1', style: { fill: 'red', zIndex: 2 } }, + { id: 'node-1', data: { value: 1 }, combo: 'combo-1', style: { fill: 'red', zIndex: 1 } }, ]); expect(controller.getChildrenData('combo-2')).toEqual([ - { id: 'node-2', data: { value: 2 }, combo: 'combo-2', style: { fill: 'green', zIndex: 2 } }, - { id: 'node-3', data: { value: 3 }, combo: 'combo-2', style: { fill: 'blue', zIndex: 2 } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-2', style: { fill: 'green', zIndex: 1 } }, + { id: 'node-3', data: { value: 3 }, combo: 'combo-2', style: { fill: 'blue', zIndex: 1 } }, ]); }); @@ -764,21 +764,21 @@ describe('DataController', () => { controller.addData(clone(data)); expect(controller.getRelatedEdgesData('node-1')).toEqual([ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 0 } }, ]); controller.addEdgeData([{ id: 'edge-3', source: 'node-1', target: 'node-3', data: { weight: 3 } }]); expect(controller.getRelatedEdgesData('node-1')).toEqual([ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, - { id: 'edge-3', source: 'node-1', target: 'node-3', data: { weight: 3 }, style: { zIndex: 1 } }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 0 } }, + { id: 'edge-3', source: 'node-1', target: 'node-3', data: { weight: 3 }, style: { zIndex: 0 } }, ]); expect(controller.getRelatedEdgesData('node-1', 'in')).toEqual([]); expect(controller.getRelatedEdgesData('node-1', 'out')).toEqual([ - { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 1 } }, - { id: 'edge-3', source: 'node-1', target: 'node-3', data: { weight: 3 }, style: { zIndex: 1 } }, + { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 1 }, style: { zIndex: 0 } }, + { id: 'edge-3', source: 'node-1', target: 'node-3', data: { weight: 3 }, style: { zIndex: 0 } }, ]); }); @@ -788,14 +788,14 @@ describe('DataController', () => { controller.addData(clone(data)); expect(controller.getNeighborNodesData('node-1')).toEqual([ - { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 2 } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 1 } }, ]); controller.addEdgeData([{ id: 'edge-3', source: 'node-1', target: 'node-3', data: { weight: 3 } }]); expect(controller.getNeighborNodesData('node-1')).toEqual([ - { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 2 } }, - { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 2 } }, + { id: 'node-2', data: { value: 2 }, combo: 'combo-1', style: { fill: 'green', zIndex: 1 } }, + { id: 'node-3', data: { value: 3 }, combo: 'combo-1', style: { fill: 'blue', zIndex: 1 } }, ]); }); diff --git a/packages/g6/__tests__/unit/runtime/element/z-index.spec.ts b/packages/g6/__tests__/unit/runtime/element/z-index.spec.ts index eb82830c45d..95b727fb496 100644 --- a/packages/g6/__tests__/unit/runtime/element/z-index.spec.ts +++ b/packages/g6/__tests__/unit/runtime/element/z-index.spec.ts @@ -35,7 +35,7 @@ describe('element z-index', () => { }); it('to', async () => { - graph.setElementZIndex({ 'node-2': 0 }); + graph.setElementZIndex({ 'node-2': -1 }); await expect(graph).toMatchSnapshot(__filename); }); diff --git a/packages/g6/__tests__/unit/runtime/graph/graph.spec.ts b/packages/g6/__tests__/unit/runtime/graph/graph.spec.ts index 50d6673dfbd..467899011de 100644 --- a/packages/g6/__tests__/unit/runtime/graph/graph.spec.ts +++ b/packages/g6/__tests__/unit/runtime/graph/graph.spec.ts @@ -132,20 +132,20 @@ describe('Graph', () => { }); expect(graph.getData()).toEqual({ nodes: [ - { id: 'node-1', data: {}, style: { zIndex: 2 } }, - { id: 'node-2', data: {}, style: { zIndex: 2 } }, + { id: 'node-1', data: {}, style: { zIndex: 0 } }, + { id: 'node-2', data: {}, style: { zIndex: 0 } }, ], - edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { zIndex: 1 } }], + edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { zIndex: -1 } }], combos: [], }); graph.updateData({ edges: [{ id: 'edge-1', style: { lineWidth: 5 } }] }); expect(graph.getData()).toEqual({ nodes: [ - { id: 'node-1', data: {}, style: { zIndex: 2 } }, - { id: 'node-2', data: {}, style: { zIndex: 2 } }, + { id: 'node-1', data: {}, style: { zIndex: 0 } }, + { id: 'node-2', data: {}, style: { zIndex: 0 } }, ], - edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { lineWidth: 5, zIndex: 1 } }], + edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { lineWidth: 5, zIndex: -1 } }], combos: [], }); }); @@ -160,22 +160,22 @@ describe('Graph', () => { g.updateData((data) => { expect(data).toEqual({ nodes: [ - { id: 'node-1', data: {}, style: { zIndex: 2 } }, - { id: 'node-2', data: {}, style: { zIndex: 2 } }, + { id: 'node-1', data: {}, style: { zIndex: 0 } }, + { id: 'node-2', data: {}, style: { zIndex: 0 } }, ], - edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { zIndex: 1 } }], + edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { zIndex: -1 } }], combos: [], }); return { nodes: [{ id: 'node-1', data: { value: 1 } }] }; }); - expect(g.getNodeData('node-1')).toEqual({ id: 'node-1', data: { value: 1 }, style: { zIndex: 2 } }); + expect(g.getNodeData('node-1')).toEqual({ id: 'node-1', data: { value: 1 }, style: { zIndex: 0 } }); g.setData((data) => { expect(data).toEqual({ nodes: [ - { id: 'node-1', data: { value: 1 }, style: { zIndex: 2 } }, - { id: 'node-2', data: {}, style: { zIndex: 2 } }, + { id: 'node-1', data: { value: 1 }, style: { zIndex: 0 } }, + { id: 'node-2', data: {}, style: { zIndex: 0 } }, ], - edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { zIndex: 1 } }], + edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { zIndex: -1 } }], combos: [], }); return { nodes: [], edges: [] }; @@ -188,7 +188,7 @@ describe('Graph', () => { }); return { nodes: [{ id: 'node-1' }] }; }); - expect(g.getNodeData('node-1')).toEqual({ id: 'node-1', data: {}, style: { zIndex: 2 } }); + expect(g.getNodeData('node-1')).toEqual({ id: 'node-1', data: {}, style: { zIndex: 0 } }); }); it('getElementData', () => { @@ -227,10 +227,10 @@ describe('Graph', () => { graph.updateEdgeData([{ id: 'edge-2', style: { lineWidth: 10 } }]); graph.updateComboData([{ id: 'combo-1', style: { stroke: 'red' } }]); expect(graph.getNodeData()).toEqual([ - { id: 'node-1', data: {}, style: { zIndex: 2 } }, - { id: 'node-2', data: {}, style: { zIndex: 2 } }, - { id: 'node-3', data: {}, combo: 'combo-1', style: { x: 100, y: 100, zIndex: 3 } }, - { id: 'node-4', data: {}, combo: 'combo-1', style: { zIndex: 3 } }, + { id: 'node-1', data: {}, style: { zIndex: 0 } }, + { id: 'node-2', data: {}, style: { zIndex: 0 } }, + { id: 'node-3', data: {}, combo: 'combo-1', style: { x: 100, y: 100, zIndex: 2 } }, + { id: 'node-4', data: {}, combo: 'combo-1', style: { zIndex: 2 } }, ]); expect(graph.getEdgeData().map(idOf)).toEqual(['edge-1', 'edge-2']); expect(graph.getComboData()).toEqual([{ id: 'combo-1', data: {}, style: { stroke: 'red', zIndex: 1 } }]); @@ -248,20 +248,20 @@ describe('Graph', () => { }, }); g.addNodeData((data) => { - expect(data).toEqual([{ id: 'node-1', data: {}, style: { zIndex: 2 } }]); + expect(data).toEqual([{ id: 'node-1', data: {}, style: { zIndex: 0 } }]); return [{ id: 'node-2' }]; }); expect(g.getNodeData().map(idOf)).toEqual(['node-1', 'node-2']); g.updateNodeData((data) => { expect(data).toEqual([ - { id: 'node-1', data: {}, style: { zIndex: 2 } }, - { id: 'node-2', data: {}, style: { zIndex: 2 } }, + { id: 'node-1', data: {}, style: { zIndex: 0 } }, + { id: 'node-2', data: {}, style: { zIndex: 0 } }, ]); return [{ id: 'node-2', style: { x: 100 } }]; }); expect(g.getNodeData()).toEqual([ - { id: 'node-1', data: {}, style: { zIndex: 2 } }, - { id: 'node-2', data: {}, style: { x: 100, zIndex: 2 } }, + { id: 'node-1', data: {}, style: { zIndex: 0 } }, + { id: 'node-2', data: {}, style: { x: 100, zIndex: 0 } }, ]); g.addEdgeData((data) => { @@ -270,7 +270,7 @@ describe('Graph', () => { }); expect(g.getEdgeData().map(idOf)).toEqual(['edge-1']); g.updateEdgeData((data) => { - expect(data).toEqual([{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { zIndex: 1 } }]); + expect(data).toEqual([{ id: 'edge-1', source: 'node-1', target: 'node-2', data: {}, style: { zIndex: -1 } }]); return [{ id: 'edge-1', style: { lineWidth: 5, zIndex: 1 } }]; }); expect(g.getEdgeData()).toEqual([ @@ -328,7 +328,7 @@ describe('Graph', () => { }); it('getNeighborNodesData', () => { - expect(graph.getNeighborNodesData('node-1')).toEqual([{ id: 'node-2', data: {}, style: { zIndex: 2 } }]); + expect(graph.getNeighborNodesData('node-1')).toEqual([{ id: 'node-2', data: {}, style: { zIndex: 0 } }]); }); it('getParentData', () => { @@ -377,7 +377,7 @@ describe('Graph', () => { expect(graph.getElementState('node-1')).toEqual(['selected']); expect(graph.getElementState('node-2')).toEqual([]); expect(graph.getElementDataByState('node', 'selected')).toEqual([ - { id: 'node-1', data: {}, style: { zIndex: 2 }, states: ['selected'] }, + { id: 'node-1', data: {}, style: { zIndex: 0 }, states: ['selected'] }, ]); }); @@ -387,7 +387,7 @@ describe('Graph', () => { await graph.setElementZIndex({ 'node-1': 0 }); expect(graph.getElementZIndex('node-1')).toBe(0); - const baseNodeZIndex = 2; + const baseNodeZIndex = 0; await graph.frontElement('node-1'); expect(graph.getElementZIndex('node-1')).toBe(baseNodeZIndex + 1); expect(graph.getElementZIndex('node-2')).toBe(baseNodeZIndex); diff --git a/packages/g6/__tests__/unit/utils/z-index.spec.ts b/packages/g6/__tests__/unit/utils/z-index.spec.ts new file mode 100644 index 00000000000..274ede4a030 --- /dev/null +++ b/packages/g6/__tests__/unit/utils/z-index.spec.ts @@ -0,0 +1,9 @@ +import { getZIndexOf } from '@/src/utils/z-index'; + +describe('z-index', () => { + it('getZIndexOf', () => { + expect(getZIndexOf({ id: 'node-1' })).toBe(0); + expect(getZIndexOf({ id: 'node-1', style: {} })).toBe(0); + expect(getZIndexOf({ id: 'node-1', style: { zIndex: 1 } })).toBe(1); + }); +}); diff --git a/packages/g6/src/plugins/edge-filter-lens/index.ts b/packages/g6/src/plugins/edge-filter-lens/index.ts index f11fa64962f..9ef13a467b6 100644 --- a/packages/g6/src/plugins/edge-filter-lens/index.ts +++ b/packages/g6/src/plugins/edge-filter-lens/index.ts @@ -128,6 +128,7 @@ const defaultLensStyle: BaseStyleProps = { lineWidth: 1, stroke: '#000', strokeOpacity: 0.8, + zIndex: -Infinity, }; const DELTA = 0.05; diff --git a/packages/g6/src/runtime/data.ts b/packages/g6/src/runtime/data.ts index 07fece74904..8960a13f7c2 100644 --- a/packages/g6/src/runtime/data.ts +++ b/packages/g6/src/runtime/data.ts @@ -20,6 +20,7 @@ import type { } from '../types'; import type { EdgeDirection } from '../types/edge'; import type { ElementType } from '../types/element'; +import { isCollapsed } from '../utils/collapsibility'; import { cloneElementData, isElementDataEqual, mergeElementsData } from '../utils/data'; import { arrayDiff } from '../utils/diff'; import { toG6Data, toGraphlibData } from '../utils/graphlib'; @@ -407,6 +408,11 @@ export class DataController { * - 新增元素 * - 更新节点/组合的 combo * - 更新节点的 children + * + * The situation of calling this function: + * - Add element + * - Update the combo of the node/combo + * - Update the children of the node */ protected computeZIndex(data: PartialGraphData, type: 'add' | 'update', force = false) { if (!force && this.isBatching()) return; @@ -418,27 +424,33 @@ export class DataController { if (type === 'add' && isNumber(combo.style?.zIndex)) return; if (type === 'update' && !('combo' in combo)) return; - const ancestors = this.getAncestorsData(id, COMBO_KEY); - const zIndex = ancestors.length ? (ancestors[0].style?.zIndex ?? 0) + 1 : 0; + const parent = this.getParentData(id, COMBO_KEY); + const zIndex = parent ? (parent.style?.zIndex ?? 0) + 1 : 0; this.preventUpdateNodeLikeHierarchy(() => { this.updateComboData([{ id, style: { zIndex } }]); }); }); - for (let index = 0; index < nodes.length; index++) { - const node = nodes[index]; + nodes.forEach((node) => { const id = idOf(node); - if (type === 'add' && isNumber(node.style?.zIndex)) continue; - if (type === 'update' && !('combo' in node) && !('children' in node)) continue; + if (type === 'add' && isNumber(node.style?.zIndex)) return; + if (type === 'update' && !('combo' in node) && !('children' in node)) return; - const ancestors = this.getAncestorsData(id, COMBO_KEY); - const zIndex = ancestors.length ? (ancestors[0].style?.zIndex ?? 0) + 2 : 2; + let zIndex = 0; + + const comboParent = this.getParentData(id, COMBO_KEY); + if (comboParent) { + zIndex = (comboParent.style?.zIndex || 0) + 1; + } else { + const nodeParent = this.getParentData(id, TREE_KEY); + if (nodeParent) zIndex = nodeParent?.style?.zIndex || 0; + } this.preventUpdateNodeLikeHierarchy(() => { this.updateNodeData([{ id, style: { zIndex } }]); }); - } + }); edges.forEach((edge) => { if (isNumber(edge.style?.zIndex)) return; @@ -453,39 +465,51 @@ export class DataController { if (!source || !target) return; - const sourceType = this.getElementType(source); - const targetType = this.getElementType(target); - - const sourceZIndex = this.getNodeLikeDatum(source)?.style?.zIndex; - const targetZIndex = this.getNodeLikeDatum(target)?.style?.zIndex; - - let zIndex = 1; - if (sourceType === 'node' && targetType === 'node') { - const sZ = sourceZIndex ?? 2; - const tZ = targetZIndex ?? 2; - // 边的 zIndex 不能大于其任何一个端点 - // The zIndex of the edge cannot be greater than any of its endpoints - zIndex = Math.min(sZ, tZ) - 1; - } else if (sourceType === 'combo' && targetType === 'combo') { - zIndex = Math.max(sourceZIndex ?? 0, targetZIndex ?? 0) + 1; - } else if (sourceType === 'node' && targetType === 'combo') { - const sZ = sourceZIndex ?? 2; - // 边的 zIndex 不能大于其源节点，但可以大于目标 combo - // The zIndex of the edge cannot be greater than its source node, but can be greater than the target combo - zIndex = sZ - 1; - } else { - // sourceType === 'combo' && targetType === 'node' - const tZ = targetZIndex ?? 2; - // 边的 zIndex 不能大于其目标节点，但可以大于源 combo - // The zIndex of the edge cannot be greater than its target node, but can be greater than the source combo - zIndex = tZ - 1; - } + const sourceZIndex = this.getNodeLikeDatum(source)?.style?.zIndex || 0; + const targetZIndex = this.getNodeLikeDatum(target)?.style?.zIndex || 0; - this.updateEdgeData([{ id: idOf(edge), style: { zIndex } }]); + this.updateEdgeData([{ id: idOf(edge), style: { zIndex: Math.max(sourceZIndex, targetZIndex) - 1 } }]); }); }); } + /** + * 计算元素置顶后的 zIndex + * + * Calculate the zIndex after the element is placed on top + * @param id - 元素 ID | ID of the element + * @returns zIndex | zIndex + */ + public getFrontZIndex(id: ID) { + const elementType = this.getElementType(id); + const elementData = this.getElementDataById(id); + const data = this.getData(); + + // 排除当前元素 / Exclude the current element + Object.assign(data, { + [`${elementType}s`]: data[`${elementType}s`].filter((element) => idOf(element) !== id), + }); + + if (elementType === 'combo') { + // 如果 combo 展开，则排除 combo 的子节点/combo 及内部边 + // If the combo is expanded, exclude the child nodes/combos of the combo and the internal edges + if (!isCollapsed(elementData as ComboData)) { + const ancestorIds = new Set(this.getAncestorsData(id, COMBO_KEY).map(idOf)); + data.nodes = data.nodes.filter((element) => !ancestorIds.has(idOf(element))); + data.combos = data.combos.filter((element) => !ancestorIds.has(idOf(element))); + data.edges = data.edges.filter(({ source, target }) => !ancestorIds.has(source) && !ancestorIds.has(target)); + } + } + + return Math.max( + elementData.style?.zIndex || 0, + 0, + ...Object.values(data) + .flat() + .map((datum) => (datum?.style?.zIndex || 0) + 1), + ); + } + protected updateNodeLikeHierarchy(data: NodeLikeData[]) { if (!this.enableUpdateNodeLikeHierarchy) return; const { model } = this; diff --git a/packages/g6/src/runtime/element.ts b/packages/g6/src/runtime/element.ts index e77930f6893..4f10b067c6c 100644 --- a/packages/g6/src/runtime/element.ts +++ b/packages/g6/src/runtime/element.ts @@ -228,12 +228,6 @@ export class ElementController { return this.elementMap[id] as T; } - public getElementZIndex(id: ID): number { - const element = this.getElement(id); - if (!element) return 0; - return element.style.zIndex ?? 0; - } - public getNodes() { return this.context.model.getNodeData().map(({ id }) => this.elementMap[id]) as Node[]; } @@ -393,11 +387,11 @@ export class ElementController { this.emit(new ElementLifeCycleEvent(GraphEvent.BEFORE_ELEMENT_CREATE, elementType, datum), context); - if (context.stage === 'expand') { - // 如果是展开的元素，需要将其 zIndex 提升至目标元素的上层 - const targetZIndex = this.getElementZIndex(context.target!); - if (!style.zIndex || style.zIndex < targetZIndex) style.zIndex = targetZIndex + (style.zIndex ?? 0); - } + // if (context.stage === 'expand') { + // // 如果是展开的元素，需要将其 zIndex 提升至目标元素的上层 + // const targetZIndex = this.getElementZIndex(context.target!); + // if (!style.zIndex || style.zIndex < targetZIndex) style.zIndex = targetZIndex + (style.zIndex ?? 0); + // } const element = this.container.appendChild( new Ctor({ id, @@ -794,53 +788,6 @@ export class ElementController { )?.finished; } - /** - * 计算元素置顶后的 zIndex - * - * Calculate the zIndex after the element is placed on top - * @param id - 元素 ID | ID of the element - * @returns zIndex | zIndex - */ - public getFrontZIndex(id: ID) { - const { model } = this.context; - - const elementType = model.getElementType(id); - const elementData = model.getElementDataById(id); - const data = model.getData(); - - // 排除当前元素 / Exclude the current element - Object.assign(data, { - [`${elementType}s`]: data[`${elementType}s`].filter((element) => idOf(element) !== id), - }); - - if (elementType === 'combo') { - // 如果 combo 展开，则排除 combo 的子节点/combo 及内部边 - // If the combo is expanded, exclude the child nodes/combos of the combo and the internal edges - if (!isCollapsed(elementData as ComboData)) { - const ancestors = model.getAncestorsData(id, COMBO_KEY).map(idOf); - data.nodes = data.nodes.filter((element) => !ancestors.includes(idOf(element))); - data.combos = data.combos.filter((element) => !ancestors.includes(idOf(element))); - data.edges = data.edges.filter( - ({ source, target }) => ancestors.includes(source) && ancestors.includes(target), - ); - } - } - - const defaultValue = { node: 2, edge: 1, combo: 0 }; - - return ( - Math.max( - defaultValue[elementType] - 1, - ...Object.values(data) - .flat() - .map((datum) => { - const id = idOf(datum); - return this.getElementZIndex(id); - }), - ) + 1 - ); - } - public destroy() { this.container.destroy(); this.elementMap = {}; diff --git a/packages/g6/src/runtime/graph.ts b/packages/g6/src/runtime/graph.ts index e00c6848a4f..b51a70975fc 100644 --- a/packages/g6/src/runtime/graph.ts +++ b/packages/g6/src/runtime/graph.ts @@ -46,6 +46,7 @@ import { GraphLifeCycleEvent, emit } from '../utils/event'; import { idOf } from '../utils/id'; import { format } from '../utils/print'; import { subtract } from '../utils/vector'; +import { getZIndexOf } from '../utils/z-index'; import { Animation } from './animation'; import { BatchController } from './batch'; import { BehaviorController } from './behavior'; @@ -1674,16 +1675,16 @@ export class Graph extends EventEmitter { */ public async frontElement(id: ID | ID[]): Promise { const ids = Array.isArray(id) ? id : [id]; - const { model, element } = this.context; + const { model } = this.context; const zIndexes: Record = {}; ids.map((_id) => { - const zIndex = element!.getFrontZIndex(_id); + const zIndex = model.getFrontZIndex(_id); const elementType = model.getElementType(_id); if (elementType === 'combo') { const ancestor = model.getAncestorsData(_id, COMBO_KEY).at(-1) || this.getComboData(_id); const descendants = [ancestor, ...model.getDescendantsData(idOf(ancestor))]; - const delta = zIndex - element!.getElementZIndex(_id); + const delta = zIndex - getZIndexOf(ancestor); descendants.forEach((combo) => { zIndexes[idOf(combo)] = this.getElementZIndex(idOf(combo)) + delta; }); @@ -1708,8 +1709,7 @@ export class Graph extends EventEmitter { * @apiCategory element */ public getElementZIndex(id: ID): number { - const { model, element } = this.context; - return model.getElementDataById(id)?.style?.zIndex ?? element!.getElementZIndex(id); + return getZIndexOf(this.context.model.getElementDataById(id)); } /** diff --git a/packages/g6/src/utils/z-index.ts b/packages/g6/src/utils/z-index.ts new file mode 100644 index 00000000000..a62bf40cdf5 --- /dev/null +++ b/packages/g6/src/utils/z-index.ts @@ -0,0 +1,11 @@ +import { ElementDatum } from '../types'; + +/** + * 获取元素的 zIndex + * Get the zIndex of the element + * @param datum - 元素数据 | element data + * @returns - zIndex | zIndex + */ +export function getZIndexOf(datum: ElementDatum): number { + return datum?.style?.zIndex || 0; +} From 2d5bc7107f5a8242401a100d43689dc13658efed Mon Sep 17 00:00:00 2001 From: antv Date: Tue, 12 Nov 2024 22:09:27 +0800 Subject: [PATCH 4/4] chore: commit changeset --- .changeset/tricky-camels-cross.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tricky-camels-cross.md diff --git a/.changeset/tricky-camels-cross.md b/.changeset/tricky-camels-cross.md new file mode 100644 index 00000000000..c4b9779aa31 --- /dev/null +++ b/.changeset/tricky-camels-cross.md @@ -0,0 +1,5 @@ +--- +'@antv/g6': patch +--- + +fix element z-index logic