一、回顾

1.预览

我们来实现如下左侧工具栏的自定义样式。

2.目录结构

在plugins文件目录下新建palette文件夹。创建一个index.js入口文件和paletteProvider.js自定义palette文件（用来覆盖默认palette）。

二、代码

paletteProvider.js文件是一个导出类,里面是我们自定义的左侧工具栏的代码。

index.js是palette的入口文件，导出初始化的自定义paletteProvider.js

1.paletteProvider.js文件

import {assign
} from "min-dash";export default function PaletteProvider(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {this._palette = palette;this._create = create;this._elementFactory = elementFactory;this._spaceTool = spaceTool;this._lassoTool = lassoTool;this._handTool = handTool;this._globalConnect = globalConnect;this._translate = translate;palette.registerProvider(this);
}
PaletteProvider.$inject = ["palette", "create", "elementFactory", "spaceTool", "lassoTool", "handTool", "globalConnect", "translate"];PaletteProvider.prototype.getPaletteEntries = function () {var actions = {},create = this._create,elementFactory = this._elementFactory,spaceTool = this._spaceTool,lassoTool = this._lassoTool,handTool = this._handTool,globalConnect = this._globalConnect,translate = this._translate;function createAction(type, group, className, title, options) {function createListener(event) {var shape = elementFactory.createShape(assign({type: type}, options));if (options) {shape.businessObject.di.isExpanded = options.isExpanded;}create.start(event, shape);}var shortType = type.replace(/^bpmn:/, "");return {group,className,title: title || translate("Create {type}", {type: shortType}),action: {dragstart: createListener,click: createListener}};}assign(actions, {"hand-tool": {group: "tools",className: "bpmn-icon-hand-tool",title: translate("Activate the hand tool"),action: {click: function (event) {handTool.activateHand(event);}}},"lasso-tool": {group: "tools",className: "bpmn-icon-lasso-tool",title: translate("Activate the lasso tool"),action: {click: function (event) {lassoTool.activateSelection(event);}}},"space-tool": {group: "tools",className: "bpmn-icon-space-tool",title: translate("Activate the create/remove space tool"),action: {click: function (event) {spaceTool.activateSelection(event);}}},//连线样式"global-connect-tool": {group: "tools",// className: "bpmn-icon-connection-multi",className: "feelec feel-lianxian coldel",title: translate("Activate the global connect tool"),action: {click: function (event) {globalConnect.toggle(event);}}},"tool-separator": {group: "tools",separator: true},//开始事件 bpmn-icon-start-event-none"create.start-event": createAction("bpmn:StartEvent", "event", "icon-custom startNode", translate("Create StartEvent")),//用户  bpmn-icon-user-task"create.user-task": createAction("bpmn:UserTask", "activity", "icon-custom taskNode", translate("Create User Task")),// 网关 bpmn-icon-gateway-none"create.exclusive-gateway": createAction("bpmn:ExclusiveGateway", "gateway", "icon-custom gatewayNode", translate("Create Gateway")),// 结束事件 bpmn-icon-end-event-none"create.end-event": createAction("bpmn:EndEvent", "event", "icon-custom endNode", translate("Create EndEvent")),});return actions;
};

上面代码做的事情：
重写 PaletteProvider 类，同时覆盖了其原型上的 getPaletteEntries 方法

上面代码较多，拆分为两个部分来看更清晰：
第一部分：
首先导出了 PaletteProvider
在类中使用palette.registerProvider(this)指定这是一个palette
使用 $inject 注入一些需要的变量到 PaletteProvider

第二部分：
在PaletteProvider函数原型上编写getPaletteEntries函数；函数返回的是一个对象,对象中就是左侧工具栏的每一项。

我的前四项用的原生项,后四项start-event、user-task、exclusive-gateway、end-event是自定义项；createAction函数是用来创建自定义工具栏shape的方法。

返回的对象中的属性:
group：当前项属于哪个分组
className：样式类名，主要是通过这个类名来修改自定义项的样式
title：鼠标移动到元素上面给出的提示信息
action：用户操作时会触发的事件

2.css文件

自定义样式文件process-panel.scss里定义了className里面的类来实现自定义样式。

/* process-panel.scss */
.icon-custom {border-radius: 50%;background-size: 65%;background-repeat: no-repeat;background-position: center;
}
.startNode {background-image: url('../../../../../../public/bpmn_imgs/startNode.png');
}
.endNode {background-image: url('../../../../../../public/bpmn_imgs/endNode.png');
}
.taskNode {background-image: url('../../../../../../public/bpmn_imgs/taskNode.png');
}
.gatewayNode {background-image: url('../../../../../../public/bpmn_imgs/gatewayNode.png');
}

3.index.js文件

import customPaletteProvider from "./paletteProvider";
export default {__init__: ["paletteProvider"],paletteProvider: ["type", customPaletteProvider]
};

导出自定义palette

三、总结

到这palette部分就完成了，接下来就是部分renderer、contextPad部分和在页面中的使用了。renderer、contextPad这两部分的思路和palette一样，重写原生的类来达到自定义的效果。

Vue+bpmn.js自定义流程图之palette（二）相关推荐

Bpmn.js自定义文件说明
Bpmn.js自定义文件说明由于工作需要(其实不是很需要),在公司项目的基础上开源了一个基于 bpmn-js + Vue 2.x + ElementUI 的一个流程编辑器 Bpmn Process ...
vue bpmn.js简单使用
bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成. 官方demo https://github.com/bpmn-io/bpmn-js-examples b ...
VUE+bpmn.js+iview 页面绘制流程图
前言:业务需求需要在页面绘制流程图,之前后台的同事都是在eclipse画的流程图,为了方便点希望能在页面上画. 我用的是iview的ui框架,用原生的话记得把按钮等标签改改. 如果用的是element ...
自定义bpmn.js左侧工具栏palette样式
自定义bpmn.jspalette样式前期准备我在之前的 vue-bpmn 项目的 git 仓库下新创建了一个分支 custom,用来存放自定义样式的相关内容,项目快速预览地址 bpmn.js 的 ...
flowable实战（十五）关于流程设计器 bpmn.js与vue的整合
一.前言: 由于flowable本身带的Moder风格实在与前端页面风格不一样,同时由于Modeler采用Angular.js写的,改造起来相对有一定的难度,所以打算换成bpmn.js当成流程设计器. ...
（13）Vue.js 自定义指令
一.Vue.js之定义指令介绍前面我们学习了一些Vue.js给我们提供的指令,那么我们知道指令就是帮助我们去简化DOM操作的,相当于对基础 DOM操作的一种封装.那么我们仅仅使用这些Vue.js提供 ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
vue整合bpmn.js并汉化
文章目录展示最终效果壹.准备工作贰.目录结构和所有文件 1.main.js 文件引入样式文件 2.BpmnModeler.vue 3.defaultXmlStr.js 4.customTrans ...
bpmn.js+vue实现工作流设计器（左侧功能+右侧详情）
前言: 整理在vue项目中使用bpmn.js的过程和源码. 实现最终效果: 目录: 1.bpmn.js的介绍,官网入口 2.bpmn.js中实现最简单的效果: 引入插件1: 开始开发: (1)页面上: ...

Vue+bpmn.js自定义流程图之palette（二）

自定义bpmn.js左侧工具栏palette样式