refactor: rename to click-select and hover-activate behavior

packages/g6/__tests__/demos/behavior-click-element.ts → packages/g6/__tests__/demos/behavior-click-select.ts

@@ -1,8 +1,8 @@
 import { Graph } from '@/src';
-import type { ClickElementOptions } from '@/src/behaviors';
+import type { ClickSelectOptions } from '@/src/behaviors';
 import data from '@@/dataset/cluster.json';
 
-export const behaviorClickElement: TestCase = async (context) => {
+export const behaviorClickSelect: TestCase = async (context) => {
   const graph = new Graph({
     ...context,
     data,
@@ -15,7 +15,7 @@ export const behaviorClickElement: TestCase = async (context) => {
       },
     },
     zoomRange: [0.5, 5],
-    behaviors: [{ type: 'click-element', key: 'click-element' }, 'drag-element'],
+    behaviors: [{ type: 'click-select', key: 'click-select' }, 'drag-element'],
   });
 
   await graph.render();
@@ -24,27 +24,27 @@ export const behaviorClickElement: TestCase = async (context) => {
     multiple: false,
     trigger: ['shift'],
     degree: 0,
-    selectedState: 'selected',
+    state: 'selected',
     unselectedState: undefined,
   };
 
-  const updateClickElementOption = (options: Partial<ClickElementOptions>) => {
-    graph.updateBehavior({ key: 'click-element', ...options });
+  const updateClickSelectOption = (options: Partial<ClickSelectOptions>) => {
+    graph.updateBehavior({ key: 'click-select', ...options });
   };
 
-  behaviorClickElement.form = (panel) => [
+  behaviorClickSelect.form = (panel) => [
     panel
       .add(config, 'multiple')
       .name('Multiple')
-      .onChange((multiple: boolean) => updateClickElementOption({ multiple })),
+      .onChange((multiple: boolean) => updateClickSelectOption({ multiple })),
     panel
       .add(config, 'trigger', ['shift', 'ctrl', 'alt', 'meta'])
       .name('Trigger')
-      .onChange((trigger: string) => updateClickElementOption({ trigger: [trigger] })),
+      .onChange((trigger: string) => updateClickSelectOption({ trigger: [trigger] })),
     panel
       .add(config, 'degree', [0, 1, 2, 3])
       .name('Degree')
-      .onChange((degree: number) => updateClickElementOption({ degree })),
+      .onChange((degree: number) => updateClickSelectOption({ degree })),
   ];
 
   return graph;

packages/g6/__tests__/demos/behavior-hover-element.ts → packages/g6/__tests__/demos/behavior-hover-activate.ts

@@ -1,7 +1,7 @@
 import { Graph } from '@/src';
 import data from '@@/dataset/cluster.json';
 
-export const behaviorHoverElement: TestCase = async (context) => {
+export const behaviorHoverActivate: TestCase = async (context) => {
   const graph = new Graph({
     ...context,
     data: data,
@@ -15,7 +15,7 @@ export const behaviorHoverElement: TestCase = async (context) => {
       },
     },
     zoomRange: [0.5, 5],
-    behaviors: [{ type: 'hover-element' }],
+    behaviors: [{ type: 'hover-activate' }],
   });
 
   await graph.render();
@@ -24,11 +24,11 @@ export const behaviorHoverElement: TestCase = async (context) => {
     degree: 0,
   };
 
-  behaviorHoverElement.form = (panel) => [
+  behaviorHoverActivate.form = (panel) => [
     panel
       .add(config, 'degree', 0, 3, 1)
       .name('Degree')
-      .onChange((degree: number) => graph.setBehaviors([{ type: 'hover-element', degree }])),
+      .onChange((degree: number) => graph.setBehaviors([{ type: 'hover-activate', degree }])),
   ];
 
   return graph;

packages/g6/__tests__/demos/index.ts

@@ -6,14 +6,14 @@ export { animationElementState } from './animation-element-state';
 export { animationElementStateSwitch } from './animation-element-state-switch';
 export { animationElementStylePosition } from './animation-element-style-position';
 export { behaviorBrushSelect } from './behavior-brush-select';
-export { behaviorClickElement } from './behavior-click-element';
+export { behaviorClickSelect } from './behavior-click-select';
 export { behaviorCreateEdge } from './behavior-create-edge';
 export { behaviorDragCanvas } from './behavior-drag-canvas';
 export { behaviorDragNode } from './behavior-drag-element';
 export { behaviorExpandCollapseCombo } from './behavior-expand-collapse-combo';
 export { behaviorExpandCollapseNode } from './behavior-expand-collapse-node';
 export { behaviorFocusElement } from './behavior-focus-element';
-export { behaviorHoverElement } from './behavior-hover-element';
+export { behaviorHoverActivate } from './behavior-hover-activate';
 export { behaviorLassoSelect } from './behavior-lasso-select';
 export { behaviorScrollCanvas } from './behavior-scroll-canvas';
 export { behaviorZoomCanvas } from './behavior-zoom-canvas';

packages/g6/__tests__/demos/transform-process-parallel-edges.ts

@@ -9,8 +9,8 @@ export const transformProcessParallelEdges: TestCase = async (context) => {
     behaviors: [
       'drag-element',
       {
-        type: 'hover-element',
-        key: 'hover-element',
+        type: 'hover-activate',
+        key: 'hover-activate',
         enable: (event: any) => event.targetType === 'edge',
       },
     ],

packages/g6/__tests__/unit/behaviors/click-element.spec.ts → packages/g6/__tests__/unit/behaviors/click-select.spec.ts

@@ -1,12 +1,12 @@
-import { behaviorClickElement } from '@/__tests__/demos';
+import { behaviorClickSelect } from '@/__tests__/demos';
 import { CommonEvent, type Graph } from '@/src';
 import { createDemoGraph } from '@@/utils';
 
-describe('behavior click element', () => {
+describe('behavior click-select element', () => {
   let graph: Graph;
 
   beforeAll(async () => {
-    graph = await createDemoGraph(behaviorClickElement, { animation: false });
+    graph = await createDemoGraph(behaviorClickSelect, { animation: false });
   });
 
   afterAll(() => {
@@ -23,37 +23,37 @@ describe('behavior click element', () => {
     await expect(graph).toMatchSnapshot(__filename, 'after-deselect');
   });
 
-  it('selectedState and unselectedState', async () => {
-    graph.setBehaviors([{ type: 'click-element', selectedState: 'active', unselectedState: 'inactive' }]);
+  it('state and unselectedState', async () => {
+    graph.setBehaviors([{ type: 'click-select', state: 'active', unselectedState: 'inactive' }]);
 
     graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' });
     await expect(graph).toMatchSnapshot(__filename, 'custom-state');
     graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' });
   });
 
-  it('selectedState and neighborSelectedState', async () => {
+  it('state and neighborState', async () => {
     graph.setBehaviors([
       {
-        type: 'click-element',
-        selectedState: 'selected',
-        neighborSelectedState: 'active',
+        type: 'click-select',
+        state: 'selected',
+        neighborState: 'active',
         unselectedState: 'inactive',
         degree: 1,
       },
     ]);
 
     graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' });
-    await expect(graph).toMatchSnapshot(__filename, 'custom-neighborSelectedState');
+    await expect(graph).toMatchSnapshot(__filename, 'custom-neighborState');
     graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' });
   });
 
   it('1 degree', async () => {
     graph.setBehaviors([
       {
-        type: 'click-element',
+        type: 'click-select',
         degree: 1,
-        selectedState: 'selected',
-        neighborSelectedState: 'selected',
+        state: 'selected',
+        neighborState: 'selected',
         unselectedState: undefined,
       },
     ]);
@@ -68,7 +68,7 @@ describe('behavior click element', () => {
   });
 
   it('multiple', async () => {
-    graph.setBehaviors([{ type: 'click-element', multiple: true, degree: 0 }]);
+    graph.setBehaviors([{ type: 'click-select', multiple: true, degree: 0 }]);
 
     graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' });
     graph.emit(CommonEvent.KEY_DOWN, { key: 'shift' });
@@ -77,7 +77,7 @@ describe('behavior click element', () => {
 
     await expect(graph).toMatchSnapshot(__filename, 'multiple-shift');
 
-    graph.setBehaviors([{ type: 'click-element', multiple: true, trigger: ['meta'] }]);
+    graph.setBehaviors([{ type: 'click-select', multiple: true, trigger: ['meta'] }]);
 
     graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' });
     graph.emit(CommonEvent.KEY_DOWN, { key: 'meta' });

packages/g6/__tests__/unit/behaviors/hover-element.spec.ts → packages/g6/__tests__/unit/behaviors/hover-activate.spec.ts

@@ -1,12 +1,12 @@
-import { behaviorHoverElement } from '@/__tests__/demos';
+import { behaviorHoverActivate } from '@/__tests__/demos';
 import { CommonEvent, type Graph } from '@/src';
 import { createDemoGraph } from '@@/utils';
 
-describe('behavior hover element', () => {
+describe('behavior hover-activate element', () => {
   let graph: Graph;
 
   beforeAll(async () => {
-    graph = await createDemoGraph(behaviorHoverElement, { animation: false });
+    graph = await createDemoGraph(behaviorHoverActivate, { animation: false });
   });
 
   afterAll(() => {
@@ -25,8 +25,8 @@ describe('behavior hover element', () => {
     await expect(graph).toMatchSnapshot(__filename, 'after-hover-out');
   });
 
-  it('activeState and inactiveState', async () => {
-    graph.setBehaviors([{ type: 'hover-element', activeState: 'active', inactiveState: 'inactive' }]);
+  it('state and inactiveState', async () => {
+    graph.setBehaviors([{ type: 'hover-activate', state: 'active', inactiveState: 'inactive' }]);
 
     graph.emit(`node:${CommonEvent.POINTER_OVER}`, { target: { id: '0' }, targetType: 'node' });
 
@@ -36,7 +36,7 @@ describe('behavior hover element', () => {
   });
 
   it('1 degree', async () => {
-    graph.setBehaviors([{ type: 'hover-element', activeState: 'active', inactiveState: 'inactive', degree: 1 }]);
+    graph.setBehaviors([{ type: 'hover-activate', state: 'active', inactiveState: 'inactive', degree: 1 }]);
 
     graph.emit(`node:${CommonEvent.POINTER_OVER}`, { target: { id: '0' }, targetType: 'node' });
 
@@ -52,7 +52,7 @@ describe('behavior hover element', () => {
   });
 
   it('2 degree', async () => {
-    graph.setBehaviors([{ type: 'hover-element', activeState: 'active', inactiveState: 'inactive', degree: 2 }]);
+    graph.setBehaviors([{ type: 'hover-activate', state: 'active', inactiveState: 'inactive', degree: 2 }]);
 
     graph.emit(`node:${CommonEvent.POINTER_OVER}`, { target: { id: '0' }, targetType: 'node' });
 

packages/g6/src/behaviors/click-element.ts → packages/g6/src/behaviors/click-select.ts

@@ -15,7 +15,7 @@ import { BaseBehavior } from './base-behavior';
  *
  * <en/> Click element behavior options
  */
-export interface ClickElementOptions extends BaseBehaviorOptions {
+export interface ClickSelectOptions extends BaseBehaviorOptions {
   /**
    * <zh/> 是否启用动画
    *
@@ -58,14 +58,14 @@ export interface ClickElementOptions extends BaseBehaviorOptions {
    * <en/> The state to be applied when an element is selected
    * @defaultValue 'selected'
    */
-  selectedState?: State;
+  state?: State;
   /**
    * <zh/> 当有元素选中时，其相邻 n 度关系的元素应用的状态。n 的值由属性 degree 控制，例如 degree 为 1 时表示直接相邻的元素
    *
    * <en/> 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;
+  neighborState?: State;
   /**
    * <zh/> 当有元素被选中时，除了选中元素及其受影响的邻居元素外，其他所有元素应用的状态。
    *
@@ -106,26 +106,26 @@ export interface ClickElementOptions extends BaseBehaviorOptions {
  *
  * <en/> 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<ClickElementOptions> {
+export class ClickSelect extends BaseBehavior<ClickSelectOptions> {
   private selectedElementIds: Set<ID> = new Set<ID>();
 
   private neighborSelectedElementIds: Set<ID> = new Set<ID>();
 
   private shortcut: Shortcut;
 
-  static defaultOptions: Partial<ClickElementOptions> = {
+  static defaultOptions: Partial<ClickSelectOptions> = {
     animation: true,
     enable: true,
     multiple: false,
     trigger: ['shift'],
-    selectedState: 'selected',
-    neighborSelectedState: 'selected',
+    state: 'selected',
+    neighborState: 'selected',
     unselectedState: undefined,
     degree: 0,
   };
 
-  constructor(context: RuntimeContext, options: ClickElementOptions) {
-    super(context, Object.assign({}, ClickElement.defaultOptions, options));
+  constructor(context: RuntimeContext, options: ClickSelectOptions) {
+    super(context, Object.assign({}, ClickSelect.defaultOptions, options));
     this.shortcut = new Shortcut(context.graph);
     this.bindEvents();
   }
@@ -134,12 +134,12 @@ export class ClickElement extends BaseBehavior<ClickElementOptions> {
     const { graph } = this.context;
     this.unbindEvents();
     ELEMENT_TYPES.forEach((type) => {
-      graph.on(`${type}:${CommonEvent.CLICK}`, this.onClickElement);
+      graph.on(`${type}:${CommonEvent.CLICK}`, this.onClickSelect);
     });
     graph.on(`canvas:${CommonEvent.CLICK}`, this.onClickCanvas);
   }
 
-  private onClickElement = (event: IPointerEvent) => {
+  private onClickSelect = (event: IPointerEvent) => {
     if (!this.validate(event)) return;
     this.updateElementsState(event, false);
     this.updateElementsState(event, true);
@@ -155,7 +155,7 @@ export class ClickElement extends BaseBehavior<ClickElementOptions> {
   };
 
   private updateElementsState = (event: IPointerEvent, add: boolean) => {
-    if (!this.options.selectedState && !this.options.unselectedState) return;
+    if (!this.options.state && !this.options.unselectedState) return;
 
     const { graph } = this.context;
     const { target } = event as { target: Element };
@@ -175,17 +175,14 @@ export class ClickElement extends BaseBehavior<ClickElementOptions> {
 
     const states: Record<ID, State[]> = {};
 
-    if (this.options.selectedState) {
-      Object.assign(
-        states,
-        this.getElementsState(Array.from(this.selectedElementIds), this.options.selectedState, add),
-      );
+    if (this.options.state) {
+      Object.assign(states, this.getElementsState(Array.from(this.selectedElementIds), this.options.state, add));
     }
 
-    if (this.options.neighborSelectedState && this.neighborSelectedElementIds.size > 0) {
+    if (this.options.neighborState && this.neighborSelectedElementIds.size > 0) {
       Object.assign(
         states,
-        this.getElementsState(Array.from(this.neighborSelectedElementIds), this.options.neighborSelectedState, add),
+        this.getElementsState(Array.from(this.neighborSelectedElementIds), this.options.neighborState, add),
       );
     }
 
@@ -236,7 +233,7 @@ export class ClickElement extends BaseBehavior<ClickElementOptions> {
     const { graph } = this.context;
 
     ELEMENT_TYPES.forEach((type) => {
-      graph.off(`${type}:${CommonEvent.CLICK}`, this.onClickElement);
+      graph.off(`${type}:${CommonEvent.CLICK}`, this.onClickSelect);
     });
     graph.off(`canvas:${CommonEvent.CLICK}`, this.onClickCanvas);
   }