createHookConfig

https://antv-xflow.gitee.io/zh-CN/docs/tutorial-advanced/hook
支持的 hooks

1. graphOptions x6 graph 配置项
2. x6Events 绑定X6的事件
3. reactNodeRender 自定义节点React组件
4. reactEdgeLabelRender 自定义连线label的React组件
5. afterGraphInit 在Graph 实例化后执行的逻辑
6. beforeGraphDestroy 在Graph 销毁前执行的逻辑

const useGraphHookConfig = createHookConfig((config, proxy) => {
  // 获取 Props
  const props = proxy.getValue()
  config.setRegisterHook(hooks => {
    const disposableList = [
      // 注册增加 react Node Render
      hooks.reactNodeRender.registerHook({
        name: 'add react node',
        handler: async renderMap => {
          renderMap.set(DND_RENDER_ID, AlgoNode)
          renderMap.set(GROUP_NODE_RENDER_ID, GroupNode)
        },
      }),
      // 注册修改graphOptions配置的钩子
      hooks.graphOptions.registerHook({
        name: 'custom-x6-options',
        after: 'dag-extension-x6-options',
        handler: async options => {
          // 画布配置
          options.grid = {
            size: 8,
            visible: true,
          }
          options.keyboard = {
            enabled: true,
          }
        },
      }),
      // 注册增加 graph event
      hooks.x6Events.registerHook({
        name: 'add',
        handler: async events => {
          events.push({
            eventName: 'node:moved',
            callback: (e, cmds) => {
              const {node} = e
              cmds.executeCommand<NsNodeCmd.MoveNode.IArgs>(XFlowNodeCommands.MOVE_NODE.id, {
                id: node.id,
                position: node.getPosition(),
              })
            },
          } as NsGraph.IEvent<'node:moved'>)
        },
      }),
    ]
    const toDispose = new DisposableCollection()
    toDispose.pushAll(disposableList)
    return toDispose
  })
})