Svg Flow Editor 原生svg流程图编辑器（四）

系列文章

Svg Flow Editor 原生svg流程图编辑器（一）

Svg Flow Editor 原生svg流程图编辑器（二）

Svg Flow Editor 原生svg流程图编辑器（三）

Svg Flow Editor 原生svg流程图编辑器（四）

实现Echart统计图

        统计图的底层我们采用apache echarts 实现【Apache ECharts】，先封装GEchart，GEchart是我们的外层框架，支持形变、旋转，与Rect等svg元件类似的结构，但是内部是div实现：

        同时，样式设置上与svg还是有些不同，需要单独处理下。

/*** 需要向外暴露 setOption 方法,供数据变化后重新渲染* @param option*/private setOption() {if (!this.option) throw new Error(messageInfo.optionError);this.myChart.setOption(this.option);return this;}/*** 向外提供 update 方法，供用户在 option 变化后更新页面内容*  因 option 是引用地址，因此 可以不需要传递参数，从而实现数据更新* @returns*/public update() {return this.setOption();}

        事件上，则是核心的 setOption 与 update 两个方法，update则是向外提供给用户更新时使用。同时，缩放会导致父节点尺寸变化，因此还需要监听尺寸变化实现动态Echart重绘，使用第三方库实现此功能【也可以使用 const ob = new ResizeObserver() 这个原生API实现哈，看自己的需求】：

import elementResizeDetectorMaker from "element-resize-detector";
var erd = elementResizeDetectorMaker();// 监听元素尺寸变化，重新渲染echart 使得宽高自适应
erd.listenTo(this.div, () => this.myChart.resize());

        还需要封装一层插件，因为GEchart是核心类，不能直接提供给用户，也不便于结构管理：

// echarts 插件 多一层的原因是构建新的实例
export class SEchart {private draw: Draw;constructor(draw: Draw) {this.draw = draw;}/*** 初始化 Echart* @param option* @returns*/public init(option: object) {return new GEchart(this.draw, option);}
}

// 关键！需要注册插件，提供 echart 绘制能力  
const echart = editor.plugin("echart");// 初始化echart
const line = echart?.init(option); // 模拟数据更新
setTimeout(() => {data[0] = "123123mode";line?.update();
}, 1000);

        注意哈，class GEchart extends GraphCommon， GEchart 类继承了 Common 类，拥有元件的所有属性方法，包括 setWidth position 等；而 SEchart 则是隔离用户触碰核心类，同时也给用户注册多实例提供可能，也是对插件化提供支持。

        Echart 的事件处理，则是基于EventBus 实现实例的 emit on 操作：

this.event = new EventBus();// Echarts click
this.myChart.on("click", (params: object) =>this.event.emit("click", params)
);// Echarts 鼠标移出
this.myChart.on("mouseout", (params: object) =>this.event.emit("mouseout", params)
);// Echarts 鼠标移入
this.myChart.on("mouseover", (params: object) =>this.event.emit("mouseover", params)
);const echart = editor.plugin('echart')const bar=echart.init(barOption)bar.event.on('click',p=>{// p 是回调的参数
})

直角折线

        以下实现思路参考logicFlow直角折线思想，连接锚点mousedown事件中，我们要记录当前锚点的位置信息：

    // 1. 获取当前元素的宽高位置信息const width = graph.getWidth();const height = graph.getHeight();const x = graph.getX();const y = graph.getY();// 2. 需要计算起点位置 -- 锚点位置受padding影响const typeMap: { [key: string]: { sx: number; sy: number } } = {"0": { sx: x, sy: y + height / 2 },"1": { sx: x + width / 2, sy: y },"2": { sx: x + width, sy: y + height / 2 },"3": { sx: x + width / 2, sy: y + height },};const sx = typeMap[type].sx + 10;const sy = typeMap[type].sy + 10;

        使用editorBox来接收mousemove事件以实现流程的拖动，但是在拖动过程中，可能会经过多个元素，导致 offset 值得变化，需要做优化：

/*** 需要做位置矫正*  class='sf-editor-box-graphs' 正确*  class='sf-editor-box-graphs-main' 异常 偏移量加 offsetLeft offsetTop 值*  class='' 异常
*/

 

         绘制结束后，需要根据logicFlow的思想，构建出下面这个图形：

        实现的思路是根据线的起点、终点关联的元件计算得出：

实现关键代码：

 console.log("### 绘制最终折线，根据框的宽高位置信息获取基础数据");const eid = this.line.getAttribute("eid") as string;const sid = this.line.getAttribute("sid") as string;if (!eid) return this.lineBox.remove();// 不然处理折线的寻径算法this.line.setAttribute("stroke-dasharray", "");// 1. 获取 sid eid 构建 graphconst Sgraph = new Graph(this.draw, sid);const Egraph = new Graph(this.draw, eid);// 2. 获取start的宽高 位置信息const sx = Sgraph.getX();const sy = Sgraph.getY();// 3. 获取 end 的宽高 位置信息const ex = Egraph.getX();const ey = Egraph.getY();// 4. 需要知道哪个元件在最后 也就是 graph x 最大const maxGrapg = sx > ex ? Sgraph : Egraph;// 5. 构建 OFFSET 的矩形 --- 受padding的影响const lx = Math.min(sx, ex) - OFFSET + 10;const ly = Math.min(sy, ey) - OFFSET + 10;this.setX(lx);this.setY(ly);this.lineBox.style.backgroundColor = "rgba(0,0,0,0.1)";// 6. 取消直线this.line.setAttribute("points", "");// 7. 设置宽高const mw = maxGrapg.getWidth();const mh = maxGrapg.getHeight();const mx = maxGrapg.getX();const my = maxGrapg.getY();// 自此，整个线的宽高= lx -> mx + mw + OFFSETconst lw = mx - lx + mw + OFFSET + 10;const lh = my - ly + mh + OFFSET + 10;this.setWidth(lw);this.setHeight(lh);

         根据矩形框，找出所有可能路径关键点：

    // 做点的纠正-因为 计算得到的是 基于背景的 而线的绘制基于新的 div 坐标，需要做处理 【并且受 padding 的影响】const getX = (x: number) => x - lx + 10;const getY = (y: number) => y - ly + 10;// 起点const startType = typeMap[st]({ x: sx, y: sy, w: sw, h: sh });const startPoint = { x: getX(startType.x), y: getY(startType.y) };points.push(startPoint);// 终点const endType = typeMap[et]({ x: ex, y: ey, w: ew, h: eh });const endPoint = { x: getX(endType.x), y: getY(endType.y) };points.push(endPoint);// 如果存在间隙，则取偏移量的点，如果不存在间隙，则不取偏移量的点const intervalX = maxGrapg.getX() - minGraph.getX() + minGraph.getWidth();const intervalY = maxGrapg.getY() - minGraph.getY() + minGraph.getHeight();if (intervalX > OFFSET && intervalY > OFFSET) {// 取偏移量const startOffsetPoint = { x: getX(startType.ox), y: getY(startType.oy) };points.push(startOffsetPoint);const endOffsetPoint = { x: getX(endType.ox), y: getY(endType.oy) };points.push(endOffsetPoint);}

         轴线与边界的交点：

        A* 算法实现：

const list: expandP[] = JSON.parse(JSON.stringify(points)); // 深拷贝简单实现var optimal: expandP[] = []; // 记录最优解// 计算当前点的最短路径const computedDistance = (p: expandP) => {console.group("开始 A* 算法");console.log("当前点", p);// 获取list中 x、y 相同的点，并计算最短路径const ps = list.filter((i: expandP) => i.x === p.x || i.y === p.y);// 循环当前可达的点，并计算距离ps.forEach((i: expandP) => {i.d = Infinity; // 默认无穷大// 并且计算传入的点与当前点的向量是否穿过矩形// 计算曼哈顿距离i.d = Math.abs(i.x - endPoint.x) + Math.abs(i.y - endPoint.y);});ps.sort((a, b) => (a.d as number) - (b.d as number));console.log("当前可达的点", ps);this.drawPoint(ps[0], "green");console.groupEnd();return ps[0];};/*** 【开始寻径算法】*  1. 找到当前点的 x y 相同的点作为可达点，*  2. 并且规定，当前点的可达距离为1，取到终点的曼哈顿距离*  3. 还需要判断当前两点的向量是否穿过矩形*/const search = () => {const point = optimal.length ? optimal[optimal.length - 1] : startPoint; // 当前的最优解if (point.x === endPoint.x && point.y === endPoint.y)return console.log("A* 算法结束,最优路径为 => ", optimal);const optimalPoint = computedDistance(point);optimal.push(optimalPoint);};

        这样会穿过元件，不符合，因此需要使用处理计算，判断是否穿过节点本身：

  // 检查两个点组成的线段是否穿过起终点元素private checkLineThroughElements(p1: p, p2: p) {let rects = [this.Sgraph, this.Egraph];let minX = Math.min(p1.x, p2.x);let maxX = Math.max(p1.x, p2.x);let minY = Math.min(p1.y, p2.y);let maxY = Math.max(p1.y, p2.y);// 水平线if (p1.y === p2.y) {for (let i = 0; i < rects.length; i++) {let rect = rects[i];if (minY > rect.getY() - this.ly &&minY < rect.getY() + rect.getHeight() - this.ly &&minX < rect.getX() + rect.getWidth() - this.lx &&maxX > rect.getX() - this.lx) {return true;}}} else if (p1.x === p2.x) {// 垂直线for (let i = 0; i < rects.length; i++) {let rect = rects[i];if (minX > rect.getX() - this.lx &&minX < rect.getX() + rect.getWidth() - this.lx &&minY < rect.getY() + rect.getHeight() - this.ly &&maxY > rect.getY() - this.ly) {return true;}}}return false;}

        推荐大家看一下该博客，我也借鉴了些思路，在点的分析，定位，算法的实现上，都看了他的代码，但是还有些部分需要根据项目实际进行优化的点。关联线探究，如何连接流程图的两个节点

        最终实现效果：

        这部分应该是最难的了，目前实现起来，在临界值的处理上，还是有些问题，包括距离相近时，和优化线的方向问题，还没有做兼容处理。

发布NPM

        包的发布过程就不细说了，大家可以参考网上的教程，如果 npm login 报错，基本上切换淘宝镜像就可以解决问题了。目前经过 mvp 版本的升级迭代，基本具备流程图的绘制、交互功能，我们发布 1.0 版本，主要是测试应用功能模块是否正常。【worker 路径存在问题，目前版本使用同步实现，后续优化】

        当你升级版本的时候报错，一定需要全部提交代码，才可以进行升级：

         版本升级成功，可以在 npm 官网进行查看：

        新建空项目，进行测试：

 

        使用过程中，发现有些静态资源请求地址有问题，我们采取base64编码的方式处理，不走请求，即可解决该问题，整体效果如下：

总结

        目前已经基本实现流程图的图形绘制、自定义icon 、文本输入，剩余的优化问题包括：

1. 折线算法优化；

2. 元件库拓展；

3. 顶部菜单栏及相应 command API开发；

4. 快捷键的完善与相应功能实现。

        大家可以下载包试试，有啥问题随时反馈改进哦。

npm i svg-flow-editor-mvp

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

RabbitMQ 实验消费原始队列消息， 拒绝（reject）投递死信交换机过程

RabbitMQ 实验消费原始队列消息， 拒绝（reject）投递死信交换机过程

如果你想通过 RabbitMQ 的死信队列功能实现消费者拒绝消息投递到死信交换机的行为&#xff0c;你可以按照以下步骤操作&#xff1a; 创建原始队列&#xff0c;并将其绑定到一个交换机上&#xff1a; export RABBITMQ_SERVER127.0.0.1 export RABBITMQ_PORT5672 export RAB…
阅读更多...
Jenkins升级中的小问题

Jenkins升级中的小问题

文章目录 使用固定版本安装根据jenkins页面下载war包升级jenkins重启jenkins报错问题解决 K8s部署过程中的一些小问题 ##### Jenkins版本小插曲 ​ 在Jenkins环境进行插件安装时全部清一色飘红&#xff0c;发现是因为Jenkins版本过低导致&#xff0c;报错的位置可以找到更新je…
阅读更多...
Unity 实现鼠标左键进行射击

Unity 实现鼠标左键进行射击

发射脚本实现思路 分析 确定用户交互方式&#xff1a;通过鼠标左键点击发射子弹。确定子弹发射逻辑&#xff1a;每次点击后有一定时间间隔才能再次发射。确定子弹发射源和方向&#xff1a;子弹从枪口&#xff08;Transform&#xff09;位置发射&#xff0c;沿枪口方向前进。 变…
阅读更多...
win11蓝牙图标点击变灰，修复过程

win11蓝牙图标点击变灰，修复过程

问题发现 有一天突然心血来潮想着连接蓝牙音响放歌来听，才发现win11系统右下角菜单里的蓝牙开关有问题。 打开蓝牙设置，可以正常直接连上并播放声音，点击右下角菜单里的蓝牙开关按钮后，蓝牙设备也能正常断开，但是按钮直接变深灰色，无法再点击打开。 重启电脑，蓝牙开关显…
阅读更多...
Linux(CentOS)/Windows-C++ 云备份项目(客户端文件操作类，数据管理模块设计，文件客户端类设计)

Linux(CentOS)/Windows-C++ 云备份项目(客户端文件操作类，数据管理模块设计，文件客户端类设计)

文章目录 1. 客户端文件操作类2. 客户端数据管理模块设计3. 文件客户端类设计项目代码 客户端负责的功能 指定目录的文件检测&#xff0c;获取文件夹里面的文件 判断这个文件是否需要备份&#xff0c;服务器备份过的文件则不需要进行备份&#xff0c;已经备份的文件如果修改也…
阅读更多...
【Frida】【Android】04_Objection安装和使用

【Frida】【Android】04_Objection安装和使用

&#x1f6eb; 系列文章导航 【Frida】【Android】01_手把手教你环境搭建 https://blog.csdn.net/kinghzking/article/details/136986950【Frida】【Android】02_JAVA层HOOK https://blog.csdn.net/kinghzking/article/details/137008446【Frida】【Android】03_RPC https://bl…
阅读更多...
Rabbitmq消息顺序的问题以及解决方案

Rabbitmq消息顺序的问题以及解决方案

1.1消息顺序的场景 场景1&#xff1a;一个queue&#xff0c;多个consumer 一个queue&#xff0c;有多个consumer去消费&#xff0c;这样就会造成顺序的错误&#xff0c;consumer从MQ里面读取数据是有序的&#xff0c;但是每个consumer的执行时间是不固定的&#xff0c;无法保…
阅读更多...
Radio Silence for mac 好用的防火墙软件

Radio Silence for mac 好用的防火墙软件

Radio Silence for Mac是一款功能强大的网络防火墙软件&#xff0c;专为Mac用户设计&#xff0c;旨在保护用户的隐私和网络安全。它具备实时网络监视和控制功能&#xff0c;可以精确显示每个网络连接的状态&#xff0c;让用户轻松掌握网络活动情况。 软件下载&#xff1a;Radio…
阅读更多...
【案例·增】获取当前时间、日期(含，SQL中DATE数据类型)

【案例·增】获取当前时间、日期(含，SQL中DATE数据类型)

问题描述&#xff1a; 需要使用当前时间、日期&#xff0c;可以使用 SQL 中的 CURDATE() 、NOW()、CURTIME()运算符 案例&#xff1a; INSERT INTO table_name(current_time, column_name2,...) VALUES (NOW(),, ...)规则(Date 相关函数)&#xff1a; 规则(Date数据类型)
阅读更多...
Redis命令-List命令

Redis命令-List命令

4.6 Redis命令-List命令 Redis中的List类型与Java中的LinkedList类似&#xff0c;可以看做是一个双向链表结构。既可以支持正向检索和也可以支持反向检索。 特征也与LinkedList类似&#xff1a; 有序元素可以重复插入和删除快查询速度一般 常用来存储一个有序数据&#xff…
阅读更多...
HackTheBox-Machines--Legacy

HackTheBox-Machines--Legacy

文章目录 1 端口扫描2 测试思路3 445端口漏洞测试4 flag Legacy 测试过程 1 端口扫描 nmap -sC -sV 10.129.227.1812 测试思路 目标开启了135、139、445端口&#xff0c;445 SMB服务存在很多可利用漏洞&#xff0c;所以测试点先从445端口开始。而且在Nmap扫描结果中&#xff0c…
阅读更多...
关于使用vscode搭建c/c++编程环境

关于使用vscode搭建c/c++编程环境

目录 关于使用vscode搭建c/c编程环境一、前言二、安装 IDE 二、安装TDM-GCC安装三、安装C/C环境四、编写代码并进行编译 关于使用vscode搭建c/c编程环境 一、前言 一直觉得vscode是生产强有力的生产工具&#xff0c;基于此&#xff0c;做一篇学习笔记进行记录。 二、安装 ID…
阅读更多...
react-navigation：

react-navigation：

我的仓库地址&#xff1a;https://gitee.com/ruanjianbianjing/bj-hybrid react-navigation&#xff1a; 学习文档&#xff1a;https://reactnavigation.org 安装核心包: npm install react-navigation/native 安装react-navigation/native本身依赖的相关包: react-nativ…
阅读更多...
快速上手Spring Cloud五：Spring Cloud与持续集成/持续部署（CI/CD）

快速上手Spring Cloud五：Spring Cloud与持续集成/持续部署（CI/CD）

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …
阅读更多...
206基于matlab的无人机航迹规划(UAV track plannin）

206基于matlab的无人机航迹规划(UAV track plannin）

基于matlab的无人机航迹规划(UAV track plannin&#xff09;。输入输出参数包括 横滚、俯仰、航向角&#xff08;单位&#xff1a;度&#xff09;&#xff1b;横滚速率、俯仰速率、航向角速率&#xff08;单位&#xff1a;度/秒&#xff09;&#xff1b;飞机运动速度——X右翼、…
阅读更多...
C语言--编译和链接

C语言--编译和链接

1.翻译环境 计算机能够执行二进制指令&#xff0c;我们的电脑不会直接执行C语言代码&#xff0c;编译器把代码转换成二进制的指令&#xff1b; 我们在VS上面写下printf("hello world");这行代码的时候&#xff0c;经过翻译环境&#xff0c;生成可执行的exe文件&…
阅读更多...
「15」色源：添加指定色彩的纯色画面素材

「15」色源：添加指定色彩的纯色画面素材

「15」色源添加指定色彩的纯色画面素材 在OBS软件里&#xff0c;在来源里可以增加色源&#xff0c;添加一个色块到您的场景中&#xff0c;作为一个背景色或辅助色。 图中的显示器就是加了色源的 实操步骤 第1步 添加色源 在「来源」的左下角&#xff0c;点「」选择「色源」&a…
阅读更多...
OpenAI最近推出的Sora，在NVIDIA H100上生成1分钟视频大约需要12分钟的时间

OpenAI最近推出的Sora，在NVIDIA H100上生成1分钟视频大约需要12分钟的时间

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
誉天华为认证云计算课程如何

誉天华为认证云计算课程如何

HCIA-Cloud Computing 5.0 课程介绍&#xff1a;掌握华为企业级虚拟化、桌面云部署&#xff0c;具备企业一线部署实施及运维能力 掌握虚拟化技术、网络基础、存储基础等内容&#xff0c;拥有项目实施综合能力 满足企业虚拟化方案转型需求&#xff0c;应对企业日益多样的业务诉求…
阅读更多...
admin端

admin端

一、创建项目 1.1 技术栈 1.2 vite 项目初始化 npm init vitelatest vue3-element-admin --template vue-ts 1.3 src 路径别名配置 Vite 配置 配置 vite.config.ts // https://vitejs.dev/config/import { UserConfig, ConfigEnv, loadEnv, defineConfig } from vite im…
阅读更多...
最新文章

Copyright @ 2022~2023