当前位置: 首页 > news >正文

北碚免费建站哪家做得好/今日头条新闻最新

北碚免费建站哪家做得好,今日头条新闻最新,网站建设合作报道,赣州做网站哪家好背景 bpmn-js是个流程图绘制的工具,但是现在我希望实现的是,绘制的不是节点而是一个vue组件。 保留线的拖拽和连接。 方案 那就说明不是依赖于节点的样式,找到了他有个属性,就是类似覆盖节点的操作。 思路就是用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是个流程图绘制的工具&#xff0c;但是现在我希望实现的是&#xff0c;绘制的不是节点而是一个vue组件。 保留线的拖拽和连接。 方案 那就说明不是依赖于节点的样式&#xff0c;找到了他有个属性&#xff0c;就是类似覆盖节点的操作。 思路就是用vue组件做遮罩&…...

UNIAPP调用API接口

API&#xff1a;开发者可以通过这些接口与其它程序进行交互&#xff0c;获取所需数据或者执行指定操作。 网络请求 API: UniApp 中内置了网络请求 API&#xff0c;方便调用 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项目&#xff0c;添加mybatis、mysql所依赖的jar 2.创建一个数据库表&#xff0c;及对应的java类 3.创建一个mybatis的核心配置文件&#xff0c;配置数据库连接信息&#xff0c;配置sql映射文件 4.创建sql映射文件&#xff0c;…...

DNDC模型---土壤碳储量、温室气体排放、农田减排、土地变化、气候变化中的应用

由于全球变暖、大气中温室气体浓度逐年增加等问题的出现&#xff0c;“双碳”行动特别是碳中和已经在世界范围形成广泛影响。国家领导人在多次重要会议上讲到&#xff0c;要把“双碳”纳入经济社会发展和生态文明建设整体布局。同时&#xff0c;提到要把减污降碳协同增效作为促…...

Android studio 2022.3.1 鼠标移动时不显示快速文档

在使用技术工具的过程中&#xff0c;我们时常会遇到各种各样的问题和挑战。最近&#xff0c;我升级了我的Android Studio到2022.3.1版本&#xff0c;但是在使用过程中&#xff0c;我碰到了一个让我颇为困扰的问题&#xff1a;在鼠标移动到类名或字段上时&#xff0c;原本应该显…...

五度易链最新“产业大数据服务解决方案”亮相,打造数据引擎,构建智慧产业!

快来五度易链官网 点击网址【http://www.wdsk.net/】 看看我们都发布了哪些新功能!!! 自2015年布局产业大数据服务行业以来&#xff0c;“五度易链”作为全国产业大数据服务行业先锋企业&#xff0c;以“让数据引领决策&#xff0c;以智慧驾驭未来”为愿景&#xff0c;肩负“打…...

简述hive环境搭建

文章目录 部署参数配置hive简单命令 部署 Hive的三种部署模式&#xff0c;主要按Metastore 的运行模式进行区分。 在安装Hive之前&#xff0c;要求先预装JDK 8、Hadoop、MySQL &#xff1b; 1.下载hive&#xff0c;并解压缩到用户主目录下 tar -xzvf apache-hive-2.3.6-bin.t…...

小米AI音箱联网升级折腾记录(解决配网失败+升级失败等问题)

小米AI音箱&#xff08;一代&#xff09;联网升级折腾记录 我折腾了半天终于勉强能进入下载升级包这步&#xff0c;算是成功一半吧… 总结就是&#xff0c;网络信号一定要好&#xff0c;需要不停换网找到兼容的网&#xff0c;还需要仔细配置DNS让音响连的上api.mina.mi.com 推荐…...

tensorRT安装

官方指导文档&#xff1a;Installation Guide :: NVIDIA Deep Learning TensorRT Documentation 适配很重要&#xff01;&#xff01;&#xff01;&#xff01; 需要cuda, cuDNN, tensorRT三者匹配。我的cuda11.3 所以对应的cuDNN和tensorRT下载的是如下版本&#xff1a; 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 多领域统一建模仿真语言&#xff0c;特此做学习入门介绍&#xff0c;希望可以帮助需要的小伙伴。 文章目录 1.为什么要学习Modelica语言一、背景二、系统建模与仿真2.1 系统仿真与系统模型2.2 仿真价值与可靠性 三、物理建模…...

opencv 进阶20-随机森林示例

OpenCV中的随机森林是一种强大的机器学习算法&#xff0c;旨在解决分类和回归问题。随机森林使用多个决策树来进行预测&#xff0c;每个决策树都是由随机选择的样本和特征组成的。在分类问题中&#xff0c;随机森林通过投票来确定最终的类别&#xff1b;在回归问题中&#xff0…...

Spring Boot进阶(58):集成PostgreSQL数据库及实战使用 | 万字长文,超级详细

1. 前言&#x1f525; PostgreSQL是一种广泛使用的开源关系型数据库&#xff0c;具有可靠性高、性能优异、拥有丰富的数据类型和扩展等优点&#xff0c;越来越多的企业和开发者开始使用它来存储和管理数据。而Spring Boot是一种快速开发的框架&#xff0c;可以简化开发过程并提…...

Java | 使用ServerSocket查找TCP可用端口

关注&#xff1a;CodingTechWork 引言 在项目开发中&#xff0c;有一个程序是专门给服务下发tcp端口占用的&#xff0c;但是tcp端口有时候会被其他服务给占用&#xff0c;此时端口就会冲突。本文提供一个工具类进行端口占用判断并返回可用端口。 代码 工具类 Slf4j public …...

【深入浅出C#】章节 9: C#高级主题:LINQ查询和表达式

C#高级主题涉及到更复杂、更灵活的编程概念和技术&#xff0c;能够让开发者更好地应对现代软件开发中的挑战。其中&#xff0c;LINQ查询和表达式是C#高级主题中的一项关键内容&#xff0c;具有以下重要性和优势&#xff1a; 数据处理和操作&#xff1a; 在现代软件中&#xff…...

【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 实例并执行诸如创建群组、项目、用户和上传代码等操作时&#xff0c;涉及到多个步骤&#xff0c;每个步骤都有特定的目的。让我们逐步解释每个步骤并说明其背后的原因&#xff1a; 安装必需的软件&#xff1a; yum install -y curl policycoreutils-python…...

CTFhub-sqli注入-报错注入

用到的函数 updatexml(1&#xff0c; &#xff0c;1) concat(0x7e, ,0x7e) group_concat(目标值) right(&#xff0c;32) 1 1 1 union select updatexml(1,concat(0x7e,database(),0x7e),1) 1 union select updatexml(1,concat(0x7e,(select(group_concat(ta…...

中国人民大学与加拿大女王大学金融硕士让金融界短暂迷茫的你发现新的方向

此刻金融职场的你已经站在了金融金字塔的哪个层级&#xff1f;是正在金融界不断的改变自己&#xff0c;迎接着一个又一个的挑战成为了职场精英&#xff1f;还是转行的想法不断敲打着你&#xff0c;但是又不知道自己该干什么&#xff0c;能干什么&#xff0c;发现自己的职业核心…...

PHPEXCEL 导出excel

$styleArray [alignment > [horizontal > Alignment::HORIZONTAL_CENTER,vertical > Alignment::VERTICAL_CENTER],];$border_style [borders > [allborders > [style > \PHPExcel_Style_Border::BORDER_THIN ,//细边框]]];$begin_date $request->beg…...

Elasticsearch简介及安装

&#x1f353; 简介&#xff1a;java系列技术分享(&#x1f449;持续更新中…&#x1f525;) &#x1f353; 初衷:一起学习、一起进步、坚持不懈 &#x1f353; 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正&#x1f64f; &#x1f353; 希望这篇文章对你有所帮助,欢…...

Python 密码破解指南:10~14

协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【OpenDocCN 饱和式翻译计划】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 收割 SB 的人会被 SB 们封神&#xff0c;试图唤醒 SB 的人是 SB 眼中的 SB。——SB 第三定律 十、加…...

Spring、SpringMVC、SpringBoot三者的区别

目录 Spring是什么&#xff1f; SpringMVC是什么&#xff1f; SpringBoot是什么&#xff1f; Spring、SpringMVC、SpringBoot三者之间的关系 Spring是什么&#xff1f; Spring是一个开源的应用程序框架&#xff0c;它提供了一种简易的开发方式&#xff0c;通过依赖注入和面…...

探索PDF校对:为何这是现代数字文档的关键步骤

在今日的数字化浪潮中&#xff0c;文档的创建与分享从未如此频繁。尤其是PDF&#xff0c;作为一个普遍接受的标准文件格式&#xff0c;其在企业、学术和日常生活中的应用已经无处不在。但随之而来的挑战是如何确保文档的准确性和专业性。让我们深入探索PDF校对的重要性以及它为…...

linux 同时kill杀死多进程实践

使用场景 当程序中有使用到多进程且进程数较多的情况&#xff0c;如下图&#xff0c;且需要通过控制台杀死所有的 GSM_run.py 的进程时&#xff0c;利用 kill 命令一个一个的去结束进程是及其耗时且繁琐的&#xff0c;这时就需要我们的kill多进程的命令工作了。 批量 Kill 进程…...

全流程R语言Meta分析核心技术

Meta分析是针对某一科研问题&#xff0c;根据明确的搜索策略、选择筛选文献标准、采用严格的评价方法&#xff0c;对来源不同的研究成果进行收集、合并及定量统计分析的方法&#xff0c;最早出现于“循证医学”&#xff0c;现已广泛应用于农林生态&#xff0c;资源环境等方面。…...

打家劫舍00

题目链接 打家劫舍 题目描述 注意点 如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警0 < nums[i] < 400 解答思路 最初想的是使用深度优先遍历&#xff0c;到达任意一个位置时&#xff0c;小偷想要偷窃最高金额&#xff0c;一定要选择后面第2个房…...

​LeetCode解法汇总1267. 统计参与通信的服务器

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 描述&#xff1a; 这里有一幅…...

Go 语言在 Windows 上的安装及配置

1. Go语言的下载 Golang官网&#xff1a;All releases - The Go Programming Language Golang中文网&#xff1a;Go下载 - Go语言中文网 - Golang中文社区 两个网站打开的内容只有语言不同而已&#xff0c;网站上清晰的标注了不同操作系统需要对应安装哪个版本&#xff0c;其中…...