vue里使用bpmn绘制流程图（三）

亦凉 2024-04-18 18:54 38阅读 0赞

### 自定义工具栏和节点形状 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70]  
工具栏的源码在  
bpmn-js\\lib\\features\\palette\\PaletteProvider.js中  
`PaletteProvider`中定义了`getPaletteEntries`方法，用于新增工具栏项目

PaletteProvider.prototype.getPaletteEntries = function(element){ 
    ...
    //这里就是工具栏内容， 可以针对自己的需求修改样式颜色等
    assign(actions, { 
        'hand-tool': { 
          group: 'tools',
          className: 'bpmn-icon-hand-tool',
          title: translate('Activate the hand tool'),
          action: { 
            click: function(event) { 
              handTool.activateHand(event);
            }
          }
        },
        'lasso-tool': { 
          group: 'tools',
          className: 'bpmn-icon-lasso-tool',
          title: translate('Activate the lasso tool'),
          action: { 
            click: function(event) { 
              lassoTool.activateSelection(event);
            }
          }
        },
        'space-tool': { 
          group: 'tools',
          className: 'bpmn-icon-space-tool',
          title: translate('Activate the create/remove space tool'),
          action: { 
            click: function(event) { 
              spaceTool.activateSelection(event);
            }
          }
        },
        'global-connect-tool': { 
          group: 'tools',
          className: 'bpmn-icon-connection-multi',
          title: translate('Activate the global connect tool'),
          action: { 
            click: function(event) { 
              globalConnect.toggle(event);
            }
          }
        },
        'tool-separator': { 
          group: 'tools',
          separator: true
        },
        'create.start-event': createAction(
          'bpmn:StartEvent', 'event', 'bpmn-icon-start-event-none end',
          translate('开始')
        ),
        // 'create.intermediate-event': createAction(
        // 'bpmn:IntermediateThrowEvent', 'event', 'bpmn-icon-intermediate-event-none',
        // translate('Create Intermediate/Boundary Event')
        // ),
        'create.end-event': createAction(
          'bpmn:EndEvent', 'event', 'bpmn-icon-end-event-none end',
          translate('结束')
        ),
        'create.exclusive-gateway': createAction(
          'bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-none',
          translate('Create Gateway')
        ),
        'create.complex-gateway': createAction(
          'bpmn:ComplexGateway', 'gateway', 'bpmn-icon-gateway-complex default',
          translate('判断条件')
        ),
        'create.task': createAction(
          'bpmn:Task', 'activity', 'bpmn-icon-task default',
          translate('创建任务')
        ),
        'create.data-object': createAction(
          'bpmn:DataObjectReference', 'data-object', 'bpmn-icon-data-object',
          translate('Create DataObjectReference')
        ),
        'create.data-store': createAction(
          'bpmn:DataStoreReference', 'data-store', 'bpmn-icon-data-store',
          translate('Create DataStoreReference')
        ),
        'create.subprocess-expanded': createAction(
          'bpmn:SubProcess', 'activity', 'bpmn-icon-subprocess-expanded',
          translate('Create expanded SubProcess'),
          {  isExpanded: true }
        ),
        'create.participant-expanded': { 
          group: 'collaboration',
          className: 'bpmn-icon-participant',
          title: translate('Create Pool/Participant'),
          action: { 
            dragstart: createParticipant,
            click: createParticipant
          }
        },
        'create.group': createAction(
          'bpmn:Group', 'artifact', 'bpmn-icon-group'
        ),
      });
    }

自定义了工具栏之后，流程图节点渲染也需要进行自定义  
还是在熟悉的bpmn-js/lib/draw/BpmnRenderer.js中进行填充颜色和边框颜色，绘制图形的自定义  
**在同级的PathMap.js中有预定义的路径的坐标点，自定义的形状坐标集合也可以放到这里，统一管理**

--------------------

以上是直接对源码进行修改，问题是有可能改乱掉了

参考官方demo中 [https://github.com/bpmn-io/bpmn-js-example-custom-elements][https_github.com_bpmn-io_bpmn-js-example-custom-elements]

创建专门用于自定义的文件夹，存放自定义的配置；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70 1]

**其中：CustomContextPad.js用于控制自定义元素的后续可新增的元素，如下图**  
![在这里插入图片描述][20190910182136124.png]  
**CustomPalette.js文件是控制左侧工具栏显示内容**  
**CustomRenderer.js文件用于控自定义节点的图形的绘制**

bpmn采用的是注入式引用，所以需要像上上图中，新增index.js，写入注入的文件

import CustomContextPad from './CustomContextPad';
    import CustomPalette from './CustomPalette';
    import CustomRenderer from './CustomRenderer';
    
    export default { 
      __init__: [ 'customContextPad', 'customPalette', 'customRenderer' ],
      customContextPad: [ 'type', CustomContextPad ],
      customPalette: [ 'type', CustomPalette ],
      customRenderer: [ 'type', CustomRenderer ]
    };

**在使用上也要做一点修改**

import customModule from './custom';
    import BpmnModeler from 'bpmn-js/lib/Modeler';
    
    const bpmnModeler = new BpmnModeler({ 
      container: containerEl,
      additionalModules: [
        customModule
      ],
      moddleExtensions: { 
        qa: qaExtension
      }
    });

详细见 [https://github.com/haoyanyu/vue-with-bpmn][https_github.com_haoyanyu_vue-with-bpmn]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d161454a4a614d2fae3dc72997a3da64.png
[https_github.com_bpmn-io_bpmn-js-example-custom-elements]: https://github.com/bpmn-io/bpmn-js-example-custom-elements
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7f5c0dcc5fa344e0bd4823092a8d2b3b.png
[20190910182136124.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/bcf7ff030681431281f9239d69bee6a0.png
[https_github.com_haoyanyu_vue-with-bpmn]: https://github.com/haoyanyu/vue-with-bpmn