vue3：使用jsplumb绘制流程图

在使用jsplumb过程中，我需要完全实现像官网一样的效果(https://demo.jsplumbtoolkit.com/vue3-flowchart-builder/)

手动拖拽连线这些都没有问题，但是我在节点四角拉伸放大缩小出现了问题，端点不更新

我缩小了节点，但是端点没有跟上，请教，最好有两个div手动连接四角放大缩小的demo

我给些建议把——可以尝试下面的操作来解决问题：

1.在更改节点大小后调用repaint方法。

2.在节点的大小改变事件中调用repaintEverything方法。

3.在缩放端点时使用相对定位。

还请参考，代码示例：
框架

<template>
  <div>
    <div ref="container" class="container">
      <div
        v-for="node in nodes"
        :key="node.id"
        class="node"
        :style="{
          left: node.left + 'px',
          top: node.top + 'px'
        }"
      >
        {{ node.id }}
      </div>
    </div>
  </div>
</template>

<script>
import jsPlumb from 'jsplumb';

export default {
  data() {
    return {
      nodes: [
        { id: 'node1', left: 100, top: 100 },
        { id: 'node2', left: 300, top: 100 },
        { id: 'node3', left: 300, top: 300 }
      ]
    };
  },
  mounted() {
    // 获取容器元素
    const container = this.$refs.container;
    
    // 初始化jsPlumb
    jsPlumb.ready(() => {
      jsPlumb.setContainer(container);
      
      // 连接节点
      this.nodes.forEach((node, index) => {
        if (index < this.nodes.length - 1) {
          jsPlumb.connect({
            source: node.id,
            target: this.nodes[index + 1].id,
            endpoint: 'Blank',
            connector: 'Flowchart'
          });
        }
      });
      
      // 初始化拖拽
      jsPlumb.draggable(container.querySelectorAll('.node'));
    });
  }
};
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: #f5f5f5;
}

.node {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border: 1px solid #000;
  text-align: center;
  line-height: 50px;
}
</style>

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 看下这篇博客，也许你就懂了，链接：vue+jsplumb实现工作流程图

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

缩放后需要调用api调整所有节点和连接线的偏移
jsplumb.setZoom(scale)

还有人嘛，没有解决哈？？？