七、bpmnjs-Modeler建模操作-Modeling

一、前言

        Modeling它封装了对BPMN元素所有可视化编辑和数据修改的能力，负责整个流程所需元素的创建、交互、扩展、编辑等功能，是bpmnjs的核心功能之一。也就是说，我们可以通过modeling实现对流程元素的创建、修改等编辑功能。

        本文中“流程模版”一词，可以理解为第4章“初识bpmnjs-Modeler”中，导入的流程模版的xml，其中包括了当前流程中所有的元素以及属性，本文中所有的增加、删除都是对流程模版（xml）进行。

二、Modeling核心功能

1. 元素创建，比如元素的形状、图标、连接
2. 元素删除
3. 元素位置，比如尺寸大小、所在画布位置
4. 元素属性编辑，比如样式编辑、属性赋值
5. 元素样式，比如颜色、大小、图标

三、创建createShape/addShape        

        在画布中添加 BPMN 形状（任务、网关、事件等），需要通过 ElementFactory 创建元素数据，再同步到画布。

        createShape：创建BPMN元素以及元素对应的图形信息，但是不显示到画布中，相当于凭空创建了一个元素并存储在了内存中。

        addShape：将元素挂载到流程模型与画布中，如果需要将createShape创建在内存中的元素显示到画布中，需要使用addShape将之显示到画布中，并将元素的基本信息加载进流程模版。

创建示例：

        const elementFactory = store.getModeler!.get('elementFactory');

        const modeling = store.getModeler!.get('modeling');

        const canvas = store.getModeler!.get('canvas');

        const parentElement = canvas.getRootElement();



        //创建一个并行网关

        const gateway1 = elementFactory.createShape({

          type: 'bpmn:InclusiveGateway',

          x: 100,

          y: 100,

        });



         modeling.createShape(gateway1, { x: 100, y: 100 }, parentElement);



        modeling.createShape(gateway1,  parentElement，{ x: 100, y: 100 });

四、删除元素

        将元素在画布以及流程模版中删除，并删除与之关联的数据（sourceRef，targetRef等）

        

 modeling.removeElement(modeler().getActive as Element)

五、编辑元素

        修改元素，比如样式编辑、属性赋值等

        更新元素属性：updateProperties

        示例代码：

const elementRegistry = modeler.get('elementRegistry');

const element = elementRegistry.get('Task_123');

modeling.updateProperties(element, {

   name :'审批节点',

});

六、Modeling与ElementFactory的区别

        modeling与elementFactory都可以创建元素，他们之间的区别，可以通过一个例子形象说明。比如我们想建一座房子，我们使用elementFactory进行创建，地基、墙垣、楼梯、房间户型等等，当房子建好了的时候，是属于毛坯房的，没有装修，也没有安装门窗、涂漆等等，这些装修工作，就可以使用modeling来做，外立面显示什么颜色，门窗风格、内饰风格等，这就是他们俩之间的区别。

        严格意义来说，modeling的所有操作，都是依赖elementFactory完成之后才进行的，elementFactory 负责创建元素的数据结构，但不直接操作画布，modeling利用 elementFactory创建的元素，并负责将这些元素添加到画布中，modeling还可以处理元素之间的关系和画布上的各种操作，比如元素连接、增加标签等等。

        到这里Modeler组件就介绍完毕了，下一章开始介绍Renderer组件。