1.0.0 • Published 2 years ago

wk-rmind v1.0.0

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

RMind

RMind = React + Mindmap

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

An almost-full-function Mindmap web app developed with only React Hooks and flex layout.

在线演示:RMind Demo

📄 示例用导图文件

特点

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

支持

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

演示

  • 拖拽操作

npm.io

  • 键盘操作

npm.io

  • 切换主题

npm.io

操作方式

鼠标操作

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

键盘操作

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

编辑文字状态下:

功能按键
取消Esc
确认Enter

下一步计划

  • 自定义主题
  • 布局在紧凑/宽松间切换
  • 大纲等其他导图样式
  • Minimap + 导图缩放
  • 优化 Hooks 使用,避免不必要的渲染

致谢

项目中使用的 iconfont 来自 Zwicon,一款精美且免费的图标库。