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

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

引言

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

插件下载与安装

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

安装 AntV X6 及插件

使用 npm 或 yarn 进行安装：

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

或使用 yarn：

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

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

初始化 X6 画布

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

代码示例

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() 方法，实现节点的全选。

全选节点的实现

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

拖拽调整视图位置

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

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;
});

优化点

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

graph.enablePanning();

总结

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