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 相关文章推荐
jquery批量控制form禁用的代码
Aug 06 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 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设计模式 Facade(外观模式)
2011/06/26 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
Python类及获取对象属性方法解析
2020/06/15 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
质量工程师岗位职责
2013/11/16 职场文书
有趣的广告词
2014/03/18 职场文书
临床医师个人自我评价
2014/04/06 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
Java 定时任务技术趋势简介
2022/05/04 Java/Android
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技