基于 Canvas 技术,使用 Janvas 封装库实现的 XMind 的核心功能。
功能 | 描述 | 快捷键 |
---|---|---|
新增子节点 | 新增一个节点到当前节点右侧 | Tab |
向下新增节点 | 新增一个节点到当前节点下侧 | Enter |
向上新增节点 | 新增一个节点到当前节点上侧 | Shift+Enter |
新增父节点 | 新增一个节点到当前节点左侧 | Ctrl+Enter |
删除节点 | 删除当前节点及其子节点 | Delete|Backspace |
选择节点 | 选择待操作的目标节点 | ↑|←|↓|→ |
选择多节点 | 选择多个待操作的目标节点 | Ctrl+↑|←|↓|→ |
移动节点 | 移动目标节点到附近位置 | Shift+↑|←|↓|→ |
剪切节点 | 复制并删除当前节点 | Ctrl+x |
复制节点 | 复制节点内容 | Ctrl+c |
克隆节点 | 复制节点内容为 Markdown 并粘贴 | Ctrl+d |
粘贴节点 | 粘贴节点内容 | Ctrl+v |
伸缩节点 | 展开或收缩目标节点 | Ctrl+e |
回退操作 | 编辑模式下将操作回退 | Ctrl+z |
前进操作 | 编辑模式下将操作前进 | Ctrl+y|Ctrl+Shift+z |
全选节点 | 全选当前未收缩节点 | Ctrl+a |
定位节点 | 将焦点转移回到根节点 | Ctrl+q |
打开文件 | 打开文件为思维导图 | Ctrl+o |
保存文件 | 保存思维导图为文件 | Ctrl+s |
导出图片 | 保存思维导图为图片 | Ctrl+Shift+s |
TIPS: Ctrl+Delete 可以仅删除单节点而保留子节点
TIPS: 多节点操作当前只支持 Ctrl+Enter
- 主打性能和效率,支持流畅处理数以万计的节点
- 因为 Janvas 从底层绘制,仅含一个
<canvas> dom
- 采用事件代理的方式处理所有事件,占用极低,各方面效率比 XMind 高出一到两个数量级(不好意思说三个数量级)
- 因为 Janvas 从底层绘制,仅含一个
- 可以直接本地运行
.html
作为单机应用使用 - 可以运行在
https
页面,便于浏览器剪切板权限的需要:- 引入
xmind.js
,仅需页面提供一个id="app"
的<div>
即可
- 引入
- 鼠标:
- 左键框选节点
- 右键拖曳全部节点
- [Shift]滚轮滚动界面
- 如果用的是
MacOS
,快捷键的Ctrl
应该都以Command
键代替 - 这个的开发全都是用原生
ES5 JavaScript
写的,有兴趣的可以看看,反正 MIT 随便造就完事了 - 感谢 star,mua~