首页 > Vue >

bpmnjs+vue中文文档API常见方法使用总结

时间: 作者:admin 浏览:

1、定义Modeler:

bpmnjs如何自定义Modeler?vue+bpmnjs

2、流程设计器编辑好的流程图形如何获取xml、svg?

const {xml} = this.modeler.saveXML({format: true})
const {svg} = this.modeler.saveSVG()

3、拿到xml如何渲染成流程图?

this.modeler.importXML(xml)

4、如何让流程图自动居中、流程图缩放?

this.modeler.get('canvas').zoom('fit-viewport', 'auto')//画布自适应居中
this.modeler.get('canvas').zoom(2.0)//放大至2倍

5、获取流程所有图形shape对象

this.elementRegistry.getAll()[0].children

6、新建流程时初始化的xml(flowable)
newDiagram.js

export default function (processId, processName, category, description) {
    return `<?xml xml=string version="2.0" encoding="UTF-8"?>
    <bpmn:definitions xmlns:flowable="http://flowable.org/bpmn" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="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" targetNamespace="${category}">
      <bpmn:process id="${processId}" name="${processName}" isExecutable="true">
          <bpmn:documentation>${description}</bpmn:documentation>
      </bpmn:process>
      <bpmndi:BPMNDiagram id="BPMNDiagram_1">
        <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
          <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
            <dc:Bounds height="36.0" width="36.0" x="160.0" y="160.0"/>
          </bpmndi:BPMNShape>
        </bpmndi:BPMNPlane>
      </bpmndi:BPMNDiagram>
    </bpmn:definitions>`

//用法:let newDiagramXml = await (require('./newDiagram').default)(processId, processName, category, description)

7、设置图形shape节点的颜色

this.modeling = this.modeler.get('modeling')
this.modeling.setColor(shapes, { stroke: 'green' })
//shapes可以是单个shape对象,也可以是shape对象数组

8、通过图形id获取图形shape节点对象

this.elementRegistry = this.modeler.get("elementRegistry")
let shape = this.elementRegistry.get(shapeId)

9、改变图形shape节点的某些属性

this.modeling.updateProperties(shape,{ 
    name: '用户任务',
    loopCharacteristics: loopCharacteristics,//多实例
    extensionElements: extensions,//扩展属性
    'flowable:assignee': 'userId_123'//flowable前缀属性
});

10、获取根节点 bpmn:process

this.modeler.getDefinitions().rootElements[0]

11、鼠标选中节点图形事件

this.modeler.on('selection.changed',  e => {
    const tempElement =e &&  e.newSelection &&  e.newSelection[0]
    if(tempElement && tempElement.type !="bpmn:Process"){
        this.currentElement = tempElement
    }
})

12、节点图形属性改变事件

this.modeler.on('element.changed', e => {
    if(e.element && e.element.type!="bpmn:Process"){
        this.currentElement = e.element
    }
})

13、自动选中/取消选中图形事件

//选中
this.modeler.get('selection').select(shapes)
//shapes参数为某个图形shape对象,也可以是图形数组[shape1,shape2,...],代表选中多个图形节点
//注意:此方法会触发this.modeler.on('selection.changed', callback)事件

//取消选中
this.modeler.get('selection').deselect(shape)
//注意:取消选中只能传单个element对象,不支持数组

14、自定义palette、paletteProvider 左侧工具栏,更换容器

bpmnjs自定义palette左侧工具栏,更换容器

15、创建/修改扩展属性bpmn:ExtensionElements 与多实例 bpmn:MultiInstanceLoopCharacteristics 的方法

bpmnjs如何创建ExtensionElements扩展属性与多实例MultiInstanceLoopCharacteristics

16、自定义右侧属性面板properties-panel

bpmnjs自定义右侧属性面板properties-panel

17、bpmnjs全局连线如何实现不间断一直连的效果

bpmnjs如何实现全局连线工具持续连线一直连线的功能?

18、bpmnjs如何在xml存储表单数据json(扩展属性ExtensionElements)

bpmnjs如何在xml存储表单数据json(扩展属性ExtensionElements)

19、bpmnjs+vue自定义修改图形默认颜色篇之BpmnRenderer

bpmnjs+vue自定义修改图形默认颜色篇之BpmnRenderer

20、bpmnjs怎么禁止节点拖动和编辑等功能变成只读模式?

bpmnjs怎么禁止节点拖动和编辑等功能变成只读模式?

21、bpmnjs自定义之flowable扩展属性自定义标签描述文件descriptor

bpmnjs自定义之flowable扩展属性自定义标签描述文件descriptor

22、bpmnjs自定义之初始化流程设计器[新建、编辑、保存、发布的使用例子]

bpmnjs自定义之初始化流程设计器[新建、编辑、保存、发布的使用例子]

23、bpmnjs自定义之connect连线模块

bpmnjs自定义之connect连线模块

24、bpmnjs自定义之规则BpmnRules模块

bpmnjs自定义之规则BpmnRules模块

25、bpmnjs自定义规则之同方向防止重复连线设置BpmnRules

bpmnjs自定义规则之同方向防止重复连线设置BpmnRules

前端新手交流群
欢迎加入web前端新手交流qq群:
734802480(已满)、 794324979

更多文章

栏目文章


Copyright © 2014-2022 seozhijia.net 版权所有-粤ICP备13087626号-4