# DocRecordPlugin 文档记录插件
文档记录插件 DocRecordPlugin 用于记录当前打开过的文档、白板状态数据，详细使用方式可参考示例代码中 src/components/doc-record 目录下的代码。
# Typescript 文档
DocRecordPlugin 文档地址：打开文档 (opens new window)。
# 创建插件
import { WhiteBoard, DocRecordPlugin } from '@polyv/white-board-sdk';
// 创建白板实例
const whiteBoard = new WhiteBoard('SELECTOR');
// 创建插件
const docRecordCtx = new DocRecordPlugin();
// 安装插件
whiteBoard.plugin.installPlugin(docRecordCtx);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 监听记录修改
通过以下方式来监听打开记录的修改：
- 实例化
DocRecordPlugin时传入changeCallback。 - 通过修改
docRecordCtx的changeCallback。
如果您是使用 vue 的框架，则可以将 whiteRecord、docList、recordStatus 这三个数据存放到 vuex 中，并根据 docList 来渲染文档切换的 Dom 节点。
import {
DocRecordPlugin,
WhiteRecord,
DocRecordItem,
DocRecordChangeCallback,
DocRecordStatus,
} from '@polyv/white-board-sdk';
// 本地记录打开的白板数据
let whiteRecord: WhiteRecord = { currentPage: 0 };
// 本地记录打开的文档列表
let docList: DocRecordItem[] = [];
// 当前正在打开的是白板/文档
let recordStatus: DocRecordStatus = 'white';
// 处理修改回调
const handleChangeCallback: DocRecordChangeCallback = (params) => {
whiteRecord = params.whiteRecord;
docList = params.docList;
recordStatus = params.recordStatus;
};
const docRecordCtx = new DocRecordPlugin({
defaultWhiteRecord: whiteRecord,
defaultDocList: docList,
changeCallback: handleChangeCallback,
});
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
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
# 切换文档
在点击文档切换 Tab 时，可根据点击对应的记录来切换文档或白板，如果您是使用 LiveStartService 服务的话，可参考下面的代码。
import {
LiveStartService,
DocRecordItem,
WhiteRecord,
} from '@polyv/white-board-sdk';
const service = new LiveStartService();
/**
* 根据记录切换到某个文档
*/
function switchDocumentByRecord(record: DocRecordItem): void {
service.openDocument(
autoId: record.autoId,
currentPage: record.currentPage,
stepIndex: record.stepIndex,
pptJson: record.pptJson,
);
}
/**
* 根据记录切换到白板
*/
function switchToWhiteBoardByRecord(record: WhiteRecord): void {
service.openWhiteBoard({
currentPage: record.currentPage,
});
}
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
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
# 关闭本地文档
如果要关闭本地打开的文档时，可调用 DocRecordPlugin 实例的 removeDocRecord 方法进行关闭，示例代码如下：
/**
* 关闭记录中打开的文档
*/
function closeDocumentByRecord(autoId: string | number): void {
const result = docRecordCtx.removeDocRecord(autoId);
if (result.docRecord) {
// 关闭后要打开的文档
switchDocumentByRecord(result.docRecord);
} else if (result.whiteRecord) {
// 关闭后要打开的白板
switchToWhiteBoardByRecord(result.whiteRecord);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
WARNING
调用 removeDocRecord 时，如果传入的 autoId 不在 docList 时会抛错。