首页 前端知识 bpmn-js自定义之Modeler以及相关引用

bpmn-js自定义之Modeler以及相关引用

2024-02-25 11:02:22 前端知识 前端哥 821 294 我要收藏

项目环境:

  • bpmn.js: 7.5.x
  • vue: 2.x

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

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

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

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

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

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

export { CustomModeler };

被引用的自定义模块CustomModule的custom/index.js文件(这个文件很重要,以后几乎所有需要自定义引入的模块都在这里import)内容参考如下,假设自定义了左侧工具栏模块:

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

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

结构目录参考图:

a7fd485a4b25415fa0026f6171945210.png 

经过以上两步,自定义的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')

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

以上的三个自定义模块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"
            }
        ]
    },
    {
        "name":"Properties",
        "isAbstract": true,
        "extends":[],
        "superClass":["Element"],
        "meta":{
            "allowedIn":["*"]
        },
        "properties":[
            {
                "name":"values",
                "isMany":true,
                "isbody":true,
                "type":"Formright"
            }
        ]
    },
    {
        "name":"Formright",
        "isAbstract": true,
        "extends":[
            "flowable:Exec_before",
            "flowable:Exec_after"
        ],
        "superClass":["Element"],
        "meta":{
            "allowedIn":["*"]
        },
        "properties":[
            {
                "name":"value",
                "isAttr":true,
                "type":"String"
            },
            {
                "name": "body",
                "isBody": true,
                "type": "String"
            }
        ]
    },
    {
        "name": "Property",
        "superClass": [
            "Element"
        ],
        "properties": [
            {
                "name": "id",
                "type": "String",
                "isAttr": true
            },
            {
                "name": "name",
                "type": "String",
                "isAttr": true
            },
            {
                "name": "value",
                "type": "String",
                "isAttr": true
            }
        ]
    }
    ]
}
//参考官方仓库:https://github.com/bpmn-io/moddle/blob/master/docs/descriptor.md
  • 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;

使用例子(vue2):

this.modeler = await this.getModeler()

获取Modeler各模块:

this.eventBus = this.modeler.get("eventBus")
this.modeling = this.modeler.get("modeling")
this.moddle = this.modeler.get("moddle")
this.bpmnFactory = this.modeler.get("bpmnFactory")
this.elementRegistry = this.modeler.get("elementRegistry")
this.canvas = this.modeler.get("canvas")
this.selection = this.modeler.get("selection")

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

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2649.html
标签
经验分享
评论
发布的文章

【jQuery详细介绍】

2024-03-10 11:03:26

jQuery核心函数

2024-03-10 11:03:10

vue echarts GL3d中国地图

2024-03-10 11:03:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!