antv/x6 拖动连接线

在antv/x6中，可以通过拖动来连接两个节点。下面是一个示例代码：

import { Graph, Node, Edge } from '@antv/x6';

// 创建画布
const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
});

// 创建节点
const node1 = graph.addNode({
  x: 100,
  y: 100,
  width: 80,
  height: 40,
  shape: 'rect',
  attrs: {
    body: {
      fill: '#ffffff',
      stroke: '#000000',
    },
    label: {
      text: 'Node 1',
    },
  },
});

const node2 = graph.addNode({
  x: 300,
  y: 200,
  width: 80,
  height: 40,
  shape: 'rect',
  attrs: {
    body: {
      fill: '#ffffff',
      stroke: '#000000',
    },
    label: {
      text: 'Node 2',
    },
  },
});

// 创建连接线
const edge = graph.addEdge({
  source: node1,
  target: node2,
  attrs: {
    line: {
      stroke: '#000000',
    },
  },
});

// 开启连接线的拖动交互
graph.addEdgeTools(edge, [
  {
    name: 'source-arrowhead',
  },
  {
    name: 'target-arrowhead',
  },
  {
    name: 'vertices',
  },
]);

// 开启节点的拖动交互
graph.addNodeTools(node1, [
  {
    name: 'boundary',
  },
]);

graph.addNodeTools(node2, [
  {
    name: 'boundary',
  },
]);

这段代码创建了一个画布，并在画布上添加了两个节点和一个连接线。通过开启连接线和节点的拖动交互，可以实现拖动连接线的效果。