vue中使用bpmn.js来画流程图(三)-工具栏

vue使用bpmn.js---基础使用

vue使用bpmn.js---输出xml和svg

如何使用默认的工具栏(palette)？

工具栏显示

在vue使用bpmn.js(基础篇)的基础上，引入下边css。

import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'

效果图

在默认工具栏上添加自定义的项。(getPaletteEntries函数)

在flowdesign中新建目录custom。并在custom下新建index.js和CustomPalette.js。新建完后目录如下：

编写CustomPalette.js文件。

export default class CustomPalette{  //自定义palette项
    constructor(create,elementFactory,palette,translate){
        this.create=create;
        this.elementFactory=elementFactory;
        this.translate=translate;

        palette.registerProvider(this); //将自定义palette注册到palette中。
    }
    getPaletteEntries(){
        const{
            create,
            elementFactory,
            translate
        }=this;
        
        //用户操作的触发的事件
       function createServiceTask(event){
            const shape=elementFactory.createShape({type:"bpmn:ServiceTask"});
            create.start(event,shape);
        }
        return {
            'create.service-task':{
                group:"activity", //属于哪个分组,用于对自定义项进行分类。
                className:'bpmn-icon-service-task', //样式类名，我们可以通过它给元素修改样式。
                title:translate('自定义服务'), //鼠标的移动到元素上面给出的提示信息
                action:{ //用户操作时会出发的事件
                    dragStart:createServiceTask,
                    click:createServiceTask
                }
            }
        }
    }
    
}

这里字体图标主要使用bpmn-font。

上面的代码主要是编写getPaletteEntries函数来实现自定义palette项。

palette.registerProider(priority, provider)方法接受两个参数。

priority类型为number。用来改变自定义项在palette中的排列顺序。可以不填。

provider中主要是编写gerPaletteEntries方法。

官网例子：

Register a provider with the palette
@param  {number} [priority=1000]  
@param  {PaletteProvider}  provider 
@example 
const paletteProvider = {
    getPaletteEntries: function() { 
        return function(entries) {
            return { 
                ...entries, 
                'entry-1': {
                    label: 'My Entry', 
                    action: function() { alert("I have been clicked!"); } 
                  } 
                }; 
           } 
       } 
   }; 
palette.registerProvider(800, paletteProvider);

编写完CustomPalette.js之后，编写custom中的index.js。

import CustomPalette from './CustomPalette'

export default{
    _init_:['customPalette'],
    customPalette:['type',CustomPalette]
}

将custom引入到index.vue中，在创建新实例时,添加自定义项。(additionalModules属性)

参考基础应用，这里只有新添加的属性。

import customControlModule from './custom'

this.bpmnModeler=new BpmnModeler({
    additionalModules:[
        customControlModule
    ]
})

完成之后启动项目，效果图