全网最详bpmn.js教材-自定义contextPad篇

19,120 阅读3分钟

前言

Q: bpmn.js是什么? 🤔️

bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.

Q: 我为什么要写该系列的教材? 🤔️

因为公司业务的需要因而要在项目中使用到bpmn.js,但是由于bpmn.js的开发者是国外友人, 因此国内对这方面的教材很少, 也没有详细的文档. 所以很多使用方式很多坑都得自己去找.在将其琢磨完之后, 决定写一系列关于它的教材来帮助更多bpmn.js的使用者或者是期于找到一种好的绘制流程图的开发者. 同时也是自己对其的一种巩固.

由于是系列的文章, 所以更新的可能会比较频繁, 您要是无意间刷到了且不是您所需要的还请谅解😊.

不求赞👍不求心❤️. 只希望能对你有一点小小的帮助.

自定义ContextPad篇

经过前面几章的学习, 相信大家都已经掌握了自定义paletterenderer, 这一章节主要讲解的是自定义contextPad.

先让我们来回顾一下, contextPad是什么?

如图, 可以看到除了在左侧的工具栏处能添加节点之外, 点击节点的时候也会出现一个小弹窗, 这里面也可以添加节点. 这个小弹窗就是 contextPad.

那么, 通过阅读你可以学习到:

在默认的ContextPad基础上修改

前期准备

让我们接着在LinDaiDai/bpmn-vue-custom案例项目上进行开发.

components文件夹下新建一个custom-context-pad.vue文件, 同时配置路由“自定义contextPad”.

components/custom文件夹下新建一个CustomContextPad.vue文件, 用来自定义contextPad.

编写CustomContextPad.vue代码

其实自定义contextPadpalette很像, 只不过是使用contextPad.registerProvider(this)来指定它是一个contextPad, 而自定义palette是用platette.registerProvider(this).

代码如下:

// CustomContextPad.js
export default class CustomContextPad {
    constructor(config, contextPad, create, elementFactory, injector, translate) {
        this.create = create;
        this.elementFactory = elementFactory;
        this.translate = translate;

        if (config.autoPlace !== false) {
            this.autoPlace = injector.get('autoPlace', false);
        }

        contextPad.registerProvider(this); // 定义这是一个contextPad
    }

    getContextPadEntries(element) {}
}

CustomContextPad.$inject = [
    'config',
    'contextPad',
    'create',
    'elementFactory',
    'injector',
    'translate'
];

相信大家都已经看出来了, 重点还是在于getContextPadEntries这个方法, 接下来让我们来构建这个方法.

编写getContextPadEntries代码

其实这个方法, 需要返回的也是一个对象, 也就是你要在contextPad这个容器里显示哪些自定义的元素, 比如我这里需要给容器里添加一个lindaidai-task的元素, 那么我们可以在返回的对象中添加上append.lindaidai-task这个属性.

而属性值就是这个元素的一系列配置, 和palette中一样, 包括:

  • group: 属于哪个分组, 比如tools、event、gateway、activity等等,用于分类
  • className: 样式类名, 我们可以通过它给元素修改样式
  • title: 鼠标移动到元素上面给出的提示信息
  • action: 用户操作时会触发的事件

大概是这样:

// CustomContextPad.js
getContextPadEntries(element) {
    return {
        'append.lindaidai-task': {
            group: 'model',
            className: 'icon-custom lindaidai-task',
            title: translate('创建一个类型为lindaidai-task的任务节点'),
            action: {
                click: appendTask,
                dragstart: appendTaskStart
            }
        }
    };
}

接下来就是构建appendTaskappendTaskStart

// CustomContextPad.js
getContextPadEntries(element) {
        const {
            autoPlace,
            create,
            elementFactory,
            translate
        } = this;

        function appendTask(event, element) {
            if (autoPlace) {
                const shape = elementFactory.createShape({ type: 'bpmn:Task' });
                autoPlace.append(element, shape);
            } else {
                appendTaskStart(event, element);
            }
        }

        function appendTaskStart(event) {
            const shape = elementFactory.createShape({ type: 'bpmn:Task' });
            create.start(event, shape, element);
        }

        return {
            'append.lindaidai-task': {
                group: 'model',
                className: 'icon-custom lindaidai-task',
                title: translate('创建一个类型为lindaidai-task的任务节点'),
                action: {
                    click: appendTask,
                    dragstart: appendTaskStart
                }
            }
        };
    }
}

这里和palette中有一点不同, 就是多了一层autoPlace的判断, 其实我也没太搞明白这个autoPlace的作用是什么, 自动放置? 而且官方给的例子🌰就是这么写的, 有知道的小伙伴还请评论区留言哦, 谢谢~

修改contextPad的相关样式

此时我们看看效果吧😄...

bpmnCustom16.png
bpmnCustom16.png

咿~ 好像可以耶, 但是, 这个小积木也太小了一点吧😅, 而且鼠标移上去之后, 黄色的背景色直接就覆盖它了...

bpmnCustom17.png
bpmnCustom17.png

哇, 这不能忍啊...

得想法子解决它, 还我漂亮的小积木❤️...

接着让我们打开控制台审查元素, 可以发现这个背景色是一个叫.djs-context-pad .entry的类提供的样式, 也许, 我们可以全局修改这个样式, 让我们试试看:

/* app.css */

/* 自定义 contextPad 的样式 */ .djs-context-pad .lindaidai-task.entry:hover { background: url('hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/rules.png') center no-repeat!important; background-size: cover!important; }

.djs-context-pad .entry:hover { /* 重新修改了 hover 之后的样式 */ border: 1px solid #1890ff; }

.djs-context-pad .entry { box-sizing: border-box; background-size: 94%; transition: all 0.3s; }

打开页面看看效果哈.

bpmnCustom18.png
bpmnCustom18.png

不错, 解决了, 哈哈😄.

(直接修改样式虽然不是最好的解决办法, 但这是目前我能想到的办法, 而且它确实也能够解决问题)

完全自定义ContextPad

前期准备

同样的, 如果你已经学会了在默认的ContextPad基础上修改, 那么完全自定义ContextPad也就差不多了😁.

不过完全自定义ContextPad不是叫contextPad, 而是contextPadProvider, 好像要更厉害一点🤭...

OK👌, 让我们在customModeler/custom文件夹下新建一个CustomContextPadProvider.js文件.

编写CustomContextPadProvider.js代码

先让我们来看下主要的结构:

// CustomContextPadProvider.js
export default function ContextPadProvider(contextPad, config, injector, translate, bpmnFactory, elementFactory, create, modeling, connect) {
  this.create = create
  this.elementFactory = elementFactory
  this.translate = translate
  this.bpmnFactory = bpmnFactory
  this.modeling = modeling
  this.connect = connect
  config = config || {}
  if (config.autoPlace !== false) {
      this._autoPlace = injector.get('autoPlace', false)
  }
  contextPad.registerProvider(this)
}

ContextPadProvider.$inject = [
  'contextPad',
  'config',
  'injector',
  'translate',
  'bpmnFactory',
  'elementFactory',
  'create',
  'modeling',
  'connect'
]

ContextPadProvider.prototype.getContextPadEntries = function(element) {}

别看上面代码很长的样子, 其实没啥东西:

  • 定义一个ContextPadProvider类, 然后引入一些我们后面要用到的方法或者属性
  • 通过$inject注入进来
  • 重写原型链上的getContextPadEntries方法

编写getContextPadEntries代码

你应该也发现了, 重点还是重写getContextPadEntries这个方法.

额, 这里我先以一个简单的为例, 先只是创建一个lindaidai-task. 因此可以直接把在默认的ContextPad基础上修改案例中的getContextPadEntries中的代码复制过来:

// CustomContextPad.js
getContextPadEntries(element) {
        const {
            autoPlace,
            create,
            elementFactory,
            translate
        } = this;

        function appendTask(event, element) {
            if (autoPlace) {
                const shape = elementFactory.createShape({ type: 'bpmn:Task' });
                autoPlace.append(element, shape);
            } else {
                appendTaskStart(event, element);
            }
        }

        function appendTaskStart(event) {
            const shape = elementFactory.createShape({ type: 'bpmn:Task' });
            create.start(event, shape, element);
        }

        return {
            'append.lindaidai-task': {
                group: 'model',
                className: 'icon-custom lindaidai-task',
                title: translate('创建一个类型为lindaidai-task的任务节点'),
                action: {
                    click: appendTask,
                    dragstart: appendTaskStart
                }
            }
        };
    }
}

此时让我们先看看效果哈:

bpmnCustom19
bpmnCustom19

效果好像是实现了, 而且点击和拖拽它也能实现创建lindaidai-task的效果...

但总感觉好像少了什么, 因为光创建task类型但元素是不够的呀, 可不可以创建线或者实现编辑, 删除元素的功能呢? 当然可以啦, 哈哈😄.

不过这一章节先说这么多, 如何创建线和实现编辑, 删除我会把它放到一下章来细讲哈😊, 不用着急.

后语

上面👆案例用的都是同一个项目🦐

项目案例Git地址: LinDaiDai/bpmn-vue-custom 喜欢的小伙伴请给个Star🌟呀, 谢谢😊

系列相关推荐:

《全网最详bpmn.js教材-基础篇》

《全网最详bpmn.js教材-http请求篇》

《全网最详bpmn.js教材-事件篇》

《全网最详bpmn.js教材-renderer篇》

《全网最详bpmn.js教材-编辑、删除节点篇》