开源免费的React绘图插件——react
本文要实现的插件是： 给思维导图添加拓扑图编辑的功能，终于实现的效果：

点击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上绘制一个iconreact面试题掘金

，点击这个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=&39;TOPOLOGY&39;;

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

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

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

     

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。