feat(plugin): add fisheye plugin

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/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,