【electron】自制思维导图软件

前言

• 花了几天时间利用electron+react+自制组件库+g6完成了这个自制思维导图软件，感觉做起来还是蛮好玩的。
• 总结下这个功能与技术要点，做完不总结就跟没写这玩意一样。
• 首先放个软件界面截图：
  

功能与技术要点

• 图的功能主要是利用G6，因为最近珠峰搞了个G6训练营，然后玩了下，觉得G6最大特色就是图会动，所以拿这个做来玩下。

• 导出图片使用的g6已经提供的api，所以非常方便。

• 保存数据和导出数据利用g6的save再加上fs的一些操作就Ok。

• 左边部分都是文件，需要文件与数据相关联，也是fs的一些操作。重命名，新增，保存，导入都是这样。

• 持久化部分使用的是electron-store，对左边列表数据以及保存文件的设置进行持久化。
  

• 更新部分使用electron-updater，当github有新版本时，打开软件会询问更新，并且进行下载。

• ui使用的是我自制的bigbear-ui，开发的时候发现组件库功能简化了还是不行。。。很多时候还是不太好用，还得再改改，并且还得暴露更多配置和接口。我自制的另一款组件库使用styled-components，写到后面越写越感觉好用，我都想用styled-components把我的这个bigbear-ui组件库给重构了。

• 快捷键方面，使用electron自带的注册事件完成。

使用说明

• 默认模式可以拖拽缩放移动画布，点击节点可以收缩或者编辑它，会有编辑窗口出现，修改编辑窗口即可修改对应的节点。
• 添加模式可以拖拽缩放移动画布，点击节点可以往点击的节点下面增加孩子。
• 删除模式可以拖拽缩放移动画布，点击节点可以删除点击的节点。
• 左边的列表，点击列表，右边的图会自动读取点击列表的文件的数据，更新显示。
• 左边列表还有2个图标，一个是重命名，一个是删除。重命名会修改文件名，这里为了省事，重命名是同步修改，并不是点击勾才确认修改。
• 如果修改了图请注意保存，否则数据没写入文件里。保存加入了快捷键，就是ctrl+s。
• ctrl+n为新建文件。
• ctrl+i为导入文件。
• 操作简单录了个gif：
  

下载地址

• github上源代码和下载地址
• 如果觉得github比较慢的我放到网盘上，同时提供机器学习脑图的样例文件。
• 链接：https://pan.baidu.com/s/1Owty0aRTg3Uo0LraEdhWXA
  提取码：j13a
• 只支持64位windows，mac的话可以clone我的代码，安装完毕后npm run dist即可生成mac下安装包，或者使用npm run pack生成绿色免安装版。