MindSpace – A HTML5 Mind Map Demo

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

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

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

MindSpace - mind map requierment

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

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

MindSpace - 55th Grammy Mind Map

以下是整体的界面。

MindSpace UI

“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 版本,渲染上可以自己做很多控制。



发表评论?

0 条评论。

发表评论