过去半年,我们给这个开源的思维导图带来了这些新功能

距离上一篇推荐的文章我开源了一个思维导图已经过去了半年以上,这期间很多数据已经发生了改变,大致如下:

1.star数量由不到500,增加到2300+

2.issue数量由100+增长到500+

3.贡献者数量由5人增长到16人;

4.交流群人数由100+增长到300+

5.npm下载数量由11000+增长到21000+

还记得那时定的一个大目标是star数量能到1000,没想到后面很快就实现了,这从一定程度上也证明了这个项目是有意义的,也给我持续维护带来了动力。

早期的定位是做一个框架无关的js库,目前是库+软件,开发者可以基于它快速实现思维导图产品,目前应该已经有一些公司和商业项目上使用了,非开发者则可以完全把它当做一个独立的单机软件使用,可以在线使用也可以下载客户端,界面简洁而功能丰富,足以代替一些收费的思维导图产品。

是的,这是一个MIT协议的开源软件,无论个人还是公司,是否商用都不收费,当然,为爱发电可能不会太持久,毕竟大家都知道,有些爱是会消失的。所以在接收赞助的基础上,目前在尝试做一些收费的插件。

如果你是第一次看到这个项目,那么可以现在就去体验一下:

在线地址:wanglin2.github.io/mind-map/#/

仓库地址:github.com/wanglin2/mi...

过去一年,基本保持着每周更新一个版本的节奏,所以修复和新增了非常多的功能,下面介绍的仅是其中一些比较大的改变,更详细的变更记录可以移步:changelog

1.导出图片

导出图片功能经历了非常多的坎坷,实现由img标签+canvas导出到使用html2canvas库导出,再到使用dom-to-image库导出,但是这些库始终都不完美,最终机缘巧合的解决了img标签+canvas导出的问题后又回到了最初的方式,这个过程也通过一篇文章记录下来了,有兴趣的可以阅读:探索如何将html和svg导出为图片

2.导出pdf

导出pdf之前一直使用的是jsPDF库,但是这个库问题比较多,导出文件的尺寸比较大,打开时经常花屏,这些问题一直选择性忽视,然后后来就被人喷了:

再加上群友也一直反馈,所以后面换成了pdf-lib库,这个库相对来说会更好一点,但是偶尔也存在导出内容丢失的问题。目前实在是没啥好办法,有用过其他更好的库的朋友欢迎留言。

3.修改了图标的选择界面,增加了贴纸,其实就是图片,另外点击节点内的图标会显示一个图标快捷替换和删除的悬浮面板,操作会更方便:

4.新增了很多主题,主题也分成了几种类型,另外也支持了暗黑模式,如果使用的是暗黑主题,界面会同步切换:

5.支持了全屏编辑大纲,支持在大纲里拖拽移动节点和删除节点,当然,目前大纲的编辑体验还远远不够好:

6.节点图片支持拖拽调整大小,新增了删除按钮,不用再打开弹窗删除:

7.支持粘贴用户剪切板中的数据,所以可以跨页面,跨浏览器来粘贴数据,也可以粘贴你从其他地方复制的文本和图片:

8.配置界面中一些配置由不直观的文字改为了图形效果,方便看到每一种配置的效果和区别:

9.新增了滚动条的功能,也支持将思维导图限制在画布内,防止被拖出画布后找不到的问题:

10.关联线支持编辑文本了,另外在其他贡献者的支持下,关联线端点的位置也可以跟随鼠标拖拽而变化:

11.新增了鼠标移动到节点上的hover效果,激活样式也修改了,不再支持修改节点激活样式,使用更简单,也提升了性能:

12.优化了节点的拖拽功能,对各种结构都进行了适配,拖拽时鼠标移动到画布边缘时画布会自动移动:

13.全面支持了同时对多个节点的各种操作,比如同时拖拽多个节点,同时给多个节点添加子节点兄弟节点,同时复制剪切多个节点等等:

14.因为节点富文本编辑是使用quill库实现的,而它内置支持KaTeX,所以使用KaTeX增加了插入数学公式的功能:

15.得益于yjs库的强大和易用,也给思维导图做了一个协同编辑的插件,当然,这需要后端支持,所以只提供给开发者使用:

如果想了解更详细的实现过程,可以参考这篇文章:两天实现思维导图的协同编辑?用Yjs真的可以

16.支持了对同一个节点的部分子节点添加概要,鼠标移入概要会高亮其所属节点。概要功能是一个非常复杂的功能,由于能力有限,概要的功能目前只能做到这个程度,不会支持在概要节点后面继续插入节点。

17.节点连线支持显示箭头,直线连接方式支持配置圆角大小:

18.使用rough库支持了手绘的风格,这就是前面说的收费插件,当然普通用户不需要付费,可以直接使用,仅针对开发者,不过,到目前为止并没有人购买:

以上就是这半年多带来的主要更新点,如果你觉得还可以,一定要体验一下,如果能再给个一键三连,那么我们就是过命的好朋友了。

相关推荐
@解忧杂货铺1 小时前
前端vue如何实现数字框中通过鼠标滚轮上下滚动增减数字
前端·javascript·vue.js
F-2H3 小时前
C语言:指针4(常量指针和指针常量及动态内存分配)
java·linux·c语言·开发语言·前端·c++
gqkmiss4 小时前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
_oP_i4 小时前
Pinpoint 是一个开源的分布式追踪系统
java·分布式·开源
m0_748247556 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255026 小时前
前端常用算法集合
前端·算法
真的很上进6 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203987 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2347 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1238 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python