自定义Palette(二)

1.编写CustomPalette.js代码

// CustomPalette.js
export default class CustomPalette {
constructor(bpmnFactory, create, elementFactory, palette, translate) {
        this.bpmnFactory = bpmnFactory;
        this.create = create;
        this.elementFactory = elementFactory;
        this.translate = translate;
        palette.registerProvider(this);
    }
	// getPaletteEntries这个函数就是绘制palette的核心
    getPaletteEntries(element) {}
}
CustomPalette.$inject = [
    'bpmnFactory',
    'create',
    'elementFactory',
    'palette',
    'translate'
]

1. 定义一个类CustomPalette,导出时可以随意取，引用时候不能随意取
2. 使用$inject注入一些需要的变量
3. 在类中使用palette.registerProvider(this)指定这是一个palette

2.编写核心函数getPaletteEntries代码

getPaletteEntries这个函数名称不能变，它返回的是一个对象，对象中指定的就是我们自定义的项

// CustomPalette.js
getPaletteEntries(element) {
    return {
        'create.zihong-task': {
            group: 'model', // 分组名
            className: 'icon-custom zihong-task', // 样式类名
            title: '创建一个类似task的任务节点',
            action: { // 操作
                dragstart: createTask(), // 开始拖拽时调用的事件
                click: createTask() // 点击时调用的事件
            }
        }
    }
}

create.lindaidai-task是自定义一项的名称，它有几个固定的属性：

1. group：属于哪个分组, 比如tools、event、gateway、activity等等,用于分类;
2. className:样式类名，可以通过它给元素改名称
3. title:鼠标移动到元素上面给出的提示信息
4. action:用户操作时会触发的事件

接下来我们要做的是：

1. 通过className设置样式
2. 通过action来定义要触发的事情

a. 编写class样式

// 在main.js中引入全局的css
import './css/app.css'
//main.css
.icon-custom {
  border-radius: 50%;
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: center;
}
.icon-custom.zihong-task {
  background-image: url("./images/huangguan.png");
}

b.编写action代码

我们期望的是点击或者拖拽它能够在画布上画出一个lindaidai-task，也就是编写一个函数来创建bpmn:Task这个元素

// CustomPalette.js
        function createTask() {
            return function(event) {
                const businessObject = bpmnFactory.create('bpmn:Task');
                businessObject['custom'] = 1
                const shape = elementFactory.createShape({
                    type: 'bpmn:Task',
                    businessObject
                });
                console.log(shape) // 只在拖动或者点击时触发
                create.start(event, shape);
            }
        }

核心还是利用bpmn.js提供的一些方法创建shape然后将其添加到画布上，我们还可以添加bpmn:StartEvent、bpmn:ServiceTask、bpmn:ExclusiveGateway等

3.导出CustomPalette

//在同级的index.js将他导出
import CustomPalette from './CustomPalette'
export default {
    __init__: ['customPalette'],
    customPalette: ['type', CustomPalette]
}

这里的__init__ 中的名字必须是CustomPalette,还有下面的属性名

4. 在页面中配置使用CustomPalette

import customPalette from './custom'
this.bpmnModeler = new BpmnModeler({
...
    additionalModules: [
        // 自定义的左侧边栏
        customPalette 
    ]
})

5.结果展示图

6.完整的CustomPalette.js

export default class CustomPalette {
  constructor(bpmnFactory, create, elementFactory, palette, translate) {
    this.bpmnFactory = bpmnFactory;
    this.create = create;
    this.elementFactory = elementFactory;
    this.translate = translate;
    palette.registerProvider(this);
  }

  // getPaletteEntries这个函数就是绘制palette的核心
  getPaletteEntries(element) {
    const { bpmnFactory, create, elementFactory, translate } = this;
    function createTask() {
      return function (event) {
        const businessObject = bpmnFactory.create("bpmn:Task");
        businessObject["custom"] = 1;
        const shape = elementFactory.createShape({
          type: "bpmn:Task",
          businessObject,
        });
        create.start(event, shape);
      };
    }
    return {
      "create.zihong-task": {
        group: "model", // 分组名
        className: "icon-custom zihong-task", // 样式类名
        title: "创建一个类似task的任务节点",
        action: {
          // 操作
          dragstart: createTask(), // 开始拖拽时调用的事件
          click: createTask(), // 点击时调用的事件
        },
      },
    };
  }
}
CustomPalette.$inject = [
  "bpmnFactory",
  "create",
  "elementFactory",
  "palette",
  "translate",
];