Learn React – mind map based on pure Hooks and Flex layout

Project address: RMind, if you like, please click star, thank you ~ 😉

Online Demo: RMind Demo

introduce

Hooks

All components are functional components, and hooks manage events, state, and so on. In addition to useState, useEffect and other basic operations, it also implements:

  • usinguseReducer 和 useContextTo replace Redux for global state management.
  • Merge some repetitive Hook operations into custom hooks for reuse.

flex

The first function realized in the project was the drawing of mind map. At that time, the map did not use Canvas or SVG, but took the map node as DOM and used CSS Flex layout.

Later, I found that I dug a hole for myself by doing this. When drawing the node connection line, I still could not open the canvas, and it was a little tedious to obtain the offset parameter of node DOM.

But because the node is a DOM, the API that calls the DOM makes it easy to implement drag and drop. This was initially conceived as a difficulty in the project.

The data structure

The mind map data structure is realized by multi-fork tree, and files are read and written and nodes are searched by DFS.

Later, I thought about using the hierarchical structure for storage and building a tree in real time according to the child node ID information saved by each node during rendering. It might be a little more efficient, but I didn’t do further research because I was lazy.

To optimize the

  • When I looked at the traffic on the console, I found that the “export feature” page cost 60K, which was half of the total load traffic. Considering that this feature is not turned on frequently, it is encapsulated as a lazy-loaded component with react. lazy.

  • Using useMemo to encapsulate variables reduces unnecessary rendering.

insufficient

At first, I wanted to do a basic add, delete, and change, and do the shortcut keys to add… The theme was added… Undo redo added. The larger the context is, the more it is rendered, the more it is rendered. However, when the local test is very smooth, it is not solved 😝

My experience is limited, the code may not be beautiful, and there may be a lot of bugs hidden (although I have caught many of them…). . Hope every master can give advice ~

Without further ado, here is the project introduction

RMind

RMind = React + Mindmap

Mind mapping for most functions based on React Hooks and Flex layouts.

The characteristics of

  • Developed entirely using React Hooks, all functions are implemented by arrow functions
  • Use Flex layout to complete mind map layout, the only place to use canvas is to draw the node connection line

support

  • Add, delete, change and other basic functions of nodes
  • Drag and drop
  • Undo/redo
  • Km (Baidu brain Map). Md (Makrdown). TXT format of mind map
  • Save the map as a picture
  • Switch the theme

demo

  • Drag and drop

  • keyboard

  • Switch the theme

Mode of operation

The mouse operation

  • Click select node
  • Double-click to edit the node text
  • Drag and drop to move a node

keyboard

function The keys
Switches the selected node write/left/please/-
Adding child Nodes Tab
Adding sibling Nodes Enter
Remove nodes Backspace/Delete
Modifying the node text F2
Toggle to display child nodes Space
undo Cmd/Ctrl+Z
redo Cmd/Ctrl+Shift+Z

Edit text state:

function The keys
cancel Esc
confirm Enter

The project address

RMind, if you like, please click a star, thanks ~ 😉

Online Demo: RMind Demo