docs: update appliance-plugin Notes

netless-io · Dec 27, 2024 · d550b12 · d550b12
1 parent 26407a9
commit d550b12
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 64 deletions.
diff --git a/README-zh.md b/README-zh.md
@@ -468,7 +468,8 @@ function App() {
 ```
 ### 注意
 
-- 在开启 appliance-plugin 插件后, 之前白板上旧绘制的内容会显示,但是无法操作和升级. 所以为了不影响体验,请在一个无任何历史数据的白板上使用。同理插件关闭后, 新绘制的内容会丢失。
+- 首先必需保证在安卓\ios\web,三端都开启 appliance-plugin 配置. appliance-plugin 开启后绘制的笔记在未开启的白板上不会显示.
+- 在开启 appliance-plugin 插件后, 之前白板上旧绘制的内容会显示,但是无法操作和升级成新的笔记. 所以为了不影响体验,请在一个无任何历史数据的白板上使用。同理插件关闭后, 新绘制的内容会丢失。
 - 只有浏览器对 web API [offscreenCanvas](https://developer.mozilla.org/zh-CN/docs/Web/API/OffscreenCanvas#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7) 的完全支持,才能体验到更加的性能及丰富的教具功能体验。
 
 <h2 id="customization">自定义</h2>

diff --git a/README.md b/README.md
@@ -461,7 +461,8 @@ function App() {
 }
 ```
 **Note:**
-- After opening the appliance plugin, the drawn content will be displayed, but it cannot be manipulated and upgraded, so in order not to affect the experience, please use it on a whiteboard without any historical data. Similarly, when the plugin is closed, the newly drawn content will be lost. 
+- First, you must ensure that the appliance plugin configuration is enabled on all three ends of Android \ios\web. Notes drawn after appliance-plugin is enabled will not be displayed on the unoccupied whiteboard.
+- After the appliance plugin is turned on, the old contents drawn on the previous whiteboard are displayed, but cannot be manipulated and upgraded into new notes. So in order not to affect the experience, please use on a whiteboard without any historical data. Similarly, when the plugin is closed, the newly drawn content will be lost.
 - only the browser for web apis [offscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#browser_compatibility) Full support, in order to experience more performance and rich teaching AIDS functional experience.
 
 ## Customization

diff --git a/docs/en/appliance-plugin.md b/docs/en/appliance-plugin.md
@@ -190,41 +190,12 @@ 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 (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
-     * @param div Small map DOM container
-     */
-    createMiniMap(viewId: string, div: HTMLElement): Promise<void>;
-    /** Destroy minimap */
-    destroyMiniMap(viewId: string): Promise<void>;
-    ```
-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
-     * @param filter filter condition
-     *  render: Whether notes can be rendered, [uid1, uid2,...] Or true. true, that is, both render, [uid1, uid2,...] The collection of user Uids rendered for the specified
-     *  hide: Note is hidden, [uid1, uid2,...] Or true. true, that is to hide, [uid1, uid2,...] To specify a hidden user uid collection
-     *  clear: Whether notes can be cleared, [uid1, uid2,...] Or true. true, that is, can be cleared, [uid1, uid2,...] Specifies a collection of user Uids that can be cleared
-     * @param isSync Whether to synchronize data to other users. The default value is true, that is, the data will be synchronized to other users
-     */
-    filterRenderByUid(viewId: string, filter: { render?: _ArrayTrue, hide?: _ArrayTrue, clear?: _ArrayTrue}, isSync?:boolean): void;
-    /** 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
-     * @param isSync Whether to synchronize data to other users. The default value is true, that is, the data will be synchronized to other users. Keep it the same as the filterRenderByUid setting
-     */
-    cancelFilterRender(viewId: string, isSync?:boolean): void;
-    ```
-3. Split screen display Elements (little whiteboard featrue), need to combine '@netless/app-little-white-board' (Version >=1.1.3)
-
-4. laserPen teaching aids (Version >=1.1.1)
+1. laserPen teaching aids (Version >=1.1.1)
     ```js
     import { EStrokeType, ApplianceNames } from '@netless/appliance-plugin';
     room.setMemberState({currentApplianceName: ApplianceNames.laserPen, strokeType: EStrokeType.Normal});
     ```
-5. Extended Teaching AIDS (Version >=1.1.1)
+2. Extended Teaching AIDS (Version >=1.1.1)
     ```js
     export enum EStrokeType { 
         /** Solid line */ 
@@ -276,7 +247,54 @@ The following interfaces are involved:
     manager.mainView.setMemberState({ ... } as ExtendMemberState);
     appliance.setMemberState({ ... } as ExtendMemberState);
     ```
+3. Split screen display Elements (little whiteboard featrue), need to combine '@netless/app-little-white-board' (Version >=1.1.3)
 
+4. 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
+     * @param div Small map DOM container
+     */
+    createMiniMap(viewId: string, div: HTMLElement): Promise<void>;
+    /** Destroy minimap */
+    destroyMiniMap(viewId: string): Promise<void>;
+    ```
+5. 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
+     * @param filter filter condition
+     *  render: Whether notes can be rendered, [uid1, uid2,...] Or true. true, that is, both render, [uid1, uid2,...] The collection of user Uids rendered for the specified
+     *  hide: Note is hidden, [uid1, uid2,...] Or true. true, that is to hide, [uid1, uid2,...] To specify a hidden user uid collection
+     *  clear: Whether notes can be cleared, [uid1, uid2,...] Or true. true, that is, can be cleared, [uid1, uid2,...] Specifies a collection of user Uids that can be cleared
+     * @param isSync Whether to synchronize data to other users. The default value is true, that is, the data will be synchronized to other users
+     */
+    filterRenderByUid(viewId: string, filter: { render?: _ArrayTrue, hide?: _ArrayTrue, clear?: _ArrayTrue}, isSync?:boolean): void;
+    /** 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
+     * @param isSync Whether to synchronize data to other users. The default value is true, that is, the data will be synchronized to other users. Keep it the same as the filterRenderByUid setting
+     */
+    cancelFilterRender(viewId: string, isSync?:boolean): void;
+    ```
+6. Handwriting graphics automatic association function: 'autoDraw' (version >=1.1.7)
+    ```js
+    export type AutoDrawOptions = {
+        /** Automatically associate rest api addresses */
+        hostServer: string;
+        /** A container that holds a list of associated icons */
+        container: HTMLDivElement;
+        /** How long does the drawing end start activating the association */
+        delay?: number;
+    };
+    import { ApplianceMultiPlugin, AutoDrawPlugin } from '@netless/appliance-plugin';
+    const plugin = await ApplianceMultiPlugin.getInstance(...);
+    const autoDrawPlugin = new AutoDrawPlugin({
+        container: topBarDiv,
+        hostServer: 'https://autodraw-white-backup-hk-hkxykbfofr.cn-hongkong.fcapp.run',
+        delay: 2000
+    });
+    plugin.usePlugin(autoDrawPlugin);
+    ```
 ### Configure parameters 
 ``getInstance(wm: WindowManager, adaptor: ApplianceAdaptor)`` 
 - wm: WindowManager\room\player. In multi-window mode, you pass WindowManager, and in single-window mode, you pass room or player(whiteboard playback mode). 

diff --git a/docs/zh/appliance-plugin.md b/docs/zh/appliance-plugin.md
@@ -193,41 +193,12 @@ module: {
 - 服务端截图, appliance-plugin开启后, 笔记不能通过调用服务端截图方式获取截图,而需要改用`screenshotToCanvasAsync`获取
 
 #### 新功能
-1. 小地图功能 (Version >=1.1.6)
-    ```js
-    /** 创建小地图
-     * @param viewId 多白板下白板ID, 主白板ID为 `mainView`, 其他白板ID为 addApp() return 的appID
-     * @param div 小地图DOM容器
-     */
-    createMiniMap(viewId: string, div: HTMLElement): Promise<void>;
-    /** 销毁小地图 */
-    destroyMiniMap(viewId: string): Promise<boolean>;
-    ```
-2. 过滤笔记 (Version >=1.1.6)
-    ```js
-    /** 过滤笔记
-     * @param viewId 多白板下白板ID, 主白板ID为 `mainView`, 其他白板ID为 addApp() return 的appID
-     * @param filter 过滤条件
-     *  render: 笔记是否能要渲染, [uid1, uid2, ...] 或 true. true, 即都会渲染, [uid1, uid2, ...] 为指定渲染的用户uid集合
-     *  hide: 笔记是否隐藏, [uid1, uid2, ...] 或 true. true, 即都要隐藏, [uid1, uid2, ...] 为指定隐藏的用户uid集合
-     *  clear: 笔记是否可被清除, [uid1, uid2, ...] 或 true. true, 即都可以被清除, [uid1, uid2, ...] 为指定可被清除的用户uid集合
-     * @param isSync 是否同步到其他用户, 默认为true, 即会同步到其他用户
-     */
-    filterRenderByUid(viewId: string, filter: { render?: _ArrayTrue, hide?: _ArrayTrue, clear?: _ArrayTrue}, isSync?:boolean): void;
-    /** 取消过滤笔记
-     * @param viewId 多白板下白板ID, 主白板ID为 `mainView`, 其他白板ID为 addApp() return 的appID
-     * @param isSync 是否同步到其他用户, 默认为true, 即会同步到其他用户. 请保持和filterRenderByUid设置的一致
-     */
-    cancelFilterRender(viewId: string, isSync?:boolean): void;
-    ```
-3. 分屏显示笔记(小白板功能),需要结合 `@netless/app-little-white-board` (Version >=1.1.3)
-
-4. 激光铅笔教具 (Version >=1.1.1)
+1. 激光铅笔教具 (Version >=1.1.1)
     ```js
     import { EStrokeType, ApplianceNames } from '@netless/appliance-plugin';
     room.setMemberState({currentApplianceName: ApplianceNames.laserPen, strokeType: EStrokeType.Normal});
     ```
-5. 扩展教具 (Version >=1.1.1)
+2. 扩展教具 (Version >=1.1.1)
     ```js
     export enum EStrokeType {
         /** 实心线条 */
@@ -279,6 +250,53 @@ module: {
     manager.mainView.setMemberState({ ... } as ExtendMemberState);
     appliance.setMemberState({ ... } as ExtendMemberState);
     ```
+3. 分屏显示笔记(小白板功能),需要结合 `@netless/app-little-white-board` (Version >=1.1.3)
+4. 小地图功能 (Version >=1.1.6)
+    ```js
+    /** 创建小地图
+     * @param viewId 多白板下白板ID, 主白板ID为 `mainView`, 其他白板ID为 addApp() return 的appID
+     * @param div 小地图DOM容器
+     */
+    createMiniMap(viewId: string, div: HTMLElement): Promise<void>;
+    /** 销毁小地图 */
+    destroyMiniMap(viewId: string): Promise<boolean>;
+    ```
+5. 过滤笔记 (Version >=1.1.6)
+    ```js
+    /** 过滤笔记
+     * @param viewId 多白板下白板ID, 主白板ID为 `mainView`, 其他白板ID为 addApp() return 的appID
+     * @param filter 过滤条件
+     *  render: 笔记是否能要渲染, [uid1, uid2, ...] 或 true. true, 即都会渲染, [uid1, uid2, ...] 为指定渲染的用户uid集合
+     *  hide: 笔记是否隐藏, [uid1, uid2, ...] 或 true. true, 即都要隐藏, [uid1, uid2, ...] 为指定隐藏的用户uid集合
+     *  clear: 笔记是否可被清除, [uid1, uid2, ...] 或 true. true, 即都可以被清除, [uid1, uid2, ...] 为指定可被清除的用户uid集合
+     * @param isSync 是否同步到其他用户, 默认为true, 即会同步到其他用户
+     */
+    filterRenderByUid(viewId: string, filter: { render?: _ArrayTrue, hide?: _ArrayTrue, clear?: _ArrayTrue}, isSync?:boolean): void;
+    /** 取消过滤笔记
+     * @param viewId 多白板下白板ID, 主白板ID为 `mainView`, 其他白板ID为 addApp() return 的appID
+     * @param isSync 是否同步到其他用户, 默认为true, 即会同步到其他用户. 请保持和filterRenderByUid设置的一致
+     */
+    cancelFilterRender(viewId: string, isSync?:boolean): void;
+    ```
+6. 手写图形自动联想功能:`autoDraw` (version >=1.1.7)
+    ```js
+    export type AutoDrawOptions = {
+        /** 自动联想rest api地址 */
+        hostServer: string;
+        /** 存放联想icon列表的容器 */
+        container: HTMLDivElement;
+        /** 绘制结束多久开始激活联想 */
+        delay?: number;
+    };
+    import { ApplianceMultiPlugin, AutoDrawPlugin } from '@netless/appliance-plugin';
+    const plugin = await ApplianceMultiPlugin.getInstance(...);
+    const autoDrawPlugin = new AutoDrawPlugin({
+        container: topBarDiv,
+        hostServer: 'https://autodraw-white-backup-hk-hkxykbfofr.cn-hongkong.fcapp.run',
+        delay: 2000
+    });
+    plugin.usePlugin(autoDrawPlugin);
+    ```
 
 ### 配置参数
 ``getInstance(wm: WindowManager, adaptor: ApplianceAdaptor)``