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

Doc: update

Browse Source
This commit is contained in:
wanglin2 2023-09-15 09:13:41 +08:00
parent bd3d470e40
commit b3e254c0ee
14 changed files with 313 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/src/pages/Doc/en/changelog/index.md
View File

@ -1,5 +1,39 @@
# Changelog
## 0.7.1
Fix:
> 1.Fix the issue of unsaved associated line endpoints after changes.
>
> 2.Fix the issue of abnormal canvas scrolling when moving the mouse to the edge of multiple selected nodes when the distance from the top left corner of the canvas to the browser window is not 0.
>
> 3.Fix the issue of importing xmind file errors for nodes with empty titles.
>
> 4.Fix the issue where the exported xmind file prompts for corruption when opened on the latest version of xmind software.
>
> 5.Fix the issue where stickers cannot be displayed when exporting data with stickers in xmind format.
>
> 6.Fix the issue of node right-click event reporting errors when the select plugin is not registered.
>
> 7.There is no issue with removing duplicates in the method of registering plugins.
New:
> 1.Reconstruct node drag and drop logic: optimize drag and drop difficulties in some situations, adapt to various structures, and automatically move the canvas when the mouse moves to the edge of the canvas during drag and drop.
>
> 2.Reconstruct the scrollbar plugin to optimize the user experience.
>
> 3.Imperfect resolution of conflicts between logical structure diagrams, mind maps, directory organization diagrams, organization chart summaries, and nodes (the summaries should be rewritten or deleted later).
>
> 4.Activate adjacent nodes after deleting them.
>
> 5.In node data_ The starting field is considered a custom field.
Demo:
> 1.The page will display the current core library version number.
## 0.7.0
Breaking change: Removed the section of node activation style in the theme file, Setting the activation style of nodes is no longer supported, and the activation effect has been changed to a unified node outer border style, while also supporting the mouse hover effect.

23
web/src/pages/Doc/en/changelog/index.vue
View File

@ -1,6 +1,29 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.7.1</h2>
<p>Fix:</p>
<blockquote>
<p>1.Fix the issue of unsaved associated line endpoints after changes.</p>
<p>2.Fix the issue of abnormal canvas scrolling when moving the mouse to the edge of multiple selected nodes when the distance from the top left corner of the canvas to the browser window is not 0.</p>
<p>3.Fix the issue of importing xmind file errors for nodes with empty titles.</p>
<p>4.Fix the issue where the exported xmind file prompts for corruption when opened on the latest version of xmind software.</p>
<p>5.Fix the issue where stickers cannot be displayed when exporting data with stickers in xmind format.</p>
<p>6.Fix the issue of node right-click event reporting errors when the select plugin is not registered.</p>
<p>7.There is no issue with removing duplicates in the method of registering plugins.</p>
</blockquote>
<p>New:</p>
<blockquote>
<p>1.Reconstruct node drag and drop logic: optimize drag and drop difficulties in some situations, adapt to various structures, and automatically move the canvas when the mouse moves to the edge of the canvas during drag and drop.</p>
<p>2.Reconstruct the scrollbar plugin to optimize the user experience.</p>
<p>3.Imperfect resolution of conflicts between logical structure diagrams, mind maps, directory organization diagrams, organization chart summaries, and nodes (the summaries should be rewritten or deleted later).</p>
<p>4.Activate adjacent nodes after deleting them.</p>
<p>5.In node data_ The starting field is considered a custom field.</p>
</blockquote>
<p>Demo:</p>
<blockquote>
<p>1.The page will display the current core library version number.</p>
</blockquote>
<h2>0.7.0</h2>
<p>Breaking change: Removed the section of node activation style in the theme file, Setting the activation style of nodes is no longer supported, and the activation effect has been changed to a unified node outer border style, while also supporting the mouse hover effect.</p>
<p>Fix:</p>

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

@ -87,6 +87,8 @@ const mindMap = new MindMap({
| hoverRectColor（v0.7.0+） | String | rgb(94, 200, 248) | The node mouse hover and the rectangular border color displayed when activated will add a transparency of 0.6 when hovering | |
| hoverRectPadding（v0.7.0+） | Number | 2 | The distance between the node mouse hover and the displayed rectangular border when activated and the node content | |
| selectTextOnEnterEditText（v0.7.0+） | Boolean | true | Is the text selected by default when double-clicking a node to enter node text editing? By default, it will only be selected when creating a new node | |
| deleteNodeActive（v0.7.1+） | Boolean | true | Enable the function of automatically activating adjacent nodes or parent nodes after deleting nodes | |
| autoMoveWhenMouseInEdgeOnDrag（v0.7.1+） | Boolean | true | Whether to enable automatic canvas movement when the mouse moves to the edge of the canvas while dragging nodes | |
### Data structure

14
web/src/pages/Doc/en/constructor/index.vue
View File

@ -469,6 +469,20 @@
<td>Is the text selected by default when double-clicking a node to enter node text editing? By default, it will only be selected when creating a new node</td>
<td></td>
</tr>
<tr>
<td>deleteNodeActive（v0.7.1+）</td>
<td>Boolean</td>
<td>true</td>
<td>Enable the function of automatically activating adjacent nodes or parent nodes after deleting nodes</td>
<td></td>
</tr>
<tr>
<td>autoMoveWhenMouseInEdgeOnDrag（v0.7.1+）</td>
<td>Boolean</td>
<td>true</td>
<td>Whether to enable automatic canvas movement when the mouse moves to the edge of the canvas while dragging nodes</td>
<td></td>
</tr>
</tbody>
</table>
<h3>Data structure</h3>

39
web/src/pages/Doc/en/scrollbar/index.md
View File

@ -1,8 +1,10 @@
# Scrollbar plugin
> v0.7.0+
>
> V0.7.1+has been refactored, and the following document is a new one.
This plugin is used to help develop the functionality of horizontal and vertical scrollbar.
This plugin is used to help develop the functionality of horizontal and vertical scrollbar. Please refer to the tutorial for detailed usage.
## Register
@ -16,9 +18,24 @@ After registration and instantiation of `MindMap`, the instance can be obtained
## Event
#### scrollbar_change
#### scrollbar_change(data)
Triggered when the scrollbar data changes, you can listen to this event to update the position and size of the scrollbar.
```js
{
// Vertical scrollbar
vertical: {
top,// Top value, Percentage value
height// Scrollbar height, Percentage value
},
// Horizontal scrollbar
horizontal: {
left,// Left value, Percentage value
width// Scrollbar width, Percentage value
}
}
```
Triggered when the scrollbar data changes, you can listen to this event to update the position and size of the scrollbar. Receive a parameter representing the latest scrollbar position and size information, which you can use to update the style of the scrollbar element.
## Method
@ -32,9 +49,9 @@ Set the size of the scroll bar container, which is the width of the container fo
### calculationScrollbar()
> You need to first call the setScrollBarWrapSize method to set the width and height of the scroll bar container element.
> Usually, you do not need to call this method. If the scroll bar is not updated when rendering for the first time, you can manually call this method to obtain the scroll bar data.
>
> Generally, it is necessary to monitor scrollbar_change event, and then call it to update the scroll bar.
> You need to first call the setScrollBarWrapSize method to set the width and height of the scroll bar container element.
Return value:
@ -53,7 +70,7 @@ Return value:
}
```
Obtain the size and position of the scroll bar, and you can set it to the scroll bar element based on the return value to achieve the effect of rendering and caring about the scroll bar.
Obtain the size and position of the scrollbar.
### onMousedown(e, type)
@ -61,4 +78,12 @@ Obtain the size and position of the scroll bar, and you can set it to the scroll
- `type`: The type of scroll bar pressed, vertical(Vertical scrollbar)、horizontal(Horizontal scrollbar)。
This method needs to be called when the mouse press event of the scrollbar element occurs.
This method needs to be called when the mouse press event of the scrollbar element occurs.
### onClick(e, type)
- `e`：The event object for the mouse click event.
- `type`：The type of scroll bar on click, vertical(Vertical scrollbar)、horizontal(Horizontal scrollbar)。
This method needs to be called when the click event of the scrollbar element is triggered.

34
web/src/pages/Doc/en/scrollbar/index.vue
View File

@ -3,8 +3,9 @@
<h1>Scrollbar plugin</h1>
<blockquote>
<p>v0.7.0+</p>
<p>V0.7.1+has been refactored, and the following document is a new one.</p>
</blockquote>
<p>This plugin is used to help develop the functionality of horizontal and vertical scrollbar.</p>
<p>This plugin is used to help develop the functionality of horizontal and vertical scrollbar. Please refer to the tutorial for detailed usage.</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> Scrollbar <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Scrollbar.js&#x27;</span>
@ -12,8 +13,21 @@ MindMap.usePlugin(Scrollbar)
</code></pre>
<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.scrollbar</code>.</p>
<h2>Event</h2>
<h4>scrollbar_change</h4>
<p>Triggered when the scrollbar data changes, you can listen to this event to update the position and size of the scrollbar.</p>
<h4>scrollbar_change(data)</h4>
<pre class="hljs"><code>{
<span class="hljs-comment">// Vertical scrollbar</span>
<span class="hljs-attr">vertical</span>: {
top,<span class="hljs-comment">// Top value, Percentage value</span>
height<span class="hljs-comment">// Scrollbar height, Percentage value</span>
},
<span class="hljs-comment">// Horizontal scrollbar</span>
<span class="hljs-attr">horizontal</span>: {
left,<span class="hljs-comment">// Left value, Percentage value</span>
width<span class="hljs-comment">// Scrollbar width, Percentage value</span>
}
}
</code></pre>
<p>Triggered when the scrollbar data changes, you can listen to this event to update the position and size of the scrollbar. Receive a parameter representing the latest scrollbar position and size information, which you can use to update the style of the scrollbar element.</p>
<h2>Method</h2>
<h3>setScrollBarWrapSize(width, height)</h3>
<ul>
@ -27,8 +41,8 @@ MindMap.usePlugin(Scrollbar)
<p>Set the size of the scroll bar container, which is the width of the container for horizontal scrollbars and the height of the container for vertical scrollbars. When your scrollbar container size changes, you need to call this method again.</p>
<h3>calculationScrollbar()</h3>
<blockquote>
<p>Usually, you do not need to call this method. If the scroll bar is not updated when rendering for the first time, you can manually call this method to obtain the scroll bar data.</p>
<p>You need to first call the setScrollBarWrapSize method to set the width and height of the scroll bar container element.</p>
<p>Generally, it is necessary to monitor scrollbar_change event, and then call it to update the scroll bar.</p>
</blockquote>
<p>Return value:</p>
<pre class="hljs"><code>{
@ -44,7 +58,7 @@ MindMap.usePlugin(Scrollbar)
}
}
</code></pre>
<p>Obtain the size and position of the scroll bar, and you can set it to the scroll bar element based on the return value to achieve the effect of rendering and caring about the scroll bar.</p>
<p>Obtain the size and position of the scrollbar.</p>
<h3>onMousedown(e, type)</h3>
<ul>
<li>
@ -55,6 +69,16 @@ MindMap.usePlugin(Scrollbar)
</li>
</ul>
<p>This method needs to be called when the mouse press event of the scrollbar element occurs.</p>
<h3>onClick(e, type)</h3>
<ul>
<li>
<p><code>e</code>：The event object for the mouse click event.</p>
</li>
<li>
<p><code>type</code>：The type of scroll bar on click, vertical(Vertical scrollbar)、horizontal(Horizontal scrollbar)。</p>
</li>
</ul>
<p>This method needs to be called when the click event of the scrollbar element is triggered.</p>
</div>
</template>

34
web/src/pages/Doc/zh/changelog/index.md
View File

@ -1,5 +1,39 @@
# Changelog
## 0.7.1
修复：
> 1.修复关联线端点改变后未保存的问题。
>
> 2.修复画布左上角距浏览器窗口不为0时多选节点鼠标移动到边缘时画布滚动异常的问题。
>
> 3.修复导入存在为标题为空的节点的xmind文件报错的问题。
>
> 4.修复导出的xmind文件在最新版xmind软件上打开时提示已损坏的问题。
>
> 5.修复导出带有贴纸的数据为xmind格式时贴纸无法显示的问题。
>
> 6.修复没有注册select插件时节点右键事件报错的问题。
>
> 7.修复注册插件的方法没有去重的问题。
新增：
> 1.重构节点拖拽逻辑：优化一些情况下的拖拽难问题、适配各种结构、拖拽时鼠标移动到画布边缘时画布自动移动。
>
> 2.重构滚动条插件，优化使用体验。
>
> 3.不完美的解决逻辑结构图、思维导图、目录组织图、组织结构图概要和节点的冲突问题（概要后面应该会重写或删除）。
>
> 4.删除节点后激活相邻节点。
>
> 5.节点数据data中以_开头的字段被认为是自定义字段。
Demo：
> 1.页面增加显示当前核心库版本号。
## 0.7.0
破坏性更新：删除了主题文件中节点激活样式的部分，不再支持设置节点的激活样式，激活效果改为统一的节点外边框样式，同时支持鼠标hover效果。

23
web/src/pages/Doc/zh/changelog/index.vue
View File

@ -1,6 +1,29 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.7.1</h2>
<p>修复：</p>
<blockquote>
<p>1.修复关联线端点改变后未保存的问题。</p>
<p>2.修复画布左上角距浏览器窗口不为0时多选节点鼠标移动到边缘时画布滚动异常的问题。</p>
<p>3.修复导入存在为标题为空的节点的xmind文件报错的问题。</p>
<p>4.修复导出的xmind文件在最新版xmind软件上打开时提示已损坏的问题。</p>
<p>5.修复导出带有贴纸的数据为xmind格式时贴纸无法显示的问题。</p>
<p>6.修复没有注册select插件时节点右键事件报错的问题。</p>
<p>7.修复注册插件的方法没有去重的问题。</p>
</blockquote>
<p>新增：</p>
<blockquote>
<p>1.重构节点拖拽逻辑：优化一些情况下的拖拽难问题、适配各种结构、拖拽时鼠标移动到画布边缘时画布自动移动。</p>
<p>2.重构滚动条插件，优化使用体验。</p>
<p>3.不完美的解决逻辑结构图、思维导图、目录组织图、组织结构图概要和节点的冲突问题（概要后面应该会重写或删除）。</p>
<p>4.删除节点后激活相邻节点。</p>
<p>5.节点数据data中以_开头的字段被认为是自定义字段。</p>
</blockquote>
<p>Demo：</p>
<blockquote>
<p>1.页面增加显示当前核心库版本号。</p>
</blockquote>
<h2>0.7.0</h2>
<p>破坏性更新：删除了主题文件中节点激活样式的部分，不再支持设置节点的激活样式，激活效果改为统一的节点外边框样式，同时支持鼠标hover效果。</p>
<p>修复：</p>

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

@ -87,6 +87,8 @@ const mindMap = new MindMap({
| hoverRectColor（v0.7.0+） | String | rgb(94, 200, 248) | 节点鼠标hover和激活时显示的矩形边框颜色，hover时会添加0.6的透明度 | |
| hoverRectPadding（v0.7.0+） | Number | 2 | 节点鼠标hover和激活时显示的矩形边框距节点内容的距离 | |
| selectTextOnEnterEditText（v0.7.0+） | Boolean | true | 双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中 | |
| deleteNodeActive（v0.7.1+） | Boolean | true | 是否开启删除节点后自动激活节点相邻节点或父节点的功能 | |
| autoMoveWhenMouseInEdgeOnDrag（v0.7.1+） | Boolean | true | 拖拽节点时鼠标移动到画布边缘是否开启画布自动移动 | |
### 数据结构

14
web/src/pages/Doc/zh/constructor/index.vue
View File

@ -469,6 +469,20 @@
<td>双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中</td>
<td></td>
</tr>
<tr>
<td>deleteNodeActive（v0.7.1+）</td>
<td>Boolean</td>
<td>true</td>
<td>是否开启删除节点后自动激活节点相邻节点或父节点的功能</td>
<td></td>
</tr>
<tr>
<td>autoMoveWhenMouseInEdgeOnDrag（v0.7.1+）</td>
<td>Boolean</td>
<td>true</td>
<td>拖拽节点时鼠标移动到画布边缘是否开启画布自动移动</td>
<td></td>
</tr>
</tbody>
</table>
<h3>数据结构</h3>

30
web/src/pages/Doc/zh/course23/index.md
View File

@ -1,24 +1,26 @@
# 如何渲染滚动条
> 需要先注册 Scrollbar 插件
> v0.7.1+, 需要先注册 Scrollbar 插件
滚动条分为水平和垂直滚动条，所以你需要创建如下模板：
```html
<!-- 垂直 -->
<div class="scrollbar verticalScrollbar" ref="verticalScrollbarRef">
<div class="scrollbar verticalScrollbar" ref="verticalScrollbarRef" @click="onVerticalScrollbarClick">
<div
class="scrollbarInner"
:style="verticalScrollbarStyle"
@click.stop
@mousedown="onVerticalScrollbarMousedown"
></div>
</div>
<!-- 水平 -->
<div class="scrollbar horizontalScrollbar" ref="horizontalScrollbarRef">
<div class="scrollbar horizontalScrollbar" ref="horizontalScrollbarRef" @click="onHorizontalScrollbarClick">
<div
class="scrollbarInner"
:style="horizontalScrollbarStyle"
@click.stop
@mousedown="onHorizontalScrollbarMousedown"
></div>
</div>
@ -63,7 +65,7 @@
}
```
垂直滚动条的`top`和`height`、水平滚动条的`left`和`width`值需要调用插件的方法获取。
垂直滚动条的`top`和`height`、水平滚动条的`left`和`width`值需要根据插件返回的数据进行设置。
首先你需要调用`setScrollBarWrapSize`方法传递你的滚动条容器的宽和高：
@ -82,13 +84,13 @@ mindMap.scrollbar.setScrollBarWrapSize(width, height)
```js
mindMap.('scrollbar_change', this.updateScrollbar)
// 调用插件方法更新滚动条位置和大小
// 根据事件返回的滚动条数据更新滚动条元素：
{
updateScrollbar() {
updateScrollbar(data) {
const {
vertical,
horizontal
} = mindMap.scrollbar.calculationScrollbar()
} = data
this.verticalScrollbarStyle = {
top: vertical.top + '%',
height: vertical.height + '%'
@ -101,7 +103,7 @@ mindMap.('scrollbar_change', this.updateScrollbar)
}
```
调用插件的`calculationScrollbar`方法来获取滚动条元素的位置和大小，返回的是百分比数值，所以需要添加`%`。
事件返回数据的是百分比数值，所以需要添加`%`。
最后，需要给滚动条元素绑定`mousedown`事件，并且调用插件的`onMousedown`方法：
@ -113,4 +115,16 @@ mindMap.scrollbar.onMousedown(e, 'vertical')
mindMap.scrollbar.onMousedown(e, 'horizontal')
```
这样就能实现鼠标拖动滚动条更新画布位置的功能。
如果你还需要实现点击滚动条容器元素实现滚动条位置的跳变功能，那么需要给滚动条元素绑定点击事件，并且调用插件的`onClick`方法：
```js
// 垂直滚动条元素
mindMap.scrollbar.onClick(e, 'vertical')
// 水平滚动条元素
mindMap.scrollbar.onClick(e, 'horizontal')
```
以上就是实现滚动条渲染的全部步骤。

26
web/src/pages/Doc/zh/course23/index.vue
View File

@ -2,23 +2,25 @@
<div>
<h1>如何渲染滚动条</h1>
<blockquote>
<p>需要先注册 Scrollbar 插件</p>
<p>v0.7.1+, 需要先注册 Scrollbar 插件</p>
</blockquote>
<p>滚动条分为水平和垂直滚动条，所以你需要创建如下模板：</p>
<pre class="hljs"><code><span class="hljs-comment">&lt;!-- 垂直 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbar verticalScrollbar&quot;</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;verticalScrollbarRef&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbar verticalScrollbar&quot;</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;verticalScrollbarRef&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;onVerticalScrollbarClick&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span>
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbarInner&quot;</span>
<span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;verticalScrollbarStyle&quot;</span>
@<span class="hljs-attr">click.stop</span>
@<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;onVerticalScrollbarMousedown&quot;</span>
&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-comment">&lt;!-- 水平 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbar horizontalScrollbar&quot;</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;horizontalScrollbarRef&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbar horizontalScrollbar&quot;</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;horizontalScrollbarRef&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;onHorizontalScrollbarClick&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span>
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbarInner&quot;</span>
<span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;horizontalScrollbarStyle&quot;</span>
@<span class="hljs-attr">click.stop</span>
@<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;onHorizontalScrollbarMousedown&quot;</span>
&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
@ -58,7 +60,7 @@
}
}
</code></pre>
<p>垂直滚动条的<code>top</code>和<code>height</code>、水平滚动条的<code>left</code>和<code>width</code>值需要调用插件的方法获取。</p>
<p>垂直滚动条的<code>top</code>和<code>height</code>、水平滚动条的<code>left</code>和<code>width</code>值需要根据插件返回的数据进行设置。</p>
<p>首先你需要调用<code>setScrollBarWrapSize</code>方法传递你的滚动条容器的宽和高：</p>
<pre class="hljs"><code><span class="hljs-comment">// 水平滚动条容器的宽度</span>
<span class="hljs-keyword">const</span> { width } = <span class="hljs-built_in">this</span>.$refs.horizontalScrollbarRef.getBoundingClientRect()
@ -70,13 +72,13 @@ mindMap.scrollbar.setScrollBarWrapSize(width, height)
<p>然后你需要监听<code>scrollbar_change</code>方法来获取滚动条大小和位置数据：</p>
<pre class="hljs"><code>mindMap.(<span class="hljs-string">&#x27;scrollbar_change&#x27;</span>, <span class="hljs-built_in">this</span>.updateScrollbar)
<span class="hljs-comment">// 调用插件方法更新滚动条位置和大小</span>
<span class="hljs-comment">// 根据事件返回的滚动条数据更新滚动条元素：</span>
{
<span class="hljs-function"><span class="hljs-title">updateScrollbar</span>(<span class="hljs-params"></span>)</span> {
<span class="hljs-function"><span class="hljs-title">updateScrollbar</span>(<span class="hljs-params">data</span>)</span> {
<span class="hljs-keyword">const</span> {
vertical,
horizontal
} = mindMap.scrollbar.calculationScrollbar()
} = data
<span class="hljs-built_in">this</span>.verticalScrollbarStyle = {
<span class="hljs-attr">top</span>: vertical.top + <span class="hljs-string">&#x27;%&#x27;</span>,
<span class="hljs-attr">height</span>: vertical.height + <span class="hljs-string">&#x27;%&#x27;</span>
@ -88,7 +90,7 @@ mindMap.scrollbar.setScrollBarWrapSize(width, height)
}
}
</code></pre>
<p>调用插件的<code>calculationScrollbar</code>方法来获取滚动条元素的位置和大小，返回的是百分比数值，所以需要添加<code>%</code>。</p>
<p>事件返回数据的是百分比数值，所以需要添加<code>%</code>。</p>
<p>最后，需要给滚动条元素绑定<code>mousedown</code>事件，并且调用插件的<code>onMousedown</code>方法：</p>
<pre class="hljs"><code><span class="hljs-comment">// 垂直滚动条元素</span>
mindMap.scrollbar.onMousedown(e, <span class="hljs-string">&#x27;vertical&#x27;</span>)
@ -96,6 +98,14 @@ mindMap.scrollbar.onMousedown(e, <span class="hljs-string">&#x27;vertical&#x27;<
<span class="hljs-comment">// 水平滚动条元素</span>
mindMap.scrollbar.onMousedown(e, <span class="hljs-string">&#x27;horizontal&#x27;</span>)
</code></pre>
<p>这样就能实现鼠标拖动滚动条更新画布位置的功能。</p>
<p>如果你还需要实现点击滚动条容器元素实现滚动条位置的跳变功能，那么需要给滚动条元素绑定点击事件，并且调用插件的<code>onClick</code>方法：</p>
<pre class="hljs"><code><span class="hljs-comment">// 垂直滚动条元素</span>
mindMap.scrollbar.onClick(e, <span class="hljs-string">&#x27;vertical&#x27;</span>)
<span class="hljs-comment">// 水平滚动条元素</span>
mindMap.scrollbar.onClick(e, <span class="hljs-string">&#x27;horizontal&#x27;</span>)
</code></pre>
<p>以上就是实现滚动条渲染的全部步骤。</p>
</div>

41
web/src/pages/Doc/zh/scrollbar/index.md
View File

@ -1,8 +1,10 @@
# Scrollbar 插件
> v0.7.0+
>
> v0.7.1+进行了重构，下面的文档为新文档。
该插件用于帮助开发水平和垂直滚动条的功能。
该插件用于帮助开发水平和垂直滚动条的功能。详细使用方式请参考教程。
## 注册
@ -16,9 +18,26 @@ MindMap.usePlugin(Scrollbar)
## 事件
#### scrollbar_change
#### scrollbar_change(data)
当滚动条数据发生改变时触发，你可以监听该事件来更新滚动条位置和大小。
- `data`：滚动条数据，格式如下：
```js
{
// 垂直滚动条
vertical: {
top,// 垂直滚动条的top值，百分比数值
height// 垂直滚动条的高度，百分比数值
},
// 水平滚动条
horizontal: {
left,// 水平滚动条的left值，百分比数值
width// 水平滚动条的宽度，百分比数值
}
}
```
当滚动条数据发生改变时触发，你可以监听该事件来更新滚动条位置和大小。接收一个参数，代表当前最新的滚动条位置和大小信息，你可以使用它来更新滚动条元素的样式。
## 方法
@ -32,9 +51,9 @@ MindMap.usePlugin(Scrollbar)
### calculationScrollbar()
> 需要先调用setScrollBarWrapSize方法设置滚动条容器元素的宽高。
> 通常你不需要调用该方法，如果初次渲染滚动条时滚动条没有更新，那么可以手动调用该方法获取滚动条数据。
>
> 一般需要监听scrollbar_change事件，然后调用该方法更新滚动条。
> 需要先调用setScrollBarWrapSize方法设置滚动条容器元素的宽高。
返回值：
@ -53,7 +72,7 @@ MindMap.usePlugin(Scrollbar)
}
```
获取滚动条大小和位置，你可以根据返回值来设置到滚动条元素上，达到渲染和关心滚动条的效果。
获取滚动条大小和位置。
### onMousedown(e, type)
@ -61,4 +80,12 @@ MindMap.usePlugin(Scrollbar)
- `type`：按下的滚动条类型，vertical（垂直滚动条）、horizontal（水平滚动条）。
滚动条元素的鼠标按下事件时需要调用该方法。
滚动条元素的鼠标按下事件时需要调用该方法。
### onClick(e, type)
- `e`：鼠标点击事件的事件对象。
- `type`：鼠标点击的滚动条类型，vertical（垂直滚动条）、horizontal（水平滚动条）。
滚动条元素的的点击事件时需要调用该方法。

37
web/src/pages/Doc/zh/scrollbar/index.vue
View File

@ -3,8 +3,9 @@
<h1>Scrollbar 插件</h1>
<blockquote>
<p>v0.7.0+</p>
<p>v0.7.1+进行了重构，下面的文档为新文档。</p>
</blockquote>
<p>该插件用于帮助开发水平和垂直滚动条的功能。</p>
<p>该插件用于帮助开发水平和垂直滚动条的功能。详细使用方式请参考教程。</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> Scrollbar <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Scrollbar.js&#x27;</span>
@ -12,8 +13,24 @@ MindMap.usePlugin(Scrollbar)
</code></pre>
<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.scrollbar</code>获取到该实例。</p>
<h2>事件</h2>
<h4>scrollbar_change</h4>
<p>当滚动条数据发生改变时触发，你可以监听该事件来更新滚动条位置和大小。</p>
<h4>scrollbar_change(data)</h4>
<ul>
<li><code>data</code>：滚动条数据，格式如下：</li>
</ul>
<pre class="hljs"><code>{
<span class="hljs-comment">// 垂直滚动条</span>
<span class="hljs-attr">vertical</span>: {
top,<span class="hljs-comment">// 垂直滚动条的top值，百分比数值</span>
height<span class="hljs-comment">// 垂直滚动条的高度，百分比数值</span>
},
<span class="hljs-comment">// 水平滚动条</span>
<span class="hljs-attr">horizontal</span>: {
left,<span class="hljs-comment">// 水平滚动条的left值，百分比数值</span>
width<span class="hljs-comment">// 水平滚动条的宽度，百分比数值</span>
}
}
</code></pre>
<p>当滚动条数据发生改变时触发，你可以监听该事件来更新滚动条位置和大小。接收一个参数，代表当前最新的滚动条位置和大小信息，你可以使用它来更新滚动条元素的样式。</p>
<h2>方法</h2>
<h3>setScrollBarWrapSize(width, height)</h3>
<ul>
@ -27,8 +44,8 @@ MindMap.usePlugin(Scrollbar)
<p>设置滚动条容器的大小，对于水平滚动条，即容器的宽度，对于垂直滚动条，即容器的高度。当你的滚动条容器尺寸改变时需要再次调用该方法。</p>
<h3>calculationScrollbar()</h3>
<blockquote>
<p>通常你不需要调用该方法，如果初次渲染滚动条时滚动条没有更新，那么可以手动调用该方法获取滚动条数据。</p>
<p>需要先调用setScrollBarWrapSize方法设置滚动条容器元素的宽高。</p>
<p>一般需要监听scrollbar_change事件，然后调用该方法更新滚动条。</p>
</blockquote>
<p>返回值：</p>
<pre class="hljs"><code>{
@ -44,7 +61,7 @@ MindMap.usePlugin(Scrollbar)
}
}
</code></pre>
<p>获取滚动条大小和位置，你可以根据返回值来设置到滚动条元素上，达到渲染和关心滚动条的效果。</p>
<p>获取滚动条大小和位置。</p>
<h3>onMousedown(e, type)</h3>
<ul>
<li>
@ -55,6 +72,16 @@ MindMap.usePlugin(Scrollbar)
</li>
</ul>
<p>滚动条元素的鼠标按下事件时需要调用该方法。</p>
<h3>onClick(e, type)</h3>
<ul>
<li>
<p><code>e</code>：鼠标点击事件的事件对象。</p>
</li>
<li>
<p><code>type</code>：鼠标点击的滚动条类型，vertical（垂直滚动条）、horizontal（水平滚动条）。</p>
</li>
</ul>
<p>滚动条元素的的点击事件时需要调用该方法。</p>
</div>
</template>