From 17e09ac7566fd6fe41b6b699242b466cbf1d070a Mon Sep 17 00:00:00 2001 From: yvonneyx Date: Fri, 31 May 2024 17:42:45 +0800 Subject: [PATCH] feat: click element behavior support setting neighborSelectedState --- .../custom-neighborSelectedState.svg | 703 ++++++++++++++++++ .../unit/behaviors/click-element.spec.ts | 26 +- packages/g6/src/behaviors/click-element.ts | 82 +- 3 files changed, 791 insertions(+), 20 deletions(-) create mode 100644 packages/g6/__tests__/snapshots/behaviors/click-element/custom-neighborSelectedState.svg diff --git a/packages/g6/__tests__/snapshots/behaviors/click-element/custom-neighborSelectedState.svg b/packages/g6/__tests__/snapshots/behaviors/click-element/custom-neighborSelectedState.svg new file mode 100644 index 00000000000..e056d2d9d17 --- /dev/null +++ b/packages/g6/__tests__/snapshots/behaviors/click-element/custom-neighborSelectedState.svg @@ -0,0 +1,703 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/unit/behaviors/click-element.spec.ts b/packages/g6/__tests__/unit/behaviors/click-element.spec.ts index 2216671f3a9..b3735d10980 100644 --- a/packages/g6/__tests__/unit/behaviors/click-element.spec.ts +++ b/packages/g6/__tests__/unit/behaviors/click-element.spec.ts @@ -31,8 +31,32 @@ describe('behavior click element', () => { graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' }); }); + it('selectedState and neighborSelectedState', async () => { + graph.setBehaviors([ + { + type: 'click-element', + selectedState: 'selected', + neighborSelectedState: 'active', + unselectedState: 'inactive', + degree: 1, + }, + ]); + + graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' }); + await expect(graph).toMatchSnapshot(__filename, 'custom-neighborSelectedState'); + graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' }); + }); + it('1 degree', async () => { - graph.setBehaviors([{ type: 'click-element', degree: 1, selectedState: 'selected', unselectedState: undefined }]); + graph.setBehaviors([ + { + type: 'click-element', + degree: 1, + selectedState: 'selected', + neighborSelectedState: 'selected', + unselectedState: undefined, + }, + ]); graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' }); await expect(graph).toMatchSnapshot(__filename, 'node-1-degree'); diff --git a/packages/g6/src/behaviors/click-element.ts b/packages/g6/src/behaviors/click-element.ts index e9e7db1c613..ab1e1d70488 100644 --- a/packages/g6/src/behaviors/click-element.ts +++ b/packages/g6/src/behaviors/click-element.ts @@ -53,16 +53,23 @@ export interface ClickElementOptions extends BaseBehaviorOptions { */ trigger?: ShortcutKey; /** - * 选中时应用的状态 + * 当元素被选中时应用的状态 * - * The state to be applied when select. + * The state to be applied when an element is selected * @defaultValue 'selected' */ selectedState?: State; /** - * 当有元素被选中时，其他未选中的元素应用的状态 + * 当有元素选中时，其相邻 n 度关系的元素应用的状态。n 的值由属性 degree 控制，例如 degree 为 1 时表示直接相邻的元素 * - * The state to be applied on other unselected elements when some elements are selected + * The state to be applied to the neighboring elements within n degrees when an element is selected. The value of n is controlled by the degree property, for instance, a degree of 1 indicates direct neighbors + * @defaultValue 'selected' + */ + neighborSelectedState?: State; + /** + * 当有元素被选中时，除了选中元素及其受影响的邻居元素外，其他所有元素应用的状态。 + * + * The state to be applied to all unselected elements when some elements are selected, excluding the selected element and its affected neighbors * @defaultValue undefined */ unselectedState?: State; @@ -80,7 +87,14 @@ export interface ClickElementOptions extends BaseBehaviorOptions { * * For edges, `0 `means only the current edge is selected,`1` means the current edge and its directly adjacent nodes are selected, etc. */ - degree?: number; + degree?: number | ((event: IPointerEvent) => number); + /** + * 点击元素时的回调 + * + * Callback when the element is clicked + * @param event - 点击事件 | click event + */ + onClick?: (event: IPointerEvent) => void; } /** @@ -93,7 +107,9 @@ export interface ClickElementOptions extends BaseBehaviorOptions { * When the mouse clicks on an element, you can activate the state of the element, such as selecting nodes or edges. When the degree is 1, clicking on a node will highlight the current node and its directly adjacent nodes and edges. */ export class ClickElement extends BaseBehavior { - private selectedElementIds: ID[] = []; + private selectedElementIds: Set = new Set(); + + private neighborSelectedElementIds: Set = new Set(); private shortcut: Shortcut; @@ -103,6 +119,7 @@ export class ClickElement extends BaseBehavior { multiple: false, trigger: ['shift'], selectedState: 'selected', + neighborSelectedState: 'selected', unselectedState: undefined, degree: 0, }; @@ -126,50 +143,77 @@ export class ClickElement extends BaseBehavior { if (!this.validate(event)) return; this.updateElementsState(event, false); this.updateElementsState(event, true); + this.options.onClick?.(event); }; private onClickCanvas = (event: IPointerEvent) => { if (!this.validate(event)) return; this.updateElementsState(event, false); - this.selectedElementIds = []; + this.selectedElementIds.clear(); + this.neighborSelectedElementIds.clear(); + this.options.onClick?.(event); }; private updateElementsState = (event: IPointerEvent, add: boolean) => { if (!this.options.selectedState && !this.options.unselectedState) return; const { graph } = this.context; - const { targetType, target } = event as { targetType: ElementType; target: Element }; + const { target } = event as { target: Element }; if (add) { // 如果当前元素已经被选中，则取消选中 | If the current element is already selected, deselect it - if (this.selectedElementIds.includes(target.id)) { - this.selectedElementIds = this.selectedElementIds.filter((id) => id !== target.id); + if (this.selectedElementIds.has(target.id)) { + this.selectedElementIds.delete(target.id); } else { - const selectedElementIds = getElementNthDegreeIds(graph, targetType, target.id, this.options.degree); const isMultiple = this.options.multiple && this.shortcut.match(this.options.trigger); - if (!isMultiple) { - this.selectedElementIds = selectedElementIds; - } else { - this.selectedElementIds.push(...selectedElementIds); - } + if (!isMultiple) this.selectedElementIds.clear(); + this.selectedElementIds.add(target.id); + this.updateNeighborSelectedElementIds(event); } } - if (!this.selectedElementIds.length) return; + if (!this.selectedElementIds.size) return; const states: Record = {}; if (this.options.selectedState) { - Object.assign(states, this.getElementsState(this.selectedElementIds, this.options.selectedState, add)); + Object.assign( + states, + this.getElementsState(Array.from(this.selectedElementIds), this.options.selectedState, add), + ); + } + + if (this.options.neighborSelectedState && this.neighborSelectedElementIds.size > 0) { + Object.assign( + states, + this.getElementsState(Array.from(this.neighborSelectedElementIds), this.options.neighborSelectedState, add), + ); } if (this.options.unselectedState) { - const inactiveIds = idsOf(graph.getData(), true).filter((id) => !this.selectedElementIds.includes(id)); + const inactiveIds = idsOf(graph.getData(), true).filter( + (id) => !this.selectedElementIds.has(id) && !this.neighborSelectedElementIds.has(id), + ); Object.assign(states, this.getElementsState(inactiveIds, this.options.unselectedState, add)); } graph.setElementState(states, this.options.animation); }; + private updateNeighborSelectedElementIds = (event: IPointerEvent) => { + this.neighborSelectedElementIds.clear(); + + const degree = isFunction(this.options.degree) ? this.options.degree(event) : this.options.degree; + if (degree) { + const { targetType } = event as { targetType: ElementType }; + this.selectedElementIds.forEach((id) => { + const neighborIds = getElementNthDegreeIds(this.context.graph, targetType, id, degree); + this.neighborSelectedElementIds = new Set( + [...this.neighborSelectedElementIds, ...neighborIds].filter((id) => !this.selectedElementIds.has(id)), + ); + }); + } + }; + private getElementsState = (ids: ID[], state: State, add: boolean) => { const { graph } = this.context; const states: Record = {};