Because the company requires that the nodes can be customized and there are many nodes, it is very difficult to locate the required tasks if all nodes are placed in the left menu

Therefore, right-click the blank area of the screen to pop up the node selection menu

The menu to locate

First we add an ID to the parent node of the canvas

document.getElementById('content').oncontextmenu=function(ev){ _this.actionName = '' let clintX = ev.clientX; // let clintY = ev.clienty; // Let clintY = ev.clienty; // let scollTop = document.documentElement.scrollTop|| document.body.scrollTop; / / when the brace must be combined with the current screen depending on the range of the left and top value / / let scollLeft = document. The documentElement. ScrollLeft | | document. Body. ScrollLeft _this.mouse.x = clintX _this.mouse.y = clintY document.getElementById('actionMenu').style.left=(clintX - 200)+'px'; document.getElementById('actionMenu').style.top=(clintY - 68)+'px'; document.getElementById('actionMenu').style.display='block'; return false; // block the right menu}Copy the code

Then listen for the curtain right-click menu event to bring up the node list. Here, the menu position is located by the mouse coordinate when right-clicking, and the mouse coordinate is saved for positioning after clicking the Task node

The menu content

On the management node page, you can customize the task icon and color

The menu style

Click on the task

AddAction (item,event){document.getelementById ('actionMenu').style.display='none'; this.$nextTick(e =>{ let elementRegistry = this.bpmnModeler.get('elementRegistry') const elementFactory = this.bpmnModeler.get("elementFactory") const modeling = this.bpmnModeler.get("modeling") const canvas = this.bpmnModeler.get("canvas") const rootElement =canvas.getRootElement() let x_canvas let y_canvas if (canvas._cachedViewbox){ this.cachedViewbox = canvas._cachedViewbox x_canvas = canvas._cachedViewbox.x y_canvas = X y_canvas = this.cachedViewbox.y} else {x_canvas = this.cachedViewbox.x y_canvas = this.cachedViewbox.y So the coordinates of the mouse in the div with id as Content are different from the coordinates of the mouse in the screen. Therefore, the scaled coordinates are calculated by the scale value let x = x_canvas + (this.mouse.x/canvas. Zoom ()) let y = Y_canvas + (this. Mouse. Y/canvas. Zoom ()) / / to create nodes let branchShape = elementFactory. CreateShape ({type: "BPMN: Task", id: 'element_id_'+ new Date().getTime() }) branchShape.businessObject.name = item.actionName branchShape.businessObject.actionId = item.id modeling.createShape( branchShape, { x: x, y: y }, rootElement ) }) },Copy the code

According to the effect

Apply colours to a drawing

Determine what icon and color the Task needs to display using the custom fields in businessObject

drawShape(parentNode, element) { const shape = this.bpmnRenderer.drawShape(parentNode, element); const type = element.type; Const businessObject = getBusinessObject(Element) const businessObject = getBusinessObject; const { actionId } = businessObject; if (customElements.includes(type) && actionId) { let tasks = JSON.parse(sessionStorage.getItem('tasks')) let task = tasks.find(e =>{ return e.id === actionId }) const {url, attr} = customConfig[task.icon]; const customIcon = svgCreate('image', {... attr, href: url}); element['width'] = 56; element['height'] = 56; svgAppend(parentNode, customIcon); let textNode = parentNode.childNodes[1] console.log(textNode) textNode.childNodes.forEach(e =>{ // E.setattribute ('y',parseInt(LLDB etAttribute('y')) + 52) e.setattribute. Display = 'none'} (element.businessObject.name) { const text = svgCreate('text', { x: attr.x + 26, y: Attr. Y + attr. Height + 20, // Position can be adjusted as desired. 'middle', 'dominant-baseline':'middle' }); text.innerHTML = element.businessObject.name; svgAppend(parentNode, text); } if (! Element. The businessObject. Name) {element. The businessObject. Name = task. ActionName} / / modify border color if (task. Color) { shape.style.setProperty('fill', task.color) } return customIcon; } return shape; }Copy the code

Here refer to # LinDaiDai_ Lin dull article juejin.cn/post/684490…