Register 注册接口

Graphin 提供了声明式的 NodeShape 扩展方式。除此之外，Graphin 也支持直接传入 G6 的配置。主要支持自定义交互（behavior），自定义边，自定义边。这让用户对 G6 的交互和边有了扩展能力。

register 是通过 props 传入组件的：

  1. <Graphin register={
  2.     nodeShape: () => {},
  3.     edgeShape: () => {},
  4.     behavior: () => {}
  5. }></Graphin>

register 的具体 API 如下：

  1. register?: {
  2.     /** 通过G6原生方法，注册节点 */
  3.     nodeShape?: (G6: G6Type) => Register[];
  4.     /** 通过G6原生方法，注册边 */
  5.     edgeShape?: (G6: G6Type) => Register[];
  6.     /** 通过G6原生方法，注册事件 */
  7.     behavior?: (G6: G6Type) => BehaviorRegister[];
  8. };
  1. interface Register {
  2.     /** 节点名称 */
  3.     name: string;
  4.     /** register执行函数,参数为G6对象 */
  5.     register: (G6: G6Type) => void;
  6. }
  1. interface BehaviorRegister extends Register {
  2.     options: any;
  3.     mode: string;
  4. }

可以看到，不管是自定义 behavior 还是自定义边，都是通过一个函数注册的。这个函数接收 G6 构造函数，然后返回一个数组。每个数组代表一个要注册的节点/边/行为。其中行为的注册比节点和边要多一个 options 和 mode 字段。

注册返回的 Register 类型中，register 函数就是真正进行注册的地方：

  1. register: {
  2.     nodeShape: (G6) => [{
  3.         name: "custom",
  4.         register: () => {
  5.             G6.registerNode("custom", () => {})  // 详见 G6 registerNode 文档
  6.         }
  7.     }],
  8.     edgeShape: (G6) => [{
  9.         name: "custom",
  10.         register: () => {
  11.             G6.registerEdge("custom", () => {})  // 详见 G6 registerEdge 文档
  12.         }
  13.     }],
  14.     behavior: (G6) => [{
  15.         mode: "default",  // 详见 G6 的 mode 文档
  16.         options: {}
  17.         name: "custom",
  18.         register: () => {
  19.             G6.registerBehavior("custom", () => {})  // 详见 G6 registerBehavior 文档
  20.         }
  21.     }],
  22. }

G6 相关文档