feat: click element behavior support setting neighborSelectedState (#…

…5798)

* feat: click element behavior support setting neighborSelectedState

* 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',
       },
     ],