背景
希望实现批量删除和复制节点，因为bpmn-js是canvas画的，所以不能像平时页面上的复制一样直接选择范围，会变成移动画布。
思路是：
绘制一个选择的效果框，这样才可以看出来选的节点有哪些。
上面的选中范围框效果也是用canvas画出来的
因为bpmn-js对鼠标直接选取范围进行了拦截。所以我加了一个辅助按键进行选择
一、 以下是绘制选择框范围的代码：
* @param {MouseEvent} e
*/
onMousedown(e) {
this.removeActiveClass()
this.batchSelectedList = []
if (!e.metaKey && !e.altKey && !e.ctrlKey) {
return
}
e.target.addEventListener('mouseup', this.onMouseup)
if (!this.rectSelect) {
const rect = this.$refs.canvas.getBoundingClientRect()
this.startX = e.clientX - rect.left
this.startY = e.clientY - rect.top
const g = this.$el.getElementsByTagName('svg')[1]
this.rectSelect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
this.rectSelect.setAttribute('fill', 'rgba(93,148,231,0.2)')
this.rectSelect.setAttribute('stroke-width', '2px')
this.rectSelect.setAttribute('stroke', 'rgba(93,148,231,0.2)')
g.append(this.rectSelect)
}
},
/**
* @param {MouseEvent} e
*/
onMousemove(e) {
if (!this.enableBatchSelect) return
this.currentMouseEvent = e
if (!this.rectSelect) {
return
}
e.stopPropagation()
const canvasRect = this.$refs.canvas.getBoundingClientRect()
const w = e.clientX - this.startX - canvasRect.left
const h = e.clientY - this.startY - canvasRect.top
const x = this.startX
const y = this.startY
this.rectSelect.setAttribute('x', w < 0 ? e.clientX - canvasRect.left : this.startX)
this.rectSelect.setAttribute('y', h < 0 ? e.clientY - canvasRect.top : this.startY)
this.rectSelect.setAttribute('width', `${Math.abs(w)}`)
this.rectSelect.setAttribute('height', `${Math.abs(h)}`)
const elementRegistry = this.bpmnModeler.get('elementRegistry')
const canvas = this.bpmnModeler.get('canvas')
const box = canvas.viewbox()
const elementList = elementRegistry.getAll()
const nodeList = elementList.filter(f => f.type === 'bpmn:Task')
this.connectLineList = elementList.filter(f => f.type === 'bpmn:SequenceFlow')
const boxX = box.x
const boxY = box.y
this.batchSelectedList = nodeList.filter(item => {
const x1 = -(boxX - item.x) * box.scale
const y1 = -(boxY - item.y) * box.scale
const pointers = [
{ x: x, y: y },
{ x: x + w, y: y },
{ x: x + w, y: y + h },
{ x: x, y: y + h }
]
return inRect(x1, y1, pointers)
})
},
onMouseup(e) {
if (this.rectSelect) {
this.rectSelect.remove()
}
this.rectSelect = null
e.target.removeEventListener('mouseup', this.onMouseup)
const elementRegistry = this.bpmnModeler.get('elementRegistry')
this.batchSelectedList.forEach(item => {
const id = item.id
const el = elementRegistry._elements[id]?.gfx
if (el) {
el.classList.add('batch-selected')
this.activeIdList.push(id)
}
})
},
removeActiveClass() {
const elementRegistry = this.bpmnModeler.get('elementRegistry')
this.activeIdList.forEach(id => {
const el = elementRegistry._elements[id]?.gfx
if (el) {
el.classList.remove('batch-selected')
}
})
this.activeIdList = []
}
<style>
.djs-element.batch-selected .djs-outline {
stroke: rgb(54, 147, 255) !important;
visibility: visible !important;
}
</style>
二、然后是把选中的数据放入剪贴板
async onCopy(isShowMessage = true) {
if (this.copyData.length === 0) return
try {
await navigator.clipboard.writeText(JSON.stringify(copyData))
isShowMessage && this.$message.success(`已复制${copyData.length}个节点`)
} catch (e) {
this.$message.error('写入剪切板失败')
console.error(e)
}
},
三、粘贴的操作
/**
* 粘贴
* @param {KeyboardEvent} e
*/
async onPaste(e) {
const text = await navigator.clipboard.readText()
try {
const copyData = JSON.parse(text)
const canvas = this.bpmnModeler.get('canvas')
const box = canvas.viewbox()
const elementFactory = this.bpmnModeler.get('elementFactory')
const elementRegistry = this.bpmnModeler.get('elementRegistry')
const parent = elementRegistry.find(el => el.type === 'bpmn:Process')
const modeling = this.bpmnModeler.get('modeling')
if (!copyData.nodes.length) return
const rect = this.$el.getBoundingClientRect()
const mouseX = this.currentMouseEvent.clientX - rect.x
const mouseY = this.currentMouseEvent.clientY - rect.y
// 计算第0个元素和当前鼠标所在位置的差值
const first = copyData.nodes[0]
const diffX = first.x - mouseX
const diffY = first.y - mouseY
copyData.nodes.forEach(item => {
const x = item.x + box.x - diffX
const y = item.y + box.y - diffY
const shape = elementFactory.createShape({
type: 'bpmn:Task',
x: x,
y: y
})
modeling.createShape(shape, { x: x, y: y }, parent)
shape.data = item.data
if (item.data.name) {
this.createLabel(shape, item.data.name)
}
this.pateShapeMap[item.id] = shape
})
copyData.lines.forEach(line => {
const startShape = this.pateShapeMap[line.sourceId]
const targetShape = this.pateShapeMap[line.targetId]
if (startShape && targetShape) {
const lines = modeling.connect(startShape, targetShape)
lines.data = line.data
if (lines.data.name) {
this.createLabel(lines, lines.data.name)
}
this.pateLineMap[lines.id] = lines
}
})
} catch (e) {
console.error(e)
}
},
以上就是批量复制的步骤文章来源：https://www.toymoban.com/news/detail-683264.html
批量删除
文章来源地址https://www.toymoban.com/news/detail-683264.html
batchDelete() {
const bpmnModeling = this.bpmnModeler.get('modeling')
this.activeIdList.forEach(nodeId => {
const element = this.bpmnModeler.get('elementRegistry').get(nodeId)
bpmnModeling.removeElements([element])
})
},
到了这里，关于如何自己实现一个丝滑的流程图绘制工具（七）bpmn-js 批量删除、复制节点的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
