一个基于electron自动化桌面应用-流程图构建

前期工作已搞定,现在可以搭建桌面应用了。这个阶段可以结合前面定义好的数据格式构建流程图。

模板

还是使用熟悉的技术栈vite + react + electron,模板

流程图

官方文档

自定义 节点样式

因为配置化的操作类型较多,因此可以利用自定义节点样式区分(常规的就是一个长方形);
在这里插入图片描述

例如:开始节点


import React, { memo } from 'react';
import { Card } from 'antd'
import { Handle } from 'react-flow-renderer';

import StartSvg from '../assets/start.svg'
import './flow.node.css'

export default memo(({ isConnectable, selected, data }) => {
	return (
		<>
			<div>
				<Card
					size="small"
					title={<img src={StartSvg} className={`card-img  ${selected && 'selected'}`} />}
					style={{ maxWidth: 300, minWidth: 260 }}
				>
					<p className="wrap-txt">打开页面:{data.url}</p>
					{/* <span>下一步</span> */}
				</Card>
			</div>
			<Handle
				type="source"
				position="bottom"
				style={{ backgroundColor: '#576B95' }}
				isConnectable={isConnectable}
			></Handle>
		</>
	);
});

使用:

	const nodeTypes = useMemo(() => ({
		start: StartNode,})

实现修改参数

监听流程图节点的点击事件,并弹窗。每个节点的参数都不太一样,因此需要定义不同类型的组件。流程图点击事件:

	const onNodeClick = useCallback((event, node) => {
		setNodeDrawer({
			title: '详情',
			open: true,
			node,
		})
	}, [])

在这里插入图片描述

元素之外的节点操作

想让软件流程走通,出来chrom插件圈选元素的节点之外,我们还需要其他节点操作,例如:刷新页面,获取当前页面。这个时候就可以根据之前的定义数据格式预设一些节点,例如:

  {
        imgSrc: NewSvg,
        disable: false,
        txt: '获取最新页面',
        nodeType: 'logic_new_page',
        data: {
          type: 'logic_new_page',
          data: {
            logicsetting: {
              logicType: 'logic_new_page',
              waitTime: 1,
            }
          }
        }
      },

通过拖拽的方式,把节点添加到流程图内:

 const onDragStart = (event, data) => {
    event.dataTransfer.setData('application/reactflow', JSON.stringify(data));
    event.dataTransfer.effectAllowed = 'move';
  };

在这里插入图片描述

限制

限制1: 一个六流程图不能有环,如果存在环可能导致死循环

解决: 两个节点连接时,判断是否有一个节点已经存在连接

	const onConnect = useCallback((params) => {
		const edges = reactFlowInstance.getEdges()
    const nodes = reactFlowInstance.getNodes()
		console.log('params===', params, edges)
    .....
		const { source, target, sourceHandle, targetHandle } = params
		if (edges.find(item => item.source === source && item.sourceHandle === sourceHandle)
			|| edges.find(item => item.target === target && item.targetHandle === targetHandle)) {
			messageApi.open({
				type: 'warning',
				content: '只允许一个流程',
			});
			return;
		}
		...
		})

限制2:部分节点只能连接特定的节点类型,例如: 循环条件分支只能连接条件判断、自定义类型的节点

const onConnect = (
...
 if (sourceHandle === 'loopcondition') {
      if (!['logic_func', 'opt_verify', 'opt_exists'].includes(fTarget.type)) {
        messageApi.open({
          type: 'error',
          content: '不能连接该类型节点!!!',
        });
        return
      }
    } else if (sourceHandle === 'listbody') {
      if (!['logic_listitem'].includes(fTarget.type)) {
        messageApi.open({
          type: 'error',
          content: '不能连接该类型节点!!!',
        });
        return
      }
    } else if (fSource && fSource.type === 'logic_listitem' &&  sourceHandle === 'next'
      && fTarget && fTarget.type !== 'logic_listitem') {
        messageApi.open({
          type: 'error',
          content: '不能连接该类型节点!!!',
        });
        return
    }
...

最后

源码

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构和算法笔记5:堆和优先队列

今天来讲一下堆&#xff0c;在网上看到一个很好的文章&#xff0c;不过它实现堆是用Golang写的&#xff0c;我这里打算用C实现一下&#xff1a; Golang: Heap data structure 1. 基本概念 满二叉树&#xff08;二叉树每层节点都是满的&#xff09;&#xff1a; 完全二叉树&a…

JAVA_Set系列集合:HashSet、LinkedHashSet、TreeSet底层详解

先看看 Set 系列集合的位置&#xff1a; Set 系列集合的特点&#xff1a; 无序&#xff1a;存取顺序不一致 如存入张三、李四、王五。而遍历获取到的是李四, 张三, 王五 不重复&#xff1a;可以去除重复无索引&#xff1a;没有带索引的方法&#xff0c;所以不能使用普通for循…

Redis缓存设计与性能优化

文章目录 多级缓存架构缓存设计缓存穿透缓存失效(击穿)缓存雪崩热点缓存key重建优化缓存与数据库双写不一致 开发规范与性能优化一、键值设计1. key名设计2. value设计bigkey的危害&#xff1a;bigkey的产生&#xff1a;如何优化bigkey 二、命令使用三、客户端使用Redis对于过期…

SpringBoot系列之MybatisPlus实现分组查询

SpringBoot系列之MybatisPlus实现分组查询 我之前博主曾记写过一篇介绍SpringBoot2.0项目怎么集成MybatisPlus的教程&#xff0c;不过之前的博客只是介绍了怎么集成&#xff0c;并没有做详细的描述各种业务场景&#xff0c;本篇博客是对之前博客的补充&#xff0c;介绍在mybat…

GitHub 一周热点汇总第7期(2024/01/21-01/27)

GitHub一周热点汇总第7期 (2024/01/21-01/27) &#xff0c;梳理每周热门的GitHub项目&#xff0c;离春节越来越近了&#xff0c;不知道大家都买好回家的票没有&#xff0c;希望大家都能顺利买到票&#xff0c;一起来看看这周的项目吧。 #1 rustdesk 项目名称&#xff1a;rust…

3个精美的wordpress律师网站模板

暗红色WordPress律师事务所网站模板 演示 https://www.zhanyes.com/qiye/23.html 暗橙色WordPress律师网站模板 演示 https://www.zhanyes.com/qiye/18.html 红色WordPress律所网站模板 演示 https://www.zhanyes.com/qiye/22.html

最新国内GPT4.0使用教程,AI绘画-Midjourney绘画V6 ALPHA绘画模型,GPT语音对话使用,DALL-E3文生图+思维导图一站式解决方案

一、前言 ChatGPT3.5、GPT4.0、GPT语音对话、Midjourney绘画&#xff0c;文档对话总结DALL-E3文生图&#xff0c;相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚至也可以和…

STM32实现软件IIC协议操作OLED显示屏(2)

时间记录&#xff1a;2024/1/27 一、OLED相关介绍 &#xff08;1&#xff09;显示分辨率128*64点阵 &#xff08;2&#xff09;IIC作为从机的地址0x78 &#xff08;3&#xff09;操作步骤&#xff1a;主机先发送IIC起始信号S&#xff0c;然后发送OLED的地址0x78&#xff0c;然…

Unity 光照

光照烘培 光照模式切换为 Baked 或 Mixed&#xff0c;Baked 模式完全使用光照贴图模拟光照&#xff0c;运行时修改光照颜色不生效&#xff0c;Mixed 模式也使用光照贴图&#xff0c;并且进行一些实时运算&#xff0c;运行时修改光照颜色会生效 受光照影响的物体勾选 Contribute…

【RH850U2A芯片】Reset Vector和Interrupt Vector介绍

目录 前言 正文 1. 什么是Reset Vector 1.1 S32K144芯片的Reset Vector 1.2 RH850芯片的Reset Vector 2. 什么是Interrupt Vector 2.1 S32K144芯片的Interrupt Vector 2.2 RH850芯片的Interrupt Vector 3. Reset Vector等价于Interrupt Vector吗 4. 总结 前言 最近在…

MongoDB实战

1.MongoDB介绍 1.1 什么是MongoDB MongoDB是一个文档数据库&#xff08;以JSON 为数据模型&#xff09;&#xff0c;由C语言编写&#xff0c;旨在为WEB应用提供可扩展的高性能数据存储解决方案。 文档来自于"JSON Document"&#xff0c;并非我们一般理解的 PDF&…

【RTP】webrtc 学习3: webrtc对h264的rtp解包

rtp_rtcp\source\video_rtp_depacketizer_h264.cc【RTP】webrtc 学习2: webrtc对h264的rtp打包 中分析了打包过程的代码,这样再来看解析过程的源码就容易多了:本代码主要基于m79,m98类似。解析ParseFuaNalu 第一个字节只取 FNRI第二个字节取 原始的nalu type识别第一个分片…

【机器学习笔记】1 线性回归

回归的概念 二分类问题可以用1和0来表示 线性回归&#xff08;Linear Regression&#xff09;的概念 是一种通过属性的线性组合来进行预测的线性模型&#xff0c;其目的是找到一条直线或者一个平面或者更高维的超平面&#xff0c;使得预测值与真实值之间的误差最小化&#x…

网络安全视野:2024 年的人工智能、弹性和协作

在不断发展的网络安全环境中&#xff0c;确保公司运营安全并保障客户体验是一项复杂而关键的挑战&#xff0c;特别是对于在边缘运营的大型组织而言。当我们展望未来时&#xff0c;必须承认人工智能 (AI) 对网络安全领域的深远影响。本文深入研究了2024 年的预测&#xff0c;将其…

接口自动化测试问题汇总

本篇文章分享几个接口自动化用例编写过程遇到的问题总结&#xff0c;希望能对初次探索接口自动化测试的小伙伴们解决问题上提供一小部分思路。 sql语句内容出现错误 空格&#xff1a;由于有些字段判断是变量&#xff0c;需要将sql拼接起来&#xff0c;但是在拼接字符串时没有…

OpenCV-27 Canny边缘检测

一、概念 Canny边缘检测算法是John F.Canny与1986年开发出来的一个多级边缘检测算法&#xff0c;也被很多人认为是边缘检测的最优算法。最优边缘检测的三个主要评价标准是&#xff1a; 低错频率&#xff1a;表示出尽可能多的实际边缘&#xff0c;同时尽可能的减小噪声产生的误…

【QT+QGIS跨平台编译】之十二:【libpng+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

文件目录 一、libpng介绍二、文件下载三、文件分析四、pro文件五、编译实践一、libpng介绍 PNG(Portable Network Graphics,便携式网络图形),是一种采用无损压缩算法的位图格式,支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。 PNG使用从LZ77派生的无损数据压缩算…

文心一言 VS ChatGPT :谁是更好的选择?

前言 目前各种大模型、人工智能相关内容覆盖了朋友圈已经各种媒体平台&#xff0c;对于Ai目前来看只能说各有千秋。GPT的算法迭代是最先进的&#xff0c;但是它毕竟属于国外产品&#xff0c;有着网络限制、注册限制、会员费高昂等弊端&#xff0c;难以让国内用户享受。文心一言…

移动Web——平面转换-平移

1、平面转换-平移 取值 像素单位数值百分比&#xff08;参照盒子自身尺寸计算结果&#xff09;正负均可 技巧 translate()只写一个值&#xff0c;表示沿着X轴移动单独设置X或Y轴移动距离&#xff1a;translateX()或translateY() <!DOCTYPE html> <html lang"en&q…

短视频账号矩阵系统+无人直播系统源码技术开发

短视频账号矩阵系统无人直播系统源码技术开发涉及到多个领域&#xff0c;包括但不限于前端开发、后端开发、数据库设计、网络通信等。 以下是一些基本技术的步骤和注意事项&#xff1a; 1.技术需求分析设计&#xff1a;首先&#xff0c;需要明确开发短视频账号矩阵系统和无人直…