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 相关文章推荐
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 Javascript
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
cache_lite试用
2007/02/14 PHP
php读取xml实例代码
2010/01/28 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
Webkit的跨域安全问题说明
2011/09/13 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
关于Python错误重试方法总结
2021/01/03 Python
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
过滤器的用法
2013/10/08 面试题
就业推荐自我鉴定
2013/10/06 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
大学生个人求职信例文
2014/07/07 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
会计专业自荐信范文
2015/03/05 职场文书
婚礼答谢词范文
2015/09/29 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
如何使用python包中的sched事件调度器
2022/04/30 Python