提取出键盘导航类作为插件

simple-mind-map/index.js

@@ -12,7 +12,6 @@ import Select from './src/Select'
 import { layoutValueList } from './src/utils/constant'
 import { SVG } from '@svgdotjs/svg.js'
 import { simpleDeepClone } from './src/utils'
-import KeyboardNavigation from './src/KeyboardNavigation'
 import defaultTheme from './src/themes/default'
 
 // 默认选项配置
@@ -126,16 +125,12 @@ class MindMap {
       mindMap: this
     })
 
-    // 键盘导航类
-    this.keyboardNavigation = new KeyboardNavigation({
-      mindMap: this
-    })
-
     // 批量执行类
     this.batchExecution = new BatchExecution()
 
     // 注册插件
     MindMap.pluginList.forEach((plugin) => {
+      console.log(plugin.instanceName);
       this[plugin.instanceName] = new plugin({
         mindMap: this
       })

simple-mind-map/src/Drag.js

@@ -260,4 +260,6 @@ class Drag extends Base {
   }
 }
 
+Drag.instanceName = 'drag'
+
 export default Drag

simple-mind-map/src/KeyboardNavigation.js

@@ -2,7 +2,7 @@ import { isKey } from './utils/keyMap'
 import { bfsWalk } from './utils'
 
 //  键盘导航类
-export default class KeyboardNavigation {
+class KeyboardNavigation {
   //  构造函数
   constructor(opt) {
     this.opt = opt
@@ -224,3 +224,7 @@ export default class KeyboardNavigation {
     }
   }
 }
+
+KeyboardNavigation.instanceName = 'keyboardNavigation'
+
+export default KeyboardNavigation

web/src/pages/Doc/en/keyboardNavigation/index.md

@@ -1,8 +1,19 @@
-# KeyboardNavigation instance
+# KeyboardNavigation plugin
 
 > v0.2.17+
 
-`KeyboardNavigation` instance is responsible for handling keyboard navigation, that is, when you press the direction key, it will automatically find the next node and activate it, can be obtained through `mindMap.keyboardNavigation`
+`KeyboardNavigation` plugin provides keyboard navigation function, that is, when you press the direction key, it will automatically find the next node and activate it.
+
+## Register
+
+```js
+import MindMap from 'simple-mind-map'
+import KeyboardNavigation from 'simple-mind-map/src/KeyboardNavigation.js'
+
+MindMap.usePlugin(KeyboardNavigation)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.keyboardNavigation`.
 
 ## Methods
 

web/src/pages/Doc/en/keyboardNavigation/index.vue

@@ -1,10 +1,17 @@
 <template>
   <div>
-    <h1>KeyboardNavigation instance</h1>
+    <h1>KeyboardNavigation plugin</h1>
 <blockquote>
 <p>v0.2.17+</p>
 </blockquote>
-<p><code>KeyboardNavigation</code> instance is responsible for handling keyboard navigation, that is, when you press the direction key, it will automatically find the next node and activate it, can be obtained through <code>mindMap.keyboardNavigation</code></p>
+<p><code>KeyboardNavigation</code> plugin provides keyboard navigation function, that is, when you press the direction key, it will automatically find the next node and activate it.</p>
+<h2>Register</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> KeyboardNavigation <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/KeyboardNavigation.js&#x27;</span>
+
+MindMap.usePlugin(KeyboardNavigation)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.keyboardNavigation</code>.</p>
 <h2>Methods</h2>
 <h3>focus(dir)</h3>
 <p><code>dir</code>：Which direction to find the next node，Optional value：<code>Left</code>、 <code>Up</code>、 <code>Right</code>、 <code>Down</code></p>

web/src/pages/Doc/routerList.js

@@ -1,3 +1,3 @@
 
-        export default [{"lang":"zh","children":[{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"doExport","title":"DoExport实例"},{"path":"drag","title":"Drag插件"},{"path":"introduction","title":"简介"},{"path":"keyboardNavigation","title":"KeyboardNavigation实例"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"miniMap","title":"MiniMap插件"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"select","title":"Select实例"},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark插件"},{"path":"xmind","title":"XMind解析"}]},{"lang":"en","children":[{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"DoExport instance"},{"path":"drag","title":"Drag plugin"},{"path":"introduction","title":"Introduction"},{"path":"keyboardNavigation","title":"KeyboardNavigation instance"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"miniMap","title":"MiniMap plugin"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"select","title":"Select instance"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark plugin"},{"path":"xmind","title":"XMind parse"}]}]
+        export default [{"lang":"zh","children":[{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"doExport","title":"DoExport实例"},{"path":"drag","title":"Drag插件"},{"path":"introduction","title":"简介"},{"path":"keyboardNavigation","title":"KeyboardNavigation插件"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"miniMap","title":"MiniMap插件"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"select","title":"Select实例"},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark插件"},{"path":"xmind","title":"XMind解析"}]},{"lang":"en","children":[{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"DoExport instance"},{"path":"drag","title":"Drag plugin"},{"path":"introduction","title":"Introduction"},{"path":"keyboardNavigation","title":"KeyboardNavigation plugin"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"miniMap","title":"MiniMap plugin"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"select","title":"Select instance"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark plugin"},{"path":"xmind","title":"XMind parse"}]}]
     

web/src/pages/Doc/zh/keyboardNavigation/index.md

@@ -1,8 +1,19 @@
-# KeyboardNavigation实例
+# KeyboardNavigation插件
 
 > v0.2.17+
 
-`KeyboardNavigation`实例负责处理键盘导航，也就是当你按下方向键时会自动寻找下一个节点并激活，可通过`mindMap.keyboardNavigation`获取到该实例
+`KeyboardNavigation`插件提供键盘导航的功能，也就是当你按下方向键时会自动寻找下一个节点并激活
+
+## 注册
+
+```js
+import MindMap from 'simple-mind-map'
+import KeyboardNavigation from 'simple-mind-map/src/KeyboardNavigation.js'
+
+MindMap.usePlugin(KeyboardNavigation)
+```
+
+注册完且实例化`MindMap`后可通过`mindMap.keyboardNavigation`获取到该实例。
 
 ## 方法
 

web/src/pages/Doc/zh/keyboardNavigation/index.vue

@@ -1,10 +1,17 @@
 <template>
   <div>
-    <h1>KeyboardNavigation实例</h1>
+    <h1>KeyboardNavigation插件</h1>
 <blockquote>
 <p>v0.2.17+</p>
 </blockquote>
-<p><code>KeyboardNavigation</code>实例负责处理键盘导航，也就是当你按下方向键时会自动寻找下一个节点并激活，可通过<code>mindMap.keyboardNavigation</code>获取到该实例</p>
+<p><code>KeyboardNavigation</code>插件提供键盘导航的功能，也就是当你按下方向键时会自动寻找下一个节点并激活</p>
+<h2>注册</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> KeyboardNavigation <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/KeyboardNavigation.js&#x27;</span>
+
+MindMap.usePlugin(KeyboardNavigation)
+</code></pre>
+<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.keyboardNavigation</code>获取到该实例。</p>
 <h2>方法</h2>
 <h3>focus(dir)</h3>
 <p><code>dir</code>：要寻找哪个方向的下一个节点，可选值：<code>Left</code>、 <code>Up</code>、 <code>Right</code>、 <code>Down</code></p>

web/src/pages/Edit/components/Edit.vue

@@ -24,6 +24,7 @@
 import MindMap from 'simple-mind-map'
 import MiniMap from 'simple-mind-map/src/MiniMap.js'
 import Watermark from 'simple-mind-map/src/Watermark.js'
+import KeyboardNavigation from 'simple-mind-map/src/KeyboardNavigation.js'
 import Drag from 'simple-mind-map/src/Drag.js'
 import Outline from './Outline'
 import Style from './Style'
@@ -47,6 +48,7 @@ MindMap
   .usePlugin(MiniMap)
   .usePlugin(Watermark)
   .usePlugin(Drag)
+  .usePlugin(KeyboardNavigation)
 
 // 注册自定义主题
 customThemeList.forEach((item) => {