使用Vue和jsmind如何实现思维导图的节点锚点和连线控制？

npm install jsmind --save

<template>
  <div ref="mindContainer"></div>
</template>

<script>
import 'jsmind/style/jsmind.css'
import jsMind from 'jsmind'

export default {
  name: 'MindMap',
  mounted() {
    this.initMindMap()
  },
  methods: {
    initMindMap() {
      var mind = {
        /* 在这里定义思维导图的数据 */
      }
      var options = {
        container: this.$refs.mindContainer,
        editable: true, // 是否可以编辑节点
        theme: 'default'
      }
      new jsMind(options).show(mind)
    }
  }
}
</script>

<style scoped>
.mind-container {
  width: 100%;
  height: 100%;
}
</style>

initMindMap() {
  // ...
  this.$refs.mindContainer.addEventListener('mousedown', (event) => {
    var target = event.target
    if (target.classList.contains('expanded')) {
      // 当前节点已经展开，不进行操作
      return
    }
    if (target.tagName === 'jmnode') {
      var node = target.jmnode
      var button = document.createElement('button')
      button.classList.add('anchor-button')
      button.innerText = '连线'
      button.addEventListener('click', () => {
        this.startConnect(node)
      })
      target.append(button)
    }
  })
}

data() {
  return {
    // ...
    selectedNode1: null,
    selectedNode2: null
  }
}

methods: {
  startConnect(node) {
    if (!this.selectedNode1) {
      this.selectedNode1 = node
    } else if (!this.selectedNode2) {
      this.selectedNode2 = node
      this.connectNodes(this.selectedNode1, this.selectedNode2)
      this.selectedNode1 = null
      this.selectedNode2 = null
    }
  },
  connectNodes(node1, node2) {
    // 在这里实现连线的逻辑
  }
}

connectNodes(node1, node2) {
  var mindData = this.mind.data
  var nodeData1 = mindData.getNodeData(node1.id)
  var nodeData2 = mindData.getNodeData(node2.id)
  if (!nodeData1 || !nodeData2) {
    return
  }
  var edgeId = '__connect_edge_' + node1.id + '_' + node2.id
  if (mindData.getLinkData(edgeId)) {
    return
  }
  var linkData = {
    id: edgeId,
    src: node1.id,
    target: node2.id
  }
  mindData.addLinkData(linkData)
  this.mind.show(mindData)
}