如何自己实现一个丝滑的流程图绘制工具(九) 自定义连接线

背景
产品又有更近的想法了，bpmn-js的连接线你用的时候是看不到的，也就是你从左侧点击连接线的没有线随鼠标移动.

但是产品想要看得见的连接线移动拖拽。
咩有办法，不能换框架，那就只能自己实现啦！
思路：

创建一个线的dom节点，监听鼠标的移动和放下，使线跟随鼠标移动。在画布区域松开鼠标后，创建两个很小的节点并连接起来。
这样就是一个假象，一根线放在画布上，可以改变连接线的两端。
但是有个需要注意的是，你吧线改变了两端，虽然创建线的时候的两头节点看不到，但是本质存在会影响画其他节点。所以我连接线创建的两个虚拟节点类型是不同的。这样遍历画布上的节点就可以找到多余的两个点，删掉。

 <div class="connect">
      <div class="connect-lines">div>
      <div class="connect-icon">div>
    div>
1
2
3
4

async mounted() {
    await this.$nextTick()
    this.myElement = document.querySelector('.djs-palette')
    this.myElement.addEventListener('mousedown', this.handleDown)
    document.body.addEventListener('mouseup', this.handleUp)
  },
 handleDown(event) {
      // 在这里编写处理鼠标按下事件的代码
      console.log(event.target.dataset.action)
      if (['circle-task', 'global-connect-tool'].includes(event.target.dataset.action)) {
        this.moveEar = document.querySelector('.left-main')
        this.targetRect = this.moveEar.getBoundingClientRect()
        document.body.addEventListener('mousemove', this.handleMove)

        if (event.target.dataset.action === 'global-connect-tool') {
          this.connect = document.querySelector('.connect').style
          const { clientX, clientY } = event
          this.connect.left = `${clientX - 50}px`
          this.connect.top = `${clientY - 10}px`
          this.connect.display = 'flex'
        }
      }
    },
    handleMove(event) {
      const { clientX, clientY } = event
   		 this.connect.display = 'flex'
        this.connect.left = `${clientX - 50}px`
        this.connect.top = `${clientY - 10}px`
    },
    handleUp(event) {
 		const { clientX, clientY } = event
        if (
          !(
            clientX >= this.targetRect.left &&
            clientX <= this.targetRect.right - 50 &&
            clientY >= this.targetRect.top &&
            clientY <= this.targetRect.bottom
          )
        ) {
          this.$emit('connect', clientX, clientY)
        }
        this.connect.display = 'none'
        this.connect = null
        document.body.removeEventListener('mousemove', this.handleMove) 
     },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45