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

如何自己实现一个丝滑的流程图绘制工具(八) 创建节点的文本标签

背景

节点的文本标签不希望是通过节点编辑实现,而是拿到节点名字渲染上去,包括连接线

createLabel(element, name, parent) {const modeling = this.bpmnModeler.get('modeling')let labelCenter = {}// 连接线上的标签if (element.type === 'bpmn:SequenceFlow') {let xData = element.waypoints.map(item => item.x)xData = sortedUniq(xData).reduce((pre, next) => {return pre + next}, 0)let yData = element.waypoints.map(item => item.y)yData = sortedUniq(yData).reduce((pre, next) => {return pre + next}, 0)labelCenter = {x: (element.waypoints[0].x + element.waypoints[element.waypoints.length - 1].x) / 2,y: (element.waypoints[0].y + element.waypoints[element.waypoints.length - 1].y) / 2 - 5}const businessObject = element.businessObjectif (!element.labels.length) {modeling.createLabel(setLabel(element, name), labelCenter, {id: `${businessObject.id}_label`,businessObject: businessObject,di: element.di,width: name.length > 6 ? 80 : name.length * 11})} else {modeling.updateLabel(element, name)}} else {const renderer = this.bpmnModeler.get('customRender')if (!element.businessObject.$parent) {element.businessObject.$parent = parent}console.log(name, 'name')element.businessObject.name = nameconst circleElement = document.querySelector(`g[data-element-id="${element.id}"]`)if (!circleElement) returnconst p = circleElement.querySelector('.djs-visual')renderer.drawShape(p, element)}}

相关文章:

如何自己实现一个丝滑的流程图绘制工具(八) 创建节点的文本标签

背景 节点的文本标签不希望是通过节点编辑实现,而是拿到节点名字渲染上去,包括连接线 createLabel(element, name, parent) {const modeling this.bpmnModeler.get(modeling)let labelCenter {}// 连接线上的标签if (element.type bpmn:SequenceFlo…...

Spring Boot多数据源配置运行报错:No operations allowed after connection closed连接异常的解决

上一篇文章我们讲了如何配置多数据源,但是配置在使用一段时间之后,查询数据库会发生报错:No operations allowed after connection closed。 一、问题原因: 经过排查发现是因为MySQL5.0以后针对超长时间DB连接做了一个处理&#…...

3、QT 的基础控件的使用

一、qFileDialog 文件窗体 Header: #include <QFileDialog> qmake: QT widgets Inherits: QDialog静态函数接口&#xff1a; void Widget::on_pushButton_clicked() {//获取单个文件的路径名QString filename QFileDialog :: getOpenFileName(this, tr("Open Fi…...

爬虫逆向实战(二十六)--某某学堂登录

一、数据接口分析 主页地址&#xff1a;某某学堂 1、抓包 通过抓包可以发现数据接口是Account/LoginPost 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现pass是加密参数 请求头是否加密&#xff1f; 无响应是否加密&#xff1f; 无co…...

leetcode分类刷题:哈希表(Hash Table)(四、前缀和 处理连续子数组)

1、leetcode题目里对于元素加和的考察可谓是屡见不鲜&#xff0c;包括 简单的限定一个有效答案的两个或多个元素求和leetcode分类刷题&#xff1a;哈希表&#xff08;Hash Table&#xff09;&#xff08;一、简单的两数之和&#xff09;、在有序数组内对加和等于target的三元组…...

如何处理生产环境中的数据倾斜问题?

分析&回答 1、flink数据倾斜的表现&#xff1a; 任务节点频繁出现反压&#xff0c;增加并行度也不能解决问题 部分节点出现OOM异常&#xff0c;是因为大量的数据集中在某个节点上&#xff0c;导致该节点内存被爆&#xff0c;任务失败重启 2、数据倾斜产生的原因&#x…...

【WSN无线传感器网络恶意节点】使用 MATLAB 进行无线传感器网络部署研究

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

C# 实现浏览器控件设置

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System...

1130 - Host ‘17216.18083‘ is not allowed to connect to this MySQL server

mysql5.7 设置root远程登录 1、登录数据库 mysql -u root -p 2、设置root 用户允许远程登录,"your password" 是自己设置的密码&#xff1b; GRANT ALL PRIVILEGES ON *.* TO root% IDENTIFIED BY your password WITH GRANT OPTION; 3、刷新权限 FLUSH PRIVILEG…...

使用Spring的getBeansOfType实现接口多实现类的动态调用

使用Spring的getBeansOfType实现接口多实现类的动态调用 package com.xxl.job.admin.core.alarm;import com.xxl.job.admin.core.model.XxlJobInfo; import com.xxl.job.admin.core.model.XxlJobLog; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.sp…...

(笔记三)opencv图像基础操作

强调&#xff1a;本文只为学习记录做笔记 详细可参考opencv官网 &#xff1a;https://docs.opencv.org/4.1.1/d0/d86/tutorial_py_image_arithmetics.html &#xff08;1&#xff09;将cv2的BGR模式改为RGB模式 #!/usr/bin/env python # -*- coding:utf-8 -*- ""&q…...

PHP入门及环境搭建 - XAMPP

文章目录 PHP简介搭建PHP环境(XAMPP)下载XAMPP安装XAMPP第1步:双击setup_xampp.bat检测第2步:启动Apache和MySQL第3步:浏览器访问内置的启动页面readme文档 - 必读运行Hello World程序下载并安装Eclipse for PHP编写Hello World程序参考目标: 1、了解PHP语言 2、搭建PHP开…...

开学季ipad手写笔什么牌子好?第三方电容笔推荐

自从ipad之类的平板电脑上出现了电容笔&#xff0c;电容笔就成功的取代了我们的手指&#xff0c;大大加快了我们的写作速度。不过&#xff0c;由于苹果pencil自带的先进芯片&#xff0c;导致其售价一直很高&#xff0c;给很多人&#xff0c;特别是学生&#xff0c;造成了很大的…...

【力扣】62. 不同路径 <动态规划>

【力扣】62. 不同路径 一个机器人位于一个 m m m x n n n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。问总共有多少条…...

【Python小项目】Python的GUI库Tkinter实现随机点名工具或抽奖工具并封装成.exe可执行文件

文章目录 一、项目背景二、需求分析UI界面设计如下:具体需求如下:二、实现思路三、项目关键代码读取excel中的人员名单实现随机滚动抽取主函数中Tkinter的界面相关操作实现窗口相关背景图设置组件相关完整代码四、将程序封装成.exe可执行文件将代码转换成.py文件五、总结与拓…...

【MySql】mysql之基础语句

一、常用的数据类型 类型解释举例int整型用于定义整数类型的数据&#xff08;1、2、3、4、5…&#xff09;float单精度浮点&#xff08;4字节32位&#xff09;准确表示小数点后六位double双精度浮点&#xff08;8字节64位&#xff09;小数位更多&#xff0c;更精确char固定长度…...

使用API调用获取商品数据的完整方案

在电子商务应用程序中&#xff0c;商品详情接口是不可或缺的一部分。它用于从电商平台或自己的数据库中获取商品数据&#xff0c;并将其提供给应用程序的其他部分使用。本文将详细介绍如何设计一个完整的商品详情接口方案&#xff0c;其中包括使用API调用来获取商品数据的过程。…...

来看看入门级别的室内设计创意是怎么样构成的

在这个世界上&#xff0c;信息源源不断地输送给我们&#xff0c;数字通信成为常态&#xff0c;对话的艺术正在逐渐消失&#xff1b;衡量一个人社交成功与否的最佳标准变为点赞数、粉丝数和高参与率&#xff1b;Ai人工智能引发了更快节奏的工作流程&#xff0c;工作要求越来越高…...

Go 面向对象(匿名字段)

概述 严格意义上说&#xff0c;GO语言中没有类(class)的概念,但是我们可以将结构体比作为类&#xff0c;因为在结构体中可以添加属性&#xff08;成员&#xff09;&#xff0c;方法&#xff08;函数&#xff09;。 面向对象编程的好处比较多&#xff0c;我们先来说一下“继承…...

生成式AI,赋能数字劳动力的关键工具

人们认为&#xff0c;生成式人工智能是一种可以让他们用自己的话来提问或生成副本和图像的工具。事实也是如此&#xff0c;人工智能在这两方面上都做的非常好&#xff0c;但让人意想不到的是&#xff0c;它还蕴含着改变我们个人和专业工作的巨大潜力&#xff0c;能帮我们访问、…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...