Angular集成bpmn.js的基础实现及扩展（一）

一、bpmn的基本认识

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

bpmn画图具有哪些内容？

二、使用npm安装bpmn.js

npm install --save bpmn-js

三、在Angular中使用bpmn.js

1.页面基础构建

• 安装相关依赖
  npm install --save bpmn-js
• 编写HTML代码

  <div class="container">
    <div class="canvas"></div>
  </div>
  

• 编写CSS代码

  .container{
    position: absolute;
    height: 100%;
    width: 100%;
    .canvas{
  	height: 100%;
  	width: 100%;
    }
  }
  

• 创建mock文件夹，新增xmlStr.ts（默认展示的bpmn流程图）

  //生成随机或者指定位数的英文数字组合
  function randomWord (randomFlag: any, min: number, max: number = 7) {
    let str = '',
  	range = min,	// 默认赋值为第二个参数，如果是随机产生位数会通过下面的if改变。
  	arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
    // 随机产生
    if (randomFlag) {
      range = Math.round(Math.random() * (max - min)) + min;
    }
    for (let i = 0; i < range; i++) {
          let index = Math.round(Math.random() * (arr.length - 1));
          str += arr[index];
    }
    return str;
  }
  let flowID = randomWord(false , 7)
      // 默认bpmn流程图
  export var xmlStr:any = `
    <?xml version="1.0" encoding="UTF-8"?>
        <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  				xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
  		      	        xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
  				xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
  				xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
  				xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram"
  				targetNamespace="http://bpmn.io/schema/bpmn">
  	  <bpmn2:process id="Process_${flowID}" isExecutable="false">
  	  </bpmn2:process>
  	  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
  	<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_${flowID}">
  	</bpmndi:BPMNPlane>
      </bpmndi:BPMNDiagram>
    </bpmn2:definitions>
  `