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

这篇具有很好参考价值的文章主要介绍了深入React Flow Renderer(二):构建拖动操作栏。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

引言

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

创建操作栏组件

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

// Slider/index.jsx

import 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>来代替
        <CustomAccordion
          title={
            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) =>
                <div
                  key={`${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';
};

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

总结

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

到了这里,关于深入React Flow Renderer(二):构建拖动操作栏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用 React、Web3.js 和 Metamask 构建 Web3 dApp 身份验证

    我相信您和我一样对 Web3 充满热情。本文介绍了一种新的区块链开发登录方法:使用 MetaMask 扩展的一键式加密安全登录流程,所有数据都存储在我们自己的后端。它还可以保护我们的数据和加密货币的安全。 在这里,我们将构建一个允许用户使用 MetaMask 登录的身份验证解决

    2024年02月04日
    浏览(59)
  • 记录react 视频和 预览拖动

      transform的使用 :CSS 变形(CSS3) transform_css transform_快乐de馒头的博客-CSDN博客 给图片 加  transform: scale(1.4) 加动画:   给图片 加  transform: rotate(90deg)  90,180,270,360 为选择方向 给图片加  transform: matrix(2.2, 0, 0, 2.2, -89, 186) matrix(2.2, 0, 0, 2.2, -89, 186)的值 ,2,2为 缩放, -89 和 186 为

    2024年02月11日
    浏览(37)
  • Node.js npm V8 React Express的运行配合关系:构建JavaScript应用的基石

    目录 Node.js 和 V8 引擎 Node.js 和 npm LTS(Long Term Support) React Node.js的作用 Express Node.js 和 V8 引擎 Node.js 使用 Google 的 V8 JavaScript 引擎 来执行 JavaScript 代码。V8 是一个高性能的 JavaScript 和 WebAssembly 引擎,用于在 Google Chrome 浏览器和 Node.js 中运行 JavaScript。 V8 引擎的更新 通常包括

    2024年03月12日
    浏览(59)
  • 【react从入门到精通】深入理解React生命周期

    ✍创作者:全栈弄潮儿 🏡 个人主页: 全栈弄潮儿的个人主页 🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区 📙 专栏地址:react从入门到精通 【分享几个国内免费可用的ChatGPT镜像】 【10几个类ChatGPT国内AI大模型】 【用《文心一言》1分钟写一篇博客简直yyds】 【用

    2024年02月03日
    浏览(46)
  • 如何在React中构建动态下拉组件 - 解释React复合组件模式

    下拉菜单长期以来一直是网站和应用程序中的重要组成部分。它们是用户交互的默默英雄,通过简单的点击或轻触默默地促进着无数的操作和决策。 今天你可能已经遇到了其中之一,无论是在你最喜爱的在线商店上选择类别,还是在注册表单上选择你的出生日期。 但如果我

    2024年04月26日
    浏览(29)
  • vite+react+ts+eslint+prettier构建react开发项目

    目录 一、构建项目 二、安装eslint和prettier的依赖 三、修改.eslintrc.cjs,创建.prettierrc.cjs 1、.eslintrc.cjs文件配置 2、ESlint忽略文件.eslintignore 3、.prettierrc.cjs文件配置  4、prettierrc忽略配置文件.prettierignore

    2024年02月11日
    浏览(43)
  • React 应用构建(环境)

    可以少去理解一些不必要的概念,而多去思考为什么会有这样的东西,它解决了什么问题,或者它的运行机制是什么? 工作编辑器:Visual Studio Code。 Javascript 解析器、运行环境 Node.js 的安装。 npm 安装:npm 是 Node.js 的软件包管理器。 脚手架是快速帮助开发者搭建开发环境,

    2024年02月05日
    浏览(34)
  • React框架构建用户界面

    摘要:本文将介绍如何使用React框架来构建交互式的用户界面,包括项目的搭建、组件设计、状态管理和事件处理等方面的内容。 在现代Web开发中,构建交互式的用户界面已经成为一个重要的任务。React框架通过组件化的开发方式提供了一种高效、可维护和可重用的方法来构

    2024年02月10日
    浏览(38)
  • 章节 1:入门React.js -《React.js手把手教程:从初学者到实战高手》- 第一部分:React.js基础

    《React.js手把手教程:从初学者到实战高手》 第一部分:React.js基础 在我们开始探索 React.js 的奇妙世界之前,让我们先来认识一下这个“ 人人都在谈论 ”的家伙。你可以把 React.js 想象成是一个全栈工程师的一大碗甜品,不仅好吃,还可以让你的应用更美味!那么,究竟什么

    2024年02月11日
    浏览(50)
  • 深入理解React中fiber

    Fiber是对React核心算法的重写,Fiber是React内部定义的一种数据结构,将更新渲染耗时长的大任务,分为许多的小片。Fiber节点保存啦组件需要更新的状态和副作用,一个Fiber代表一个工作单元。 在react中,主要做了下面这些操作: 为每个增加了优先级,优先级高的任务可以中断

    2024年02月07日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包