docs: update docs about appliance-plugin

netless-io · Dec 6, 2024 · 7db62c8 · 7db62c8
1 parent f79c79c
commit 7db62c8
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 15 deletions.
diff --git a/README-zh.md b/README-zh.md
@@ -426,7 +426,7 @@ const appId = await fastboard.manager.addApp({
 
 <h2 id="performance">使用性能优化版本</h2>
 
-通过 `enableAppliancePlugin` 及 `managerConfig.supportAppliancePlugin` 配置项开启 appliance-plugin 插件，以提升性能, 也可以参考文档:[appliance-plugin](./docs/zh/appliance-plugin.md)。
+通过 `enableAppliancePlugin` 及 `managerConfig.supportAppliancePlugin` 配置项开启 appliance-plugin 插件，以提升性能以及提供[新的白板功能](https://github.com/netless-io/fastboard/blob/main/docs/zh/appliance-plugin.md#%E6%96%B0%E5%8A%9F%E8%83%BD), 也可以参考文档:[appliance-plugin](./docs/zh/appliance-plugin.md)了解更多内容。
 > **注意：** 开启使用性能优化版本,需要安装 ``@netless/appliance-plugin`` 。
 
 ### 示例代码

diff --git a/README.md b/README.md
@@ -421,8 +421,7 @@ To develop your own app, see [Write you a Netless App](./docs/en/app.md).
 
 ## performance
 
-Enable the `@netless/appliance-plugin` through the `enableAppliancePlugin` & `managerConfig.supportAppliancePlugin` configuration item to improve performance.Also refer to the document [appliance-plugin](./docs/en/appliance-plugin.md).
-
+Through ` enableAppliancePlugin ` and ` managerConfig. SupportAppliancePlugin ` configuration items open appliance-plugins plugin. In order to enhance performance and provide [new whiteboard features](https://github.com/netless-io/fastboard/blob/main/docs/en/appliance-plugin.md#new-features), or refer to the [appliance-plugin](./docs/en/appliance-plugin.md) document for more information.
 > **Note:** To enable the use of the performance optimized version, you need to install `@netless/appliance-plugin`.
 
 ```jsx

diff --git a/docs/en/appliance-plugin.md b/docs/en/appliance-plugin.md
@@ -190,7 +190,7 @@ The following interfaces are involved:
 - Server-side screenshot, after the appliance-plugin is turned on, notes cannot be obtained by calling server-side screenshot, but need to use `screenshotToCanvasAsync` to obtain the screenshot
 
 #### New features
-1. Minimap function
+1. Minimap function (Version >=1.1.6)
     ```js
     /** Create a minimap
      * @param viewId ID of the whiteboard under windowManager. The ID of the main whiteboard is mainView, and the ID of other whiteboards is the appID of addApp() return
@@ -200,7 +200,7 @@ The following interfaces are involved:
     /** Destroy minimap */
     destroyMiniMap(viewId: string): Promise<void>;
     ```
-2. Filter Elements
+2. Filter Elements (Version >=1.1.6)
     ```js
     /** Filter Elements
      * @param viewId ID of the whiteboard under windowManager. The ID of the main whiteboard is mainView, and the ID of other whiteboards is the appID of addApp() return
@@ -217,12 +217,64 @@ The following interfaces are involved:
      */
     cancelFilterRender(viewId: string, isSync?:boolean): void;
     ```
-3. Split screen display Elements (little whiteboard featrue), need to combine '@netless/app-little-white-board'
+3. Split screen display Elements (little whiteboard featrue), need to combine '@netless/app-little-white-board' (Version >=1.1.3)
 
-4. laserPen teaching aids
+4. laserPen teaching aids (Version >=1.1.1)
     ```js
-        import { EStrokeType, ApplianceNames } from '@netless/appliance-plugin';
-        room.setMemberState({currentApplianceName: ApplianceNames.laserPen, strokeType: EStrokeType.Normal});
+    import { EStrokeType, ApplianceNames } from '@netless/appliance-plugin';
+    room.setMemberState({currentApplianceName: ApplianceNames.laserPen, strokeType: EStrokeType.Normal});
+    ```
+5. Extended Teaching AIDS (Version >=1.1.1)
+    ```js
+    export enum EStrokeType { 
+        /** Solid line */ 
+        Normal = 'Normal', 
+        /** Line with pen edge */ 
+        Stroke = 'Stroke', 
+        /** Dotted line */ 
+        Dotted = 'Dotted', 
+        /** Long dotted line */ 
+        LongDotted = 'LongDotted' 
+    };
+    export type ExtendMemberState = {
+        /** The teaching AIDS selected by the current user */ 
+        currentApplianceName: ApplianceNames; 
+        /** Whether to open the pen tip */ 
+        strokeType? : EStrokeType; 
+        /** Whether to delete the entire line segment */ 
+        isLine? : boolean; 
+        /** Wireframe transparency */ 
+        strokeOpacity? : number; 
+        /** Whether to turn on laser pointer */ 
+        useLaserPen? : boolean; 
+        /** Laser pointer holding time, second */ 
+        duration? : number; 
+        /** Fill style */ 
+        fillColor? : Color; 
+        /** Fill transparency */ 
+        fillOpacity? : number; 
+        /** The specific type of graph to draw when using shape */ 
+        shapeType? : ShapeType; 
+        /** Number of polygon vertices */ 
+        vertices? :number; 
+        /** Length of the inner vertex of the polygon */ 
+        innerVerticeStep? :number; 
+        /** Ratio of the radius of the inner vertex of the polygon to the outer vertex */ 
+        innerRatio? : number; 
+        /** Text transparency */ 
+        textOpacity? : number; 
+        /** Text background color */ 
+        textBgColor? : Color; 
+        /** Text background color transparency */ 
+        textBgOpacity? : number; 
+        /** Location */ 
+        placement? : SpeechBalloonPlacement;
+    };
+    import { ExtendMemberState, ApplianceNames } from '@netless/appliance-plugin';
+    /** Set the state of teaching AIDS  */
+    room.setMemberState({ ... } as ExtendMemberState);
+    manager.mainView.setMemberState({ ... } as ExtendMemberState);
+    appliance.setMemberState({ ... } as ExtendMemberState);
     ```
 
 ### Configure parameters 

diff --git a/docs/zh/appliance-plugin.md b/docs/zh/appliance-plugin.md
@@ -193,7 +193,7 @@ module: {
 - 服务端截图, appliance-plugin开启后, 笔记不能通过调用服务端截图方式获取截图,而需要改用`screenshotToCanvasAsync`获取
 
 #### 新功能
-1. 小地图功能
+1. 小地图功能 (Version >=1.1.6)
     ```js
     /** 创建小地图
      * @param viewId 多白板下白板ID, 主白板ID为 `mainView`, 其他白板ID为 addApp() return 的appID
@@ -203,7 +203,7 @@ module: {
     /** 销毁小地图 */
     destroyMiniMap(viewId: string): Promise<boolean>;
     ```
-2. 过滤笔记
+2. 过滤笔记 (Version >=1.1.6)
     ```js
     /** 过滤笔记
      * @param viewId 多白板下白板ID, 主白板ID为 `mainView`, 其他白板ID为 addApp() return 的appID
@@ -220,12 +220,64 @@ module: {
      */
     cancelFilterRender(viewId: string, isSync?:boolean): void;
     ```
-3. 分屏显示笔记(小白板功能),需要结合 `@netless/app-little-white-board`
+3. 分屏显示笔记(小白板功能),需要结合 `@netless/app-little-white-board` (Version >=1.1.3)
 
-4. 激光铅笔教具
+4. 激光铅笔教具 (Version >=1.1.1)
     ```js
-        import { EStrokeType, ApplianceNames } from '@netless/appliance-plugin';
-        room.setMemberState({currentApplianceName: ApplianceNames.laserPen, strokeType: EStrokeType.Normal});
+    import { EStrokeType, ApplianceNames } from '@netless/appliance-plugin';
+    room.setMemberState({currentApplianceName: ApplianceNames.laserPen, strokeType: EStrokeType.Normal});
+    ```
+5. 扩展教具 (Version >=1.1.1)
+    ```js
+    export enum EStrokeType {
+        /** 实心线条 */
+        Normal = 'Normal',
+        /** 带笔锋线条 */
+        Stroke = 'Stroke',
+        /** 虚线线条 */
+        Dotted = 'Dotted',
+        /** 长虚线线条 */
+        LongDotted = 'LongDotted'
+    };
+    export type ExtendMemberState = {
+        /** 当前用户所选择的教具 */
+        currentApplianceName: ApplianceNames;
+        /** 是否开启笔锋 */
+        strokeType?: EStrokeType;
+        /** 是否删除整条线段 */
+        isLine?: boolean;
+        /** 线框透明度 */
+        strokeOpacity?: number;
+        /** 是否开启激光笔 */
+        useLaserPen?: boolean;
+        /** 激光笔保持时间, second */
+        duration?: number;
+        /** 填充样式 */
+        fillColor?: Color;
+        /** 填充透明度 */
+        fillOpacity?: number;
+        /** 使用 ``shape`` 教具时，绘制图形的具体类型 */
+        shapeType?: ShapeType;
+        /** 多边形顶点数 */
+        vertices?:number;
+        /** 多边形向内顶点步长 */
+        innerVerticeStep?:number;
+        /** 多边形向内顶点与外顶点半径比率 */
+        innerRatio?: number;
+        /** 文字透明度 */
+        textOpacity?: number;
+        /** 文字背景颜色  */
+        textBgColor?: Color;
+        /** 文字背景颜色透明度 */
+        textBgOpacity?: number;
+        /** 位置 */
+        placement?: SpeechBalloonPlacement;
+    };
+    import { ExtendMemberState, ApplianceNames } from '@netless/appliance-plugin';
+    /** 设置教具状态  */
+    room.setMemberState({ ... } as ExtendMemberState);
+    manager.mainView.setMemberState({ ... } as ExtendMemberState);
+    appliance.setMemberState({ ... } as ExtendMemberState);
     ```
 
 ### 配置参数