工作流bpmn.js设计模块Modeler,因业务需要不想让画布跟随鼠标滚动,怎么禁用编辑等功能变成只读模式

1,630 阅读1分钟

1.实现要点

bpmn提供了两个插件:Modeler 和 Viewer,Modeler带有左侧节点栏和右侧属性栏,点击节点可进行相应操作,Viewer是“查看”,不能更改节点,两者相互独立,可按实际需求按需引入

 绘制流程图:import BpmnModeler from 'bpmn-js/lib/Modeler';

 预览流程图:import BpmnViewer from 'bpmn-js/lib/Viewer';

2.使用Modeler模块实现“查看”功能

 import BpmnModeler from 'bpmn-js/lib/Modeler';
 
 let bpmnModelerViewer=new BpmnModeler({
 container:document.getElementById('canavas'),
 height: '100%',
 moddleExtensions: {
    flowable: flowableDescriptor
     },
       additionalModules: [
             flowableMoudle,
                {
                    translate: ['value', customTranslate],
                    paletteProvider:["value",''],//禁用/清空左侧工具栏
                    labelEditingProvider:["value",''],//禁用节点编辑
                    contextPadProvider:["value",''],//禁用图形菜单
                    bendpoints:["value",{}],//禁用连线拖动
                    zoomScroll:["value",''],//禁用滚动
                    moveCanvas:['value',''],//禁用拖动整个流程图
                    move:['value','']//禁用单个图形拖动
                }
            ]
 })