本文要实现的插件是： 给思维导图添加拓扑图编辑的功能，最终实现的效果：

 

　　点击ContextMenu下的Edit Topology Diagram 菜单项，

 

　　打开拓扑图编辑界面

 

　　该拓扑图会作为该topic的一个附件。

 

　　Online App:

 

　　vscode extention:

 

　　之前基于blink-mind这个库写了一个vscode的思维导图扩展vscode-blink-mind,反响还挺不错的，并且得到了掘金开源精选编辑的推荐，上了掘金的优秀开源推荐。blink-mind这个库是支持以插件的方式进行扩展功能的，这个我在项目的readme文档里已经写了，并且做了一个在线的网站去演示。比方说怎么去定制快捷键，定制右键菜单。这个网站对demo的类型做了分类，看名字应该可以见名知义。

 

　　如图：

 

　　点击Canvas右侧的Notes,进入文档页面，

 

　　大部分例子都提供了中英文两种语言的文档。

 

　　为了更详细的介绍如何编写插件来扩展功能。结合我这两天做的一个给思维的主题项添加拓扑图附件的功能，在这篇文章里详细的介绍如何编写插件。

 

　　关于blink-mind的插件的原理，之前已经写了一篇博客介绍过。

 

　　在编写插件之前，首先要分析插件要实现的功能。本文中的插件要实现的功能有

 

　　在主题项的右键菜单上添加一项，点击该菜单项，为当前主题项添加一个拓扑图的附件，并且进入拓扑图编辑界面。在拓扑图编辑界面可以进行快捷的编辑，退出编辑立即保存数据。在编辑界面有删除按钮，可以删除正在编辑的拓扑图，删除操作要进行二次确认。

 

　　画了个流程图：

 

　　blink-mind的数据定义和状态管理只是使用了immutable.js, 没有使用redux或者mobx。它的model定义在@blink-mind/core这个包下面的src/model目录下，最顶层的数据结构是model.

 

　　model的数据定义：

 

　　topic的数据定义：

 

　　block的数据定义：

 

　　在blink-mind里所有改变model的操作都通过operation机制来完成，operation是一个内置的插件。它的代码实现。

 

　　在这个实现中，有一个OpMap定义了操作的类型，以及操作的函数，

 

　　所有操作的函数必须是如下规格：函数的参数必须有model字段，表示被修改之前的model,以及要修改的其他字段

 

　　函数的返回值必须是一个model,这个model是被修改过后的model.

 

　　operation的代码如下：

 

　　他可以接受一个opType 或者一个 opArray, opArray里面包含了多个操作。

 

　　举个例子，执行一个opType:

 

　　一次执行多个操作：

 

　　同时OpMap也是支持扩展的，扩展OpMap通过重写getOpMap这个扩展点函数来实现，具体的示例在后面会演示。

 

　　首先定义一个新的OpType：

 

　　重写getOpMap扩展点函数：

 

　　设置OP_TYPE_START_EDITING_TOPOLOGY对应的OpFunc是startEditingTopology

 

　　这里我们自定义了一个新的BlockType:

 

　　右键菜单的扩展点是customizeTopicContextMenu,

 

　　具体的实现代码：

 

　　首先调用next（）函数获取系统默认的菜单项，然后在最下方加入自定义的菜单项。这个菜单项的事件处理函数中，通过controller去执行一个操作类型是OP_TYPE_START_EDITING_TOPOLOGY的操作。

 

　　renderTopicBlock方法所做的事情很简单，判断当前block的type如果是我们定义的BLOCK_TYPE_TOPOLOGY，就执行我们自定义的渲染逻辑，否则return next（），意思是交由其他同名扩展函数处理，在blink-mind内部有默认的renderTopicBlock逻辑可以渲染blockType为BlockType.CONTENT和BlockType.DESC的逻辑。

 

　　TopicBlockTopology是一个Functional Component, 他要做的事情是：

 

　　在当前block上绘制一个icon

 

　　，点击这个icon 即可进入拓扑图编辑界面

 

　　blink-mind 默认是以Drawer组件的形式来作为不同类型的block的编辑器的载体（Container）， 当前你也可以不使用Drawer组件，那样的话就需要重写renderDiagramCustomize这个扩展点函数了。这里篇幅原因就不对这块做过多介绍，感兴趣的朋友可以去看源码。

 

　　本插件扩展renderDrawer方法：

 

　　FOCUS_MODE_EDITING_TOPOLOGY是我们自定义的一种FocusMode, 表示当前Focus的topic的状态是正在编辑拓扑图。

 

　　TopologyDrawer 的实现如下：

 

　　这个组件返回了一个Drawer, 这个Drawer的内容区域包括两个部分，TopologyDiagram和TopologyDiagramUtils，

 

　　TopologyDiagram是编辑器区域

 

　　TopologyDiagramUtils是杂项区域，在编辑器的右下角

 

　　，目前提供的功能有缩放和删除

 

　　TopologyDiagram和TopologyDiagramUtils怎么实现这里就不做过多介绍了，因为是集成了一个开源的拓扑图编辑器topology，这个库的使用说明可以参考它的文档。篇幅原因，本文不详细介绍了。

 

　　因为这个插件新增了一种BlockType, const BLOCK_TYPE_TOPOLOGY='TOPOLOGY';

 

　　所以需要考虑扩展序列化和反序列化的问题，默认的json-serializer的实现是

 

　　由于这个插件使用的topology库默认也是以JS object的方式保存的canvas的data, 所以这里我们不用做任何特殊处理。

 

　　本来以为可以很快速的写完一个文档，结果在写的时候发现需要处处斟酌，尽量考虑到读者的感受，尽量多的交代清楚上下文。通过此文可以了解到编写插件的大致流程，至于具体的实现细节，在源码中都可以看到。