@netless/forge-whiteboard 0.1.0

package/README.md

@@ -0,0 +1,216 @@
+# forge-whiteboard
+
+应用于 `forge-room` 房间的白板应用。请先[参考]()创建房间实例, 然后才能加载白板应用。
+
+## 启动白板
+
+```javascript
+const whiteboard = await room.applicationManager.launchApplication(WhiteboardApplication, {
+    width: 1920,
+    height: 1080,
+    defaultToolbarStyle: {
+        tool: "curve"
+    }
+}, "MainWhiteboard");
+
+// 应用启动之后可以进行样式配置, 并挂载到 dom 上
+whiteboard.view.style.height = `100vh`;
+whiteboard.view.style.width = `100vw`;
+whiteboard.view.style.background = "#9E9E9E";
+
+document.body.appendChild(whiteboard.view);
+```
+
+### 启动配置项
+
+`room.launchApplication` 第二个参数为白板的启动配置, 需注意同一个房间的不同客户端应使用一致的配置项来启动同一个 appId 对应的白板应用, 推荐
+将启动配置硬编码在源代码中. 配置项详细说明如下:
+
+**白板配置 WhiteboardOption**
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- |---|---|
+| width | number | 无 | 可视区域的宽度 |
+| height | number | 无 | 可视区域的高度 |
+| defaultToolbarStyle | ToolbarStyle | 见下文 | 默认工具栏样式 |
+
+**工具栏配置 ToolbarStyle**
+
+| 属性名 | 类型| 默认值 | 说明 |
+| --- | --- | --- | --- |
+| tool | WhiteboardToolType | "curve" | 当前工具 |
+| strokeColor | string | "#009688" | 描边颜色 |
+| fillColor | string / null | null | 填充颜色, null 表示无填充 |
+| fontSize | number | 24 | 字体大小 |
+| fontFamily | string | "Courier New" | 字体名称 |
+| strokeWidth | number | 4 | 描边宽度 |
+| dashArray | number[] | [] | 虚线样式, 默认为 [] 表示实线 |
+
+dashArray 配置参考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash)
+
+## 工具栏
+
+房间内每个用户都可以独立的设置工具栏样式, 并且设置后的值会持久的保证在房间存储中。直接通过 `whiteboard.tool` 等属性可以获取和设置当前工具栏样式。
+
+```javascript
+
+whiteboard.tool = "curve";
+whiteboard.strokeColor = "#009688";
+whiteboard.fillColor = "#fff";
+whiteboard.fontSize = 24;
+whiteboard.fontFamily = "Courier New";
+whiteboard.strokeWidth = 4;
+whiteboard.dashArray = [5,2,5];
+```
+
+通过 `WhiteboardEvents.toolbarStyleChange` 事件可以监听工具栏样式的变化, 方便跟新 UI.
+
+```javascript
+whiteboard.on(WhiteboardEvents.toolbarStyleChange, (style) => {
+    console.log(style);
+});
+```
+
+    "curve"
+    | "rectangle"
+    | "selector"
+    | "line"
+    | "arrow"
+    | "text"
+    | "ellipse"
+    | "triangle"
+    | "eraser"
+    | "laser"
+    | "grab";
+
+### 工具
+
+`WhiteboardToolType` 类型定义了白板的工具类型, 目前支持以下工具:
+
+| 名称 | 说明 |
+|--- | --- | --- | --- |
+| curve | 自由曲线 |
+| rectangle | 矩形 |
+| selector   | 选择工具 |
+| line | 直线 |
+| arrow  | 箭头连接线 |
+| text | 文本 |
+| ellipse | 椭圆(圆) |
+| triangle | 三角形 |
+| eraser | 擦除工具 |
+| laser | 激光笔 |
+| grab | 拖动工具 |
+
+### 元素交互
+
+工具栏控制新增元素的样式, 每个元素也可以独立的修改各类样式.
+
+首先需要通过 `WhiteboardEvents.elementSelected` 事件监听元素被选中, 然后通过 `whiteboard.setElementAttribute` 修改元素样式.
+
+```javascript
+whiteboard.on(WhiteboardEvents.elementSelected, (userId, pageId, elementId, attributes, boundingRect) => {
+    console.log(userId); // 选中的元素是谁创建的
+    console.log(pageId); // 元素所在页码
+    console.log(elementId); // 元素 id
+    console.log(attributes); // 元素属性列表, 不同元素的可修改属性不同
+    console.log(boundingRect); // 元素边界, 数组中的四个值分别对应 x, y, width, height
+});
+```
+
+`forge-whiteboard` 不内置 UI, 你需要自行决定元素被选中后的 UI 交互, 可以在屏幕的固定位置显示一个元素属性面板, 也可以在元素附近(上方)显示元素属性面板.
+如果是想要在元素附近显示属性面板, `WhiteboardEvents.elementSelected` 事件中的 `boundingRect` 可用于帮助定位属性面板的位置.
+
+可以通过 `whiteboard.getElementAttribute` 来确定元素当前属性值, 以绘制元素属性面板. 注意不同元素的可修改属性不同, "curve" 工具绘制的元素就不存在 "fontFamily" 属性,
+通过 `WhiteboardEvents.elementSelected` 事件中第四个参数来确定可修改属性列表.
+
+```javascript
+// 获取元素属性
+const strokeColor = whiteboard.getElementAttribute(pageId, elementId, "strokeColor");
+const fontFamily = whiteboard.getElementAttribute(pageId, elementId, "fontFamily");
+
+// 设置元素属性
+
+whiteboard.setElementAttribute(pageId, elementId, "strokeColor", "#fff");
+whiteboard.setElementAttribute(pageId, elementId, "fontFamily", "kai");
+```
+
+### 页面操作
+
+**基础页面操作**
+
+`forge-whiteboard` 页面只有一个 id 属性, 页面之间没有前后顺序的关系, 可通过以下 api 进行页面的跳转等操作，注意需要有对应的页面操作权限.
+
+```javascript
+// 添加页面
+whiteboard.addPage("page/1");
+// 跳转至刚添加的页面
+whiteboard.gotoPage("page/1");
+// 删除页面
+whiteboard.deletePage("page/1");
+// 获取页面列表
+whiteboard.pageList();
+// 获取当前页面 id, 依据视角参数不同用户可能在不同页面, 通过 userId 获取指定用户的当前页面 id, 不传 userId 参数则获取自己的当前页面 id
+whiteboard.currentPageId("userId");
+```
+
+**顺序页面操作**
+
+为了支持诸如上一页、下一页等功能, `forge-whiteboard` 通过 `whiteboard.indexedNavigation` 对象提供此类 api.
+
+```javascript
+
+// 跳转
+whiteboard.indexedNavigation.nextPage();
+whiteboard.indexedNavigation.prevPage();
+
+// 添加和插入
+whiteboard.indexedNavigation.pushPage();
+whiteboard.indexedNavigation.insertPage(3); // 在第三页后插入新页面
+
+// 删除
+whiteboard.indexedNavigation.deletePage(3);
+
+// 总页数
+whiteboard.indexedNavigation.pageCount;
+
+// 当前页发生变化时触发
+whiteboard.indexedNavigation.on("activePageChange", pageIndex => {
+    console.log(pageIndex);
+});
+
+// 总页数发生变化时触发
+whiteboard.indexedNavigation.on("pageCountChange", pageCount => {
+    console.log(pageCount);
+});
+```
+
+**其他页面操作**
+
+```javascript
+
+// 复制页面
+whiteboard.clonePage("1", "2");
+
+// 清空页面内容
+whiteboard.clearPage();
+```
+
+### 白板权限
+
+`forge-whiteboard` 设计了细致的白板权限控制机制, 通过不同权限配置可以实现很多有趣的场景.
+
+| 权限类型 | 描述 |
+|---|---|
+|WhiteboardPermissionFlag.none|没有任何权限, 只能同步的看他人绘制|
+|WhiteboardPermissionFlag.draw|可以绘制元素|
+|WhiteboardPermissionFlag.editSelf|可以修改自己创建的元素|
+|WhiteboardPermissionFlag.editOthers|可以修改他人创建的元素|
+|WhiteboardPermissionFlag.deleteSelf|可以删除自己创建的元素|
+|WhiteboardPermissionFlag.deleteOthers|可以删除他人创建的元素|
+|WhiteboardPermissionFlag.mainView|可以修改主视角, 包括页面和画布状态, 添加页面, 删除页面|
+|WhiteboardPermissionFlag.setOthersView|可以修改他人的视角模式, 指定他人的页码|
+|WhiteboardPermissionFlag.all|拥有所有权限|
+
+```javascript
+
+```

package/dist/Camera.d.ts

@@ -0,0 +1,42 @@
+import EventEmitter from "eventemitter3";
+import * as Y from "yjs";
+import { UserManager } from "@netless/forge-room";
+import { WhiteboardPermissionFlag } from "./WhitePermissions";
+interface CameraEvents {
+    zoom: (matrix: paper.Matrix) => void;
+    userPageChange: (userId: string, pageId: string) => void;
+    userViewModeChange: (userId: string, viewMode: string) => void;
+}
+export declare class Camera extends EventEmitter<CameraEvents> {
+    readonly scope: paper.PaperScope;
+    private dom;
+    private lastTriggerTime;
+    private lastDelta;
+    private requestUserMap;
+    private userManager;
+    private observers;
+    private whiteboardAttrsMap;
+    private paperSize;
+    private domSize;
+    private hasPermission;
+    private gesture;
+    private inherentScale;
+    private get inherentMatrix();
+    private get translateScale();
+    constructor(dom: HTMLDivElement, userManager: UserManager, scope: paper.PaperScope, whiteboardAttrsMap: Y.Map<any>, hasPermission: (flag: WhiteboardPermissionFlag) => boolean, requestUserMap: (userId: string) => Y.Map<any>, paperSize: () => [number, number], domSize: () => [number, number]);
+    updateInherentScale(scale: number): void;
+    private getActiveMatrix;
+    triggerZoom(): void;
+    resetViewMatrixToFlow(userId: string): void;
+    resetViewMatrixToMain(): void;
+    private handleMainCameraChange;
+    private handleUserLeave;
+    private handleUserJoin;
+    private createModel;
+    private handleViewMatrixUpdate;
+    private appendViewMatrix;
+    private handleWheel;
+    translate(offsetX: number, offsetY: number): void;
+}
+export {};
+//# sourceMappingURL=Camera.d.ts.map

package/dist/Camera.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Camera.d.ts","sourceRoot":"","sources":["../src/Camera.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAgB,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAE/D,OAAO,EAAC,wBAAwB,EAAC,MAAM,oBAAoB,CAAC;AAI5D,UAAU,YAAY;IAClB,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,kBAAkB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAClE;AAED,qBAAa,MAAO,SAAQ,YAAY,CAAC,YAAY,CAAC;IAElD,SAAgB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC;IAExC,OAAO,CAAC,GAAG,CAAiB;IAC5B,OAAO,CAAC,eAAe,CAAa;IACpC,OAAO,CAAC,SAAS,CAA0C;IAC3D,OAAO,CAAC,cAAc,CAAiC;IACvD,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,SAAS,CAA+B;IAChD,OAAO,CAAC,kBAAkB,CAAa;IACvC,OAAO,CAAC,SAAS,CAAyB;IAC1C,OAAO,CAAC,OAAO,CAAyB;IACxC,OAAO,CAAC,aAAa,CAA8C;IACnE,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,aAAa,CAAa;IAElC,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,KAAK,cAAc,GAGzB;gBAGG,GAAG,EAAE,cAAc,EACnB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,CAAC,UAAU,EACvB,kBAAkB,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAC9B,aAAa,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,OAAO,EAC1D,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAE9C,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAEjC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IA8C5B,mBAAmB,CAAC,KAAK,EAAE,MAAM;IAIxC,OAAO,CAAC,eAAe;IAahB,WAAW;IAIX,qBAAqB,CAAC,MAAM,EAAE,MAAM;IAMpC,qBAAqB;IAM5B,OAAO,CAAC,sBAAsB,CAgB5B;IAEF,OAAO,CAAC,eAAe,CAKrB;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,sBAAsB,CA2B5B;IAEF,OAAO,CAAC,gBAAgB;IAyBxB,OAAO,CAAC,WAAW,CAuCjB;IAEK,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;CAKpD"}

package/dist/Gesture.d.ts

@@ -0,0 +1,17 @@
+import EventEmitter from "eventemitter3";
+interface GestureEvent {
+    offset: (x: number, y: number) => void;
+    scale: (scale: number, center: paper.Point) => void;
+}
+export declare class Gesture extends EventEmitter<GestureEvent> {
+    private element;
+    private scope;
+    private lastVector;
+    private lastPoint;
+    constructor(element: HTMLElement, scope: paper.PaperScope);
+    private onTouchStart;
+    private onTouchMove;
+    private onTouchEnd;
+}
+export {};
+//# sourceMappingURL=Gesture.d.ts.map

package/dist/Gesture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gesture.d.ts","sourceRoot":"","sources":["../src/Gesture.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAC;AAEzC,UAAU,YAAY;IAClB,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC;CACvD;AAED,qBAAa,OAAQ,SAAQ,YAAY,CAAC,YAAY,CAAC;IAEnD,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,KAAK,CAAmB;IAChC,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,SAAS,CAA4B;gBAE1B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU;IAShE,OAAO,CAAC,YAAY,CAYlB;IAEF,OAAO,CAAC,WAAW,CAgCjB;IAEF,OAAO,CAAC,UAAU,CAGjB;CACJ"}

package/dist/IndexedNavigation.d.ts

@@ -0,0 +1,78 @@
+import * as Y from "yjs";
+import EventEmitter from "eventemitter3";
+import { PageModel } from "./model/PageModel";
+import { WhiteboardPermissionFlag } from "./WhitePermissions";
+export interface IndexedNavigationEvents {
+    /**
+     * 当前页索引发生变化时触发
+     * @param pageIndex
+     */
+    activePageChange: (pageIndex: number) => void;
+    /**
+     * 总页数发生变化时触发
+     * @param pageCount 总页数
+     */
+    pageCountChange: (pageCount: number) => void;
+}
+export declare class IndexedNavigation extends EventEmitter<IndexedNavigationEvents> {
+    private idPool;
+    private pageModel;
+    private userMap;
+    private indexedPageMap;
+    private list;
+    private hasPermission;
+    private get idList();
+    private get head();
+    private get lastNodeId();
+    constructor(pageModel: PageModel, userMap: Y.Map<any>, indexedPageMap: Y.Map<{
+        prev: string;
+        next: string;
+    }>, hasPermission: (flag: WhiteboardPermissionFlag) => boolean);
+    private getNextId;
+    initIndexed(): Promise<boolean>;
+    private handleIndexedPageMapUpdate;
+    /**
+     * 获取总页数
+     * @returns {number}
+     */
+    get pageCount(): number;
+    /**
+     * 获取当前页索引
+     */
+    get currentPageIndex(): number;
+    private getPageIndex;
+    /**
+     * 获取指定索引对应的 pageId
+     * @param {number} index
+     */
+    getPageId(index: number): string | null;
+    private modifyDetect;
+    /**
+     * 在尾部插入新页面
+     * @param {boolean=} goto 是否跳转到新页面, 默认 true
+     * @return 总页数
+     */
+    pushPage(goto?: boolean): number;
+    /**
+     * 在 after 之后插入新页面
+     * @param {number} after 在此页之后插入
+     * @param {boolean=} goto 是否跳转到新页面, 默认 true
+     * @return 总页数
+     */
+    insertPage(after: number, goto?: Boolean): number;
+    /**
+     * 跳转至上一页, 并返回跳转后的页面索引.
+     */
+    prevPage(): number;
+    /**
+     * 跳转至下一页, 并返回跳转后的页面索引.
+     */
+    nextPage(): number;
+    /**
+     * 删除指定页面
+     * @param {number} index
+     */
+    removePage(index: number): number;
+    gotoPage(index: number): void;
+}
+//# sourceMappingURL=IndexedNavigation.d.ts.map

package/dist/IndexedNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndexedNavigation.d.ts","sourceRoot":"","sources":["../src/IndexedNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;AACzB,OAAO,YAAY,MAAM,eAAe,CAAC;AAGzC,OAAO,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAE5C,OAAO,EAAC,wBAAwB,EAAC,MAAM,oBAAoB,CAAC;AAE5D,MAAM,WAAW,uBAAuB;IACpC;;;OAGG;IACH,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAED,qBAAa,iBAAkB,SAAQ,YAAY,CAAC,uBAAuB,CAAC;IAExE,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,SAAS,CAAY;IAC7B,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,cAAc,CAAa;IAEnC,OAAO,CAAC,IAAI,CAAwD;IACpE,OAAO,CAAC,aAAa,CAA8C;IAEnE,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,KAAK,IAAI,GAWf;IAED,OAAO,KAAK,UAAU,GAQrB;gBAGG,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EACnB,cAAc,EAAE,CAAC,CAAC,GAAG,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,EACrD,aAAa,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,OAAO;IAgC9D,OAAO,CAAC,SAAS;IAcV,WAAW,IAAI,OAAO,CAAC,OAAO,CAAC;IAatC,OAAO,CAAC,0BAA0B,CAYhC;IAEF;;;OAGG;IACH,IAAW,SAAS,IAAI,MAAM,CAE7B;IAED;;OAEG;IACH,IAAW,gBAAgB,IAAI,MAAM,CAGpC;IAED,OAAO,CAAC,YAAY;IAiBpB;;;OAGG;IACI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAmB9C,OAAO,CAAC,YAAY;IAapB;;;;OAIG;IACI,QAAQ,CAAC,IAAI,GAAE,OAAc,GAAG,MAAM;IAgC7C;;;;;OAKG;IACI,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,GAAE,OAAc,GAAG,MAAM;IAuD9D;;OAEG;IACI,QAAQ,IAAI,MAAM;IAYzB;;OAEG;IACI,QAAQ,IAAI,MAAM;IAazB;;;OAGG;IACI,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IA2CjC,QAAQ,CAAC,KAAK,EAAE,MAAM;CAMhC"}

package/dist/WhitePermissions.d.ts

@@ -0,0 +1,96 @@
+import { type UserManager } from "@netless/forge-room";
+import EventEmitter from "eventemitter3";
+import * as Y from "yjs";
+export declare enum WhiteboardPermissionFlag {
+    /**
+     * 没有任何权限, 只能同步的看他人绘制
+     */
+    none = 0,
+    /**
+     * 可以绘制元素
+     */
+    draw = 1,
+    /**
+     * 可以修改自己创建的元素
+     */
+    editSelf = 2,
+    /**
+     * 可以修改他人创建的元素
+     */
+    editOthers = 4,
+    /**
+     * 可以删除自己创建的元素
+     */
+    deleteSelf = 8,
+    /**
+     * 可以删除他人创建的元素
+     */
+    deleteOthers = 16,
+    /**
+     * 可以修改主视角, 包括页面和画布状态, 添加页面, 删除页面
+     */
+    mainView = 32,
+    /**
+     * 可以修改他人的视角模式, 指定他人的页码
+     */
+    setOthersView = 64,
+    /**
+     * 拥有所有权限
+     */
+    all = 127
+}
+export interface WhitePermissionEvents {
+    /**
+     * 当用户权限变更时触发
+     * @param { string } userId 对应 userId
+     * @param { WhiteboardPermissionFlag[] } flags 当前权限列表
+     * @param { number } value 权限值
+     */
+    change: (userId: string, flags: WhiteboardPermissionFlag[], value: number) => void;
+}
+export declare class WhiteboardPermissions extends EventEmitter<WhitePermissionEvents> {
+    private requestUserMap;
+    private userManager;
+    private observers;
+    constructor(userManager: UserManager, requestUserMap: (userId: string) => Y.Map<any>);
+    private handleUserLeave;
+    private handleUserJoin;
+    private addObserve;
+    private createModel;
+    private handleUserPermissionChange;
+    /**
+     * 解析权限列表组合
+     * @param {number} value - 权限数字值
+     * @return {WhiteboardPermissionFlag[]} - 权限列表
+     */
+    resolveFlags(value: number): WhiteboardPermissionFlag[];
+    /**
+     * 获取权限列表组合对应的数值
+     * @param { string } userId 不传表示获取自己
+     */
+    getPermissionValue(userId?: string): number;
+    /**
+     * 获取权限列表
+     * @param {string=} userId 可选, 不传表示获取自己
+     */
+    getPermissionFlags(userId?: string): WhiteboardPermissionFlag[];
+    /**
+     * 返回对应 userId 是否有相应权限
+     * @param {string=} userId 可选, 不传表示返回自己是否有相应权限
+     * @param {WhiteboardPermissionFlag} flag
+     */
+    hasPermission(flag: WhiteboardPermissionFlag, userId?: string): boolean;
+    /**
+     * 添加权限
+     * @param {WhiteboardPermissionFlag} flag 权限标记
+     * @param {string=} userId 可选, 为 userId 添加权限, 不传表示为自己添加权限
+     */
+    addPermission(flag: WhiteboardPermissionFlag, userId?: string): void;
+    /**
+     * 移除权限
+     * @param {WhiteboardPermissionFlag} flag 权限标记
+     * @param {string=} userId 可选, 为 userId 移除权限, 不传表示为自己移除权限
+     */
+    removePermission(flag: WhiteboardPermissionFlag, userId?: string): void;
+}
+//# sourceMappingURL=WhitePermissions.d.ts.map

package/dist/WhitePermissions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WhitePermissions.d.ts","sourceRoot":"","sources":["../src/WhitePermissions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;AAEzB,oBAAY,wBAAwB;IAChC;;OAEG;IACH,IAAI,IAAqB;IACzB;;OAEG;IACH,IAAI,IAAqB;IACzB;;OAEG;IACH,QAAQ,IAAqB;IAC7B;;OAEG;IACH,UAAU,IAAqB;IAC/B;;OAEG;IACH,UAAU,IAAqB;IAC/B;;OAEG;IACH,YAAY,KAAqB;IACjC;;OAEG;IACH,QAAQ,KAAqB;IAC7B;;OAEG;IACH,aAAa,KAAqB;IAClC;;OAEG;IACH,GAAG,MAMyC;CAC/C;AAED,MAAM,WAAW,qBAAqB;IAClC;;;;;OAKG;IACH,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtF;AAED,qBAAa,qBAAsB,SAAQ,YAAY,CAAC,qBAAqB,CAAC;IAE1E,OAAO,CAAC,cAAc,CAAiC;IACvD,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,SAAS,CAA+B;gBAG5C,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;IAclD,OAAO,CAAC,eAAe,CAKrB;IAEF,OAAO,CAAC,cAAc,CAEpB;IAEF,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,0BAA0B;IAWlC;;;;OAIG;IACI,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,wBAAwB,EAAE;IAW9D;;;OAGG;IACI,kBAAkB,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM;IAIlD;;;OAGG;IACI,kBAAkB,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,wBAAwB,EAAE;IAKtE;;;;OAIG;IACI,aAAa,CAAC,IAAI,EAAE,wBAAwB,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO;IAI9E;;;;OAIG;IACI,aAAa,CAAC,IAAI,EAAE,wBAAwB,EAAE,MAAM,CAAC,EAAE,MAAM;IAMpE;;;;OAIG;IACI,gBAAgB,CAAC,IAAI,EAAE,wBAAwB,EAAE,MAAM,CAAC,EAAE,MAAM;CAK1E"}

package/dist/Whiteboard.d.ts

@@ -0,0 +1,202 @@
+import EventEmitter from "eventemitter3";
+import { ApplicationInstanceType } from "@netless/forge-room";
+import { WhiteboardToolType } from "./WhiteboardApplication";
+import { IndexedNavigation } from "./IndexedNavigation";
+import { WhiteboardPermissions } from "./WhitePermissions";
+import { ToolbarStyle } from "./model/ToolbarModel";
+export interface WhiteboardEvents {
+    /**
+     * 元素被选中后触发
+     * @param {string} userId - 触发事件的用户 id
+     * @param {string} pageId - 元素所属页面 id
+     * @param {string} elementId - 元素 id
+     * @param {ElementAttributeKey[]} attributes - 元素的可修改属性列表
+     * @param {number[]} boundingRect - 所有选中元素的最小包围盒, [x, y, width, height]
+     */
+    elementSelected: (userId: string, pageId: string, elementId: string, attributes: ElementAttributeKey[], boundingRect: [number, number, number, number]) => void;
+    /**
+     * 所有元素取消选中后触发
+     * @param {string} userId - 触发事件的用户 id
+     */
+    elementDeselected: (userId: string) => void;
+    /**
+     * 工具栏发生变化
+     * @param {ToolbarStyle} style
+     */
+    toolbarStyleChange: (style: ToolbarStyle) => void;
+    /**
+     * 白板页数发生变化
+     * @param {string[]} pageList pageId 组成的数组
+     */
+    pagesChange: (pageList: string[]) => void;
+    /**
+     * 当前显示页面发生变化后触发
+     * @param {string} userId - 触发事件的用户 id
+     * @param {string} pageId - 当前页面 id
+     */
+    activePageChange: (userId: string, pageId: string) => void;
+    /**
+     * 视角模式发生变化
+     * @param {string} userId
+     * @param {"free" | "main" | string} viewMode
+     */
+    userViewModeChange: (userId: string, viewMode: "free" | "main" | string) => void;
+    /**
+     * 输入类型发生变化, "pen" 仅接受手写笔输入, "any" 接受任意输入
+     * @param {"pen" | "any"} type
+     */
+    inputTypeChange: (type: "pen" | "any") => void;
+    /**
+     * 撤销栈发生变化时触发
+     * @param {number} length - 撤销栈长度
+     */
+    undoStackLength: (length: number) => void;
+    /**
+     * 重做栈发生变化时触发
+     * @param {number} length - 重做栈长度
+     */
+    redoStackLength: (length: number) => void;
+    /**
+     * grab 工具鼠标按下时触发
+     */
+    grabDown: () => void;
+    /**
+     * grab 工具鼠标弹起时触发
+     */
+    grabUp: () => void;
+    error: (errorCode: number, errorMsg: string) => void;
+}
+export type ElementAttributes = {
+    strokeColor: string;
+    fillColor: string | null;
+    strokeWidth: number;
+    fontSize: number;
+    dashArray: number[];
+    headArrow: "normal" | "none";
+    tailArrow: "normal" | "none";
+};
+export type ElementAttributeKey = keyof ElementAttributes;
+export declare class Whiteboard extends EventEmitter<WhiteboardEvents> implements ApplicationInstanceType {
+    readonly view: HTMLDivElement;
+    readonly selfUserId: string;
+    readonly permissions: WhiteboardPermissions;
+    /**
+     * 当前选中的工具
+     */
+    tool: WhiteboardToolType;
+    /**
+     * 字体大小
+     */
+    fontSize: number;
+    /**
+     * 虚线配置
+     */
+    dashArray: number[];
+    /**
+     * 字体名称
+     */
+    fontFamily: string;
+    /**
+     * 描边颜色
+     */
+    strokeColor: string;
+    /**
+     * 填充颜色
+     */
+    fillColor: string;
+    /**
+     * 描边宽度
+     */
+    strokeWidth: number;
+    getElementAttribute: <K extends ElementAttributeKey>(sceneId: string, elementId: string, attribute: K) => ElementAttributes[K];
+    setElementAttribute: <K extends keyof ElementAttributes>(sceneId: string, elementId: string, attribute: K, value: ElementAttributes[K]) => any;
+    getCurrentTool: () => WhiteboardToolType;
+    setCurrentTool: (tool: WhiteboardToolType) => void;
+    /**
+     * 设置画布区域背景色
+     * @param {string} color - css 颜色值
+     */
+    setCanvasBackgroundColor: (color: string) => void;
+    /**
+     * 设置主题色, 主题色影响选中框和昵称的背景色
+     * @param {string} color - css 颜色值
+     */
+    setThemeColor: (color: string) => void;
+    /**
+     * 切换到指定页面, 调用端需要有页面切换权限
+     * @param {string} id - 指定要切换到的页面 id
+     */
+    gotoPage: (id: string) => void;
+    /**
+     * 添加页面, 如果页面已经存在则不做任何修改
+     * @param {string} id - 指定要添加到的页面 id
+     */
+    addPage: (id: string) => void;
+    deletePage: (id: string) => void;
+    pageList: () => string[];
+    /**
+     * 获取当前页面 id
+     * @param {string=} userId - 指定要获取对应用户的当前页面 id, 不传 userId 参数则获取自己的当前页面 id
+     */
+    currentPageId: (userId?: string) => string;
+    /**
+     * 复制页面
+     * @param {string} sourceId - 指定要复制的页面, string 类型指定 id
+     * @param {string} targetId - 指定要复制到的页面, string 类型指定 id
+     */
+    clonePage: (sourceId: string, targetId: string) => void;
+    /**
+     * 清空当前页面
+     */
+    clearPage: () => void;
+    /**
+     * 为 userId 指定的用户设置页面, 调用需要有 `WhiteboardPermissionFlag.setOthersView` 权限,
+     * userId 指定的用户的视角模式应为 `free`, 否则调用无效
+     */
+    setFreeModelUserPage: (id: string, userId: string) => void;
+    indexedNavigation: IndexedNavigation;
+    /**
+     * 设置视角模式为自由模式, 可以修改自己或者他人视角, 修改他人视角需要 `WhiteboardPermissionFlag.setOthersView` 权限
+     * @param {string=} userId 可选, 指定要修改视角的 userId, 默认修改自己的视角
+     */
+    setViewModeToFree: (userId?: string) => void;
+    /**
+     * 设置视角模式为跟随其他用户, 可以修改自己或者他人视角, 修改他人视角需要 `WhiteboardPermissionFlag.setOthersView` 权限
+     * @param {string} flowId 指定要跟随的用户 id
+     * @param {string=} userId 可选, 指定要修改视角的 userId, 默认修改自己的视角
+     */
+    setViewModeToFlow: (flowId: string, userId?: string) => void;
+    /**
+     * 设置视角模式为跟随白板主视角, 可以修改自己或者他人视角, 修改他人视角需要 `WhiteboardPermissionFlag.setOthersView` 权限
+     * @param {string=} userId 可选, 指定要修改视角的 userId, 默认修改自己的视角
+     */
+    setViewModeToMain: (userId?: string | undefined) => void;
+    /**
+     * 获取视角模式
+     * @param {string=} userId 可选, 默认获取自己的视角模式
+     * @return {'free' | 'main' | string} `free` 表示自由视角, `main` 表示主视角, 其他 string 类型代表跟随视角, string 值为跟随的 userId
+     */
+    getViewModel: (userId?: string) => "free" | "main" | string;
+    /**
+     * 撤销
+     */
+    undo: () => void;
+    /**
+     * 重做
+     */
+    redo: () => void;
+    /**
+     * 光栅化指定页面
+     * @param {string | number | undefined} page 指定页码, string 指示页码 id, number 指示 IndexedNavigation 页面索引, undefined 指示光栅化当前页
+     * @return {Promise<string>} 异步返回光栅化结果, 图片 png 对应的 base64 url, 如果页面不存在返回 null
+     */
+    rasterize: (page: string | number | undefined) => Promise<string | null>;
+    /**
+     * 设置输入类型, "pen" 仅接受手写笔输入, "any" 接受任意输入, 当首次侦测到手写笔输入时, 将自动切换为 "pen"
+     * @param {"pen" | "any"} type 输入类型
+     */
+    setInputType: (type: "pen" | "any") => void;
+    insertImage: (src: string) => void;
+    constructor(view: HTMLDivElement);
+}
+//# sourceMappingURL=Whiteboard.d.ts.map

package/dist/Whiteboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Whiteboard.d.ts","sourceRoot":"","sources":["../src/Whiteboard.ts"],"names":[],"mappings":"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"}