使用 React Flow 构建一个思维导图应用

news2024/11/18 9:25:16

242d9ec432ebcf91c101501536bfdf6b.jpeg

4f93d83082235977d4242b2bd3062fb0.jpeg

思维导图是围绕共同主题或问题将思想、概念、信息或任务分组的视觉表示。思维导图应用是一种软件应用，允许您创建、可视化和组织您的思想、想法和信息作为思维导图。本文将向您展示如何实现自己的思维导图应用程序。

在我们开始之前，我想向您展示一下我们在本教程结束时将拥有的思维导图应用程序

66c02940210259423ed562e03e1a0017.png

React Flow是什么？

React Flow是一个开源工具包，用于在React应用程序中生成交互式图表、流程图和可视化。它提供了一种强大的方式来创建和管理复杂的可视化，如思维导图、网络图和组织结构图等。React Flow基于React构建，并使用现代Web技术提供统一的用户体验。

成千上万的用户使用React Flow，从个人开源开发者到像Stripe和Typeform这样的大公司。该库已被用于数据处理工具、聊天机器人构建器、机器学习、音乐合成器和其他应用程序中。

选择一个满足你需求的库可能会很困难，因为在不断发展的行业中有太多的选择。然而，使用React Flow、思维导图以及规划和设计你的项目可能会简化这个过程，节省你的时间和烦恼。

尽管市场上有众多竞争对手，但React Flow作为最出色的思维导图和流程框架之一，仍然在大型项目的开发过程中持续为用户带来好处。

在本教程中，您将学习如何使用React Flow创建一个基本的思维导图应用程序，该应用程序可用于头脑风暴、构思想法或可视化思维。

项目设置

让我们从搭建我们的React应用开始。通过运行以下命令在您选择的目录中搭建React：

npm create vite@latest mind-mapping-app --template react

cd mind-mapping-app

Vite是一个为主要框架提供的工具，可以让您从基本模板快速启动项目。这些模板由社区维护，并针对各种框架或集成其他工具。其中一个模板可以使用类似Degit的工具来搭建您的项目。

npx degit user/project my-project
cd mind-mapping-app

npm install
npm run dev

创建组件

要创建一个组件，请在您的思维导图应用的src文件夹中导航并创建一个组件（component）文件夹。接下来，在组件文件夹中创建一个新文件， node.jsx 。

集成React Flow

将React Flow集成到您的Vite React项目中，请按照以下步骤进行操作：

首先，请确保您已经安装了React Flow。如果还没有安装，请运行以下命令：

npm install react-flow-renderer

接下来，导航到 node.jsx 目录并粘贴以下代码：

import React from "react";
import ReactFlow from "reactflow";

import "reactflow/dist/style.css";

const initialNodes = [
  {
    id: "1",
    type: "input",
    data: { label: "Mind Map" },
    position: { x: 0, y: 0 },
  },
];

export default function MindNode() {
  return (
    <div id="container">
      <ReactFlow nodes={initialNodes }></ReactFlow>
    </div>
  );
}

我们导入了项目所需的重要依赖项。然后，我们定义了一个名为 initialNodes 的数组。该数组包含了一个起始节点配置，每个节点都有几个属性。 MindNode 功能性的React组件返回 JSX ，用于渲染思维导图节点。

从那里，导航到 App.jsx 在 src 目录/文件夹中，并替换以下代码以渲染函数 MindNode 。

import React from "react";
import MindNode from "./components/node";

function App() {
  return (
    <div className="App">
      <MindNode />
    </div>
  );
}

export default App;

最后，在这个阶段，导航到 src/main.jsx 并粘贴下面的代码：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

上面的代码设置并渲染了你的主要React组件App到HTML DOM中。从目前的代码中，你应该得到下面所示的输出：

44a407d448d2f749f74a5e834cb253a0.gif

自定义节点外观

您可以通过修改React Flow应用程序中节点的外观，根据其类型或属性构建具有不同样式和视觉属性的节点。现在导航到 src/node.jsx 并将以下代码添加到其中：

import React, { useState } from "react";
import ReactFlow, { MiniMap, useNodesState } from "reactflow";

import "reactflow/dist/style.css";

const initialNodes = [
  {
    id: "1",
    type: "input",
    data: { label: "Mind Map" },
    position: { x: 0, y: 0 },
  },
];


export default function MindNode() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [name, setName] = useState("");

  const addNode = () => {
    setNodes((e) =>
      e.concat({
        id: (e.length + 1).toString(),
        data: { label: `${name}` },
        position: {
          x: Math.random() * window.innerWidth,
          y: Math.random() * window.innerHeight,
        },
      })
    );
  };

  return (
    <div id="container">
      <ReactFlow nodes={nodes} onNodesChange={onNodesChange}>
        <MiniMap
          nodeColor={(n) => {
            if (n.type === "input") return "blue";

            return "#FFCC00";
          }}
        />
      </ReactFlow>
      <div>
        <input
          type="text"
          onChange={(e) => setName(e.target.value)}
          name="title"
        />
        <button type="button" onClick={addNode}>
          Add Node
        </button>
      </div>
    </div>
  );
}

上面的代码创建了一个基本的思维导图应用程序。用户可以向地图添加自定义标签，并根据节点的类型改变其外观。Reactflow库包含处理思维导图状态和交互性所需的组件和钩子。 miniMap 允许您从小的视角看到整个屏幕。

添加互动性

93c4d4105d9c1d73dffa25c6b4b732c8.gif

从上面的片段中我们可以看到，我们无法连接节点。允许用户与节点和边进行交互，比如建立连接和与节点进行交互，是为思维导图应用程序增加互动性的一种方式。请将以下代码复制并粘贴到您的 src/node.jsx 中。

import React, { useState, useCallback } from "react";
import ReactFlow, {
  MiniMap,
  Controls,
  useNodesState,
  useEdgesState,
  addEdge,
} from "reactflow";

import "reactflow/dist/style.css";

const initialNodes = [
  {
    id: "1",
    type: "input",
    data: { label: "Mind Map" },
    position: { x: 0, y: 0 },
  },
];
const initialEdges = [];
const onLoad = (reactFlowInstance) => {
  reactFlowInstance.fitView();
};

export default function MindNode() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const [name, setName] = useState("");

  const addNode = () => {
    setNodes((e) =>
      e.concat({
        id: (e.length + 1).toString(),
        data: { label: `${name}` },
        position: {
          x: Math.random() * window.innerWidth,
          y: Math.random() * window.innerHeight,
        },
      })
    );
  };

  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges]
  );

  return (
    <div id="container">
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        onLoad={onLoad}
      >
        <Controls />

        <MiniMap
          nodeColor={(n) => {
            if (n.type === "input") return "blue";

            return "#FFCC00";
          }}
        />
      </ReactFlow>
      <div>
        <input
          type="text"
          onChange={(e) => setName(e.target.value)}
          name="title"
        />
        <button type="button" onClick={addNode}>
          Add Node
        </button>
      </div>
    </div>
  );
}

上面的代码使用useEdgesState来管理边的状态，并使用useCallback定义onConnect来处理节点边（连接）的生成。之后，我们使用所需的边、事件处理程序和缩放和平移显示的控件来渲染一个ReactFlow组件。

保存和加载思维导图

在基于React Flow的应用中保存和加载思维导图是一个重要的功能，允许用户保存和恢复他们的工作。这个功能提高了您的应用的可用性和价值。

保存思维导图

保存思维导图时，您必须收集表示思维导图中节点和边的数据。这些信息应该被转换成可存储的格式，比如JSON。您可以利用元素的状态来捕捉思维导图的当前状态。导航到 src 文件夹并创建一个新文件 storage.jsx ，添加以下代码：

export const saveMindMap = (nodes, edges) => {
  const data = { nodes, edges };
  localStorage.setItem("mindMapData", JSON.stringify(data));
};

以上代码定义了 saveMindMap 函数，该函数将思维导图的数据，包括节点和边的信息，保存到浏览器的本地存储中。本地存储是一种在用户设备上存储少量数据的简单方法。

加载思维导图：

加载思维导图与保存相反。您获取保存的数据，反序列化它，然后使用加载的数据更新React Flow画布。要加载保存的思维导图，请将以下代码粘贴到您的 src/storage.jsx 中。

export const loadMindMap = () => {
  const data = localStorage.getItem("mindMapData");
  return data ? JSON.parse(data) : null;
};

上面的代码从本地存储中检索序列化数据，将其解析为对象并返回该对象。接下来，将以下函数导入到您的组件中，并使用它们来保存和加载思维导图：

import React, { useState, useCallback, useEffect } from "react";
import ReactFlow, {
  MiniMap,
  Controls,
  useNodesState,
  useEdgesState,
  addEdge,
  Background,
} from "reactflow";
import { saveMindMap, loadMindMap } from "./Storage";
import "reactflow/dist/style.css";

const initialNodes = [
  {
    id: "1",
    type: "input",
    data: { label: "Mind Map" },
    position: { x: 0, y: 0 },
    style: { border: "20px solid #9999" },
  },
];
const initialEdges = [];
const onLoad = (reactFlowInstance) => {
  reactFlowInstance.fitView();
};

export default function MindNode() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const [name, setName] = useState("");

  const addNode = () => {
    setNodes((e) =>
      e.concat({
        id: (e.length + 1).toString(),
        data: { label: `${name}` },
        position: {
          x: Math.random() * window.innerWidth,
          y: Math.random() * window.innerHeight,
        },
        style: { border: "10px solid #9999" },
      })
    );
  };

  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges]
  );
  const handleSaveClick = () => {
    saveMindMap(nodes, edges);
    console.log(nodes);
  };
  const handleLoadClick = () => {
    const loadedData = loadMindMap();
    if (loadedData) {
      setNodes(loadedData.nodes);
      setEdges(loadedData.edges);
      console.log(loadedData);
    }
  };

  const refreshPage = () => {
    window.location.reload();
  };
  // const nodeOrigin = [0.5, 0.5];
  const connectionLineStyle = {
    stroke: "#9999",
    strokeWidth: 3,
    
  };
  const defaultEdgeOptions = { style: connectionLineStyle, type: "mindmap" };

  return (
    <div id="container">
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        connectionLineStyle={connectionLineStyle}
        defaultEdgeOptions={defaultEdgeOptions}
        onConnect={onConnect}
        onLoad={onLoad}
      >
        <Controls />
        <Background variant="dots" gap={12} size={1} />
        <MiniMap
          nodeColor={(n) => {
            if (n.type === "input") return "blue";

            return "#FFCC00";
          }}
        />
      </ReactFlow>
      <div>
        <input
          type="text"
          onChange={(e) => setName(e.target.value)}
          name="title"
        />
        <button id="one" type="button" onClick={addNode}>
          Add Node
        </button>
      </div>
      <div>
        <button id="two" onClick={handleSaveClick}>
          Save Mind Map
        </button>
        <button id="three" onClick={handleLoadClick}>
          Load Mind Map
        </button>
        <button id="four" onClick={refreshPage}>
          Refresh
        </button>
      </div>
    </div>
  );
}

通过这些更改，您现在有一个用于保存当前思维导图数据的 handleSaveClick 函数，一个用于加载先前保存的思维导图数据的 handleLoadClick 函数，以及一个用于重新加载页面到其原始形式的 refreshPage 函数。

界面设计的样式化

我们的开发过程几乎完成了。让我们根据我们的特定需求来定制我们的设计。导航到 src/index.css 并替换以下代码：

body {
  margin: 0;
  background-color: #f8f8f8;
}
#container {
  height: 90vh;
  width: 100%;
}
input {
  border: 1px solid rgb(203, 186, 186);
  padding: 4px 8px;
  border-radius: 5px;
  font-weight: 700;
  background: transparent;
  height: 100%;
  color: #222;
}

input:focus {
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.25);
  pointer-events: all;
}
button {
  padding: 6px 8px;
  border-radius: 5px;
  border: none;
  background-color: #008cba;
  color: white;
}
button:hover {
  background-color: rgb(69, 69, 229);
}
input[type="text"] {
  padding: 8px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.react-flow {
  border: 3px solid #9999;
  border-radius: 10px;
}
/* .react-flow_nodes {
  color: #a02828;
} */
#two {
  background-color: #4caf50;
  margin: 5px;
}
#two:hover {
  background-color: #63c266;
}
#three {
  background-color: #f44336;
  margin: 2px;
}
#three:hover {
  background-color: rgb(190, 68, 68);
}
#four {
  background-color: rgb(86, 86, 6);
}
#four:hover {
  background-color: rgb(113,

测试

我们将进行一项测试，以了解我们的ReactFlow Mind应用程序的工作原理。

79b6ce50b1bc19cd018cc99a098b2bd3.png

请注意：您可以连接不同位置的节点，并且您还可以为每个节点指定一个期望的名称，以说明您的想法或项目。

结束

使用React Flow创建一个思维导图应用是一个有趣且多功能的项目，可以根据不同的用例进行调整，从头脑风暴会议到项目管理等等。在本指南中，我们已经涵盖了构建一个可工作的思维导图应用的重要步骤，例如设置开发环境，集成React Flow，修改节点外观，添加交互，并实现保存、加载和刷新功能。您可以根据需要添加更多功能和功能。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

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

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

相关文章

Go 上下文 context.Context

Go 上下文 context.Context

Go语言中的上下文&#xff08;Context&#xff09;是一种用于在 Goroutines 之间传递取消信号、截止时间和其他请求范围值的标准方式。context 包提供了 Context 类型和一些相关的函数&#xff0c;用于在并发程序中有效地传递上下文信息。 在Go语言中&#xff0c;上下文通常用于…
阅读更多...
DAY56 647. 回文子串 + 516. 最长回文子序列

DAY56 647. 回文子串 + 516. 最长回文子序列

647. 回文子串 题目要求&#xff1a;给定一个字符串&#xff0c;你的任务是计算这个字符串中有多少个回文子串。 具有不同开始位置或结束位置的子串&#xff0c;即使是由相同的字符组成&#xff0c;也会被视作不同的子串。 示例 1&#xff1a; 输入&#xff1a;"abc&q…
阅读更多...
在Rust编程中使用泛型

在Rust编程中使用泛型

1.摘要 Rust中的泛型可以让我们为像函数签名或结构体这样的项创建定义, 这样它们就可以用于多种不同的具体数据类型。下面的内容将涉及泛型定义函数、结构体、枚举和方法, 还将讨论泛型如何影响代码性能。 2.在函数定义中使用泛型 当使用泛型定义函数时&#xff0c;本来在函…
阅读更多...
MATLAB Simulink和S7-1200PLC MOBUSTCP通信

MATLAB Simulink和S7-1200PLC MOBUSTCP通信

MATLAB Simulink和SMART PLC OPC通信详细配置请查看下面文章链接： MATLAB和西门子SMART PLC OPC通信-CSDN博客文章浏览阅读749次，点赞26次，收藏2次。西门子S7-200SMART PLC OPC软件的下载和使用，请查看下面文章Smart 200PLC PC Access SMART OPC通信_基于pc access smart的…
阅读更多...
瑞吉外卖Day06

瑞吉外卖Day06

1.用户地址 1.1实体类 /*** 地址簿*/ Data public class AddressBook implements Serializable {private static final long serialVersionUID 1L;private Long id;//用户idprivate Long userId;//收货人private String consignee;//手机号private String phone;//性别 0 女…
阅读更多...
集软件库、论坛、社区、工具箱、积分商城、会员体系、在线商城一体的后台系统+HBuilderX 前端软件社区

集软件库、论坛、社区、工具箱、积分商城、会员体系、在线商城一体的后台系统+HBuilderX 前端软件社区

集软件库、论坛、社区、工具箱、积分商城、会员体系、在线商城等多个功能于一体的全面后台系统加上强大的HBuilderX前端软件社区&#xff0c;为用户提供了全面的应用开发和交流平台 企业猫提供了完善的后台搭建服务&#xff0c;通过该服务&#xff0c;用户可以方便地搭建出所需…
阅读更多...
关于FreeRTOS函数xSemaphoreGiveFromISR卡死的问题

关于FreeRTOS函数xSemaphoreGiveFromISR卡死的问题

0. 概述 关于FreeRTOS函数xSemaphoreGiveFromISR卡死的问题 1. 遇到的问题 在使用FreeRTOS调试激光雷达检测面积的项目的时候&#xff0c;遇到一个现象&#xff1a;在新加了一个线程之后&#xff0c;把程序下载到板子之后程序不会运行&#xff08;实际上已经运行了&#xff…
阅读更多...
C语言二进制数（ZZULIOJ1068:二进制数）

C语言二进制数（ZZULIOJ1068:二进制数）

题目描述 将一个二进制数&#xff0c;转换为对应的十进制数。 输入&#xff1a;输入一个只含有’0’和’1’的字符串&#xff0c;以回车结束&#xff0c;表示一个二进制数。该二进制数无符号位&#xff0c;长度不超过31。 输出&#xff1a;输出一个整数&#xff0c;为该二进制数…
阅读更多...
【C语言期末不挂科——指针篇1】

【C语言期末不挂科——指针篇1】

C语言指针初阶 文章目录 C语言指针初阶**什么是指针&#xff1f;**   **1&#xff09;初识指针**  **2&#xff09;地址的大小**  **3&#xff09;指针变量** **指针的类型**   **1)指针对整数加减运算**  **2&#xff09;指针的解引用** **野指针**  **1&#xff…
阅读更多...
linux使用spi读取icm20608传感器数值一直显示0

linux使用spi读取icm20608传感器数值一直显示0

1.这个问题困扰了我两天&#xff0c;把下面这些uart2相关引脚屏蔽掉也不行&#xff0c;ICM20608 ID 读出的数值一直为 0X0 pinctrl_flexcan2: flexcan2grp{ fsl,pins < /* MX6UL_PAD_UART2_RTS_B__FLEXCAN2_RX 0x1b020*/ /* MX6UL_PAD_UART2_CTS_B__FLEXCAN2_TX 0x1b020*/…
阅读更多...
关于Ultra HDR Image的那些事

关于Ultra HDR Image的那些事

一、什么是Ultra HDR Image 2023年10月初&#xff0c;google正式发布了Android 14。该版本中引入了一个新的功能Ultra HDR Image&#xff0c;被誉为”图像技术的未来”。之前Android版本各手机厂商或许有自己的HDR图片技术&#xff0c;本文这里重点分析下Android14上google的实…
阅读更多...
JavaScript 浮点数运算的精度问题及解决

JavaScript 浮点数运算的精度问题及解决

JavaScript 浮点数运算的精度问题及解决 在 JavaScript 中整数和浮点数都属于 Number 数据类型&#xff0c;当浮点数做数学运算的时候&#xff0c;你经常会发现一些问题&#xff0c;举几个例子&#xff1a; 0.1 0.2 0.30000000000000004 console.log(0.1 0.2) 0.3000000…
阅读更多...
springcloud新闻发布系统源码

springcloud新闻发布系统源码

开发技术&#xff1a; jdk1.8&#xff0c;mysql5.7&#xff0c;nodejs&#xff0c;idea&#xff0c;vscode springcloud springboot mybatis vue elementui 功能介绍&#xff1a; 用户端&#xff1a; 登录注册 首页显示搜索新闻&#xff0c;新闻分类&#xff0c;新闻列表…
阅读更多...
VS+Qt+C++ Yolov8物体识别窗体程序onnx模型

VS+Qt+C++ Yolov8物体识别窗体程序onnx模型

程序示例精选 VSQtC Yolov8物体识别窗体程序onnx模型 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《VSQtC Yolov8物体识别窗体程序onnx模型》编写代码&#xff0c;代码整洁&#xff0c;规…
阅读更多...
【Hello Go】Go语言工程管理

【Hello Go】Go语言工程管理

工程管理 工作区工作区介绍GOPATH设置 包自定义包main包main函数和init函数导入包点操作别名操作_操作 测试案例GOPATH配置go install使用 在我们实际的工作中 直接运用到编译器进行编译链接的场景少之又少 这是因为 在工程中不会只有一个源文件 并且源文件之间也有着相互依赖…
阅读更多...
java学习part05

java学习part05

43-流程控制-使用Scanner类从键盘获取数据_哔哩哔哩_bilibili 1.接收输入 步骤 例子 2.生成随机数 3.switch-case 4.for 5.while
阅读更多...
IDEA插件下载到本地

IDEA插件下载到本地

IDEA插件下载到本地 官网下载【点击跳转】
阅读更多...
基于DE10-Standard Cyclone V SoC FPGA学习---开发板简介

基于DE10-Standard Cyclone V SoC FPGA学习---开发板简介

基于DE10-Standard Cyclone V SoC FPGA学习---开发板简介 简介产品规格基于 ARM 的 HPS配置与调试存储器件通讯连接头显示器音频视频输入模数转换器开关、按钮、指示器传感器电源 DE10-Standard 开发板系统框图Connect HTG 组件配置设计资源其他资源 简介 开发板资料 见 DE10-…
阅读更多...
rv1126-rv1109-openssh

rv1126-rv1109-openssh

这是一个工具&#xff0c;可以通过ssh远程登录来操作&#xff0c;非常逆天&#xff01; 于是rv1109代码自身自带有openssh 所以只需要打开config即可 diff --git a/buildroot/configs/rockchip_rv1126_rv1109_spi_nand_defconfig b/buildroot/configs/rockchip_rv1126_rv1109…
阅读更多...
Pytorch plt.scatter()函数用法

Pytorch plt.scatter()函数用法

一.scatter&#xff08;&#xff09;函数的定义 matplotlib.pyplot.scatter(x, y, sNone, cNone, markerNone, cmapNone, normNone, vminNone, vmaxNone, alphaNone, linewidthsNone, vertsNone, edgecolorsNone, *, dataNone, **kwargs) 特征值作用x&#xff0c;y绘制散点图…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023