深入React Flow Renderer(二):构建拖动操作栏

在上一篇博客中,我们介绍了如何启动React Flow Renderer并创建一个基本的工作流界面。本文将进一步深入,着重讨论如何构建一个可拖动的操作栏,它是用户与工作流交互的入口之一。

引言

操作栏是工作流界面的一部分,通常位于界面的一侧或顶部。它包含了用户可以从中拖拽节点到画布上的组件列表。在我们的示例中,操作栏将位于界面的左侧。

创建操作栏组件

首先,让我们看一下如何创建操作栏组件。在我们的示例中,我们使用了React组件,名为Slider。这个组件接收一个名为components的属性,该属性包含了可用的组件列表。

// Slider/index.jsximport React from 'react';
//项目中自定义的手风琴组件,请你使用自己项目中的组件
import { CustomAccordion } from '@/components/CustomeAccordion';// 模拟节点
const mockComponent = [{'name': 'clear alarm','type': 'ACTION','clazz': 'action.TbClearAlarmNode'},{'name': 'create alarm','type': 'ACTION','clazz': 'action.TbCreateAlarmNode'},{'name': 'device profile','type': 'ACTION','clazz': 'profile.TbDeviceProfileNode'},{'name': 'log','type': 'ACTION','clazz': 'action.TbLogNode'},{'name': 'message type switch','type': 'FILTER','clazz': 'filter.TbMsgTypeSwitchNode'},{'name': 'rpc call request','type': 'ACTION','clazz': 'rpc.TbSendRPCRequestNode'},{'name': 'rule chain','type': 'FLOW','clazz': 'flow.TbRuleChainInputNode'},{'name': 'save attributes','type': 'ACTION','clazz': 'telemetry.TbMsgAttributesNode'},{'name': 'save timeseries','type': 'ACTION','clazz': 'telemetry.TbMsgTimeseriesNode'},{'name': 'script','type': 'TRANSFORMATION','clazz': 'transform.TbTransformMsgNode'}
];export enum RuleNodeType {FILTER = 'FILTER',ENRICHMENT = 'ENRICHMENT',TRANSFORMATION = 'TRANSFORMATION',ACTION = 'ACTION',EXTERNAL = 'EXTERNAL',FLOW = 'FLOW',UNKNOWN = 'UNKNOWN',INPUT = 'INPUT',
}export const ruleNodeTypeDescriptors = new Map<RuleNodeType, any>([[RuleNodeType.FILTER,{value: RuleNodeType.FILTER,name: 'rulenode.type-filter',details: 'rulenode.type-filter-details',nodeClass: 'tb-filter-type',icon: 'filter_list'}],[RuleNodeType.ENRICHMENT,{value: RuleNodeType.ENRICHMENT,name: 'rulenode.type-enrichment',details: 'rulenode.type-enrichment-details',nodeClass: 'tb-enrichment-type',icon: 'playlist_add'}],[RuleNodeType.TRANSFORMATION,{value: RuleNodeType.TRANSFORMATION,name: 'rulenode.type-transformation',details: 'rulenode.type-transformation-details',nodeClass: 'tb-transformation-type',icon: 'transform'}],[RuleNodeType.ACTION,{value: RuleNodeType.ACTION,name: 'rulenode.type-action',details: 'rulenode.type-action-details',nodeClass: 'tb-action-type',icon: 'flash_on'}],[RuleNodeType.EXTERNAL,{value: RuleNodeType.EXTERNAL,name: 'rulenode.type-external',details: 'rulenode.type-external-details',nodeClass: 'tb-external-type',icon: 'cloud_upload'}],[RuleNodeType.FLOW,{value: RuleNodeType.FLOW,name: 'rulenode.type-flow',details: 'rulenode.type-flow-details',nodeClass: 'tb-flow-type',icon: 'settings_ethernet'}],[RuleNodeType.INPUT,{value: RuleNodeType.INPUT,name: 'rulenode.type-input',details: 'rulenode.type-input-details',nodeClass: 'tb-input-type',icon: 'input',special: true}],[RuleNodeType.UNKNOWN,{value: RuleNodeType.UNKNOWN,name: 'rulenode.type-unknown',details: 'rulenode.type-unknown-details',nodeClass: 'tb-unknown-type',icon: 'help_outline'}]]
);const classMap = new Map([['ACTION', 'relation-node'],['input', 'input-node'],['FILTER', 'filter-node'],['ENRICHMENT', 'enrichment-node'],['TRANSFORMATION', 'transformation-node'],['EXTERNAL', 'external-node'],['FLOW', 'flow-node']
]);// const allowType = ruleNodeTypeComponentTypes;
const allowNodesClazz = ['telemetry.TbMsgAttributesNode','filter.TbMsgTypeSwitchNode','action.TbLogNode','rpc.TbSendRPCRequestNode','profile.TbDeviceProfileNode','telemetry.TbMsgTimeseriesNode','action.TbCreateAlarmNode','action.TbClearAlarmNode','flow.TbRuleChainInputNode','transform.TbTransformMsgNode'
];export default function Slider() {const [allowType, setAllowType] = React.useState<any>(['input']);const [allowedNodes, setAllowedNodes] = React.useState<any>([]);React.useEffect(() => {// 将组件按名称进行排序const sortedComponents = mockComponent?.sort((a: any, b: any) =>a.name?.localeCompare(b.name));// 过滤出符合条件的组件并拼接到allowedNodes数组中const filteredComponents =sortedComponents?.filter((component: any) =>allowNodesClazz.includes(component.clazz)) || [];const updatedAllowedNodes = [...filteredComponents];// 获取所有组件的类型,并和allowType数组进行合并const updatedTypes = updatedAllowedNodes.map((component) => component.type);// 去除重复的节点并更新allowedNodes状态setAllowedNodes(Array.from(new Set(updatedAllowedNodes)));// 去除重复的类型并更新allowType状态(如果为空数组,则设置为默认值)setAllowType(Array.from(new Set(updatedTypes)) || []);}, []);return (<div className="sider">{allowType.map((type: any) =>//自定义手风琴,项目中使用的是mui,你可以使用其他组件库,这里就不贴出手风琴的代码了,请你根据你的项目,使用对应的组件。如果不需要手风琴组件。可以拥<div>来代替<CustomAccordiontitle={ruleNodeTypeDescriptors.get(type as any)?.name as string}key={type}><div className="nodes">{allowedNodes.filter((node: any) => node.type === type).map((x: any, i: number) =><divkey={`${x.type}-${i}`}className={`sider-node ${classMap.get(x.type) || 'default-node'}`}onDragStart={(e) => onDragStart(e, x)}draggable><div>{x.name}</div>{/* 黑色遮罩层 */}<div className="overlay"></div></div>)}</div></CustomAccordion>)}</div>);
}

在上述代码中,我们定义了一个Slider组件,它将组件列表映射到可展开的自定义组件中,并为每个组件添加了拖拽支持。

拖拽事件处理

拖拽操作栏的核心功能在于如何处理拖拽事件。在我们的示例中,我们使用了onDragStart函数来处理节点拖拽开始事件。该函数会设置被拖拽的节点的类型和名称,并记录被拖拽节点的完整信息。

/*** 处理节点拖拽开始事件的回调函数* @param {Event} evt - 拖拽事件对象* @param {Object} node - 被拖拽的节点对象*/
const onDragStart = (evt: any, node: any) => {// 记录被拖拽的节点类型和名称evt.dataTransfer.setData('application/reactflow',node.type + ',' + node.name);// 记录被拖拽的节点的完整信息evt.dataTransfer.setData('application/reactflownode', JSON.stringify(node));// 设置拖拽效果为移动evt.dataTransfer.effectAllowed = 'move';
};

这个函数会在用户拖拽节点时被触发,并且会设置相关的数据以便后续在画布上放置节点时使用。

总结

通过创建一个可拖动的操作栏,用户可以方便地将节点拖放到工作流画布上。在本文中,我们了解了如何创建操作栏组件,处理拖拽事件,并将组件列表展示给用户。下一篇博客中,我们将继续深入研究工作流界面的其他方面,包括画布的交互性和节点的定制。敬请期待!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Comparator Comparators Comparable Collections排序源码解析

问题引出 起初&#xff0c;写了一行排序代码&#xff0c;空指针异常。有判空思想但对nullsLast理解是错误的&#xff0c;于是阅读了一下相关源码。 result.sort(Comparator.nullsLast(Comparator.comparing(StationPointDataZoneVO::getDv)));以下写法是正确的&#xff1a; …

再见了 shiro

前言 作为一名后台开发人员&#xff0c;权限这个名词应该算是特别熟悉的了。就算是java里的类也有 public、private 等“权限”之分。之前项目里一直使用shiro作为权限管理的框架。说实话&#xff0c;shiro的确挺强大的&#xff0c;但是它也有很多不好的地方。shiro默认的登录…

Python优雅重启谷歌游览器并过cf

python如何优雅的重启谷歌游览器&#xff1f; 代码很简单&#xff1a; import subprocesshomepage "about:blank" # 结束已经启动的谷歌游览器 subprocess.run("taskkill /f /im chrome.exe", shellTrue) # debug启动谷歌游览器 subprocess.run(["…

docker批量删除退出状态的容器

sudo docker rm $(docker ps -a -q -f statusexited)

移动云“遇见大咖”|玻色量子副总裁巨江伟:超越摩尔定律的新型计算革命

移动云MVP&#xff0c;作为产品共建专家、关键意见领袖及技术布道者&#xff0c;帮助开发者更好地了解和使用移动云。开发者社区希望携手移动云MVP&#xff0c;与开发者共生、共赢、共成长。 8月31日&#xff0c;移动云开发者社区“遇见大咖”系列活动第2期——“[量子计算]超越…

了解c++11新特性-智能指针

c智能指针概念 1 智能指针的思想--CRAII机制 RAII是Resource Acquisition Is Initialization&#xff08;wiki上面翻译成 “资源获取就是初始化”&#xff09;的简称&#xff0c;是C语言的一种管理资源、避免泄漏的惯用法&#xff0c;利用的就是C构造的对象最终会被析构销毁的…

如何在Go中编写包

包由位于同一目录中的Go文件组成,这些文件在开头具有相同的package语句。你可以从包中包含额外的功能,使程序更复杂。有些包可以通过Go标准库获得,因此与Go安装一起安装。其他可以使用Go的go get命令安装。您还可以通过使用必要的package语句在要共享代码的相同目录中创建Go…

【Vue第3章】使用Vue脚手架_Vue2_笔记

笔记 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue …

英语学习(衣服与服装篇)

一、购买服装 1.有关时尚的形容词 1&#xff09;有许多可用于形容 fashion 和 clothes 的形容词。 cool 酷的 stylish 时髦的 in style 时髦 fashionable 时髦的&#xff0c;流行的 2&#xff09;描述不喜欢的衣服 out of style 过时的 dre…

springboot和swagger版本不兼容问题解决

1.错误提示 org.springframework.context.ApplicationContextException: Failed to start bean documentationPluginsBootstrapper; nested exception is java.lang.NullPointerExceptionat org.springframework.context.support.DefaultLifecycleProcessor.doStart(DefaultLi…

Java程序员,你掌握了多线程吗?

文章目录 01 多线程对于Java的意义02 为什么Java工程师必须掌握多线程03 Java多线程使用方式04 如何学好Java多线程写作末尾 摘要&#xff1a;互联网的每一个角落&#xff0c;无论是大型电商平台的秒杀活动&#xff0c;社交平台的实时消息推送&#xff0c;还是在线视频平台的流…

ConcurrentHashMap实现线程安全原理

我们知道&#xff0c;在日常开发中使用的HashMap是线程不安全的&#xff0c;而线程安全类HashTable只是简单的在方法上加锁实现线程安全&#xff0c;效率低下&#xff0c;所以在线程安全的环境下我们通常会使用ConcurrentHashMap。 1. 初始化数据结构时的线程安全 HashMap的底…

【51单片机系列】矩阵按键扩展实验

本文对矩阵按键的一个扩展&#xff0c;利用矩阵按键和动态数码管设计一个简易计算器。代码参考&#xff1a;https://blog.csdn.net/weixin_47060099/article/details/106664393 实现功能&#xff1a;使用矩阵按键&#xff0c;实现一个简易计算器&#xff0c;将计算数据及计算结…

【Proteus仿真】【51单片机】简易计算器

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真51单片机控制器&#xff0c;使动态数码管、矩阵按键、蜂鸣器等。 主要功能&#xff1a; 系统运行后&#xff0c;数码管默认显示0&#xff0c;输入对应的操作数进行四则运算&#x…

JavaScript <关于逆向RSA非对称加密算法的案例(附原代码)>--案例(五)

前言: 趁热打铁,标记一下RSA的算法逆向...第二篇会有详解(本篇重在过程) 正文: 废话不说,直接分析步骤图: 到了这里,可以看到在登录的时候,需要验证码(本篇不教反验证码) 下面是正题--->逆他的pwd(密码) 总结: 问题:怎么确定一个密文数据是基于什么算法做出来的呢? 答:…

当初你问我为什么选择计算机?回头现在来总结就是穷

还记得当初自己为什么选择计算机&#xff1f; 当初你问我为什么选择计算机&#xff0c;我笑着回答&#xff1a;“因为我梦想成为神奇的码农&#xff01;我想像编织魔法一样编写程序&#xff0c;创造出炫酷的虚拟世界&#xff01;”谁知道&#xff0c;我刚入门的那天&#xff0…

NAS外网访问方案

基础流程 路由器开启端口映射&#xff08;如果有猫则要配置猫为转发模式&#xff0c;由路由器直接拨号即可使用第三方程序让内网ip发布到公网上&#xff08;如果有云服务器&#xff09;需要开启防火墙端口 好用的第三方程序 FRP穿透 优点&#xff1a;开源免费&#xff0c;速…

期末速成数据库极简版【创建】(1)

目录 前言 【1】T-SQL语句创建数据库 【2】T-SQL语句删除数据库 【3】T-SQL语句创建表 完整性约束 数据类型 例子 【4】T-SQL语句修改表 【5】T-SQL语句删除表 关于数据库&#xff0c;在我们学习Linux网络编程后面会详细学习到&#xff0c;为了应付期末考试&#xff0…

[MySQL] MySQL中的内置函数

本篇文章主要是对MySQL中常见的内置函数进行了详细解释。例如有日期类函数、字符串类函数、数学类函数等等。希望本篇文章会对你有所帮助。 文章目录 一、日期类函数 1、1 使用详解 1、2 实例演示 二、字符串函数 2、1 使用详解 2、2 实例演示 三、数学函数 四、其他函数 &…

销售如何开发客户?

在销售过程中&#xff0c;开发客户是至关重要的一环。只有拥有足够的客户群体&#xff0c;才能为公司带来更多的业务机会和收入。 现如今&#xff0c;不管是哪一行竞争都十分激烈&#xff0c;特别是那些本身没有核心竞争力和核心技术的传统 to b企业&#xff0c;正处于十分尴尬…