全网最详bpmn.js教材-编辑、删除节点篇

前言

Q: bpmn.js是什么? ️

bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.

Q: 我为什么要写该系列的教材? ️

因为公司业务的需要因而要在项目中使用到bpmn.js,但是由于bpmn.js的开发者是国外友人, 因此国内对这方面的教材很少, 也没有详细的文档. 所以很多使用方式很多坑都得自己去找.在将其琢磨完之后, 决定写一系列关于它的教材来帮助更多bpmn.js的使用者或者是期于找到一种好的绘制流程图的开发者. 同时也是自己对其的一种巩固.

由于是系列的文章, 所以更新的可能会比较频繁, 您要是无意间刷到了且不是您所需要的还请谅解.

不求赞不求心❤️. 只希望能对你有一点小小的帮助.

编辑、删除节点篇

虽然前面已经说了很多关于如何创建, 渲染元素的知识, 但是在实际使用上肯定不仅仅只局限于创建Task、 Event这些节点上.

你可能还需要创建: 线(bpmn:SequenceFlow)、网关(ExclusiveGateway)、活动(Activities) 等等其他类型的节点.

甚至你想要在contextPad中定义一个删除、编辑节点的功能.

那么这一章节我们主要就是来讲解这些.

通过阅读你可以学习到:

• contextPad上的删除功能
• contextPad上的编辑功能

contextPad上的删除功能

让我们接着上个章节的案例进行讲解哈, 项目还是之前的项目LinDaiDai/bpmn-vue-custom

想要实现的功能是: 在contextPad中加上一个删除功能(这里加上一个小垃圾桶):

bpmnCustom20.png

并且点击它的时候可以删除当前的节点...

让我们打开CustomContextPad.js文件或者CustomContextPadProvider.js文件, 然后在getContextPadEntries方法中加上以下代码:

// CustomContextPad.js
getContextPadEntries(element) {
    const { modeling } = this // modeling需要利用CustomContextPad.$inject注册进来
    function removeElement(e) { // 点击的时候实现删除功能
        modeling.removeElements([element])
    }
    function deleteElement() { // 创建垃圾桶
        return {
            group: 'edit',
            className: 'icon-custom icon-custom-delete',
            title: translate('删除'),
            action: {
                click: removeElement
            }
        }
    }
    return {
        'append.lindaidai-task': {...},
        'delete': deleteElement() // 返回值加上删除的功能
    }
}

可以看到要点就是:

• 将modeling引进来, 因为要使用到它的removeElements方法;
• 定义绘制垃圾桶的功能
• 编写className来实现修改默认样式的功能

OK, 接下来别忘了在我们的app.css中加上垃圾桶的样式:

/* app.css*/
.icon-custom-delete {
    background-image: url('https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/delete.png');
}

.djs-context-pad .icon-custom-delete.entry:hover {
    background: url('https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/delete.png') center no-repeat!important;
    background-size: cover!important;
}

(自定义modeler中的CustomContextPadProvider.js也是这么写的)

这样删除功能就实现了.

contextPad上的编辑功能

其实这里说的编辑功能, 是指在contextPad上定一个编辑的图标, 然后点击的时候, 可以出现一个弹窗, 或者右边出现一个自定义的properties-panel, 然后这里面可以显示出节点的一些信息.

这么做的原因是:

• 你期望的可能不是点击节点的时候右边出现properties-panel, 而是将properties-panel作为一个抽屉隐藏在右侧, 点击contextPad中的某个图标才从右侧出来.
• 点击contextPad中的某个图标获取到当前节点的节点信息然后做其他自定义的操作.

通过点击小图标获取节点信息

bpmnCustom21.png

如上图, 先实现这个功能: 点击编辑图标, 将节点信息打印出来.

其实也很简单, 经过了lindaidi-task和delete之后, 我相信你也掌握了一些规律了.

反正要创建什么图标就往getContextPadEntries的返回值加就可以了:

// CustomContextPad.js
getContextPadEntries(element) {
    function clickElement(e) {
        console.log(element)
    }
    function editElement() { // 创建编辑图标
        return {
            group: 'edit',
            className: 'icon-custom icon-custom-edit',
            title: translate('编辑'),
            action: {
                click: clickElement
            }
        }
    }
    return {
        'append.lindaidai-task': {...},
        'edit': editElement(), // 返回值加上编辑功能
        'delete': deleteElement() // 返回值加上删除的功能
    }
}

然后记得在app.css中加上.icon-custom-edit的样式, 这里就不贴代码了.

将节点的信息传递出去

其实我们会发现, 通过点击小图标获取到节点信息很容易就实现了, 但是如何将在CustomContextPad.js中的信息传递出去呢, 也就是我们在页面上该怎么拿到这个信息呢?

比如我想实现: 点击上面所说的编辑小图标, 然后出现这么一个弹窗, 显示出节点的相关信息:

bpmnCustom22.png

(由于没有引入任何的UI组件, 所以随手写了一些样式)

哈哈, 方法其实也有很多种:

• 前端本地存储localStorage
• vue的vuex
• react的redux

以上技术都可以实现...

由于项目是用vue开发的, 所以这里我就演示以下利用vuex来进行交互.

首先在我们的项目里安装上vuex:

$ npm i vuex --save-D

然后在src目录下创建好一个store文件夹用来存放它, 并记得在main.js用进行引用:

// main.js
import store from './store'
...
new Vue({
    ...
    store,
    render: h => h(App),
}).$mount('#app')

让我们在store中创建一个叫做bpmn模块, 专门用来定义bpmn相关的存储. 然后在其中定义:

1. nodeInfo