用 flex 布局和 React Hooks 实现一个思维导图

栏目: 服务器 · 发布时间: 1年前

来源: juejin.im

内容简介:学习 React 时做的练手项目,基于纯 Hooks 和 flex 布局实现的思维导图。项目地址:在线演示:RMind Demo

本文转载自:https://juejin.im/post/5cdbb6b2f265da03761eaeef,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

学习 React 时做的练手项目,基于纯 Hooks 和 flex 布局实现的思维导图。

项目地址: RMind ,喜欢的话还请点个 star,谢谢啦~ :wink:

在线演示:RMind Demo

介绍

Hooks

所有组件都是函数组件,由 Hook 实现事件、状态等的管理。除了 useStateuseEffect 等基本操作外,还实现了:

  • 利用 useReduceruseContext 的结合,代替 Redux 进行全局状态管理。
  • 将一些重复的 Hook 操作,合并为自定义 Hook 以复用。

flex

项目中第一个实现的功能是思维导图的绘制,当时图省事没有使用 canvas 或 SVG,而是将导图节点作为 DOM,用 CSS flex 布局。

后来发现这样算是给自己挖了个坑,绘制节点连接线时还是绕不开 canvas,而且因为要获取节点 DOM 的 offset 参数,反而显得有些繁琐。

不过正因为节点是 DOM,调用 DOM 的 api,很轻易就实现了拖拽功能。最初构想时以为这会是项目里的难点。

数据结构

思维导图数据结构使用多叉树实现,通过 DFS 进行文件的读写和节点查找。

后来想过用平级结构存储,渲染时根据每个节点保存的子节点 ID 信息,实时构建一棵树出来,可能效率还高一点,不过因为懒就没再深入研究。

不足

一开始想的是做个基本的增删改就行,做着做着快捷键加上了…主题加上了…撤销重做加上了。 context 越写越大,带来了一些组件的重复渲染问题。不过本地测试时还挺流畅,就先搁置不解决了:stuck_out_tongue_closed_eyes:

本人经验能力有限,写的代码可能不够美观,可能藏了很多 bug(虽然自己已经抓出来了很多…)。希望各位高手能不吝赐教~

话不多说,下面放上项目简介

RMind

基于 React Hooks 与 flex 布局,实现了大部分功能的思维导图。

特点

  • 完全使用 React Hooks 开发,所有功能均由箭头函数实现
  • 用 flex 布局完成思维导图排版,唯一用到 canvas 的地方是绘制节点连接线

支持

  • 节点的增删改等基本功能
  • 拖拽操作
  • 撤销/重做
  • 导入及导出 .km(百度脑图) .md(Makrdown) .txt 格式的思维导图
  • 将导图保存为图片
  • 切换主题

演示

  • 拖拽操作
用 flex 布局和 React Hooks 实现一个思维导图
  • 键盘操作
用 flex 布局和 React Hooks 实现一个思维导图
  • 切换主题
用 flex 布局和 React Hooks 实现一个思维导图

操作方式

鼠标操作

  • 单击选中节点
  • 双击编辑节点文字
  • 拖拽移动节点

键盘操作

功能 按键
切换所选节点 / / /
添加子节点 Tab
添加兄弟节点 Enter
删除节点 Backspace / Delete
修改节点文字 F2
切换显示子节点 Space
撤销 Cmd/Ctrl + Z
重做 Cmd/Ctrl + Shift + Z

编辑文字状态下:

功能 按键
取消 Esc
确认 Enter

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

关注码农网公众号

关注我们,获取更多IT资讯^_^


为你推荐:

相关软件推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数值方法和MATLAB实现与应用

数值方法和MATLAB实现与应用

拉克唐瓦尔德 / 机械工业出版社 / 2004-9 / 59.00元

本书是关于数值方法和MATLAB的介绍,是针对高等院校理工科专业学生编写的教材。数值方法可以用来生成其他方法无法求解的问题的近似解。本书的主要目的是为应用计算打下坚实的基础,由简单到复杂讲述了标准数值方法在实际问题中的实现和应用。本书通篇使用良好的编程习惯向读者展示了如何清楚地表达计算思想及编制文档。书中通过给读者提供大量的可直接运行的代码库以及讲解MARLAB工具箱中内置函数使用的数量方法,帮助......一起来看看 《数值方法和MATLAB实现与应用》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

SHA 加密
SHA 加密

SHA 加密工具