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

时间 2020-01-22

标签全网 bpmn.js bpmn 教材编辑删除节点栏目 JavaScript 繁體版

原文原文链接

前言


Q: bpmn.js是什么? 🤔️javascript
”

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


Q: 我为何要写该系列的教材? 🤔️前端
”

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

因为是系列的文章, 因此更新的可能会比较频繁, 您要是无心间刷到了且不是您所须要的还请谅解😊.java

不求赞👍不求心❤️. 只但愿能对你有一点小小的帮助.node

编辑、删除节点篇

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

你可能还须要建立: 线(bpmn:SequenceFlow)、网关(ExclusiveGateway)、活动(Activities) 等等其余类型的节点.git

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

那么这一章节咱们主要就是来说解这些.web

经过阅读你能够学习到:

`contextPad`上的删除功能

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

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

而且点击它的时候能够删除当前的节点...

让咱们打开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中的某个图标获取到当前节点的节点信息而后作其余自定义的操做.

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

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

其实也很简单, 通过了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中的信息传递出去呢, 也就是咱们在页面上该怎么拿到这个信息呢?

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

(因为没有引入任何的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相关的存储. 而后在其中定义:

nodeInfo<Object>: 用于存储当前点击的节点的信息
nodeVisible<Boolean>: 用于判断弹窗显示隐藏的变量

// store/modules/bpmn.js
const bpmn = {
    state: {
        nodeVisible: false,
        nodeInfo: {}
    },
    mutations: {
        TOGGLENODEVISIBLE: (state, visible) => {
            state.nodeVisible = visible
        },
        SETNODEINFO: (state, info) => {
            state.nodeInfo = info
        }
    },
    actions: {}
}

export default bpmn
复制代码

定义好这些以后, 咱们就能够在CustomContextPadProvider.js里的clickElement作文章了:

// CustomContextPadProvider.js
import store from '../../../store' // 引入store

function clickElement(e) {
    console.log(element)
    store.commit('SETNODEINFO', element) // 存储节点信息
    store.commit('TOGGLENODEVISIBLE', true)
}
复制代码

因为CustomContextPadProvider.js和CustomContextPad.js的作法都是同样的, 这里我就以CustomContextPadProvider.js为案例进行讲解.

经过以上的步骤, 已经能够将这两个值存储到store中了, 接下来只是看看页面上该如何调用它们.

让咱们打开custom-modeler.vue文件, 给里面加个小弹窗:

<template>
    <div class="modal" v-if="bpmnNodeVisible" @click="close">
      <div class="modal-content">
        <div class="modal-ctx">
          <div class="modal-item">
            节点id: {{ bpmnNodeInfo.id }}
          </div>
          <div class="modal-item">
            节点type: {{ bpmnNodeInfo.type }}
          </div>
        </div>
      </div>
    </div>
</template>
复制代码

弹窗样式随便写了点, 在项目代码里能够看到, 这里就不贴了.

而后编辑相关的js代码:

<script> import { mapState, mapMutations } from 'vuex' export default { ... // 这个省略号是省略代码 methods: { // 方法 ...mapMutations(['TOGGLENODEVISIBLE']), // 这个省略号是解构 close () { this.TOGGLENODEVISIBLE(false) } }, computed: { // 计算属性 ...mapState({ // 解构 bpmnNodeInfo: state => state.bpmn.nodeInfo, bpmnNodeVisible: state => state.bpmn.nodeVisible }) } } </script>
复制代码