antvX6节点全选后鼠标通过拖拉调整视图的展示位置

使用 AntV X6 实现节点全选与画布拖动

引言

在前端开发中，使用 AntV X6 进行图编辑是一种高效的方式，能够支持拖拽、缩放、选择等交互功能。在本文中，我们将探讨如何使用 @antv/x6-plugin-selection 插件，实现节点的全选功能，并支持鼠标拖动调整视图的位置。

插件下载与安装

在使用 @antv/x6-plugin-selection 插件之前，需要确保已经安装 @antv/x6 以及相关插件。

安装 AntV X6 及插件

使用 npm 或 yarn 进行安装：

sh 复制代码

npm install @antv/x6 @antv/x6-plugin-selection --save

或使用 yarn：

sh 复制代码

yarn add @antv/x6 @antv/x6-plugin-selection

安装完成后，即可在代码中引入并使用该插件。

初始化 X6 画布

在 initializeGraph 方法中，我们创建了 Graph 实例，并配置了一些基础属性，如画布大小、背景颜色、自动缩放、鼠标滚轮缩放等。

代码示例

javascript 复制代码

import { Graph } from "@antv/x6";
import { Selection } from "@antv/x6-plugin-selection";
import { Dnd } from "@antv/x6-plugin-dnd";

function initializeGraph() {
  graph = new Graph({
    container: proxy.$refs.graphContainer,
    width: "100%",
    height: "60%",
    grid: false, // 关闭网格
    background: { color: "#ff0000" }, // 设置背景颜色
    autoResize: true, // 画布自适应
    panning: true, // 启用画布拖动
    interactive: true,
    ...baseConfig,
    mousewheel: {
      enabled: true,
      zoomAtMousePosition: true,
      minScale: 0.5,
      maxScale: 3,
    },
    selecting: {
      enabled: true,
      className: "my-selecting", // 自定义选中样式类名
    },
  });

  dnd = new Dnd({
    target: graph,
    scaled: false,
  });

  // 注册 Selection 插件
  graph.use(
    new Selection({
      enabled: true,
      multiple: true, // 允许多选
      rubberband: true, // 允许框选
      movable: true, // 允许拖拽选中的节点
      showNodeSelectionBox: true, // 显示选中框
      pointerEvents: "none",//要加上
    })
  );

  // 绑定快捷键及其他插件
  baseConfig.bindShortcuts(graph);
  usePlugins(graph);
  undoDisabled.value = graph.canUndo();
}

画布拖动与全选功能

为了实现画布拖动，我们需要确保 panning 选项已启用。此外，可以通过 graph.selectAll() 方法，实现节点的全选。

全选节点的实现

javascript 复制代码

function selectAllNodes() {
  graph.selectAll();
}

拖拽调整视图位置

为了支持画布的拖拽，我们可以监听鼠标事件，并根据鼠标的移动来调整画布的位置。

javascript 复制代码

let startX = 0;
let startY = 0;
let isDragging = false;

graph.on("blank:mousedown", ({ e }) => {
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
});

graph.on("blank:mousemove", ({ e }) => {
  if (!isDragging) return;
  const dx = e.clientX - startX;
  const dy = e.clientY - startY;
  graph.translate(dx, dy);
  startX = e.clientX;
  startY = e.clientY;
});

graph.on("blank:mouseup", () => {
  isDragging = false;
});

优化点

防止误触 ：可以在 blank:mousedown 事件中增加条件判断，只有当用户按住某些特定按键（如 Shift）时才触发拖拽。
支持手动拖拽的开启和关闭：可以提供一个按钮，用户点击后才能启用拖拽功能。
增强拖拽体验 ：可以使用 graph.enablePanning() 方法来启用 X6 自带的画布拖拽功能。

javascript 复制代码

graph.enablePanning();

总结

通过本文，我们学习了如何安装并使用 AntV X6 的 @antv/x6-plugin-selection 插件来实现节点的全选，并结合 graph.translate() 实现画布拖动功能。此外，我们还探讨了一些优化方案，以提高交互体验。这样，我们可以在复杂的流程图、DAG（有向无环图）或其他可视化场景中提供更友好的交互体验。