awehook

本系列旨在分享在开发思维导图库blink-mind 和blink-mind-desktop 时技术选择的一些经验。 在使用react开发强交互app或者类库时，选择什么样的框架或者数据结构进行状态管理无疑是非常重要的。常见的状态管理框架有redux, mobx。状态管理库通常配…

BlinkMindDesktop 是基于BlinkMind 开发的一款思维导图和大纲笔记App。目前预览版在github上开放下载。

该拓扑图会作为该topic的一个附件。 之前基于blink-mind这个库写了一个vscode的思维导图扩展vscode-blink-mind,反响还挺不错的，并且得到了掘金开源精选编辑的推荐，上了掘金的优秀开源推荐。blink-mind这个库是支持以插件的方式进行扩展功能的，…

之前开源的思维导图库blink-mind的框架基本上写完了。正所谓轮子搞定了，不造出辆车出来溜溜弯怎么行呢，不然怎么知道这轮子是否好使呢。 于是做了这么个vscode的思维导图扩展，验证下这个库的可用性，另外确实工作中也会用的到这个扩展，后面也会一直投入时间去维护这个插件，让这…

在UI组件库的过程中，有一个经常会考虑到的问题是，使用者在使用这个UI库的过程中，可能不满意库默认提供的表现和行为，需要对默认的表现和行为进行自己的定制。 评价一个库是否好用的一条标准是可扩展性。 评价一个库可扩展性是否优秀的一个很重要的原则是：通过增加代码来实现新功能或者改变…

这个项目用到了我开发的思维导图类库blink-mind,支持以插件的方式定制任何想要的需求。 思维导图节点的文本编辑器是基于slate的富文本编辑器，类似于medium的编辑体验。 2. 移动整个画布 3. 节点之间可以通过拖动移动位置

在用Javascript 或者 Typescript 开发web组件库（library）的过程中，如果想写一个使用这个库的示例（demo)。这个demo的代码结构用什么方式来进行组织呢。我看了很多知名开源项目的代码，不同的项目对于这块代码的组织，我总结了以下，大致上有以下几种：…

因为思维导图的布局方式我选用的是Flex 布局，SVG元素可以像操作普通DOM 节点一样进行操作，使用SVG 方案的话，可以把每两个NodeWidget之间Link单独用一个SVG元素来表示，一个NodeWidget有多少个子元素，这个NodeWidget的children中就…

对于HTML5 Drag && Drop API 不熟悉的同学，可以先看下这篇文章，HTML5原生拖拽/拖放 Drag & Drop 详解。本文记录我在使用React框架在实现Drag && Drop 效果时所踩的坑。 在开发思维导图组件的时候，需要实现拖拽思维导图中的一个节点…