背景
产品又有更近的想法了,bpmn-js的连接线你用的时候是看不到的,也就是你从左侧点击连接线的没有线随鼠标移动.
但是产品想要看得见的连接线移动拖拽。
咩有办法,不能换框架,那就只能自己实现啦!
思路:
创建一个线的dom节点,监听鼠标的移动和放下,使线跟随鼠标移动。在画布区域松开鼠标后,创建两个很小的节点并连接起来。
这样就是一个假象,一根线放在画布上,可以改变连接线的两端。
但是有个需要注意的是,你吧线改变了两端,虽然创建线的时候的两头节点看不到,但是本质存在会影响画其他节点。所以我连接线创建的两个虚拟节点类型是不同的。这样遍历画布上的节点就可以找到多余的两个点,删掉。
<div class="connect">
<div class="connect-lines"></div>
<div class="connect-icon"></div>
</div>
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)
},