From c3c2ef3e1b38fcbea7cf3dab24038b35fc201228 Mon Sep 17 00:00:00 2001 From: Aaron Date: Fri, 21 Jun 2024 17:41:31 +0800 Subject: [PATCH] fix(behaviors): fix click select unexcept neighbor select (#5919) --- .../bugs/behaviors-click-select.spec.ts | 17 + .../multiple-shift-degree-1.svg | 626 ++++++++++++++++++ packages/g6/src/behaviors/click-select.ts | 10 +- 3 files changed, 649 insertions(+), 4 deletions(-) create mode 100644 packages/g6/__tests__/bugs/behaviors-click-select.spec.ts create mode 100644 packages/g6/__tests__/snapshots/__tests__/bugs/behaviors-click-select/multiple-shift-degree-1.svg diff --git a/packages/g6/__tests__/bugs/behaviors-click-select.spec.ts b/packages/g6/__tests__/bugs/behaviors-click-select.spec.ts new file mode 100644 index 00000000000..77d40dcff2e --- /dev/null +++ b/packages/g6/__tests__/bugs/behaviors-click-select.spec.ts @@ -0,0 +1,17 @@ +import { behaviorClickSelect } from '@/__tests__/demos'; +import { CommonEvent, NodeEvent } from '@/src'; +import { createDemoGraph } from '@@/utils'; + +describe('behavior click-select', () => { + it('multiple select with degree 1', async () => { + const graph = await createDemoGraph(behaviorClickSelect, { animation: false }); + graph.updateBehavior({ key: 'click-select', degree: 1, multiple: true }); + + graph.emit(NodeEvent.CLICK, { target: { id: '29' }, targetType: 'node' }); + graph.emit(CommonEvent.KEY_DOWN, { key: 'shift' }); + graph.emit(NodeEvent.CLICK, { target: { id: '6' }, targetType: 'node' }); + graph.emit(CommonEvent.KEY_UP, { key: 'shift' }); + + await expect(graph).toMatchSnapshot(__filename, 'multiple-shift-degree-1'); + }); +}); diff --git a/packages/g6/__tests__/snapshots/__tests__/bugs/behaviors-click-select/multiple-shift-degree-1.svg b/packages/g6/__tests__/snapshots/__tests__/bugs/behaviors-click-select/multiple-shift-degree-1.svg new file mode 100644 index 00000000000..5dcc50cbb3c --- /dev/null +++ b/packages/g6/__tests__/snapshots/__tests__/bugs/behaviors-click-select/multiple-shift-degree-1.svg @@ -0,0 +1,626 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/g6/src/behaviors/click-select.ts b/packages/g6/src/behaviors/click-select.ts index f996ac765df..f9352517028 100644 --- a/packages/g6/src/behaviors/click-select.ts +++ b/packages/g6/src/behaviors/click-select.ts @@ -188,17 +188,19 @@ export class ClickSelect extends BaseBehavior { }); } - let neighborIds: Set | undefined; + const neighborIds = new Set(); if (neighbor) { const d = typeof degree === 'function' ? degree(event) : degree; if (d) { const targetType = event.targetType as ElementType; this.select.forEach((id) => { - neighborIds = new Set(getElementNthDegreeIds(graph, targetType, id, d).filter((id) => !this.select.has(id))); + getElementNthDegreeIds(graph, targetType, id, d).forEach((id) => { + if (!this.select.has(id)) neighborIds.add(id); + }); }); } const exclude = [select, unselect]; - neighborIds?.forEach((id) => { + neighborIds.forEach((id) => { const state = graph.getElementState(id); states[id] = uniq([...state.filter((s) => !exclude.includes(s)), neighbor]); }); @@ -206,7 +208,7 @@ export class ClickSelect extends BaseBehavior { const exclude = [select, neighbor, unselect]; idsOf(graph.getData(), true).forEach((id) => { - if (!this.select.has(id) && !neighborIds?.has(id)) { + if (!this.select.has(id) && !neighborIds.has(id)) { const state = graph.getElementState(id); const filtered = state.filter((s) => !exclude.includes(s)); // 仅在有选中元素时应用 unselect 状态