diff --git a/packages/g6/__tests__/bugs/behaviors-click-select-drag-node.spec.ts b/packages/g6/__tests__/bugs/behaviors-click-select-drag-node.spec.ts new file mode 100644 index 00000000000..88cb62927f0 --- /dev/null +++ b/packages/g6/__tests__/bugs/behaviors-click-select-drag-node.spec.ts @@ -0,0 +1,64 @@ +import { CommonEvent, NodeEvent } from '@/src'; +import { createGraph } from '@@/utils'; + +describe('behavior drag-node with click select', () => { + const createDemoGraph = async () => { + const graph = createGraph({ + data: { + nodes: [ + { id: 'node-1', style: { x: 100, y: 100 } }, + { id: 'node-2', combo: 'combo-1', style: { x: 200, y: 100 } }, + { id: 'node-3', style: { x: 100, y: 200 } }, + { id: 'node-4', combo: 'combo-1', style: { x: 200, y: 200 } }, + ], + edges: [ + { source: 'node-1', target: 'node-2' }, + { source: 'node-2', target: 'node-4' }, + { source: 'node-1', target: 'node-3' }, + { source: 'node-3', target: 'node-4' }, + ], + combos: [{ id: 'combo-1' }], + }, + node: { style: { size: 20 } }, + edge: { + style: { endArrow: true }, + }, + behaviors: [{ type: 'drag-element' }, { type: 'click-select', multiple: true }], + }); + await graph.render(); + return graph; + }; + + it('drag unselected node', async () => { + const graph = await createDemoGraph(); + + graph.emit(NodeEvent.CLICK, { target: { id: 'node-1' }, targetType: 'node' }); + + await expect(graph).toMatchSnapshot(__filename, 'click-node-1'); + + // drag node-2 + graph.emit(NodeEvent.DRAG_START, { target: { id: 'node-2' }, targetType: 'node' }); + graph.emit(NodeEvent.DRAG, { dx: 20, dy: 20 }); + graph.emit(NodeEvent.DRAG_END); + + await expect(graph).toMatchSnapshot(__filename, 'drag-node-2'); + }); + + it('drag selected node', async () => { + const graph = await createDemoGraph(); + + graph.emit(CommonEvent.KEY_DOWN, { key: 'shift' }); + graph.emit(NodeEvent.CLICK, { target: { id: 'node-1' }, targetType: 'node' }); + graph.emit(NodeEvent.CLICK, { target: { id: 'node-2' }, targetType: 'node' }); + graph.emit(CommonEvent.KEY_UP, { key: 'shift' }); + + await expect(graph).toMatchSnapshot(__filename, 'click-node-1-node-2'); + + // drag node-2 + graph.emit(NodeEvent.DRAG_START, { target: { id: 'node-2' }, targetType: 'node' }); + graph.emit(NodeEvent.DRAG, { dx: 20, dy: 20 }); + graph.emit(NodeEvent.DRAG_END); + + await expect(graph).toMatchSnapshot(__filename, 'drag-node-1-node-2'); + }); +}); diff --git a/packages/g6/__tests__/main.ts b/packages/g6/__tests__/main.ts index bd9f4693926..b0c4e78deb5 100644 --- a/packages/g6/__tests__/main.ts +++ b/packages/g6/__tests__/main.ts @@ -1,9 +1,13 @@ import type { Controller } from 'lil-gui'; import GUI from 'lil-gui'; +import { ComboEvent, CommonEvent, EdgeEvent, NodeEvent } from '../src'; import '../src/preset'; import * as demos from './demos'; import { createGraphCanvas } from './utils'; +// inject +Object.assign(window, { NodeEvent, EdgeEvent, ComboEvent, CommonEvent }); + type Options = { Search: string; Demo: string; diff --git a/packages/g6/__tests__/snapshots/bugs/behaviors-click-select-drag-node/click-node-1-node-2.svg b/packages/g6/__tests__/snapshots/bugs/behaviors-click-select-drag-node/click-node-1-node-2.svg new file mode 100644 index 00000000000..1c8eaba03a0 --- /dev/null +++ b/packages/g6/__tests__/snapshots/bugs/behaviors-click-select-drag-node/click-node-1-node-2.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/bugs/behaviors-click-select-drag-node/click-node-1.svg b/packages/g6/__tests__/snapshots/bugs/behaviors-click-select-drag-node/click-node-1.svg new file mode 100644 index 00000000000..2c848510f69 --- /dev/null +++ b/packages/g6/__tests__/snapshots/bugs/behaviors-click-select-drag-node/click-node-1.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/bugs/behaviors-click-select-drag-node/drag-node-1-node-2.svg b/packages/g6/__tests__/snapshots/bugs/behaviors-click-select-drag-node/drag-node-1-node-2.svg new file mode 100644 index 00000000000..85d5ca6ea47 --- /dev/null +++ b/packages/g6/__tests__/snapshots/bugs/behaviors-click-select-drag-node/drag-node-1-node-2.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/bugs/behaviors-click-select-drag-node/drag-node-2.svg b/packages/g6/__tests__/snapshots/bugs/behaviors-click-select-drag-node/drag-node-2.svg new file mode 100644 index 00000000000..e31b6c969f6 --- /dev/null +++ b/packages/g6/__tests__/snapshots/bugs/behaviors-click-select-drag-node/drag-node-2.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file