如何自己实现一个丝滑的流程图绘制工具（四）bpmn-js开启只读状态

背景

流程图需要支持只读状态和编辑状态

翻看官方案例源码，扒拉到了禁用的js代码

DisableModeling.js

const TOGGLE_MODE_EVENT = 'toggleMode'
const HIGH_PRIORITY = 10001

export default function DisableModeling(
  eventBus,
  contextPad,
  dragging,
  directEditing,
  editorActions,
  modeling,
  palette,
  paletteProvider
) {
  let modelingDisabled = false
  let isDisableLabel = false
  eventBus.on(TOGGLE_MODE_EVENT, HIGH_PRIORITY, event => {
    modelingDisabled = event.active

    if (modelingDisabled) {
      directEditing.cancel()
      contextPad.close()
      dragging.cancel()
    }

    palette._update()
  })
  eventBus.on('isDisableLabel', HIGH_PRIORITY, event => {
    isDisableLabel = event.active
    palette._update()
  })
  function intercept(obj, fnName, cb) {
    const fn = obj[fnName]
    obj[fnName] = function() {
      return cb.call(this, fn, arguments)
    }
  }

  function ignoreIfModelingDisabled(obj, fnName) {
    intercept(obj, fnName, function(fn, args) {
      if (modelingDisabled) {
        return
      }
      if (fnName === 'activate' && isDisableLabel) {
        return
      }

      return fn.apply(this, args)
    })
  }

  function throwIfModelingDisabled(obj, fnName) {
    intercept(obj, fnName, function(fn, args) {
      if (modelingDisabled) {
        throw new Error(`${fnName} model is read-only`)
      }

      return fn.apply(this, args)
    })
  }

  ignoreIfModelingDisabled(contextPad, 'open')
  ignoreIfModelingDisabled(dragging, 'init')
  ignoreIfModelingDisabled(directEditing, 'activate')

  throwIfModelingDisabled(modeling, 'updateAttachment')
  throwIfModelingDisabled(modeling, 'moveElements')
  throwIfModelingDisabled(modeling, 'moveConnection')
  throwIfModelingDisabled(modeling, 'createConnection')
  throwIfModelingDisabled(modeling, 'appendShape')
  throwIfModelingDisabled(modeling, 'removeElements')
  throwIfModelingDisabled(modeling, 'distributeElements')
  throwIfModelingDisabled(modeling, 'removeShape')
  throwIfModelingDisabled(modeling, 'removeConnection')
  throwIfModelingDisabled(modeling, 'replaceShape')
  throwIfModelingDisabled(modeling, 'pasteElements')
  throwIfModelingDisabled(modeling, 'alignElements')
  throwIfModelingDisabled(modeling, 'createSpace')
  throwIfModelingDisabled(modeling, 'updateWaypoints')
  throwIfModelingDisabled(modeling, 'reconnectStart')
  throwIfModelingDisabled(modeling, 'reconnectEnd')

  intercept(editorActions, 'trigger', function(fn, args) {
    const action = args[0]

    if (
      modelingDisabled &&
      isAnyAction(
        [
          'undo',
          'redo',
          'copy',
          'paste',
          'removeSelection',
          'spaceTool',
          'lassoTool',
          'globalConnectTool',
          'distributeElements',
          'alignElements',
          'directEditing'
        ],
        action
      )
    ) {
      return
    }

    return fn.apply(this, args)
  })
}

DisableModeling.$inject = [
  'eventBus',
  'contextPad',
  'dragging',
  'directEditing',
  'editorActions',
  'modeling',
  'palette',
  'paletteProvider'
]

// helpers //

function isAnyAction(actions, action) {
  return actions.indexOf(action) > -1
}

引入就行，在vue页面调用禁用方法

/**
     * 禁用画板
     * @param {*} status
     */
    handleDisable(status) {
      // 获取 bpmn-js 的容器元素
      const eventBus = this.bpmnModeler.get('eventBus')

      eventBus.fire('toggleMode', {
        active: status
      })
      if (this.isDisableLabelEdit) {
        eventBus.fire('isDisableLabel', {
          active: true
        })
      }
      if (status || !this.isShowPalette) {
        const paletteElement = document.querySelector('.djs-palette')
        paletteElement.classList.remove('open')
      }
    },