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

news/2024/5/18 21:30:30 标签: 流程图, 前端, javascript

背景

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

javascript">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.businessObject
        if (!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 = name
        const circleElement = document.querySelector(`g[data-element-id="${element.id}"]`)
        if (!circleElement) return
        const p = circleElement.querySelector('.djs-visual')
        renderer.drawShape(p, element)
      }
    }

http://www.niftyadmin.cn/n/4995278.html

相关文章

说说CDN和负载均衡具体是怎么实现的

分析&回答 什么是 CDN CDN (全称 Content Delivery Network),即内容分发网络。 构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需…

微信小程序新版隐私协议弹窗实现最新版

1. 微信小程序又双叒叕更新了 2023.08.22更新: 以下指南中涉及的 getPrivacySetting、onNeedPrivacyAuthorization、requirePrivacyAuthorize 等接口目前可以正常接入调试。调试说明: 在 2023年9月15号之前,在 app.json 中配置 __usePriva…

LLVM系列:1.设计思想和LLVM IR简介

文章目录 背景介绍内容简介LLVM库的集合以及模块化设计LLVM优化器的模块化设计LLVM代码生成器的模块化设计LLVM IRLLVM编译流程LLVM IR的设计思想LLVM的形式LLVM IR的结构组成指令格式和变量示例参考文献:背景介绍 LLVM项目于2000年创立于伊利诺斯州大学,原本是一个为了静态…

Unity——脚本序列化

在介绍序列化之前,我们先来了解一下为什么要对数据进行序列化 数据序列化有以下几个主要的应用场景和目的: 1. 持久化存储:序列化可以将对象或数据结构转换为字节序列,使得其可以被存储在磁盘上或数据库中。通过序列化&#xff…

【4】索引缓冲区的使用为什么使用

glDrawArrays(GL_TRIANGLES, 0, 6); 这个函数绘制三角形是按照顶点的顺序来的,那么绘制一个矩形就需要绘制两个三角形,每个三角形需要提供三个顶点,那么在positon数组里就有6个顶点的数据,每个顶点占两个float数(假如是…

linux下C程序查看内存剩余大小

嵌入式linux中很多内存资源都比较小&#xff0c;所以很多程序中在malloc时就需要提前知道内存剩余的大小 下面是一种调用 sysinfo接口来实现。 示例代码如下&#xff1a; #include <stdio.h> #include <linux/kernel.h> #include <linux/unistd.h> #includ…

Linux 学习笔记(1)——系统基本配置与开关机命令

目录 0、起步 0-1&#xff09;命令使用指引 0-2&#xff09;查看历史的命令记录 0-3&#xff09;清空窗口内容 0-4&#xff09;获取本机的内网 IP 地址 0-5&#xff09;获取本机的公网ip地址 0-6&#xff09;在window的命令行窗口中远程连接linux 0-7&#xff09;修改系…

Day01-Java基础语法

目录 1. 人机交互 1.1 什么是cmd&#xff1f; 1.2 如何打开CMD窗口&#xff1f; 1.3 常用CMD命令 1.4 CMD练习 1.5 环境变量 2. Java概述 1.1 Java是什么&#xff1f; 1.2下载和安装 1.2.1 下载 1.2.2 安装 1.2.3 JDK的安装目录介绍 1.3 HelloWorld小案例 2.3.1 …