通过anvt X6和vue3实现图编辑

通过anvt X6
X6地址：https://x6.antv.antgroup.com/tutorial/about；
由于节点比较复杂，使用vue实现的节点；
x6提供了一个独立的包 @antv/x6-vue-shape 来使用 Vue 组件渲染节点。
VUE3的案例：

节点组件内容如下：

效果如下：代码运行的效果可以进行拖动进程图

后记：画布进行缩放之后不是1的情况下，设置节点内部的offset会出现bug，可以通过先zoomTo 1 然后进行offset设置，设置完成之后在进行zoomTo 回去。

const graph = (this as any).getGraph();
          const zoom = graph.zoom();
          graph.zoomTo(1, {
            center: {
              x: 0,
              y: 0
            }
          });
//进行offset设置.....

  graph.zoomTo(zoom, {
            center: {
              x: this.zoomX,
              y: this.height / 2
            }
          });