bpmn,js工作流使用

1. 初始化画布
2. 小地图操作

引入依赖

//小地图
import minimapModule from 'diagram-js-minimap'
//模拟
import TokenSimulationModule from 'bpmn-js-token-simulation'
//通过id查找节点
import { getPlaneIdFromShape } from 'bpmn-js/lib/util/DrilldownUtil'

初始化画布

async handleInit(){
  //获取属性ref为canvas的dom节点
  const canvas = this.$refs.canvas
  this.bpmModeler = new CustomModeler({
      container: canvas,
      bpmnRenderer: {
          defaultStrokeColor: "#ccc",//设置默认连接线的颜色

      },
      textRenderer: {
          //默认文字样式
          defaultStyle: {
              fontSize: 14px;
          }
      },
      additionalModules:[minimapModule, TokenSimulationModule]
  })

  try {
    const { warnings } = await this.bpmnModeler.importXML(xmlStr)
    // 调整在正中间
    this.bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
    console.log('rendered')
  } catch (err) {
    console.log('error rendering', err)
  }
}

常用API

//根据id获取节点元素
this.bpmnModeler.get('elementRegistry').get(id)

//选中
this.bpmnModeler.get('selection').select([element])

//开启模拟
this.bpmnModeler.get('toggleMode').toggleMode()

//撤销
const command = this.bpmnModeler.get('commandStack')//获取存储
command && command.canUndo() && command.undo()

//重做
const command = this.bpmnModeler.get('commandStack')//获取存储
command && command.canRedo() && command.redo()

//清空缓存
this.bpmnModeler.get('commandStack').clear()

//框选
this.bpmnModeler.get('lassoTool').toggle()

//连接线
this.bpmnModeler.get('globalConnection').toggle()

//获取canvas画布
const canvas = this.bpmnModeler.get('canvas')
canvas.zoom('fit-viewport', true, true)//居中
canvas.zoom(0.4, true)//画布缩小

//小地图切换
this.bpmnModeler.get('minimap').toggle()

//打开小地图
this.bpmnModeler.get('minimap').open()

画布模拟，开启后循环关闭

//开启模拟
this.bpmnModeler.get('toggleMode').toggleMode()
//模拟时，清空当前选中的元素
if(this.bpmnModeler.get('toggleMode')._active){
  this.bpmnModeler.get('selection').select([])
}


/*
创建监听存储元素,结构如下
simulationObj: {
  ['每次循环主流程id']:{
    ['节点元素id']：节点来源连接线id的list集合
  }
}
*/
this.simulationObj = {}
//模拟监听,清空之前存储的数据
this.bpmnModeler.on('tokenSimulation.toggleMode',()=>{
  this.simulationObj = {}
})
//模拟监听循环关闭流程
this.bpmnModeler.on('tokenSimulation.simulator.createScope',({})=>{
  //element：元素，   initiator，每次循环的信息
  let { element, initiator } = scope
  if(element.type == 'bpmn:Process'){
    //scope.id为模拟主流程生成的随机id
    //循环时，先执行主流程画布信息，每执行一次，存储一次
    this.simulationObj[scope.id] = {}
  }else if(
    element.type !== 'bpmn:StartEvent' &&
    element.type !== 'bpmn:SequenceFlow' &&
    element.type !== 'bpmn:EndEvent'
  ){
    //过滤开始节点、结束节点、连接线
    //获取节点来源关系线id
    let elementTargetList = this.simulationObj[initiator.id][element.id] || []
    let findIndex = initiator.children.findIndex(c=>c.destroyed && c.element === element)
    let targetId = initiator.children[findIndex-1].element.id
    if(elementTargetList.indexOf(targetId) == -1){
      elementTargetList.push(targetId)
      this.simulationObj[initiator.id][element.id] = elementTargetList
    }else{
      //连接线重复时，代表循环
      this.$message.warning('循环！！！')
      this.bpmnModeler.get('resetSimulation').resetSimulation()
      this.simulationObj = {}
    }
  }
})

获取用户任务父节点（包含祖节点）

//获取上一节点（循环时要去除当前节点）
getParentUserNode(curNode, parentNodeList){
  curNode.incoming.forEach(item=>{
    //过滤重复数据，避免流程图循环
    let repeatList = parentNodeList.filter(parent=>parent.id == item.source.id){
      if(!repeatList.length){
        parentNodeList.push(item.source)
        if(item.source.incoming && item.source.incoming.length){
          return this.getParentUserNode(item.source, parentNodeList)
        }
      }
    }
  })
  return parentNodeList
}

获取当前xml内容

this.bpmnModeler.saveXML({format: true, preamble: true}, (err, xml)=>{
  console.log(xml)
})

修改xml元素属性

const modeling = this.bpmnModeler.get('modeling')
modeling.updateProperties(element,{name: ''})

创建表达式节点

const modeling = this.bpmnModeler.get('modeling')、
const moddle = this.bpmnModeler._moddle
let expression = moddle.create('bpmn:FormalExpression',{
  body: '测试数据'
})
modeling.updateProperties(element,{
    conditionExpression: expression
})