当前位置：首页 > news >正文

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

news 2025/7/26 16:21:12

背景

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

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

DisableModeling.js

const TOGGLE_MODE_EVENT = 'toggleMode'
const HIGH_PRIORITY = 10001export default function DisableModeling(eventBus,contextPad,dragging,directEditing,editorActions,modeling,palette,paletteProvider
) {let modelingDisabled = falselet isDisableLabel = falseeventBus.on(TOGGLE_MODE_EVENT, HIGH_PRIORITY, event => {modelingDisabled = event.activeif (modelingDisabled) {directEditing.cancel()contextPad.close()dragging.cancel()}palette._update()})eventBus.on('isDisableLabel', HIGH_PRIORITY, event => {isDisableLabel = event.activepalette._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')}},