vue3+antv/x6实现自定义节点+复制/删除节点+拖拽生成节点

在Vue3框架结合AntV X6库中，可以利用X6的图形编辑能力创建复杂的可视化应用，包括自定义节点、节点操作如复制和删除以及节点拖动。以下是基本步骤：

1. **安装依赖**：首先需要安装`vue@3.x`和`x6`相关的依赖，例如`@antv/x6`, `vue-x6`等。

npm install vue @antv/x6 vue-x6

2. **创建自定义节点**：在Vue组件中，你可以创建一个自定义的节点组件，通过`x6.Node`基类，并覆盖其样式和属性。比如：

<template>
  <x6.Node :cfg="nodeConfig" />
</template>

<script>
import { Node } from '@antv/x6';

export default {
  components: {
    'x6-Node': Node.extend({
      // 自定义节点配置
      attrs: {
        shape: 'rect',
        size: [80, 50],
        stroke: '#fff',
        fill: '#3f9d5f'
      },
      on: {
        click() {
          // 处理点击事件
        }
      }
    })
  },
  data() {
    return {
      nodeConfig: {} // 初始化节点配置
    };
  }
};
</script>

3. **复制和删除节点**：X6提供了一些内置的方法来进行这些操作，例如`copyNode`和`removeNode`。在适当的时候调用它们即可：

methods: {
  copyNode(node) {
    this.graph.copyNode(node);
  },
  deleteNode(node) {
    this.graph.removeNode(node);
  }
}

4. **拖拽生成节点**：在处理`on:mousedown`和`on:mousemove`事件时，可以跟踪鼠标移动并动态创建新节点。这通常涉及到计算新的坐标位置，并调用`addNode`方法：

on: {
  mousedown({ event }) {
    this.startingPosition = event.containerPoint;
  },
  mousemove({ event }) {
    const newPosition = event.containerPoint;
    if (this.startingPosition) {
      this.addNode(newPosition);
    }
  }
},
methods: {
  addNode(position) {
    this.graph.addNode({
      position,
      type: 'custom-node', // 使用自定义节点类型
    });
  }
}