1、開(kāi)源免費(fèi)的react繪圖插件react本文要實(shí)現(xiàn)的插件是： 給思維導(dǎo)圖添加拓?fù)鋱D編輯的功能，終于實(shí)現(xiàn)的效果：點(diǎn)擊contextmenu下的edit topology diagram 菜單項(xiàng)，打開(kāi)辟撲圖編輯界面該拓?fù)鋱D會(huì)作為該topic的一個(gè)附件。online app:vscode extention:之前基于blink-mind這個(gè)庫(kù)寫(xiě)了一個(gè)vscode的思維導(dǎo)圖擴(kuò)展vscode-blink-mind,反響還挺不錯(cuò)的，并且得到了掘金開(kāi)源精選編輯的推舉，上了掘金的優(yōu)秀開(kāi)源推舉。blink-mind這個(gè)庫(kù)是支持以插件的方式舉行擴(kuò)展功能的，這個(gè)我在項(xiàng)目的readme文檔里已經(jīng)寫(xiě)了，并且做了一個(gè)在線的

2、網(wǎng)站去演示。比喻說(shuō)怎么去定制快捷鍵，定制右鍵菜單。這個(gè)網(wǎng)站對(duì)demo的類型做了分類，看名字應(yīng)當(dāng)可以見(jiàn)名知義。點(diǎn)擊canvas右側(cè)的notes,進(jìn)入文檔頁(yè)面，大部分例子都提供了中英文兩種語(yǔ)言的文檔。為了更具體的介紹如何編寫(xiě)插件來(lái)擴(kuò)展功能。結(jié)合我這兩天做的一個(gè)給思維的主題項(xiàng)添加拓?fù)鋱D附件的功能，在這篇文章里具體的介紹如何編寫(xiě)插件。關(guān)于blink-mind的插件的原理，之前已經(jīng)寫(xiě)了一篇博客介紹過(guò)。在編寫(xiě)插件之前，首先要分析插件要實(shí)現(xiàn)的功能。本文中的插件要實(shí)現(xiàn)的功能有在主題項(xiàng)的右鍵菜單上添加一項(xiàng)，點(diǎn)擊該菜單項(xiàng)，為當(dāng)前主題項(xiàng)添加一個(gè)拓?fù)鋱D的附件，并且進(jìn)入拓?fù)鋱D編輯界面。在拓?fù)鋱D編輯界面可以舉行快捷的編輯

3、，退出編輯立刻保存數(shù)據(jù)。在編輯界面有刪除按鈕，可以刪除正在編輯的拓?fù)鋱D，刪除操作要舉行二次確認(rèn)。畫(huà)了個(gè)流程圖：blink-mind的數(shù)據(jù)定義和狀態(tài)管理只是用法了immutable.js, 沒(méi)有用法redux或者mobx。它的model定義在blink-mind/core這個(gè)包下面的src/model名目下，最頂層的數(shù)據(jù)結(jié)構(gòu)是model.model的數(shù)據(jù)定義：topic的數(shù)據(jù)定義：block的數(shù)據(jù)定義：在blink-mind里全部轉(zhuǎn)變model的操作都通過(guò)operation機(jī)制來(lái)完成，operation是一個(gè)內(nèi)置的插件。它的代碼實(shí)現(xiàn)。在這個(gè)實(shí)現(xiàn)中，有一個(gè)opmap定義了操作的類型，以及操作的函數(shù)

4、，全部操作的函數(shù)必需是如下規(guī)格：函數(shù)的參數(shù)必需有model字段，表示被修改之前的model,以及要修改的其他字段函數(shù)的返回值必需是一個(gè)model,這個(gè)model是被修改過(guò)后的model.operation的代碼如下：他可以接受一個(gè)optype 或者一個(gè) oparray, oparray里面包含了多個(gè)操作。舉個(gè)例子，執(zhí)行一個(gè)optype:一次執(zhí)行多個(gè)操作：同時(shí)opmap也是支持?jǐn)U展的，擴(kuò)展opmap通過(guò)重寫(xiě)getopmap這個(gè)擴(kuò)展點(diǎn)函數(shù)來(lái)實(shí)現(xiàn)，詳細(xì)的示例在后面會(huì)演示。首先定義一個(gè)新的optype：重寫(xiě)getopmap擴(kuò)展點(diǎn)函數(shù)：設(shè)置op_type_start_editing_topology對(duì)應(yīng)

5、的opfunc是starteditingtopology這里我們自定義了一個(gè)新的blocktype:右鍵菜單的擴(kuò)展點(diǎn)是customizetopiccontextmenu,詳細(xì)的實(shí)現(xiàn)代碼：首先調(diào)用next（）函數(shù)獵取系統(tǒng)默認(rèn)的菜單項(xiàng)，然后在最下方加入自定義的菜單項(xiàng)。這個(gè)菜單項(xiàng)的大事處理函數(shù)中，通過(guò)controller去執(zhí)行一個(gè)操作類型是op_type_start_editing_topology的操作。rendertopicblock辦法所做的事情很容易，推斷當(dāng)前block的type假如是我們定義的block_type_topology，就執(zhí)行我們自定義的渲染規(guī)律，否則return next（）

6、，意思是交由其他同名擴(kuò)展函數(shù)處理，在blink-mind內(nèi)部有默認(rèn)的rendertopicblock規(guī)律可以渲染blocktype為blocktype.content和blocktype.desc的規(guī)律。topicblocktopology是一個(gè)functional component, 他要做的事情是：在當(dāng)前block上繪制一個(gè)icon，點(diǎn)擊這個(gè)icon 即可進(jìn)入拓?fù)鋱D編輯界面blink-mind 默認(rèn)是以drawer組件的形式來(lái)作為不同類型的block的編輯器的載體（container）， 當(dāng)前你也可以不用法drawer組件，那樣的話就需要重寫(xiě)renderdiagramcustomize這

7、個(gè)擴(kuò)展點(diǎn)函數(shù)了。這里篇幅緣由就不對(duì)這塊做過(guò)多介紹，感愛(ài)好的伴侶可以去看源碼。本插件擴(kuò)展renderdrawer辦法：focus_mode_editing_topology是我們自定義的一種focusmode, 表示當(dāng)前focus的topic的狀態(tài)是正在編輯拓?fù)鋱D。topologydrawer 的實(shí)現(xiàn)如下：這個(gè)組件返回了一個(gè)drawer, 這個(gè)drawer的內(nèi)容區(qū)域包括兩個(gè)部分，topologydiagram和topologydiagramutils，topologydiagram是編輯器區(qū)域topologydiagramutils是雜項(xiàng)區(qū)域，在編輯器的右下角，目前提供的功能有縮放和刪除topologydiagram和topologydiagramutils怎么實(shí)現(xiàn)這里就不做過(guò)多介紹了，由于是集成了一個(gè)開(kāi)源的拓?fù)鋱D編輯器topology，這個(gè)庫(kù)的用法解釋可以參考它的文檔。篇幅緣由，本文不具體介紹了。由于這個(gè)插件新增了一種blocktype, const block_type_topology=&39;topology&39;所以需要考慮擴(kuò)展序列化和反序列化的問(wèn)題，默認(rèn)的json-serializer的實(shí)現(xiàn)是因?yàn)檫@個(gè)插件用法的topology庫(kù)默認(rèn)也是以js object的方式保存的canvas的data,