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','']//禁用单个图形拖动
}
]
})