全网最详bpmn.js教材-基础篇

时间 2019-12-19

原文原文链接

前言

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

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

Q: 我为何要写该系列的教材? 🤔️html

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

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

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

bpmn.js基本的使用

这一章节主要是介绍了bpmn.js最基本的几种实用方式, 适合彻底没有接触过bpmn.js的新手或者想要在vue项目中使用它的开发者.git

经过这一章节的讲解你能够学习到:github

为了方便你们对后面的讲解有一个大概认识, 咱们先来看一下使用bpmn.js画图都有哪些内容:

bpmn.js最简单的一种使用

咱们能够直接使用CDN将bpmn.js引入到代码中使用:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BPMNJS</title>
    <!--CDN加速-->
    <script src="https://unpkg.com/bpmn-js@6.0.2/dist/bpmn-viewer.development.js"></script>  		 <!--引入一个简单的xml字符串-->
    <script src="./xmlStr.js"></script>
    <style> #canvas { height: 400px; } </style>
</head>

<body>
    <div id="canvas"></div>
    <script> var bpmnJS = new BpmnJS({ container: '#canvas' }); bpmnJS.importXML(xmlStr, function(err) { if (!err) { console.log('success!'); // 让图能自适应屏幕 var canvas = bpmnJS.get('canvas') canvas.zoom('fit-viewport') } else { console.log('something went wrong:', err); } }); </script>
</body>

</html>
复制代码

(上面的xmlStr.js以及案例代码在这里LinDaiDai-bpmn-basic-demo)

如上面的案例所示, 咱们使用DNS加速直接引入bpmn.js, 而后本地指定一个容器(也就是id为canvas的那个div), 接着用bpmn.js提供的方法importXML就能够解析xml字符串生成对应的工做流图了.

打开页面能够看到

使用npm安装bpmn.js

上面提供的使用方式是一种最基本的方式,仅仅是将图展现出来,不能本身绘画也不能操做. 因此在工做中使用更多的仍是采用npm安装到项目中使用. 咱们可使用如下命令进行安装:

npm install --save bpmn-js
复制代码

在应用程序中使用:

import BpmnViewer from 'bpmn-js';
import testDiagram from './test-diagram.bpmn';

var viewer = new BpmnViewer({
  container: '#canvas'
});

viewer.importXML(testDiagram, function(err) {
  if (!err) {
    console.log('success!');
    viewer.get('canvas').zoom('fit-viewport');
  } else {
    console.log('something went wrong:', err);
  }
});
复制代码

上面的testDiagram指的是某个bpmn 文件了,而不是第一个案例中的xml字符串.

官方这边也提供了一个例子, 能够看一下: bpmn-js-example-bunding

vue中使用bpmn.js

在vue 中的使用能够分为如下几个部分:

为了方便讲解, 我先建立一个空的vue项目(只安装了路由):

vue create vue-bpmn-basic
cd vue-bpmn-basic
npm i vue-router --save-D
复制代码

注⚠️️

你能够不用本地建立, 此项目地址

LinDaiDai/bpmn-vue-basic

vue中使用bpmn.js-基础篇

我在项目的components文件夹下建立一个名为basic.vue的文件, 且配置好路由:

const routes = [
    {
    	path: '/basic',
    	component: () => import('./../components/basic')
    }
]
复制代码

项目结构如图所示:

安装相关依赖

npm i bpmn-js --save-D
复制代码

编写HTML代码

// basic.vue
<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>
复制代码

编写JS代码

// basic.vue
  <script>
    // 引入相关的依赖
    import BpmnModeler from 'bpmn-js/lib/Modeler'
    import {
      xmlStr
    } from '../mock/xmlStr' // 这里是直接引用了xml字符串
    export default {
      name: '',
      components: {},
      // 生命周期 - 建立完成（能够访问当前this实例）
      created() { },
      // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操做完成，通常在该过程进行 Ajax 交互
      mounted() {
        this.init()
      },
      data() {
        return {
          // bpmn建模器
          bpmnModeler: null,
          container: null,
          canvas: null
        }
      },
      methods: {
        init() {
          // 获取到属性ref为“canvas”的dom节点
          const canvas1 = this.$refs.canvas1
          // 建模
          this.bpmnModeler = new BpmnModeler({
            container: canvas
          })
          this.createNewDiagram()
        },
        createNewDiagram() {
          // 将字符串转换成图显示出来
          this.bpmnModeler.importXML(xmlStr, (err) => {
            if (err) {
              // console.error(err)
            } else {
              // 这里是成功以后的回调, 能够在这里作一系列事情
              this.success()
            }
          })
        },
        success() {
          // console.log('建立成功!')
        }
      }
    }
  </script>
复制代码

编写CSS

// basic.vue
<style scoped>
.containers{
	position: absolute;
	background-color: #ffffff;
	width: 100%;
	height: 100%;
}
.canvas{
	width: 100%;
	height: 100%;
}
.panel{
	position: absolute;
	right: 0;
	top: 0;
	width: 300px;
}
</style>

复制代码

使用命令npm run start启动项目, 打开能够看到:

vue中使用bpmn.js-左侧工具栏

左侧工具栏做用: 给图形添加新的节点

如图所示:

要想使用左侧工具栏, 须要在项目中引用相应的样式:

在main.js中引用css:

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
// 如下为bpmn工做流绘图工具的样式
import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

复制代码

页面上引入propertiesProviderModule:

// provider.vue
<script>
...
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
...
methods: {
	init () {
    // 获取到属性ref为“canvas”的dom节点
    const canvas = this.$refs.canvas
    // 建模
    this.bpmnModeler = new BpmnModeler({
      container: canvas,
      //添加控制板
      propertiesPanel: {
        parent: '#js-properties-panel'
      },
      additionalModules: [
        // 左边工具栏以及节点
        propertiesProviderModule
      ]
    })
    this.createNewDiagram()
	},
	...
}
</script>

复制代码

provider.vue的其余代码片断都和basic.vue 相同.

此时打开页面就发现多了左侧的工具栏, 且能够添加节点.

vue中使用bpmn.js-右侧属性栏

属性栏的做用: 用户在点击图上的节点的时候, 能获取到该节点的属性信息

如图所示:

想要使用右侧的属性栏就得安装上一个名为bpmn-js-properties-panel的插件了.

安装插件

npm i bpmn-js-properties-panel --save-D

复制代码

在main.js中引入相应样式:

// main.js
import Vue from 'vue'
...
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右边工具栏样式
...

复制代码

在页面中引入propertiesProviderModule:

// panel.vue
<script>
...
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
...
methods: {
  init() {
    // 获取到属性ref为“canvas”的dom节点
    const canvas = this.$refs.canvas
    // 建模
    this.bpmnModeler = new BpmnModeler({
      container: canvas,
      //添加控制板
      propertiesPanel: {
        parent: '#js-properties-panel'
      },
      additionalModules: [
        // 左边工具栏以及节点
        propertiesProviderModule,
        // 右边的工具栏
        propertiesPanelModule
      ]
    })
    this.createNewDiagram()
  }
}

复制代码

后语

上述案例项目Git地址 : github.com/LinDaiDai/b…

系列相关推荐

《全网最详bpmn.js教材-http请求篇》

《全网最详bpmn.js教材-事件篇》