自定义交互

查看 Markdown编辑此页

概述

自定义交互允许用户基于 G6 提供的完善的事件机制，把一个或多个相关的交互行为定义为一个完整的交互，以此实现符合业务场景的交互逻辑。

交互的执行逻辑

通常为：

监听用户交互事件
根据事件更新画布或执行其他操作

例如 DragCanvas 交互监听指针拖拽事件，根据拖拽的距离更新相机的位置。

交互与插件的区别

交互和插件的基类都是由 G6 内部的 BaseExtension 基类派生而来，因此交互和插件的实现方式基本相同
但基于可视化的概念区分，交互通常用于处理用户交互事件，而插件通常用于处理画布的渲染逻辑、额外组件渲染等

:::info{title=提示} 因概念上的区分，交互实例不可获取，插件实例可获取（ getPluginInstance ） :::

什么时候需要自定义交互？

目的：

当用户在实现符合业务场景的交互逻辑时，我们通常需要配合 G6 的事件系统，对相关事件作出响应，执行需要的交互逻辑。
不使用自定义交互：

如果不使用自定义交互，用户需要在创建 Graph 实例后，通过 graph.on 进行一系列的事件监听和响应处理，代码逻辑处理和编排会显得异常艰难。
交互的优势：

每个交互行为都是独立的代码模块，交互系统的存在方便用户解耦业务逻辑、避免代码臃肿以及方便用户后续维护等。
结论：

1、当用户需要实现任何交互逻辑时，应当首先考虑自定义交互。

2、当内置交互无法完全满足业务需求时，用户也可以通过自定义交互（继承内置交互）进行调整和修改。

（如果需要内置交互支持的特性是较通用的，或者内置交互存在 Bug ，这种时候欢迎大家到 Github 提 Issue 或者 PR ）

实现交互

一个交互的实现相当灵活，你可以以你喜欢的风格实现你的交互。

下面是一个简单的自定义交互实现，当用户点击画布时，会在画布上添加一个节点（可通过交互配置定义所添加节点的填充颜色）：

import type { BaseBehaviorOptions, RuntimeContext, IPointerEvent } from '@antv/g6';
import { BaseBehavior, CanvasEvent } from '@antv/g6';

interface ClickAddNodeOptions extends BaseBehaviorOptions {
  fill: string;
}

export class ClickAddNode extends BaseBehavior<ClickAddNodeOptions> {
  static defaultOptions: Partial<ClickAddNodeOptions> = {
    fill: 'red',
  };
  constructor(context: RuntimeContext, options: ClickAddNodeOptions) {
    super(context, Object.assign({}, ClickAddNode.defaultOptions, options));
    this.bindEvents();
  }
  private bindEvents() {
    const { graph } = this.context;
    graph.on(CanvasEvent.CLICK, this.addNode);
  }
  private addNode = (event: IPointerEvent) => {
    const { graph } = this.context;
    const { layerX, layerY } = event.nativeEvent as PointerEvent;
    graph.addNodeData([
      {
        id: 'node-' + Date.now(),
        style: { x: layerX, y: layerY, fill: this.options.fill },
      },
    ]);
    graph.draw();
  };
  private unbindEvents() {
    const { graph } = this.context;
    graph.off(CanvasEvent.CLICK, this.addNode);
  }
  public destroy() {
    // 销毁时解绑事件
    this.unbindEvents();
    super.destroy();
  }
}

在示例代码中，我们实现了一个 ClickAddNode 交互，该交互在构造函数中添加了 Graph 的事件监听，当用户点击画布时，会在点击位置添加一个节点，并且支持配置所添加节点的填充颜色。
BaseBehavior 是所有交互的基类，每个自定义交互都需要继承这个基类实现。

点击下面画布中的空白位置以添加一个节点，可切换右侧面板配置节点颜色

import { createGraph } from '/demo-runtime.ts';

import * as g6 from '@antv/g6';
(async () => {
  const { BaseBehavior, CanvasEvent, register, ExtensionCategory, Graph } = g6;

  class ClickAddNode extends BaseBehavior {
    constructor(context, options) {
      super(context, options);

      const { graph } = this.context;
      graph.on(CanvasEvent.CLICK, (event) => {
        const { layerX, layerY } = event.nativeEvent;
        graph.addNodeData([
          {
            id: 'node-' + Date.now(),
            style: { x: layerX, y: layerY, fill: options.fill },
          },
        ]);
        graph.draw();
      });
    }
  }

  register(ExtensionCategory.BEHAVIOR, 'click-add-node', ClickAddNode);

  const wrapEl = await createGraph(
    {
      data: {
        nodes: [],
      },
      behaviors: [
        {
          type: 'click-add-node',
          key: 'click-add-node',
          fill: 'red',
        },
      ],
    },
    { width: 600, height: 300 },
    (gui, graph) => {
      const options = {
        key: 'click-add-node',
        type: 'click-add-node',
        fill: 'red',
      };
      const optionFolder = gui.addFolder('ClickAddNode Options');
      optionFolder.add(options, 'fill', ['red', 'black', 'blue', 'green', 'yellow', 'purple']);

      optionFolder.onChange(({ property, value }) => {
        graph.updateBehavior({
          key: 'click-add-node',
          [property]: value,
        });
        graph.render();
      });
    },
  );

  return wrapEl;
})();

import { Graph } from '@antv/g6';
import GUI from 'lil-gui';

export function addPanel(renderPanel: (gui: GUI) => void) {
  const gui = new GUI({ container: document.body });
  gui.title('Control');
  Object.assign(gui.domElement.style, { position: 'absolute', top: '0', right: '0', zIndex: '10' });
  renderPanel(gui);
  addEventListener('pagehide', () => gui.destroy(), { once: true });
}

export async function createGraph(
  options: ConstructorParameters<typeof Graph>[0],
  size: { width?: number; height?: number } = {},
  renderPanel?: (gui: GUI, graph: Graph) => void,
) {
  const container = document.createElement('div');
  Object.assign(container.style, {
    width: '100%',
    maxWidth: `${size.width || 600}px`,
    height: `${size.height || 400}px`,
  });
  document.getElementById('container')!.append(container);
  const graph = new Graph({ ...size, ...options, width: container.clientWidth, container, autoResize: true });
  addEventListener('pagehide', () => graph.destroy(), { once: true });
  await graph.render();
  if (renderPanel) addPanel((gui) => renderPanel(gui, graph));
  return container;
}

:::info{title=提示} 上述示例是一个最简单的交互实现，实际开发过程中，你可能还需要处理交互的启用与禁用等逻辑。

此外，多个交互之间可能会有事件冲突，你需要小心处理这些冲突。 :::

注册交互

通过 G6 提供的 register 方法注册即可

import { ExtensionCategory, register } from '@antv/g6';
import { ClickAddNode } from 'your-custom-behavior-path';

register(ExtensionCategory.BEHAVIOR, 'click-add-node', ClickAddNode);

配置交互

可在 behaviors 中传入交互类型名称或配置参数对象，比如上面的 ClickAddNode ，详见配置交互

const graph = new Graph({
  // 其他配置
  behaviors: [
    {
      type: 'click-add-node',
      fill: 'blue',
    },
  ],
});