内容字号: 默认 大号 超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

首页 > Vue >

bpmnjs如何自定义Modeler?vue+bpmnjs

发布:2021-10-10 浏览: 评论(

项目中使用到bpmnjs的时候,大多数情况都是需要自定义定制才能满足需求,因此bpmnjs的自定义基本不可避免,今天我们来进行vue中的bpmnjs的Modeler自定义过程;

由于bpmnjs自定义过程稍微复杂,刚开始理解起来有些难度,不懂的地方大家耐心多看几遍;

首先自定义要先继承原Modeler,再将需要自定义的模块(CustomModule)与原有模块(modules)合并(或者说覆盖)

import inherits from "inherits";
import Modeler from "bpmn-js/lib/Modeler";
import CustomModule from "../custom";

function CustomModeler(options) {
    Modeler.call(this, options);
    this._customElements = [];
}

inherits(CustomModeler, Modeler);
CustomModeler.prototype._modules = [].concat(CustomModeler.prototype._modules, [CustomModule]);

export { CustomModeler };

被引用的自定义模块CustomModule的js文件内容参考如下,假设自定义了左侧工具栏模块:

import paletteProvider from "../customPalette/paletteprovider";
import customPalette from "../customPalette/palette";

export default {
    __init__: [
        "paletteProvider",
        'palette'
    ],
    paletteProvider: ["type", paletteProvider],
    palette: [ 'type', customPalette ],
};

经过以上两步,自定义的CustomModeler对象就出来了,然后将上面的代码整理好放在不同的目录等待引用,下面是CustomModeler的参数设置与使用方法:

<div ref="bpmnbox" class="canvas-box"></div>
import customTranslate from '@/components/bpmnProcess/customTranslate/customTranslate';
import flowableDescriptor from '@/components/bpmnProcess/properties-panel/descriptor/flowable.json';
import flowableMoudle from '@/components/bpmnProcess/properties-panel/extension-moddle/flowable';

export default{
    data(){
        return{

        }
    },
    methods:{
        async getModeler(){
            const { CustomModeler } = await require('@/components/bpmnProcess/customModeler')

            let modeler = await new CustomModeler({
                container: this.$refs.bpmnbox,
                keyboard: {
                    bindTo: window
                },
                height: '100%',
                moddleExtensions: {
                    flowable: flowableDescriptor
                },
                additionalModules: [
                    flowableMoudle, 
                    { //汉化
                        translate: ['value', customTranslate]
                    },
                    {
                        // 禁用滚轮滚动
                        zoomScroll: ["value", ""]
                    }
                ]
            })
            return modeler
        }
    }
}

以上的三个自定义模块customTranslate、flowableDescriptor、flowableMoudle的js文件分别参考如下:

  • customTranslate:汉化模块
    import translations from './translations';
    export default function customTranslate(template, replacements) {
      replacements = replacements || {};
      // Translate
      template = translations[template] || template;
      // Replace
      return template.replace(/{([^}]+)}/g, function(_, key) {
          return translations[replacements[key]] || replacements[key] || '{' + key + '}';
      });
    }
    
    上面的translations参考内容如下(汉化键值对):
    export default {
      'Task': '任务',
      'Process': '流程',
       'UserTask': '用户任务',
      'GateWay': '网关',
      'StartEvent': '开始事件',
      'EndEvent': '结束事件',
    }
    
  • flowableDescriptor:扩展属性相关描述文件
    {
      "name": "Flowable",
      "uri": "http://flowable.org/bpmn",
      "prefix": "flowable",
      "xml": {
          "tagAlias": "lowerCase"
      },
      "associations": [],
      "types": [
      {
          "name": "UserTask",
          "isAbstract": true,
          "extends": [
              "bpmn:UserTask",
              "bpmn:MultiInstanceLoopCharacteristics"
          ],
          "properties": [ {
              "name": "timerEventDefinition",
              "type": "Expression"
              },{
              "name": "multiInstanceLoopCharacteristics",
              "type": "MultiInstanceLoopCharacteristics"
          }]
      },
      {
          "name": "StartEvent",
          "isAbstract": true,
          "extends": [
              "bpmn:StartEvent"
          ],
          "properties": [
              {
                  "name": "timerEventDefinition",
                  "type": "Expression"
              }
          ]
      }
      ]
    }
    
  • flowableMoudle:扩展属性模块

    module.exports = {
      __init__:["FlowableModdleExtension"],
      FlowableModdleExtension:["type",require("./flowableExtension")]
    }
    

    flowableExtension文件内容参考如下(其实这些文件全都可以在依赖目录找到,只是需要替换成’flowable’):

      "use strict";
      var some = require("min-dash").some;
      var ALLOWED_TYPES = {
          FailedJobRetryTimeCycle: ["bpmn:StartEvent", "bpmn:BoundaryEvent", "bpmn:IntermediateCatchEvent", "bpmn:Activity"],
          Connector: ["bpmn:EndEvent", "bpmn:IntermediateThrowEvent"],
          Field: ["bpmn:EndEvent", "bpmn:IntermediateThrowEvent"]
      };
    
      function is(element, type) {
          return element && typeof element.$instanceOf === "function" && element.$instanceOf(type);
      }
    
      function exists(element) {
          return element && element.length;
      }
    
      function includesType(collection, type) {
          return (
              exists(collection) && some(collection, function(element) {
                  return is(element, type);
              })
          );
      }
    
      function anyType(element, types) {
          return some(types, function(type) {
              return is(element, type);
          });
      }
    
      function isAllowed(propName, propDescriptor, newElement) {
          var name = propDescriptor.name,
              types = ALLOWED_TYPES[name.replace(/flowable:/, "")];
    
          return name === propName && anyType(newElement, types);
      }
    
      function FlowableModdleExtension(eventBus) {
          eventBus.on(
              "property.clone",
              function(context) {
                  var newElement = context.newElement,
                      propDescriptor = context.propertyDescriptor;
                  this.canCloneProperty(newElement, propDescriptor);
              },
              this
          );
      }
    
      FlowableModdleExtension.$inject = ["eventBus"];
    
      FlowableModdleExtension.prototype.canCloneProperty = function(newElement, propDescriptor) {
          if (isAllowed("flowable:FailedJobRetryTimeCycle", propDescriptor, newElement)) {
              return (
                  includesType(newElement.eventDefinitions, "bpmn:TimerEventDefinition") ||
                  includesType(newElement.eventDefinitions, "bpmn:SignalEventDefinition") ||
                  is(newElement.loopCharacteristics, "bpmn:MultiInstanceLoopCharacteristics")
              );
          }
    
          if (isAllowed("flowable:Connector", propDescriptor, newElement)) {
              return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition");
          }
    
          if (isAllowed("flowable:Field", propDescriptor, newElement)) {
              return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition");
          }
      };
    
      module.exports = FlowableModdleExtension;
    

到这里,Modeler的自定义以及相关的引用就已经完成了,能看到这里的同学很不错了,可能一开始可能是比较难理解的,只能多看几遍慢慢吸收,接下来的篇章就是分解自定义左侧工具栏、自定义右侧属性栏等等相关的内容,感谢你的耐心阅读;

前端新手交流群
欢迎加入web前端新手交流qq群:734802480

更多文章

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。


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