vue项目中使用bpmn-自定义platter的示例代码


Posted in Javascript onMay 11, 2020

内容概述

本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中。主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文

前情提要

经过前四篇的学习,我们能够实现bpmn基本绘图、预览、为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比:

vue项目中使用bpmn-自定义platter的示例代码

我们本次要实现的目标:基于左侧platter原有元素类型,创建出一个新的自定义节点。暂且叫它“草莓蛋糕”节点,类型是 bpmn:Task,样式我们自己找一个好看的小草莓蛋糕图案。所以,开动吧~首先新建一个“customPalette”文件夹,里面放我们今天所有自定义的文件。

步骤1:建立platter类函数,命名为CustomPalette.js

export default class CustomPalette {
 constructor(create, elementFactory, palette) {
 this.create = create;
 this.elementFactory = elementFactory;
 palette.registerProvider(this);
 }
 
 
 // 这个是绘制palette的核心,函数名不要变
 getPaletteEntries() {
 const elementFactory = this.elementFactory;
 const create = this.create;
 
 function dragEventFactory(type) {
 return function (event) {
 const taskShape = elementFactory.create('shape', {
  type: type
 });
 create.start(event, taskShape);
 };
 }
 
 return {
 'create.cake': {
 title: '我是自定义节点-草莓蛋糕', // 鼠标悬浮到节点上显示的文字
 className: 'icon-custom bpmn-icon-cake', // 样式名
 action: { // 操作该节点时会触发的事件,此时只注册一个拖动事件即可,否则拖动时没有效果
  dragstart: dragEventFactory('bpmn:Task')
 }
 }
 };
 }
}
CustomPalette.$inject = [
 'create',
 'elementFactory',
 'palette'
];

此时,我们已经注册好了一个名称为“create.cake”的节点,拖动它时,画布中会出现一个"bpmn:Task"类型的节点,此时需要将该文件导出并在页面中引入,否则没有效果。

步骤2:在CustomPalette.js同级,建立一个index.js文件将其导出

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

步骤3:页面中(index.vue)引入index.js

import customModule from './customPalette';
export default {
 mounted() {
 this.containerEl = document.getElementById('container');
 this.bpmnModeler = new BpmnModeler({
 additionalModules: [ customModule ]
 });
}

步骤4:为节点定义样式

新建一个customPalette.scss文件,在该文件同级放一张“cake.png”的图片,作为节点的背景图写入。背景图引入的话,貌似只支持.png格式,亲测:jpg报错

.bpmn-icon-cake {
 background-image: url('./cake.png');
}
 
.icon-custom {
 background-size: 65%;
 background-repeat: no-repeat;
 background-position: center center;
}

并且在main.js中引入,注意,一定要在main.js中全局引入,否则不生效。

import 'customPalette/customPalette.scss';

此时,我们便可以在左侧工具栏中看到自定义的“草莓蛋糕”节点了,但是此时拖动该节点,右侧只会产生一个“bpmn:Task”的节点,只有一个框框。

vue项目中使用bpmn-自定义platter的示例代码

我们希望的是,拖动后画布中也显示自定义图标,所以我们进行下一步:自定义渲染

步骤5:画布渲染自定义节点

此时需要我们新建一个 CustomRenderer.js文件,作用:自定义 renderer。因为我们是在bpmn原有的元素“bpmn:Task”基础上进行修改,所以我们需要对将BaseRenderer进行继承。

import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'; // 引入默认的renderer
 
const HIGH_PRIORITY = 1500; // 最高优先级
 
export default class CustomRenderer extends BaseRenderer {
 // 继承BaseRenderer
 constructor(eventBus, bpmnRenderer) {
 super(eventBus, HIGH_PRIORITY);
 this.bpmnRenderer = bpmnRenderer;
 }
 
 canRender(element) {
 return !element.labelTarget;
 }
 
 drawShape(parentNode, element) {
 const shape = this.bpmnRenderer.drawShape(parentNode, element);
 return shape;
 }
 
 getShapePath(shape) {
 return this.bpmnRenderer.getShapePath(shape);
 }
}
 
CustomRenderer.$inject = ['eventBus', 'bpmnRenderer'];

此时, CustomRenderer.js文件大概结构完成了,注意:HIGH_PRIORITY变量和canRender不可以删掉,否则会有问题。重头戏是里面的drawShape函数。

步骤6:书写drawShape函数

我们在CustomRenderer.js同级建立一个util文件,记录自定义类型节点的一些属性。

import cake from './cake.png';

// 自定义元素的类型,此时我们只需要自定义一种节点,所以数组只有一个元素
const customElements = ['bpmn:Task']; 
const customConfig = {
 // 自定义元素的配置
 cake: {
 url: cake,
 attr: {x: 0, y: 0, width: 50, height: 50}
 }
};
 
export {customElements, customConfig};

现在我们来书写drawShape函数

import { customElements, customConfig } from './util';
import { append as svgAppend, create as svgCreate } from 'tiny-svg';
...
drawShape(parentNode, element) {
 const type = element.type; // 获取到类型
 // 所有节点都会走这个函数,所以此时只限制,需要自定义的才去自定义,否则仍显示bpmn默认图标
 if (customElements.includes(type)) { 
 const {url, attr} = customConfig['cake'];
 const customIcon = svgCreate('image', {...attr, href: url});
 element['width'] = attr.width;
 element['height'] = attr.height;
 svgAppend(parentNode, customIcon);
 return customIcon;
 }
 const shape = this.bpmnRenderer.drawShape(parentNode, element);
 return shape;
}

步骤7: 导出并使用CustomRenderer

修改之前导出CustomPalette的index.js文件

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

意:此时__init__内的属性名都不可以改,不要问为什么,因为改了报错。

步骤3中已经将该index.js引入到了页面中,此时无需再次引入,此时我们来看看效果。

vue项目中使用bpmn-自定义platter的示例代码

后续

项目目录:index.vue是画布主页面,同级customPalette文件夹下共有6个文件,结构如下:

vue项目中使用bpmn-自定义platter的示例代码

总结

到此这篇关于vue项目中使用bpmn-自定义platter的示例代码的文章就介绍到这了,更多相关vue自定义platter内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Vue实现图片轮播组件思路及实例解析
May 11 #Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 #Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 #Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 #Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 #Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 #Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 #Javascript
You might like
PHP文件读写操作之文件写入代码
2011/01/13 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
php输入数据统一类实例
2015/02/23 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
JavaScript中this详解
2015/09/01 Javascript
浅析javascript的return语句
2015/12/15 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
python 重定向获取真实url的方法
2018/05/11 Python
Python多线程原理与用法详解
2018/08/20 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python Paramiko使用示例
2020/09/21 Python
PyQt实现计数器的方法示例
2021/01/18 Python
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
医学生求职自荐信
2013/10/25 职场文书
大学运动会通讯稿
2014/01/28 职场文书
七年级政治教学反思
2014/02/03 职场文书
写给老婆的检讨书
2014/02/21 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
配置nginx 重定向到系统维护页面
2021/06/08 Servers