如何自己实现一个丝滑的流程图绘制工具(三)自定义挂载vue组件
背景
bpmn-js是个流程图绘制的工具,但是现在我希望实现的是,绘制的不是节点而是一个vue组件。
保留线的拖拽和连接。
方案
那就说明不是依赖于节点的样式,找到了他有个属性,就是类似覆盖节点的操作。
思路就是用vue组件做遮罩,盖住原本的节点样式。
/*** 批量操作节点*/handleAddOverlay() {const bpmnModeling = this.bpmnModeler.get('modeling')const contextPad = this.bpmnModeler.get('contextPad')this.bpmnModeler.on('import.done', () => {// 加载完成后每个元素遍历const elementRegistry = this.bpmnModeler.get('elementRegistry')elementRegistry.forEach(element => {if (['bpmn:Task'].includes(element.type)) {const parent = elementRegistry.getGraphics(element)bpmnModeling.resizeShape(element, {width: element.width || this.config.width || 60,height: element.height || this.config.height || 60,x: getDi(element).bounds.x,y: getDi(element).bounds.y})// 遍历任务节点,为每个节点添加 overlaysif (this.isShowComponent) {bpmnModeling.setColor(element, { stroke: this.config.borderColor || '#eee' }) // 修改边框颜色bpmnModeling.setColor(element, { fill: this.config.fillColor || '#fff' }) // 修改边框颜色this.addOverlay(element, parent)}} })})},
接下来是挂载覆盖物的重点,如何让覆盖物跟随节点的移动而移动
/**** @param {*} element* 增加覆盖物节点操作*/addOverlay(element, parent) {const __this = thisconst overlays = this.bpmnModeler.get('overlays')const bpmnModeling = this.bpmnModeler.get('modeling')const elementRegistry = this.bpmnModeler.get('elementRegistry')const index = this.data.nodeLists.findIndex(item => item.config.id === element.id)// 添加覆盖物 ------------------------------------- beginoverlays.add(element, 'my-overlay', {position: __this.overlayPosition,show: {minZoom: 0.1},html: '<div id="my-component"></div>'})const Profile = Vue.extend(this.config.components)overlays.get({ element: element, type: 'my-overlay' })[0].htmlContainer.id = element.idnew Profile({router,propsData: {element: element,node: index > -1 ? this.data.nodeLists[index] : {},func: this.func,...this.props},mounted() {const component = this// 绑定鼠标按下事件component.$el.addEventListener('mousedown', event => {__this.isDrag = falseevent.preventDefault()if (!__this.disable) {dragMouseDown(event)}})// 自定义组件点击事件component.$el.addEventListener('click', () => {if (!__this.isDrag) {__this.showContextPad(element)const bpmnElement = elementRegistry.get(element.id)__this.currentElement = bpmnElement__this.$emit('click', bpmnElement) // 点击事件}})}}).$mount('#my-component')// 添加覆盖物 -------------------------------------end// 必须作为公共变量进行值更改let pos1 = 0let pos2 = 0let pos3 = 0let pos4 = 0/**** @param {*} e* @param {*} overlayPosition* 鼠标按下开始*/function dragMouseDown(e) {e = e || window.evente.preventDefault()pos3 = e.clientXpos4 = e.clientYdocument.onmousemove = event => {__this.isDrag = trueelementDrag(event, __this.overlayPosition)}document.onmouseup = () => {__this.currentElement = nulldocument.onmouseup = nulldocument.onmousemove = null}}/**** @param {*} e* @param {*} overlayPosition* 节点的拖拽*/function elementDrag(e, overlayPosition) {e = e || window.evente.preventDefault()// 计算新的元素位置pos1 = pos3 - e.clientXpos2 = pos4 - e.clientYpos3 = e.clientXpos4 = e.clientYconst bpmnElement = elementRegistry.get(element.id)const deltaX = overlayPosition.x + pos1const deltaY = overlayPosition.y + pos2// 移动父节点及其连接线moveParentNode(bpmnElement, deltaX, deltaY)}/**** @param {*} element* @param {*} dx* @param {*} dy* 更改父节点操作*/function moveParentNode(element, dx, dy) {const parent = element.parentif (!parent) {return}// // 更新父节点的位置信息bpmnModeling.moveElements([element], { x: -dx, y: -dy }, null)// 更新覆盖物的位置const overlay = overlays.get({ element: parent, type: 'my-overlay' })overlay.position = {top: overlay.top - dy,left: overlay.left - dx}}},

相关文章:
如何自己实现一个丝滑的流程图绘制工具(三)自定义挂载vue组件
背景 bpmn-js是个流程图绘制的工具,但是现在我希望实现的是,绘制的不是节点而是一个vue组件。 保留线的拖拽和连接。 方案 那就说明不是依赖于节点的样式,找到了他有个属性,就是类似覆盖节点的操作。 思路就是用vue组件做遮罩&…...
UNIAPP调用API接口
API:开发者可以通过这些接口与其它程序进行交互,获取所需数据或者执行指定操作。 网络请求 API: UniApp 中内置了网络请求 API,方便调用 uni.request uni.uploadFile uni.request 接口主要用于实现网络请求。GET 和 POST 是使用最普遍的两种…...
理解 Delphi 的类(五) - 认识类的继承
先新建一个 VCL Forms Application 工程, 代码中就已经出现了两个类: 一个是 TForm 类; 一个是 TForm1 类; TForm1 继承于 TForm. TForm 是 TForm1 的父类; TForm1 是 TForm 的子类. unit Unit1;interfaceusesWindows, Messages, SysUtils, Variants, Classes, Graphics, Contr…...
mybatis概述及搭建
目录 1.概述 2.mybatis搭建 1.创建一个maven项目,添加mybatis、mysql所依赖的jar 2.创建一个数据库表,及对应的java类 3.创建一个mybatis的核心配置文件,配置数据库连接信息,配置sql映射文件 4.创建sql映射文件,…...
DNDC模型---土壤碳储量、温室气体排放、农田减排、土地变化、气候变化中的应用
由于全球变暖、大气中温室气体浓度逐年增加等问题的出现,“双碳”行动特别是碳中和已经在世界范围形成广泛影响。国家领导人在多次重要会议上讲到,要把“双碳”纳入经济社会发展和生态文明建设整体布局。同时,提到要把减污降碳协同增效作为促…...
Android studio 2022.3.1 鼠标移动时不显示快速文档
在使用技术工具的过程中,我们时常会遇到各种各样的问题和挑战。最近,我升级了我的Android Studio到2022.3.1版本,但是在使用过程中,我碰到了一个让我颇为困扰的问题:在鼠标移动到类名或字段上时,原本应该显…...
五度易链最新“产业大数据服务解决方案”亮相,打造数据引擎,构建智慧产业!
快来五度易链官网 点击网址【http://www.wdsk.net/】 看看我们都发布了哪些新功能!!! 自2015年布局产业大数据服务行业以来,“五度易链”作为全国产业大数据服务行业先锋企业,以“让数据引领决策,以智慧驾驭未来”为愿景,肩负“打…...
简述hive环境搭建
文章目录 部署参数配置hive简单命令 部署 Hive的三种部署模式,主要按Metastore 的运行模式进行区分。 在安装Hive之前,要求先预装JDK 8、Hadoop、MySQL ; 1.下载hive,并解压缩到用户主目录下 tar -xzvf apache-hive-2.3.6-bin.t…...
小米AI音箱联网升级折腾记录(解决配网失败+升级失败等问题)
小米AI音箱(一代)联网升级折腾记录 我折腾了半天终于勉强能进入下载升级包这步,算是成功一半吧… 总结就是,网络信号一定要好,需要不停换网找到兼容的网,还需要仔细配置DNS让音响连的上api.mina.mi.com 推荐…...
tensorRT安装
官方指导文档:Installation Guide :: NVIDIA Deep Learning TensorRT Documentation 适配很重要!!!! 需要cuda, cuDNN, tensorRT三者匹配。我的cuda11.3 所以对应的cuDNN和tensorRT下载的是如下版本: cud…...
电脑重装+提升网速
https://www.douyin.com/user/self?modal_id7147216653720341767&showTabfavorite_collectionhttps://www.douyin.com/user/self?modal_id7147216653720341767&showTabfavorite_collection 零封有哈数的主页 - 抖音 (douyin.com)https://www.douyin.com/user/self?…...
Modelica由入门到精通—为什么要学习Modelica语言
1.为什么要学习Modelica语言 本人正在研究Modelica 多领域统一建模仿真语言,特此做学习入门介绍,希望可以帮助需要的小伙伴。 文章目录 1.为什么要学习Modelica语言一、背景二、系统建模与仿真2.1 系统仿真与系统模型2.2 仿真价值与可靠性 三、物理建模…...
opencv 进阶20-随机森林示例
OpenCV中的随机森林是一种强大的机器学习算法,旨在解决分类和回归问题。随机森林使用多个决策树来进行预测,每个决策树都是由随机选择的样本和特征组成的。在分类问题中,随机森林通过投票来确定最终的类别;在回归问题中࿰…...
Spring Boot进阶(58):集成PostgreSQL数据库及实战使用 | 万字长文,超级详细
1. 前言🔥 PostgreSQL是一种广泛使用的开源关系型数据库,具有可靠性高、性能优异、拥有丰富的数据类型和扩展等优点,越来越多的企业和开发者开始使用它来存储和管理数据。而Spring Boot是一种快速开发的框架,可以简化开发过程并提…...
Java | 使用ServerSocket查找TCP可用端口
关注:CodingTechWork 引言 在项目开发中,有一个程序是专门给服务下发tcp端口占用的,但是tcp端口有时候会被其他服务给占用,此时端口就会冲突。本文提供一个工具类进行端口占用判断并返回可用端口。 代码 工具类 Slf4j public …...
【深入浅出C#】章节 9: C#高级主题:LINQ查询和表达式
C#高级主题涉及到更复杂、更灵活的编程概念和技术,能够让开发者更好地应对现代软件开发中的挑战。其中,LINQ查询和表达式是C#高级主题中的一项关键内容,具有以下重要性和优势: 数据处理和操作: 在现代软件中ÿ…...
【Git】git clone --depth 1 浅克隆
问题 PycharmProjects git clone git Cloning into risk-package... remote: Counting objects: 576, done. error: pack-objects died of signal 947/574) error: git upload-pack: git-pack-objects died with error. fatal: git upload-pack: aborting due to possible r…...
搭建 Gitlab
当设置和配置 GitLab 实例并执行诸如创建群组、项目、用户和上传代码等操作时,涉及到多个步骤,每个步骤都有特定的目的。让我们逐步解释每个步骤并说明其背后的原因: 安装必需的软件: yum install -y curl policycoreutils-python…...
CTFhub-sqli注入-报错注入
用到的函数 updatexml(1, ,1) concat(0x7e, ,0x7e) group_concat(目标值) right(,32) 1 1 1 union select updatexml(1,concat(0x7e,database(),0x7e),1) 1 union select updatexml(1,concat(0x7e,(select(group_concat(ta…...
中国人民大学与加拿大女王大学金融硕士让金融界短暂迷茫的你发现新的方向
此刻金融职场的你已经站在了金融金字塔的哪个层级?是正在金融界不断的改变自己,迎接着一个又一个的挑战成为了职场精英?还是转行的想法不断敲打着你,但是又不知道自己该干什么,能干什么,发现自己的职业核心…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中,UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版,莫兰迪调色板清新简约工作汇报PPT模版,莫兰迪时尚风极简设计PPT模版,大学生毕业论文答辩PPT模版,莫兰迪配色总结计划简约商务通用PPT模版,莫兰迪商务汇报PPT模版,…...
NPOI Excel用OLE对象的形式插入文件附件以及插入图片
static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...
(一)单例模式
一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...
永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构: 传统SMO中LPF会带来相位延迟和幅值衰减,并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF),可以去除高次谐波,并且不用相位补偿就可以获得一个误差较小的转子位…...
pycharm 设置环境出错
pycharm 设置环境出错 pycharm 新建项目,设置虚拟环境,出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...
