首页 > Vue >

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

时间: 作者:admin 浏览:

上一个篇章讲了如何自定义bpmnjs的CustomModeler对象,以及自定义模块(CustomModule)的简单定义与引用,还没看的同学可以去这里看:

bpmnjs如何自定义Modeler?vue+bpmnjs

上个篇章简单展示过,要自定义paletteProvider 、palette,首先要在自定义模块(CustomModule)的js里引入自定义的palette、paletteProvider 模块:

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

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

其中,paletteProvider是自定义左侧工具栏各个工具初始化的名称、图标、class等等,这个模块建议直接去依赖下复制过来修改,bpmn-js/lib/features/palette/paletteprovider.js,内容如下:

import {
  assign
} from 'min-dash';

/**
 * A palette provider for BPMN 2.0 elements.
 */
export default function PaletteProvider(
    palette, create, elementFactory,
    spaceTool, lassoTool, handTool,
    globalConnect, translate) {

    this._palette = palette;
    this._create = create;
    this._elementFactory = elementFactory;
    this._spaceTool = spaceTool;
    this._lassoTool = lassoTool;
    this._handTool = handTool;
    this._globalConnect = globalConnect;
    this._translate = translate;

    palette.registerProvider(this);
}

PaletteProvider.$inject = [
    'palette',
    'create',
    'elementFactory',
    'spaceTool',
    'lassoTool',
    'handTool',
    'globalConnect',
    'translate'
];

PaletteProvider.prototype.getPaletteEntries = function(element) {
    var actions = {},
        create = this._create,
        elementFactory = this._elementFactory,
        spaceTool = this._spaceTool,
        lassoTool = this._lassoTool,
        handTool = this._handTool,
        globalConnect = this._globalConnect,
        translate = this._translate;

    function createAction(type, group, className, title, options) {

        function createListener(event) {
            var shape = elementFactory.createShape(assign({ type: type }, options));
            if (options) {
                shape.businessObject.di.isExpanded = options.isExpanded;
            }
            create.start(event, shape);
        }
        var shortType = type.replace(/^bpmn:/, '');

        return {
            group: group,
            className: className,
            title: title || translate('Create {type}', { type: shortType }),
            action: {
                dragstart: createListener,
                click: createListener
            }
        };
    }

    function createSubprocess(event) {
        var subProcess = elementFactory.createShape({
            type: 'bpmn:SubProcess',
            x: 0,
            y: 0,
            isExpanded: true
        });

        var startEvent = elementFactory.createShape({
            type: 'bpmn:StartEvent',
            x: 40,
            y: 82,
            parent: subProcess
        });

        create.start(event, [ subProcess, startEvent ], {
            hints: {
                autoSelect: [ startEvent ]
            }
        });
    }

    function createParticipant(event) {
        create.start(event, elementFactory.createParticipantShape());
    }

    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',
            translate('Create StartEvent')
        ),
        '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',
            translate('Create EndEvent')
        ),
        'create.exclusive-gateway': createAction(
            'bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-none',
            translate('Create Gateway')
        ),
        'create.task': createAction(
            'bpmn:Task', 'activity', 'bpmn-icon-task',
            translate('Create Task')
        ),
        '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': {
            group: 'activity',
            className: 'bpmn-icon-subprocess-expanded',
            title: translate('Create expanded SubProcess'),
            action: {
                dragstart: createSubprocess,
                click: createSubprocess
            }
        },
        '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',
            translate('Create Group')
        ),
    });

    return actions;
};

palette模块js也建议直接去依赖下复制过来修改即可:diagram-js/lib/features/Palette/palette.js,如果要自定义palette的容器(父级),将工具栏放在自己定义的地方,那么首先定义好自己的palette容器:

<div ref="paletteBox" class="palette-box"></div>

然后在自定义的CustomModeler的参数里加入paletteContainer参数,如下:

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

接下来就是怎么定义paletteContainer参数;
加好以上的设置之后,我们来修改刚才的palette.js文件内容,将自定义palette容器替换原有palette容器(拿依赖的palette.js直接修改),看主要的几个地方(paletteContainer与$inject):

export default function Palette(
    eventBus,
    canvas,
    paletteContainer
) {

    this._eventBus = eventBus;
    this._canvas = canvas;
    this._paletteContainer = paletteContainer;
    var self = this;

    ......
    ............
    ................
}

Palette.$inject = [
    'eventBus',
    'canvas',
    'config.paletteContainer'
];

Palette.prototype._init = function() {
    var self = this;

    var eventBus = this._eventBus;

    var parentContainer = this._paletteContainer || this._getParentContainer();

    var container = this._container = domify(Palette.HTML_MARKUP);

    parentContainer.appendChild(container);

    ...
    ......
    ..........
}

注意parentContainer的修改,其中HTML_MARKUP变量的内容就是各工具原有的html结构,修改成自己想要的样式即可;具体的可以边调试边修改,难度不是很大,但要细心;

好啦,自定义palette容器与paletteprovider其实都讲啦,需要时间消化,结合自己的理解。

引导:

关于bpmnjs+vue的更多篇章,小编已经全部整理在这里:
bpmnjs+vue中文文档API常见方法使用总结

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

更多文章

栏目文章


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