集成基于 KityMinder Editor 的桌面版脑图(附代码)

前提概要

我们项目是一款企业级办公平台软件。某一天，我接到一个需求：在项目中集成脑图功能。

脑图功能？我第一反应，首先想到了Xmind。Xmind是一款很优秀脑图软件，受众也广。我们要做脑图功能，该何去何从？

首先，产品分析。我开始研究市面上的脑图产品，像Xmind、FreeMind、MyMind、jsMind、KityMinder等等 等等。这些产品各有优势，但是论开发难度，KityMinder还是相对简单些，并且使用起来也简单些。

其次，用户定位。什么样的人会使用我们的产品？

1、借助项目的平台优势

2、使用上的简单、快捷

3、对主流脑图格式的支持

综上，脑图功能就开发起来了。

设计开发

1、还没开发就遇到了一个问题：

项目是由 VUE 开发的，而 KityMinder 是基于 AngularJS，二者怎么结合？重写KityMinder 费时费力不可取，那怎样在不重写的前提下完美的结合？

1、既然在前端框架上做不了手脚，那就在其他地方。

首先脑图的开发独立出来，不在项目上直接开发，我们新建一个项目，叫做模块脑图。

模块脑图使用了：javascript、bower、gulp。它的作用很简单就是产生 dist 文件。

模块脑图项目架构

2、开始做手脚，我选中了 electron、webpack。

因为项目使用了 electron、webpack。一切都那么恰到好处，正好被我利用上。

模块脑图与项目结合的框架

我用 elelctron 为模块脑图新开一个窗口。

electron 新开窗口代码

小改一下 webpack ，将模块脑图产生的 dist 文件打包到项目的 dist 文件里。

忽略 webpack 默认打包清空 mindMap 文件

整体 dist 文件结构

整体集成就 OK 了，这样的话就可以无影响的让项目和模块脑图打包上线。

2、这时，我遇到了第二个问题，Mac 下的菜单问题。

项目的菜单是在 electron 主进程里的，为了方便集成，我把模块脑图的菜单写进了渲染进程里，这样会导致在 Mac 下菜单覆盖问题。唉，脑壳疼，只能选择一种折中的手段。

菜单切换

这样，整体上的开发、集成工作就完成了。

脑图完成版

3、然后呢，开始解决第三个问题，支持 Xmind 导入导出。

xmind 文件实质上是一个压缩文件，就是说： *.xmind 文件可以重命名为 *.zip 文件，然后再把 zip 文件解压，就得到了各种文件夹和原始 xml 文件。

有修订的 xmind 文件

没有修订过的文件

正常情况下，一个 xmind 文件包括：META-INF、Thumnails、content.xml、meta.xml、styles.xml。如果该 xmind 文件有修改过，会存在 Revisions ，里面存在的是历史修订文件。

META-INF：信息源文件夹，里面包含 manifest.xml 文件。而 manifest.xml 文件类似于清单，里面是记录了各个文件，内容基本固定。

没有修订的 manifest.xml 文件

有修订的 manifest.xml 文件

Thumnails：缩略图文件夹，里面是脑图的 png 文件。这里就不展示图片了，类似于脑图的截图。

meta.xml：信息原文件，里面包含了作者、Email、创建时间、创建工具、 工具 版本、初始坐标位置、背景等，内容信息格式固定。

meta.xml

styles.xml：样式文件，保存了 xmind 样式和主题等。

content.xml： 内容文件，里面存储了脑图骨架的内容、格式。也是接下来我们重点介绍的模块。

content.xml

xmind 画布有三种主题：中心主题(attached)、自由主题(detached)、概要(summary)。

一般的 xmind 只使用了中心主题。

xmind 画布主要内容是在 sheet 里面，主要显示内容是在 sheet 下面的 topic 里面。topic 下包含 title 和 children ，这个 title 就是中心主题的 title 也是整个画布的 title。children 里面topics 记载着你使用主题的种类。topics 里面又是 topic ，这个 topic 就是每个主题种类的树状图，后面的就是去迭代这些树状图。

导入：就是将 content.xml 文件遍历，产生 json 格式内容，转换成 kityMinder 的 .km 文件。

导出： 就是将 json 格式内容，转换成 content.xml 文件，然后加上其他的 xml 文件和文件夹，压缩、重命名，产生相应的 .xmind 文件。

结束

以上就是项目集成脑图的架构和关键点，后续我们进行了一些优化和改进，使其有更好的用户体验。后期我们会继续基于KityMinder做基于s3接口的网盘的集成，欢迎大家持续关注。

代码地址: https://github.com/openitsystem/naotu

如果有什么疑问或者想交流的地方可以在github提issue或者联系:ctmo737qi#126.com

感谢！