背景

bpmn-js是個流程圖繪制的工具，但是現(xiàn)在我希望實(shí)現(xiàn)的是，繪制的不是節(jié)點(diǎn)而是一個vue組件。
保留線的拖拽和連接。

方案

那就說明不是依賴于節(jié)點(diǎn)的樣式，找到了他有個屬性，就是類似覆蓋節(jié)點(diǎn)的操作。
思路就是用vue組件做遮罩，蓋住原本的節(jié)點(diǎn)樣式。

/*** 批量操作節(jié)點(diǎn)*/handleAddOverlay() {const bpmnModeling = this.bpmnModeler.get('modeling')const contextPad = this.bpmnModeler.get('contextPad')this.bpmnModeler.on('import.done', () => {// 加載完成后每個元素遍歷const elementRegistry = this.bpmnModeler.get('elementRegistry')elementRegistry.forEach(element => {if (['bpmn:Task'].includes(element.type)) {const parent = elementRegistry.getGraphics(element)bpmnModeling.resizeShape(element, {width: element.width || this.config.width || 60,height: element.height || this.config.height || 60,x: getDi(element).bounds.x,y: getDi(element).bounds.y})// 遍歷任務(wù)節(jié)點(diǎn)，為每個節(jié)點(diǎn)添加 overlaysif (this.isShowComponent) {bpmnModeling.setColor(element, { stroke: this.config.borderColor || '#eee' }) // 修改邊框顏色bpmnModeling.setColor(element, { fill: this.config.fillColor || '#fff' }) // 修改邊框顏色this.addOverlay(element, parent)}} })})},

接下來是掛載覆蓋物的重點(diǎn)，如何讓覆蓋物跟隨節(jié)點(diǎn)的移動而移動

/**** @param {*} element* 增加覆蓋物節(jié)點(diǎn)操作*/addOverlay(element, parent) {const __this = thisconst overlays = this.bpmnModeler.get('overlays')const bpmnModeling = this.bpmnModeler.get('modeling')const elementRegistry = this.bpmnModeler.get('elementRegistry')const index = this.data.nodeLists.findIndex(item => item.config.id === element.id)// 添加覆蓋物 ------------------------------------- beginoverlays.add(element, 'my-overlay', {position: __this.overlayPosition,show: {minZoom: 0.1},html: '<div id="my-component"></div>'})const Profile = Vue.extend(this.config.components)overlays.get({ element: element, type: 'my-overlay' })[0].htmlContainer.id = element.idnew Profile({router,propsData: {element: element,node: index > -1 ? this.data.nodeLists[index] : {},func: this.func,...this.props},mounted() {const component = this// 綁定鼠標(biāo)按下事件component.$el.addEventListener('mousedown', event => {__this.isDrag = falseevent.preventDefault()if (!__this.disable) {dragMouseDown(event)}})// 自定義組件點(diǎn)擊事件component.$el.addEventListener('click', () => {if (!__this.isDrag) {__this.showContextPad(element)const bpmnElement = elementRegistry.get(element.id)__this.currentElement = bpmnElement__this.$emit('click', bpmnElement) // 點(diǎn)擊事件}})}}).$mount('#my-component')// 添加覆蓋物 -------------------------------------end// 必須作為公共變量進(jìn)行值更改let pos1 = 0let pos2 = 0let pos3 = 0let pos4 = 0/**** @param {*} e* @param {*} overlayPosition* 鼠標(biāo)按下開始*/function dragMouseDown(e) {e = e || window.evente.preventDefault()pos3 = e.clientXpos4 = e.clientYdocument.onmousemove = event => {__this.isDrag = trueelementDrag(event, __this.overlayPosition)}document.onmouseup = () => {__this.currentElement = nulldocument.onmouseup = nulldocument.onmousemove = null}}/**** @param {*} e* @param {*} overlayPosition*  節(jié)點(diǎn)的拖拽*/function elementDrag(e, overlayPosition) {e = e || window.evente.preventDefault()// 計(jì)算新的元素位置pos1 = pos3 - e.clientXpos2 = pos4 - e.clientYpos3 = e.clientXpos4 = e.clientYconst bpmnElement = elementRegistry.get(element.id)const deltaX = overlayPosition.x + pos1const deltaY = overlayPosition.y + pos2// 移動父節(jié)點(diǎn)及其連接線moveParentNode(bpmnElement, deltaX, deltaY)}/**** @param {*} element* @param {*} dx* @param {*} dy* 更改父節(jié)點(diǎn)操作*/function moveParentNode(element, dx, dy) {const parent = element.parentif (!parent) {return}// // 更新父節(jié)點(diǎn)的位置信息bpmnModeling.moveElements([element], { x: -dx, y: -dy }, null)// 更新覆蓋物的位置const overlay = overlays.get({ element: parent, type: 'my-overlay' })overlay.position = {top: overlay.top - dy,left: overlay.left - dx}}},