如何自己实现一个丝滑的流程图绘制工具（六）bpmn删除、复制节点

前言

需要对流程图支持键盘操作删除，复制节点的操作

1、删除节点

获取点击节点事件，把点中的节点存入变量

  eventBus.on('element.click', e => {
        const element = elementRegistry.get(e.element.id)
        this.currentElement = element
   })

监听键盘操作进行节点删除

 <div
   id="canvas"
   ref="canvas"   
   tabindex="0"      
   @keydown="onKeydown"
   @contextmenu.prevent
 ></div>
 onKeydown(e) {
      if (!this.enableCopy) return
      const code = e.keyCode
      if (code === 8 || e.key === 'Delete') {
        e.stopPropagation()
        this.batchDelete()
      }
    },
   batchDelete() {
   const bpmnModeling = this.bpmnModeler.get('modeling')
   if (this.currentElement && !this.activeIdList.length) {
     bpmnModeling.removeElements([this.currentElement])   
    }
 },

3、复制节点

复制节点是在自定义contextPad触发

CustomContextPadProvider.js

export default function ContextPadProvider(
  contextPad,
  config,
  injector,
  translate,
  bpmnFactory,
  elementFactory,
  create,
  modeling,
  connect,
  eventBus
) {
  this.create = create
  this.elementFactory = elementFactory
  this.translate = translate
  this.bpmnFactory = bpmnFactory
  this.modeling = modeling
  this.connect = connect
  this.eventBus = eventBus
  config = config || {}
  if (config.autoPlace !== false) {
    this.autoPlace = injector.get('autoPlace', false)
  }
  contextPad.registerProvider(this)
}

ContextPadProvider.$inject = [
  'contextPad',
  'config',
  'injector',
  'translate',
  'bpmnFactory',
  'elementFactory',
  'create',
  'modeling',
  'connect',
  'eventBus'
]

ContextPadProvider.prototype.getContextPadEntries = function(element) {
  const { autoPlace, eventBus, create, elementFactory, connect, translate, modeling } = this
  // 复制
  function handleCopyElement(event, element) {
    eventBus.fire('copy', { element: element })
  }

  function startConnect(event, element, autoActivate) {
    connect.start(event, element, autoActivate)
  }

  function copyElement() {
    return {
      group: 'edit',
      className: 'z-icon-document-copy',
      title: '复制',
      action: {
        click: handleCopyElement
      }
    }
  }
  function connectElement() {
    return {
      group: 'connect',
      className: 'bpmn-icon-connection',
      title: '连接线',
      action: {
        click: startConnect,
        dragstart: startConnect
      }
    }
  }
  if (!['label', 'bpmn:SequenceFlow'].includes(element.type)) {
    return {
      copy: copyElement(),
      connect: connectElement()
    }
  }
}

然后引入

// 复制功能的引入
import copyPasteModule from 'diagram-js/lib/features/copy-paste'
const additionalModules = [copyPasteModule]

   eventBus.on('copy', e => {
        const copyPaste = this.bpmnModeler.get('copyPaste')
        const element = elementRegistry.get(e.element.id)
        const rootElement = canvas.getRootElement()
        // 在这里处理按钮点击事件
        copyPaste.copy(element)
        // 获取当前视图框的信息
        const viewbox = canvas.viewbox()
        // 左上角的坐标
        const x = viewbox.x + this.config.width
        const y = viewbox.y + this.config.height
        const newElement = copyPaste.paste({
          element: rootElement,
          point: {
            x,
            y
          }
        })[0]      
      })