coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-22 02:47:46 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

提取拖拽类Drag作为插件

Browse Source
This commit is contained in:
wanglin2 2023-01-17 14:30:13 +08:00
parent eb01646747
commit a53a4e8e1d
12 changed files with 107 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
simple-mind-map/index.js
View File

@ -9,7 +9,6 @@ import Command from './src/Command'
import BatchExecution from './src/BatchExecution'
import Export from './src/Export'
import Select from './src/Select'
import Drag from './src/Drag'
import { layoutValueList } from './src/utils/constant'
import { SVG } from '@svgdotjs/svg.js'
import { simpleDeepClone } from './src/utils'
@ -127,11 +126,6 @@ class MindMap {
mindMap: this
})
// 拖动类
this.drag = new Drag({
mindMap: this
})
// 键盘导航类
this.keyboardNavigation = new KeyboardNavigation({
mindMap: this

1
web/src/pages/Doc/catalogList.js
View File

@ -23,6 +23,7 @@ let APIList = [
'keyboardNavigation',
'command',
'select',
'drag',
'batchExecution',
'xmind',
'utils'

21
web/src/pages/Doc/en/drag/index.md Normal file
View File

@ -0,0 +1,21 @@
# Drag plugin
The `Drag` plugin provides the function of node dragging, including:
1.Drag the node to move and change its position in the node tree, That is, as a child node, sibling node, etc. of other nodes
2.Drag the node to the custom canvas location
Please refer to the [Instantiation Options](/mind-map/#/doc/zh/constructor) of the `MindMap` class for configuration.
## Register
```js
import MindMap from 'simple-mind-map'
import Drag from 'simple-mind-map/src/Drag.js'
MindMap.usePlugin(Drag)
```
After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.drag`.

27
web/src/pages/Doc/en/drag/index.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div>
<h1>Drag plugin</h1>
<p>The <code>Drag</code> plugin provides the function of node dragging, including:</p>
<p>1.Drag the node to move and change its position in the node tree, That is, as a child node, sibling node, etc. of other nodes</p>
<p>2.Drag the node to the custom canvas location</p>
<p>Please refer to the <a href="/mind-map/#/doc/zh/constructor">Instantiation Options</a> of the <code>MindMap</code> class for configuration.</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> Drag <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/Drag.js&#x27;</span>
MindMap.usePlugin(Drag)
</code></pre>
<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.drag</code>.</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

2
web/src/pages/Doc/en/watermark/index.md
View File

@ -4,6 +4,8 @@
`Watermark` instance is responsible for displaying the watermark.
Please refer to the [Instantiation Options](/mind-map/#/doc/zh/constructor) of the `MindMap` class for configuration.
## Register
```js

1
web/src/pages/Doc/en/watermark/index.vue
View File

@ -5,6 +5,7 @@
<p>0.2.24+</p>
</blockquote>
<p><code>Watermark</code> instance is responsible for displaying the watermark.</p>
<p>Please refer to the <a href="/mind-map/#/doc/zh/constructor">Instantiation Options</a> of the <code>MindMap</code> class for configuration.</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> Watermark <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/Watermark.js&#x27;</span>

2
web/src/pages/Doc/routerList.js
View File

@ -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":"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":"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 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"}]}]

21
web/src/pages/Doc/zh/drag/index.md Normal file
View File

@ -0,0 +1,21 @@
# Drag插件
`Drag`插件提供节点拖拽的功能，包括：
1.拖拽节点进行移动，改变节点在节点树中的位置，即作为其他节点的子节点、兄弟节点等等
2.拖拽节点到自定义的画布位置
配置请参考`MindMap`类的[实例化选项](/mind-map/#/doc/zh/constructor)。
## 注册
```js
import MindMap from 'simple-mind-map'
import Drag from 'simple-mind-map/src/Drag.js'
MindMap.usePlugin(Drag)
```
注册完且实例化`MindMap`后可通过`mindMap.drag`获取到该实例。

27
web/src/pages/Doc/zh/drag/index.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div>
<h1>Drag插件</h1>
<p><code>Drag</code>插件提供节点拖拽的功能，包括：</p>
<p>1.拖拽节点进行移动，改变节点在节点树中的位置，即作为其他节点的子节点、兄弟节点等等</p>
<p>2.拖拽节点到自定义的画布位置</p>
<p>配置请参考<code>MindMap</code>类的<a href="/mind-map/#/doc/zh/constructor">实例化选项</a>。</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> Drag <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/Drag.js&#x27;</span>
MindMap.usePlugin(Drag)
</code></pre>
<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.drag</code>获取到该实例。</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

2
web/src/pages/Doc/zh/watermark/index.md
View File

@ -4,6 +4,8 @@
`Watermark`插件负责显示水印。
配置请参考`MindMap`类的[实例化选项](/mind-map/#/doc/zh/constructor)。
## 注册
```js

1
web/src/pages/Doc/zh/watermark/index.vue
View File

@ -5,6 +5,7 @@
<p>0.2.24+</p>
</blockquote>
<p><code>Watermark</code>插件负责显示水印。</p>
<p>配置请参考<code>MindMap</code>类的<a href="/mind-map/#/doc/zh/constructor">实例化选项</a>。</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> Watermark <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/Watermark.js&#x27;</span>

4
web/src/pages/Edit/components/Edit.vue
View File

@ -23,7 +23,8 @@
<script>
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 Watermark from 'simple-mind-map/src/Watermark.js'
import Drag from 'simple-mind-map/src/Drag.js'
import Outline from './Outline'
import Style from './Style'
import BaseStyle from './BaseStyle'
@ -45,6 +46,7 @@ import customThemeList from '@/customThemes'
MindMap
.usePlugin(MiniMap)
.usePlugin(Watermark)
.usePlugin(Drag)
// 注册自定义主题
customThemeList.forEach((item) => {