MindSpace – A HTML5 Mind Map Demo | 山那畔别有人家

MindSpace – A HTML5 Mind Map Demo

作者: zhangxiang 日期: 2013 年 5 月 15 日 发表评论 (0) 查看评论 3,533 次阅读

1

Try the demo.
Resource in Github: https://github.com/pyzhangxiang/mindspace

用过好些思维导图软件，都不太能满足我的需求，所以想自己做一个。下面是我想要的。

1 连接上可以写字
2 连接上可以挂节点

原来的想法是做成 3D 的，所有节点连接起来像宇宙的星图一样，如果能做得和 google 的 100000 Stars 那样，必然是极美的。当时也找了些 js 的 3D 引擎，比如 three.js 等，不过鉴于时间原因，还是先弄个 2D 的玩玩。

我使用 Graph Dracula 做底层的图形库，写了自己的 renderer ，并做了思维导图的交互逻辑。工具栏等 UI 使用 jQuery UI 。下图是我做的第55届格莱美获奖情况的图。

以下是整体的界面。

“Add Text Node” 添加文字节点。 Label / Src 文本框中填写文字，点击 “submit” ，节点中就会显示相应的文字。
“Add Image Node” 添加图片节点。 Label / Src 文本框中填写图片 URL ，点击 “submit”，若 URL 正确，节点中会显示该图片。
“ToBack” 当前选中节点下移一层。
“ToFront” 当前选中节点上移一层。
“redraw” 重绘全图。
“Get Graph” 将思维导图导出成 json 字符串，结果在 graph 文本框中。
“Reset Graph” 根据 graph 文本框中的 json 字符串生成思维导图。
“shift+鼠标滚轮” 缩放画布。

拖动 “节点D” 到 “节点B” 或者 “连接C” 上， “节点B” 或 “连接C” 会高亮，此时放开鼠标，则 “节点D” 就会挂在 “节点B” 或 “连接C” 上

这个 Demo 还有很多细节没有去处理，比如窗口的缩放。而由于 HTML5 的本地文件系统用起来比较麻烦，也没有去做（我自己就是把导出的 json 复制到 evernote 中保存的）。

我没有继续做完善的最重要的原因在于，当节点较多时，浏览器的渲染效率就跟不上了，所以这东西并不适合做成真正的产品，权当是个玩具把。若是以后有时间，做个 3D 版本，渲染上可以自己做很多控制。