Bpmn-js自定义Palette元素

2024-02-08 07:28
文章标签 自定义 元素 js bpmn palette

本文主要是介绍Bpmn-js自定义Palette元素,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Bpmn-js作为一个流程编辑器,常规的我们可以将其划分为几个功能区域,每个区域对应的负责不同的功能实现,bpmn-js的设计给我们留下了大量的留白和可扩展区域,其每一部分都可进行组合拼装,同时也支持我们的各种不同层次需求的自定义操作。其常规区域划分如下:

本文主要介绍如何进行左侧工具栏palette的自定义,如何创建一个新的palette

回顾一下

 同行我们都是通过bpmn-js中提供的modeler来创建编辑器主体,其核心代码如下:

 

<template><div class="my-process-designer__container"><div class="my-process-designer__canvas" ref="bpmn-canvas"></div></div>
<template><script>
import BpmnModeler from "bpmn-js/lib/Modeler";const bpmnModeler = new BpmnModeler({container: this.$refs["bpmn-canvas"],keyboard: this.keyboard ? { bindTo: document } : null,additionalModules: this.additionalModules,moddleExtensions: this.moddleExtensions});
</script>

如上所示,有几个关键的属性:

  • container:当前绑定绘制的元素
  • keyboard:绑定键盘响应的元素
  • additionalModules:自定义扩展插件部分【我们需要自定义的部分就放这里】
  • moddleExtensions:用来进行 xml 字符串解析以及元素、属性实例定义的声明,常为外部引入的一个json文件或者js对象,这里是用来配置解析flowableactiviticamunda等不同BPMN 2.0框架声明的配置

自定义Palette

接下来我们就开始自定义一个Palette小工具,可以帮助我们业务快速识别需要的组件是哪个,当前组件使用已有bpmn:ServiceTask类型shape图片绘制。

创建工具提供者

这里我们需要创建一个小工具的提供者 TestPaletteProvider.js文件

import icon from '../../../../assets/bpmn/email.svg'export default class TestPaletteProvider{// 自定义邮件收发组件constructor(palette, create, elementFactory) {this.create = createthis.elementFactory = elementFactorypalette.registerProvider(this)}// 这个函数就是绘制palette的核心getPaletteEntries(element) {const elementFactory = this.elementFactoryconst create = this.createfunction startCreate(event) {const serviceTaskShape = elementFactory.create('shape', { type: 'bpmn:ServiceTask' },)create.start(event, serviceTaskShape)}return {'create-test-task': {group: 'activity',title: '创建测试元素',imageUrl: icon,action: {dragstart: startCreate,click: startCreate,},},}}
}TestPaletteProvider.$inject = ['create','elementFactory','palette',]

上面需要一个工具图示,这里是上面的svg,也可以自己找一个喜欢的图片:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1707209714780"class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1928" width="28"height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><pathd="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m0 972.8a460.8 460.8 0 1 1 460.8-460.8 460.8 460.8 0 0 1-460.8 460.8z"fill="#3B86E0" p-id="1929"></path><pathd="M734.72 332.8H289.28l222.72 148.48 222.72-148.48zM256 371.968v282.88l169.728-169.728L256 371.968zM526.08 533.248a25.6 25.6 0 0 1-28.16 0l-28.672-18.944L292.352 691.2h439.296l-176.896-176.896zM768 654.848V371.968l-169.728 113.152L768 654.848z"fill="#3B86E0" p-id="1930"></path>
</svg>

暴露插件

当前目录将该插件暴露出去,如下:

// index.js
import TestPaletteProviderfrom './TestPaletteProvider.js'export default {__init__: ['testPalette'],testPalette: ['type', TestPaletteProvider],
}

应用

将自定义的palette应用在BpmnModeler上:

<script>
import BpmnModeler from "bpmn-js/lib/Modeler";
import testPalette from './extension-palette/test'const bpmnModeler = new BpmnModeler({container: this.$refs["bpmn-canvas"],keyboard: this.keyboard ? { bindTo: document } : null,additionalModules: [testPalette ], // 在这里添加testPalette 插件moddleExtensions: this.moddleExtensions});</script>

如上左侧就是我们的自定义的小工具,绘制区域我们使用的是bpmn:ServiceTask类型shape,绘制其实也可以自定义,这里后续介绍。希望大家能喜欢~

这篇关于Bpmn-js自定义Palette元素的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/690307

相关文章

C# 比较两个list 之间元素差异的常用方法

《C#比较两个list之间元素差异的常用方法》:本文主要介绍C#比较两个list之间元素差异,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 使用Except方法2. 使用Except的逆操作3. 使用LINQ的Join,GroupJoin

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

一文详解Java Stream的sorted自定义排序

《一文详解JavaStream的sorted自定义排序》Javastream中的sorted方法是用于对流中的元素进行排序的方法,它可以接受一个comparator参数,用于指定排序规则,sorte... 目录一、sorted 操作的基础原理二、自定义排序的实现方式1. Comparator 接口的 Lam

python3如何找到字典的下标index、获取list中指定元素的位置索引

《python3如何找到字典的下标index、获取list中指定元素的位置索引》:本文主要介绍python3如何找到字典的下标index、获取list中指定元素的位置索引问题,具有很好的参考价值,... 目录enumerate()找到字典的下标 index获取list中指定元素的位置索引总结enumerat

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求

如何自定义一个log适配器starter

《如何自定义一个log适配器starter》:本文主要介绍如何自定义一个log适配器starter的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求Starter 项目目录结构pom.XML 配置LogInitializer实现MDCInterceptor

Druid连接池实现自定义数据库密码加解密功能

《Druid连接池实现自定义数据库密码加解密功能》在现代应用开发中,数据安全是至关重要的,本文将介绍如何在​​Druid​​连接池中实现自定义的数据库密码加解密功能,有需要的小伙伴可以参考一下... 目录1. 环境准备2. 密码加密算法的选择3. 自定义 ​​DruidDataSource​​ 的密码解密3

spring-gateway filters添加自定义过滤器实现流程分析(可插拔)

《spring-gatewayfilters添加自定义过滤器实现流程分析(可插拔)》:本文主要介绍spring-gatewayfilters添加自定义过滤器实现流程分析(可插拔),本文通过实例图... 目录需求背景需求拆解设计流程及作用域逻辑处理代码逻辑需求背景公司要求,通过公司网络代理访问的请求需要做请

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

VSCode中配置node.js的实现示例

《VSCode中配置node.js的实现示例》本文主要介绍了VSCode中配置node.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一.node.js下载安装教程二.配置npm三.配置环境变量四.VSCode配置五.心得一.no