背景
流程图需要支持只读状态和编辑状态
翻看官方案例源码,扒拉到了禁用的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')
}
},