white-board-sdk 使用文档

# AppState 白板状态

# 概览

每个白板实例都可以从 appState 中获取白板的状态，同时内部提供某些功能的操作状态，如能否放大视角、能否切换到下一页，但这些状态都会根据权限进行判断，appState 中获取的状态一般用于像工具栏等功能，获取方法如下：

const whiteBoard = new WhiteBoard('SELECTOR', {
  // config...
});
const appState = whiteBoard.appState;
1
2
3
4

注意，读取的权限都是根据白板 SDK 内置的权限进行判断。

# 教具状态

教具状态 ApplianceState 为白板应用的当前教具、笔触颜色以及能否操作控制教具的切换，其中 controlApplianceState 为 false 时表示操作者不得切换教具或笔触颜色等，会根据内置的 Auth.APPLIANCE 权限进行判断，其类型定义与获取方式如下：

// 教具状态类型定义
interface ApplianceState {
  /** 当前教具名称 */
  currentAppliance: string,
  /** 当前笔触大小 */
  strokeStyle: string,
  /** 当前笔触大小 */
  lineWidth: number,
  /** 当前字体大小 */
  fontSize: number,
  /** 能否控制教具 */
  controlApplianceState: boolean,
}

// 获取教具状态
const state = appState.getApplianceState();
console.log(state);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 操作状态

操作状态 OperationState 为能否进行撤回、重做、清空和删除选中的图形，这些状态都会根据操作类型以及内置的权限进行判断，其类型定义与获取方式如下：

// 操作状态类型定义
interface OperationState {
  /** 能否进行撤回 */
  undoState: boolean,
  /** 能否进行重做 */
  redoState: boolean,
  /** 能否进行清空 */
  clearState: boolean,
  /** 能否进行删除选中的画笔 */
  deleteState: boolean,
}

// 获取操作状态
const state = appState.getOperationState();
console.log(state);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 视角状态

视角状态 VisionState 为白板应用的视角数据，包括缩放百分比、能否放大缩小与操纵视角，其类型定义与获取方式如下：

// 视角状态类型定义
interface VisionState {
  /** 当前缩放百分比 */
  zoomPercen: number,
  /** 能否放大视角 */
  largeZoomState: boolean,
  /** 能否缩小视角 */
  narrowZoomState: boolean,
  /** 能否重置视角 */
  resetVisionState: boolean,
  /** 能否操纵视角 */
  controlVisionState: boolean,
}

// 获取视角状态
const state = appState.getVisionState();
console.log(state);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 分页状态

分页状态 PageState 为白板应用的分页数据，包括当前页数、总页数，能否切换页数、能否添加一页等状态，其类型定义与获取方式如下：

// 分页状态类型定义
interface PageState {
  /** 当前页数 */
  currentPage: number,
  /** 总页数 */
  totalPage: number,
  /** 能否下一页 */
  nextPageState: boolean,
  /** 能否上一页 */
  prePageState: boolean,
  /** 能否添加一页 */
  addPageState: boolean,
}

const state = appState.getPageState();
console.log(state);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 网格状态

网格状态 GridState 为白板应用的网格数据，包括当前的网格开关等网格模块的数据，其类型定义与获取方式如下：

// 网格状态类型定义
interface GridState {
  /** 网格开关 */
  gridEnabled: boolean,
  /** 网格颜色 */
  gridColor: string,
  /** 网格大小 */
  gridSize: number,
  /** 操纵网格状态 */
  controlGridState: boolean,
}

const state = appState.getGridState();
console.log(state);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# PPT 文档状态

PptState 为白板应用的 PPT 文档模块数据，包括当前打开的 ppt 标识 id、缩略图地址等，其类型定义与获取方式如下：

// PPT 文档状态
interface PptState {
  /** 当前动画步骤索引 */
  stepIndex: number,
  /** 当前打开的 PPT 标识 ID，如果没有打开 PPT 则返回数字 0 */
  currentAutoId: number | string,
  /** 当前打开的 PPT 的文件名，没有打开时为 undefined */
  fileName: string | undefined,
  /** 当前打开的 PPT 类型，没有打开时为 undefined */
  pptType: PptType | undefined,
  /** 当前打开的 PPT 的图片列表，没有打开时为 undefined */
  pptImages: PptImageData[] | undefined,
  /** 当前打开的 PPT 的缩略图列表，没有打开时为 undefined */
  thumbnails: string[] | undefined,
  /** 当前是否已打开了一份 PPT */
  isOpenedPpt: boolean,
  /** ppt json，没有打开时为 undefined */
  pptJson?: PptJsonType,
}

const state = appState.getPptState();
console.log(state);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 应用状态

AppState 为当前白板应用的所有状态，其内容为上述所有状态的集合，如果在某些方法中需要某个模块的状态数据，建议调用相对应的方法进行获取而不是直接获取 AppState，其类型定义与获取方式如下：

// 应用状态类型定义
interface AppState extends ApplianceState, OperationState, VisionState, PageState, GridState, PptState {}

const state = appState.getAppState();
console.log(state);
1
2
3
4
5

← Appliace 教具 →