# ToolPlugin 工具栏插件
白板工具栏插件用于切换教具、切换页数、缩放等功能，工具栏的样式由使用者自行定义，详细的使用方式可参考示例中 src/components/tools/ 目录下的代码。
# 创建工具栏的 Dom 节点
<div id="tool-wrap">
<div data-appliance="choice" title="选择">
<span class="wb-icon-choice"></span>
</div>
<div data-appliance="move" title="移动">
<span class="wb-icon-move"></span>
</div>
<div data-appliance="freeLine" title="自由画笔">
<span class="wb-icon-pencil"></span>
</div>
<div data-appliance="straightLine" title="直线">
<span class="wb-icon-line"></span>
</div>
<div data-appliance="rect" title="矩形">
<span class="wb-icon-rect"></span>
</div>
<div data-appliance="text" title="文本">
<span class="wb-icon-text"></span>
</div>
<div data-appliance="laserPen" title="激光笔">
<span class="wb-icon-laser"></span>
</div>
<div data-appliance="eraser" title="橡皮擦">
<span class="wb-icon-eraser"></span>
</div>
<div data-clear title="清空">
<span class="wb-icon-clear"></span>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 创建工具栏插件
通过 @polyv/white-board-sdk 提供的 ToolPlugin 创建工具栏插件。
import { ToolPlugin } from '@polyv/white-board-sdk';
const toolCtx = new ToolPlugin({
// 传入工具栏外层选择器
selector: '#tool-wrap',
});
1
2
3
4
5
6
2
3
4
5
6
# 功能支持
- 教具切换：
data-appliance="rect"、data-appliance="freeLine"。 - 笔触颜色、线条大小、字体大小切换。
- 视觉控制，如放大、缩小、当前的缩放百分比。
- 网格功能控制，如网格开关，放大缩小网格大小。
- 撤回、重做、清空。
- 页数控制。
# 激活与禁用状态
当白板切换到某个教具时（如矩形教具 rect），工具栏内部会寻找 data-appliance="rect" 的 Dom 节点并添加一个 current 的 className。
不仅仅是教具的激活，包括网格开关、笔触颜色选中、线条大小选中均会视为激活状态，同理，如果当前已达到缩放百分比最大值时，data-zoom-large 的 Dom 节点会添加一个 disabled 的 className。
此时项目内可根据自身需求实现激活与禁用的样式，示例代码如下：
<style>
.current {
color: #2196f3;
}
.disabled {
color: red;
}
</style>
<div data-appliance="move" class="current" title="移动">
<span class="wb-icon-move"></span>
</div>
<div data-zoom-large class="disabled" title="放大">
<span class="wb-icon-zoom-out"></span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
current 与 disabled 可在创建白板工具栏插件时自定义，示例代码如下：
const toolCtx = new ToolPlugin({
// ... other params
currentClassName: 'active-btn', // 选中状态下样式类名，默认：current
disabledClassName: 'disabled-btn', // 禁用状态下样式类名，默认：disbaled
});
1
2
3
4
5
2
3
4
5
# 操作拦截
如果你有这样子的使用场景：清空画板前进行二次确认，那么在实例化 ToolPlugin 时，传入 beforeUndo、beforeRedo、beforeClear 可分别拦截撤回、重做、清空这三个操作。
const toolCtx = new ToolPlugin({
// ... other params
beforeClear: ({ done }) => {
window.confirm('确认要清空当前画板吗？');
// 调用 done 方法继续执行清空操作
done();
},
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8