Vue 携手 AntV X6 巧妙绘制流程图，尽情挥洒您的设计灵感（二）

2023-10-07 19:36:49

事件处理：让流程图动起来

在上一篇文章中，我们了解了如何创建画板，接下来，让我们探索如何响应用户交互，让流程图动起来。AntV X6 提供了丰富的事件处理机制，使您能够轻松捕捉用户操作并做出相应的反应。

首先，我们需要为画板添加事件监听器，如下所示：

import { X6 } from '@antv/x6';

const graph = new X6.Graph({
  container: document.getElementById('container'),
  // 监听鼠标按下事件
  mouseDownEvent: 'mousedown',
});

有了事件监听器，我们就可以对用户交互做出响应了。以下是如何处理拖拽缩放事件：

// 监听鼠标拖拽事件
graph.on('mousemove', (e) => {
  // 检查鼠标按下并移动
  if (e.button === 'left' && e.deltaX !== 0 && e.deltaY !== 0) {
    // 缩放画布
    graph.zoom(e.deltaY * -0.01);
  }
});

添加删除按钮：掌控流程

为了让您的流程图更具交互性，让我们添加一个删除按钮，允许您轻松删除选中的元素。

在 AntV X6 中，添加按钮非常简单。首先，我们为画布添加一个工具栏：

const toolbar = new X6. eiffel({
  graph,
  getContent() {
    return [
      {
        label: '删除',
        command: 'delete',
      },
    ];
  },
});

接下来，我们需要实现 delete 命令：

graph.bindCommand('delete', (e) => {
  // 获取选中的元素
  const selected = graph.getSelected();
  // 删除选中的元素
  selected.forEach((item) => {
    item.remove();
  });
});