注意：写文章的时候，我用的xflow版本是1.x的

1.绑定

<KeyBindings config={keyBindingConfigs()} />

2.配置

这个配置文档也有讲，照葫芦画瓢就行。

// keyBindingConfigs
import { Cell } from '@antv/x6/lib/model/cell';
import {
  createKeybindingConfig,
  MODELS,
  NsGraphCmd,
  XFlowEdgeCommands,
  XFlowGraphCommands,
  XFlowNodeCommands,
} from '@antv/xflow';

export default createKeybindingConfig((config) => {
  config.setKeybindingFunc((regsitry) => {
    return regsitry.registerKeybinding([
      {
        id: 'delete node or edge',
        keybinding: 'del',
        callback: async function (config, modelService, cmd, e) {
          e.preventDefault();
          const cells: Cell[] = await MODELS.SELECTED_CELLS.useValue(modelService);
          await Promise.all(
            cells.map((cell) => {
              const isEdge = cell.isEdge();
              const isNode = cell.isNode();
              if (isEdge || isNode) {
              // 删除节点和边合并在以前了，所以判断一下
                return cmd.executeCommand(
                  isEdge ? XFlowEdgeCommands.DEL_EDGE.id : XFlowNodeCommands.DEL_NODE.id,
                  isEdge
                    ? {
                        edgeConfig: { ...cell.getData()!, id: cell.id },
                      }
                    : {
                        nodeConfig: {
                          ...cell.getData(),
                          id: cell.id,
                        },
                      },
                );
              }
              return [];
            }),
          );
        },
      },
      {
        id: 'copy',
        keybinding: ['command+c', 'ctrl+c'],
        callback: async function (item, modelService, cmd, e) {
          e.preventDefault();
          cmd.executeCommand<NsGraphCmd.GraphCopySelection.IArgs>(
            XFlowGraphCommands.GRAPH_COPY.id,
            {},
          );
        },
      },
      {
        id: 'paste',
        keybinding: ['command+v', 'ctrl+v'],
        callback: async function (item, modelService, cmd, e) {
          e.preventDefault();
          cmd.executeCommand<NsGraphCmd.GraphPasteSelection.IArgs>(
            XFlowGraphCommands.GRAPH_PASTE.id,
            {},
          );
        },
      },
      {
        id: 'undo',
        keybinding: ['command+z', 'ctrl+z'],
        callback: async function (item, modelService, cmd, e) {
          e.preventDefault();
          cmd.executeCommand<NsGraphCmd.GraphHistoryUndo.IArgs>(
            XFlowGraphCommands.GRAPH_HISTORY_UNDO.id,
            {},
          );
        },
      },
      {
        id: 'redo',
        keybinding: ['command+y', 'ctrl+y'],
        callback: async function (item, modelService, cmd, e) {
          e.preventDefault();
          cmd.executeCommand<NsGraphCmd.GraphHistoryRedo.IArgs>(
            XFlowGraphCommands.GRAPH_HISTORY_REDO.id,
            {},
          );
        },
      },
    ]);
  });
});

3.注意

粘贴节点有个问题，没有id。没有id会引起很多问题，因为代码里面肯定有很多逻辑会用到节点的id，所以我们需要手动添加。

// 注意这里是在配置命令的函数里面添加的一个hook
import { createCmdConfig, Disposable, DisposableCollection } from '@antv/xflow';
import { customAlphabet } from 'nanoid';
import LoopCmd from '../commands/loop';
import RenameNodeCmd from '../commands/rename';
import ToggleCollapseGroup from '../commands/toggleCollapseGroup';

export default createCmdConfig((config) => {
  config.setCommandContributions(() => [LoopCmd, RenameNodeCmd, ToggleCollapseGroup]);

  config.setRegisterHookFn((hooks) => {
    const list: Disposable[] = [
    // 给addNode命令添加一个hook
    // 因为粘贴实际上就是添加一个节点
      hooks.addNode.registerHook({
        name: '给粘贴的node添加id',
        async handler(args) {
          const id = customAlphabet('0123456789', 18)();
          // 复制的节点有个特点就是有originalId属性
          // 所以只给复制的节点加上id
          if (args.nodeConfig.originalId) {
            const { extra = {}, ...rest } = args.nodeConfig;
            args.nodeConfig = {
              ...rest,
              id, // 加上自定义id
              extra: {
                ...extra,
                id,
              },
            };
          }
        },
      }),
    ];
    const toDispose = new DisposableCollection();
    toDispose.pushAll(list);
    return toDispose;
  });
});