BPMNJS 在原生HTML中的引入与使用

BPMNJS 在HTML中的引入与使用

在网上看到的大多是基于vue使用BPMN的示例或者教程,竟然没有在HTML使用的示例,有也是很简单的介绍核心库的引入和使用,并没有涉及到扩展库。于是简单看了下,真的是一波三折,坎坎坷坷。不过结局还算是好的,最终也能在HTML中直接使用BPMNJS了。可能还有一些扩展没有涉及到,但是目前的功能应该已经基本符合需求了。

示例展示

BPMNJS 在HTML中的引入与使用

在网上看到的大多是基于vue使用BPMN的示例或者教程,竟然没有在HTML使用的示例,有也是很简单的介绍核心库的引入和使用,并没有涉及到扩展库。于是简单看了下,真的是一波三折,坎坎坷坷。不过结局还算是好的,最终也能在HTML中直接使用BPMNJS了。可能还有一些扩展没有涉及到,但是目前的功能应该已经基本符合需求了。

示例展示

引入步骤

引入BPMNJS(针对某些扩展,需要改造源码)
  • 下载:git clone https://github.com/bpmn-io/bpmn-js.git -b v13.2.0
  • 安装依赖:npm i
  • 打包:npm run distro
  • 生成dist文件后,移动到自己的HTML文件夹中,引入js和css

注意:三个模块的引入顺序

引入bpmn-js-properties-panel
  • 下载:git clone https://github.com/bpmn-io/bpmn-js-properties-panel.git
  • 安装依赖:npm i
  • 打包:npm run distro
  • 生成dist文件后,移动到自己的HTML文件夹中,引入js和css

注意: css文件使用在线的:https://unpkg.com/bpmn-js-properties-panel@2.1.0/dist/assets/properties-panel.css

引入tiny-svg(后续扩展render会用到)
  • 下载:git clone https://github.com/bpmn-io/tiny-svg.git
  • 安装依赖:npm i
  • 打包:npm run distro
  • 生成dist文件后,移动到自己的HTML文件夹中,引入js和css

源码改造

BPMNJS

Modeler.js改造
引用
import DiagramBaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
import * as DiagramRenderUtil from 'diagram-js/lib/util/RenderUtil';
扩展
Modeler.DiagramBaseRenderer = DiagramBaseRenderer;
Modeler.DiagramRenderUtil = DiagramRenderUtil;

参考地址

官网: https://bpmn.io/toolkit/bpmn-js

Bpmn.js自定义文件说明: https://blog.csdn.net/weixin_43359503/article/details/113915776

bpmn-js-properties-panel CDN地址:https://www.jsdelivr.com/package/npm/bpmn-js-properties-panel

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/519315.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

FreeRtos入门-5 任务通知

在FreeRTOS中,任务通知、队列、信号量和事件组都是用于任务间通信和同步的机制,但它们各自具有不同的特性和适用场景。 任务通知的主要优势在于其高效性和明确性。使用任务通知发送事件或数据给某个任务时,效率更高,且可以明确指定…

Tuxera2023 NTFS for Mac下载,安装和序列号激活

对于必须在Windows电脑和Mac电脑之间来回切换的Mac朋友来说,跨平台不兼容一直是一个巨大的障碍,尤其是当我们需要使用NTFS格式的硬盘在Windows和macOS之间共享文件时。因为Mac默认不支持写入NTFS磁盘。 为了解决这一问题,很多朋友会选择很便捷…

linux操作系统安装及命令初识,上岸蚂蚁金服

310 包) desktop 1800个包左右 内容必须大于 768M 系统设置 分区设置 挂载点 /boot / swap 交换分区–占用磁盘容量 网络配置 网卡配置 设置为ON 主机名配置 Begin installation 设置 root 用户密码 命令初识 命令 选项 参数: 命令选项参数…

Restful Web Service

Restful 1.特点 RESTful是一种架构风格,强调简单、轻量级和对资源的状态less操作。RESTful是通过HTTP协议进行通信的。RESTful的应用程序可以调用运行在不同服务器上的服务或函数。RESTful的接口通常使用JSON,但实际上它们都支持多种数据格式。RESTful…

Trace链异常检测汇总

微服务应用与单块应用完全不同,一个微服务系统少则有几十个微服务组成,多则可能有上百个服务。比如BAT级别的互联网公司,一般都超过上百个服务,服务之间的依赖关系错综复杂,如果没有有效的监控手段,那么出现…

风控系统之普通规则条件,使用LiteFlow实现

个人博客:无奈何杨(wnhyang) 个人语雀:wnhyang 共享语雀:在线知识共享 Github:wnhyang - Overview 提要 参考:智能风控筑基手册:全面了解风控决策引擎 前面有可配置输入参数的接…

Gson的用法

1. 导入依赖 <dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId><version>2.8.6</version> </dependency> 2. 使用Gson进行解析 2.1 Gson解析普通对象 package com.jiang.partnetbackend.…

六、企业级架构缓存篇之memcached

一、memcached概述 1、网站架构优化流程&#xff1a; LNMP架构中网站应用访问流程&#xff1a; 浏览器 (app) → web 服务器 → 后端服务 (php) → 数据库 (mysql) 访问流程越多&#xff0c;访问速度越慢&#xff0c;出现问题的几率也越大。 网站访问流程优化思路&#xff1…

软件测试(测试用例详解)(三)

1. 测试用例的概念 测试用例&#xff08;Test Case&#xff09;是为了实施测试而向被测试的系统提供的一组集合。 测试环境操作步骤测试数据预取结果 测试用例的评价标准&#xff1a; 用例表达清楚&#xff0c;无二义性。。用例可操作性强。用例的输入与输出明确。一条用例只有…

c语言之向main函数传递参数

在c语言中&#xff0c;main函数也是可以传递传递参数的&#xff0c;业内向main函数传递参数的格式是 main(int argc,char *argv[]) 向main函数传递参数不是通过代码传递的&#xff0c;一般是通过dos命令传递 举个例子 #include<stdio.h> void main(int argc,char *ar…

算法刷题应用知识补充--基础算法、数据结构篇

这里写目录标题 位运算&#xff08;均是拷贝运算&#xff0c;不会影响原数据&#xff0c;这点要注意&#xff09;&、|、^位运算特性细节知识补充对于n-1的理解异或来实现数字交换找到只出现一次的数据&#xff0c;其余数据出现偶数次 >> 、<<二进制中相邻的位的…

算法设计与分析实验报告c++实现(排序算法、三壶谜题、交替放置的碟子、带锁的门)

一、实验目的 1&#xff0e;加深学生对分治法算法设计方法的基本思想、基本步骤、基本方法的理解与掌握&#xff1b; 2&#xff0e;提高学生利用课堂所学知识解决实际问题的能力&#xff1b; 3&#xff0e;提高学生综合应用所学知识解决实际问题的能力。 二、实验任务 1、 编…

为什么mac文件拖拽不了 mac文件拖不进硬盘里 macbookpro文件无法拖进移动硬盘 Tuxera NTFS for Mac 2023绿色

如果你是一位Mac用户&#xff0c;你可能会遇到这样的问题&#xff1a;你想把Mac上的文件拖拽到其他位置&#xff0c;比如桌面、文件夹或者外接硬盘&#xff0c;但是却发现无法操作&#xff0c;这是为什么呢&#xff1f;这篇文章将为你解答为什么mac文件拖拽不了&#xff0c;以及…

Web安全-浏览器安全策略及跨站脚本攻击与请求伪造漏洞原理

Web安全-浏览器安全策略及跨站脚本攻击与请求伪造漏洞原理 Web服务组件分层概念 静态层 &#xff1a;web前端框架&#xff1a;Bootstrap&#xff0c;jQuery,HTML5框架等&#xff0c;主要存在跨站脚本攻击脚本层&#xff1a;web应用&#xff0c;web开发框架&#xff0c;web服务…

Linux从入门到精通 --- 2.基本命令入门

文章目录 第二章&#xff1a;2.1 Linux的目录结构2.1.1 路径描述方式 2.2 Linux命令入门2.2.1 Linux命令基础格式2.2.2 ls命令2.2.3 ls命令的参数和选项2.2.4 ls命令选项的组合使用 2.3 目录切换相关命令2.3.1 cd切换工作目录2.3.2 pwd查看当前工作目录2.4 相对路径、绝对路径和…

vue2+elementUi的两个el-date-picker日期组件进行联动

vue2elementUi的两个el-date-picker日期组件进行联动 <template><el-form><el-form-item label"起始日期"><el-date-picker v-model"form.startTime" change"startTimeChange" :picker-options"startTimePickerOption…

c# wpf template itemtemplate+ListBox

1.概要 2.代码 <Window x:Class"WpfApp2.Window7"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expression/blend/…

【opencv】示例 3calibration.cpp 利用OpenCV库进行三路相机校准

此代码是一个利用OpenCV库进行三路相机校准的C程序。这个示例程序主要用于校准水平摆放的三台相机。 以下是关键函数及其功能的简要总结&#xff1a; help(char** argv): 显示程序的使用方法。calcChessboardCorners(Size boardSize, float squareSize, vector<Point3f>&…

Vue 事件处理 -- 事件修饰符(prevent、stop、capture、self、once)

1. 事件修饰符 Vue中的事件修饰符&#xff1a; prevent&#xff1a;阻止默认事件&#xff08;常用&#xff09;&#xff1b;stop&#xff1a;阻止事件冒泡&#xff08;常用&#xff09;&#xff1b;once&#xff1a;事件只触发一次&#xff08;常用&#xff09;&#xff1b;cap…

软考 系统架构设计师系列知识点之数据库基本概念(1)

所属章节&#xff1a; 第6章. 数据库设计基础知识 第1节 数据库基本概念 数据&#xff08;Data&#xff09;是描述事务的符号记录&#xff0c;它具有多种表现形式&#xff0c;可以是文字、图形、图像、声音和语言等。信息&#xff08;Information&#xff09;是现实世界事物的…