Light

mongkii / rmind Goto Github PK

View Code? Open in Web Editor NEW

641.0 22.0 96.0 3.05 MB

基于 React Hooks 与 flex 布局，实现了大部分功能的思维导图。 / An almost-full-function Mindmap web app developed with only React Hooks and flex layout.

License: GNU General Public License v3.0

HTML 1.29% JavaScript 74.21% CSS 24.51%

rmind's Introduction

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 格式的思维导图
将导图保存为图片
切换主题

演示

拖拽操作

键盘操作

切换主题

操作方式

鼠标操作

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

键盘操作

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

编辑文字状态下：

功能	按键
取消	`Esc`
确认	`Enter`

下一步计划

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

致谢

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

rmind's People

Contributors

Stargazers

Watchers

Forkers

libin1991 owen800q torns liuxsen jiuyuehe llj2019 olachan wsf1990 hqdmyjsw mityburner ganjin2008 forkrep killvxk zouxiaochaun amoyyean shuoqiu ivu4e lllleeo cxqeric jackwiy qinshenxue williamchai seejser hhy5277 lxg1582 admccc iluzhangkun darling006 swardshadow jessguo gjwwww rehorn qingliuquanxia braveheartcms liuweijie29 zohner hdwzous liudonghua123 migodev42 kuiyouli warriorml diysoho minggen shimaomao sdutjava1604 edisonhuxi lessalpha gpsbird joysenlong imloama landskya robertmain53 kangofchen xiaoyanit yangjourney swimmerrcd williamnie dannyh79 shuaxindiary three-musketeers-group chmodawk takeramagan xingdongyu1994 invalidz pangyiming jiaolongshenme sumnus00 cl1069573062 h2t0327 xpbb viridianfairy lijiahao8898 core-admin bloodclaster territoryfan yanmeiyang kanjifeng qingzhu0214 zhuxiangming666 xiehengjian yujingui98 msimonblowsnow666 coder-hdy mabing2637 jxtreehouse fbi-tool kiko-honghua chisbug wxlvip homelee jcjhot zackiss threem0126 meditator118 li-kuaile joncv

rmind's Issues

每个小框可以自定义吗比如可以加操作按钮什么的

feature 可以有优雅的曲线

只是一个提议。类似于imindmap的曲线，并且可以拖动到任意位置。

棒

棒棒哒 😘

发现这个厉害了，继续加油，期待更新

看样子楼主好像没借助什么其他的库来实现了这些功能，确实厉害~

同类型的经典的库，比如阿里的 G6，D3.js 等~

希望作者可以把预览和编辑模式做个区分，然后预览模式下可以自由放大缩小和拖动，这样就比较完美了。

加油，期待更新~ 哈哈哈~

请问一下项目运行不了是什么原因，clone项目，npm install之后一直报react-scripts的错

请问这个项目有在npm上发布吗我想在我的项目里使用这个功能该怎么实现呢

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.