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

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

自定义类型:结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐? 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识,并举出了两个例子,我们再举出两个例子继续说明: struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

Spring 源码解读:自定义实现Bean定义的注册与解析

引言 在Spring框架中,Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义,Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制,帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry,以全面掌握Bean注册和解析的核心原理。

遮罩,在指定元素上进行遮罩

废话不多说,直接上代码: ps:依赖 jquer.js 1.首先,定义一个 Overlay.js  代码如下: /*遮罩 Overlay js 对象*/function Overlay(options){//{targetId:'',viewHtml:'',viewWidth:'',viewHeight:''}try{this.state=false;//遮罩状态 true 激活,f

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(

Oracle type (自定义类型的使用)

oracle - type   type定义: oracle中自定义数据类型 oracle中有基本的数据类型,如number,varchar2,date,numeric,float....但有时候我们需要特殊的格式, 如将name定义为(firstname,lastname)的形式,我们想把这个作为一个表的一列看待,这时候就要我们自己定义一个数据类型 格式 :create or repla