feat(plugin): add fisheye plugin (#6235)

* feat(plugin): add fisheye plugin

* test: add fisheye unit tests

* docs: add fisheye demo

* fix: remove useless values

* fix: remove undefined value

packages/g6/__tests__/demos/index.ts

@@ -114,6 +114,7 @@ export { pluginBubbleSets } from './plugin-bubble-sets';
 export { pluginCameraSetting } from './plugin-camera-setting';
 export { pluginContextmenu } from './plugin-contextmenu';
 export { pluginEdgeFilterLens } from './plugin-edge-filter-lens';
+export { pluginFisheye } from './plugin-fisheye';
 export { pluginFullscreen } from './plugin-fullscreen';
 export { pluginGridLine } from './plugin-grid-line';
 export { pluginHistory } from './plugin-history';

packages/g6/__tests__/demos/plugin-fisheye.ts

@@ -0,0 +1,37 @@
+import data from '@@/dataset/relations.json';
+import type { NodeData } from '@antv/g6';
+import { Graph } from '@antv/g6';
+
+export const pluginFisheye: TestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    autoFit: 'view',
+    data,
+    node: {
+      style: {
+        size: (datum: NodeData) => datum.id.length * 2 + 10,
+        label: false,
+        labelText: (datum: NodeData) => datum.id,
+        labelBackground: true,
+        icon: false,
+        iconFontFamily: 'iconfont',
+        iconText: '\ue6f6',
+        iconFill: '#fff',
+      },
+      palette: {
+        type: 'group',
+        field: (datum: NodeData) => datum.id,
+        color: ['#1783FF', '#00C9C9', '#F08F56', '#D580FF'],
+      },
+    },
+    edge: {
+      style: {
+        stroke: '#e2e2e2',
+      },
+    },
+    plugins: [{ key: 'fisheye', type: 'fisheye', nodeStyle: { label: true, icon: true } }],
+  });
+
+  await graph.render();
+  return graph;
+};

packages/g6/__tests__/unit/plugins/fisheye.spec.ts

@@ -0,0 +1,135 @@
+import { pluginFisheye } from '@@/demos';
+import { CommonEvent, Graph } from '@antv/g6';
+import { createDemoGraph, dispatchCanvasEvent } from '../../utils';
+import { emitWheelEvent } from '../../utils/dom';
+
+describe('plugin-fisheye', () => {
+  let graph: Graph;
+
+  beforeAll(async () => {
+    graph = await createDemoGraph(pluginFisheye, { animation: false });
+  });
+
+  afterAll(() => {
+    graph.destroy();
+  });
+
+  it('move lens by pointermove', async () => {
+    await expect(graph).toMatchSnapshot(__filename);
+
+    dispatchCanvasEvent(graph, CommonEvent.POINTER_MOVE, { canvas: { x: 420, y: 150 } });
+
+    await expect(graph).toMatchSnapshot(__filename, 'move-lens-pointermove');
+  });
+
+  it('move lens by drag', async () => {
+    graph.updatePlugin({ key: 'fisheye', trigger: 'drag' });
+
+    dispatchCanvasEvent(graph, CommonEvent.CLICK, { canvas: { x: 420, y: 150 } });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_START, { canvas: { x: 420, y: 150 } });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG, { canvas: { x: 400, y: 180 } });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_END);
+
+    await expect(graph).toMatchSnapshot(__filename, 'move-lens-drag');
+  });
+
+  it('move lens by click', async () => {
+    graph.updatePlugin({ key: 'fisheye', trigger: 'click' });
+
+    dispatchCanvasEvent(graph, CommonEvent.CLICK, { canvas: { x: 180, y: 100 } });
+    await expect(graph).toMatchSnapshot(__filename, 'move-lens-click-1');
+
+    dispatchCanvasEvent(graph, CommonEvent.CLICK, { canvas: { x: 200, y: 100 } });
+    await expect(graph).toMatchSnapshot(__filename, 'move-lens-click-2');
+  });
+
+  it('scale lens R/D by wheel', async () => {
+    graph.updatePlugin({ key: 'fisheye', scaleRBy: 'wheel', scaleDBy: 'unset' });
+
+    const emitWheelUpEvent = (count: number) => {
+      for (let i = 0; i < count; i++) {
+        emitWheelEvent(graph, { deltaX: 1, deltaY: 2, clientX: 420, clientY: 150 });
+      }
+    };
+    const emitWheelDownEvent = (count: number) => {
+      for (let i = 0; i < count; i++) {
+        emitWheelEvent(graph, { deltaX: -1, deltaY: -2, clientX: 420, clientY: 150 });
+      }
+    };
+
+    dispatchCanvasEvent(graph, CommonEvent.CLICK, { canvas: { x: 420, y: 150 } });
+
+    emitWheelUpEvent(5);
+    await expect(graph).toMatchSnapshot(__filename, 'scale-R-wheel-larger');
+    emitWheelDownEvent(10);
+    await expect(graph).toMatchSnapshot(__filename, 'scale-R-wheel-smaller');
+    emitWheelUpEvent(5);
+
+    graph.updatePlugin({ key: 'fisheye', scaleRBy: 'unset', scaleDBy: 'wheel' });
+
+    emitWheelUpEvent(5);
+    await expect(graph).toMatchSnapshot(__filename, 'scale-D-wheel-larger');
+    emitWheelDownEvent(10);
+    await expect(graph).toMatchSnapshot(__filename, 'scale-D-wheel-smaller');
+    emitWheelUpEvent(5);
+  });
+
+  it('scale lens R/D by drag', async () => {
+    graph.updatePlugin({ key: 'fisheye', scaleRBy: 'drag', scaleDBy: 'unset' });
+
+    const emitPositionDragEvent = (count: number) => {
+      dispatchCanvasEvent(graph, CommonEvent.DRAG_START, { canvas: { x: 420, y: 150 } });
+      for (let i = 0; i < count; i++) {
+        dispatchCanvasEvent(graph, CommonEvent.DRAG, { dx: 1, dy: -2 });
+      }
+      dispatchCanvasEvent(graph, CommonEvent.DRAG_END);
+    };
+
+    const emitNegativeDragEvent = (count: number) => {
+      dispatchCanvasEvent(graph, CommonEvent.DRAG_START, { canvas: { x: 420, y: 150 } });
+      for (let i = 0; i < count; i++) {
+        dispatchCanvasEvent(graph, CommonEvent.DRAG, { dx: -1, dy: 2 });
+      }
+      dispatchCanvasEvent(graph, CommonEvent.DRAG_END);
+    };
+
+    emitPositionDragEvent(5);
+    await expect(graph).toMatchSnapshot(__filename, 'scale-R-drag-larger');
+    emitNegativeDragEvent(10);
+    await expect(graph).toMatchSnapshot(__filename, 'scale-R-drag-smaller');
+    emitPositionDragEvent(5);
+
+    graph.updatePlugin({ key: 'fisheye', scaleRBy: 'unset', scaleDBy: 'drag' });
+
+    emitPositionDragEvent(5);
+    await expect(graph).toMatchSnapshot(__filename, 'scale-D-drag-larger');
+    emitNegativeDragEvent(10);
+    await expect(graph).toMatchSnapshot(__filename, 'scale-D-drag-smaller');
+    emitPositionDragEvent(5);
+  });
+
+  it('show D percent', async () => {
+    graph.updatePlugin({ key: 'fisheye', showDPercent: false });
+
+    dispatchCanvasEvent(graph, CommonEvent.CLICK, { canvas: { x: 420, y: 150 } });
+    await expect(graph).toMatchSnapshot(__filename, 'hide-D-percent');
+  });
+
+  it('lens style', async () => {
+    graph.updatePlugin({
+      key: 'fisheye',
+      showDPercent: true,
+      style: { fill: '#f00', lineDash: [5, 5], stroke: '#666' },
+    });
+
+    dispatchCanvasEvent(graph, CommonEvent.CLICK, { canvas: { x: 420, y: 150 } });
+    await expect(graph).toMatchSnapshot(__filename, 'lens-style');
+  });
+
+  it('node style in lens', async () => {
+    graph.updatePlugin({ key: 'fisheye', style: { lineDash: 0 }, nodeStyle: { halo: true } });
+
+    dispatchCanvasEvent(graph, CommonEvent.CLICK, { canvas: { x: 420, y: 150 } });
+    await expect(graph).toMatchSnapshot(__filename, 'node-style');
+  });
+});

packages/g6/__tests__/utils/dom.ts

@@ -0,0 +1,10 @@
+import type { Graph } from '@/src';
+import { CommonEvent } from '@/src';
+
+export function emitWheelEvent(
+  graph: Graph,
+  options?: { deltaX: number; deltaY: number; clientX: number; clientY: number },
+) {
+  const dom = graph.getCanvas().getContextService().getDomElement();
+  dom?.dispatchEvent(new WheelEvent(CommonEvent.WHEEL, options));
+}

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

@@ -71,7 +71,6 @@ export interface ClickSelectOptions extends BaseBehaviorOptions {
    * <zh/> 当有元素被选中时，除了选中元素及其受影响的邻居元素外，其他所有元素应用的状态。
    *
    * <en/> 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;
   /**

packages/g6/src/constants/events/canvas.ts

@@ -21,7 +21,7 @@ export enum CanvasEvent {
    *
    * <en/> Triggered when the pointer enters
    */
-  POINTER_OVER = 'canvas:canvas:pointerover',
+  POINTER_OVER = 'canvas:pointerover',
   /**
    * <zh/> 指针移出时触发
    *

packages/g6/src/exports.ts

@@ -68,6 +68,7 @@ export {
   CameraSetting,
   Contextmenu,
   EdgeFilterLens,
+  Fisheye,
   Fullscreen,
   GridLine,
   History,
@@ -170,6 +171,7 @@ export type {
   CameraSettingOptions,
   ContextmenuOptions,
   EdgeFilterLensOptions,
+  FisheyeOptions,
   FullscreenOptions,
   GridLineOptions,
   HistoryOptions,