@netless/window-manager 0.4.54 → 0.4.56

package/docs/advanced.md

@@ -1,56 +1,56 @@
-## 进阶使用
+## Advanced usage
 
-- 目录
-  - [撤销重做](#redo-undo)
-  - [清屏](#clean-current-scene)
-  - [判断是否打开某种 APP](#has-kind)
-  - [页面控制器](#page-control)
-  - [视角](#view-mode)
-  - [插入图片到当前app](#insert-image-to-app)
+- Table of contents
+   - [Undo Redo](#redo-undo)
+   - [clean screen](#clean-current-scene)
+   - [Judging whether to open a certain APP](#has-kind)
+   - [page controller](#page-control)
+   - [viewpoint](#view-mode)
+   - [Insert image to current app](#insert-image-to-app)
 
 
-<h3 id="redo-undo">撤销重做</h3>
+<h3 id="redo-undo">Undo redo</h3>
 
-> 以下事件和属性都会根据 `focus` 的窗口来进行自动切换应用对象
+> The following events and properties will automatically switch application objects according to the `focus` window
 
-#### 获取可以撤销/重做的步数
+#### Get the number of steps that can be undone/redoed
 
 ```ts
 manager.canUndoSteps
 manager.canRedoSteps
 ```
 
-#### 监听可以撤销/重做的步数的变化
+#### Monitor changes in the number of steps that can be undone/redoed
 
-`canRedoStepsChange` 和 `canUndoStepsChange` 会在切换窗口时重新触发
+`canRedoStepsChange` and `canUndoStepsChange` will retrigger when switching windows
 
 ```ts
 manager.emitter.on("canUndoStepsChange", (steps: number) => {
-    // 可以撤销的步数更新
+     // undoable steps update
 })
 manager.emitter.on("canRedoStepsChange", (steps: number) => {
-    // 可以重做的步数更新
+     // Update the number of steps that can be redone
 })
 ```
 
-#### 撤销/重做
+#### Undo/Redo
 
 ```ts
-manager.undo() //撤销
-manager.redo() // 重做 
+manager.undo() // undo
+manager.redo() // redo
 ```
 
 <br>
 
-<h3 id="clean-current-scene">清屏</h3>
+<h3 id="clean-current-scene">Clear screen</h3>
 
-因为在多窗口模式下有多个白板, 如果想要清除当前 `focus` 的白板只需要调用
+Because there are multiple whiteboards in multi-window mode, if you want to clear the current `focus` whiteboard, you only need to call
 
 ```ts
 manager.cleanCurrentScene()
 ```
 
-只想清理主白板的笔迹则需要
+If you only want to clean up the handwriting on the main whiteboard, you need
 
 ```ts
 manager.mainView.cleanCurrentScene()
@@ -59,31 +59,31 @@ manager.mainView.cleanCurrentScene()
 
 <br>
 
-<h3 id="has-kind">判断是否打开某种 APP</h3>
+<h3 id="has-kind">Determine whether to open a certain APP</h3>
 
 ```ts
-manager.emitter.on("ready", () => { // ready 事件在所有 app 创建完成后触发
-    const apps = manager.queryAll(); //  获取所有已经打开的 App
-    const hasSlide = apps.some(app => app.kind === "Slide"); // 判断已经打开的 APP 中是否有 Slide
+manager.emitter.on("ready", () => { // ready event is triggered after all app creation is complete
+     const apps = manager.queryAll(); // Get all opened apps
+     const hasSlide = apps.some(app => app.kind === "Slide"); // Determine whether there is Slide in the opened APP
 });
 ```
 
 <br>
 
-<h3 id="page-control">页面控制器</h3>
+<h3 id="page-control">page controller</h3>
 
-`manager` 提供了一个 `pageState` 来获取当前的 index 和总页数
+`manager` provides a `pageState` to get the current index and the total number of pages
 
 ```ts
-manager.pageState.index // 当前的 index
-manager.pageState.length // 总页数
+manager.pageState.index // current index
+manager.pageState.length // total number of pages
 
 manager.emitter.on("pageStateChange", state => {
-    // 当前 index 变化和总页数变化会触发此事件
+     // This event will be triggered when the current index changes and the total number of pages changes
 });
 ```
 
-上一页/下一页/添加一页
+Previous/Next/Add a page
 
 ```ts
 manager.nextPage()
@@ -93,45 +93,45 @@ manager.addPage()
 
 <br>
 
-<h3 id="view-mode">视角跟随</h3>
+<h3 id="view-mode">View follow</h3>
 
-多窗口中 `ViewMode` 有 `broadcaster` `freedom` 两种模式
+`ViewMode` in multi-window has `broadcaster` `freedom` two modes
 
 - `freedom`
 
-    自由模式，用户可以自由放缩、移动视角
+     Free mode, users can freely zoom and move the viewing angle
 
-    即便房间里有主播，主播也无法影响用户的视角
+     Even if there is an anchor in the room, the anchor cannot affect the user's perspective
 
 - `broadcaster`
 
-    主播模式, 操作时其他人的视角都会跟随我
+     Host mode, other people's perspectives will follow me during operation
 
-    同时其他为 `broadcaster` 模式的人也会影响我的视角
+     At the same time, other people in `broadcaster` mode will also affect my perspective
 
-    在 `isWritable` 为 `false` 时只会跟随其他 `broadcaster` 的视角
+     When `isWritable` is `false`, it will only follow other `broadcaster` perspectives
 
 <br>
 
-<h3 id="insert-image-to-app">插入图片到当前 app</h3>
+<h3 id="insert-image-to-app">Insert an image into the current app</h3>
 
 ```ts
-// 判断当前是否为最大化
+// Determine whether the current is maximized
 if (manager.boxState === "maximized") {
-    // `focused` 的值的会根据当前 focus 的 app 不同而变化
-    const app = manager.queryOne(manager.focused)
-    // 有 view 的 app 才可以插入图片, 像是 视频，音频之类的 app 是没有 view 的
-    if (app.view) {
-        var imageInformation = {
-            uuid: uuid,
-            centerX: centerX,
-            centerY: centerY,
-            width: width,
-            height: height,
-            locked: false,
-        };
-        app.view.insertImage(imageInformation);
-        app.view.completeImageUpload(uuid, src);
-    }
+     // The value of `focused` will vary depending on the currently focused app
+     const app = manager.queryOne(manager. focused)
+     // Only apps with a view can insert pictures, apps like video and audio do not have a view
+     if (app.view) {
+         var imageInformation = {
+             uuid: uuid,
+             centerX: centerX,
+             centerY: centerY,
+             width: width,
+             height: height,
+             locked: false,
+         };
+         app.view.insertImage(imageInformation);
+         app.view.completeImageUpload(uuid, src);
+     }
 }
 ```

package/docs/api.md

@@ -1,83 +1,85 @@
 # API
 
-## 目录
-  - [静态方法](#static-methods)
-    - [`mount`](#mount)
-    - [`register`](#register)
-    - [`registered`](#registered)
-    - [`setContainer`](#set-container)
-    - [`setCollectorContainer`](#set-collector-container)
-  - [实例方法](#instance-methods)
-    - [`addApp`](#addApp)
-    - [`closeApp`](#closeApp)
-    - [`focusApp`](#focusApp)
-    - [`setMainViewSceneIndex`](#setMainViewSceneIndex)
-    - [`setBoxState`](#setBoxState)
-    - [`cleanCurrentScene`](#cleanCurrentScene)
-    - [`redo`](#redo)
-    - [`undo`](#undo)
-    - [`copy`](#copy)
-    - [`paste`](#paste)
-    - [`delete`](#delete)
-    - [`duplicate`](#duplicate)
-    - [`insertText`](#insertText)
-    - [`insertImage`](#insertImage)
-    - [`completeImageUpload`](#completeImageUpload)
-    - [`lockImage`](#lockImage)
-    - [`lockImages`](#lockImages)
-    - [`nextPage`](#nextPage)
-    - [`prevPage`](#prevPage)
-    - [`addPage`](#addPage)
-    - [`removePage`](#removePage)
-    - [`refresh`](#refresh)
-    - [`setContainerSizeRatio`](#setContainerSizeRatio)
-  - [实例属性](#prototypes)
-  - [事件回调](#events)
+## Table of contents
+   - [Static methods](#static-methods)
+     - [`mount`](#mount)
+     - [`register`](#register)
+     - [`registered`](#registered)
+     - [`setContainer`](#set-container)
+     - [`setCollectorContainer`](#set-collector-container)
+   - [instance methods](#instance-methods)
+     - [`addApp`](#addApp)
+     - [`closeApp`](#closeApp)
+     - [`focusApp`](#focusApp)
+     - [`setMainViewSceneIndex`](#setMainViewSceneIndex)
+     - [`setBoxState`](#setBoxState)
+     - [`cleanCurrentScene`](#cleanCurrentScene)
+     - [`redo`](#redo)
+     - [`undo`](#undo)
+     - [`copy`](#copy)
+     - [`paste`](#paste)
+     - [`delete`](#delete)
+     - [`duplicate`](#duplicate)
+     - [`insertText`](#insertText)
+     - [`insertImage`](#insertImage)
+     - [`completeImageUpload`](#completeImageUpload)
+     - [`lockImage`](#lockImage)
+     - [`lockImages`](#lockImages)
+     - [`nextPage`](#nextPage)
+     - [`prevPage`](#prevPage)
+     - [`addPage`](#addPage)
+     - [`removePage`](#removePage)
+     - [`refresh`](#refresh)
+     - [`setContainerSizeRatio`](#setContainerSizeRatio)
+   - [instance properties](#prototypes)
+   - [event callback](#events)
 
 <br>
 
-<h2 id="static-methods">静态方法</h2>
+<h2 id="static-methods">Static methods</h2>
 
 <h3 id="mount">WindowManager.mount</h3>
 
-> 挂载 WindowManager
+> mount WindowManager
 
 ```typescript
-const manager = await WindowManager.mount(
-    room: room,
-    container: document.getElementById("container")
-    // 完整配置见下方
+const manager = await WindowManager. mount(
+     room: room,
+     container: document. getElementById("container")
+     // full configuration see below
 );
 ```
 
-参数
+parameter
+
 
 | name                   | type                                    | default | desc                         |
 | ---------------------- | --------------------------------------- | ------- | ---------------------------- |
-| room                   | [require] Room                          |         | 房间实例                         |
-| container              | [require] HTMLElement                   |         | 房间挂载容器                       |
-| containerSizeRatio     | [optional] number                       | 9 / 16  | 多窗口区域的高宽比，默认为 9 : 16         |
-| chessboard             | [optional] boolean                      | true    | 多窗口区域以外的空间显示 PS 棋盘背景，默认 true |
-| collectorContainer     | [optional] HTMLElement                  |         | 用于多窗口最小化图标挂载的 dom            |
-| collectorStyles        | [optional] Partial{CSSStyleDeclaration} |         | 配置 collector 的样式             |
-| overwriteStyles        | [optional] string                       |         | 用于覆盖窗口的样式                    |
-| cursor                 | [optional] boolean                      | false   | 开启光标同步                       |
-| disableCameraTransform | [optional] boolean                      |         | 禁用主白板的相机移动                   |
+| room                   | [require] Room                          |         | room instance                         |
+| container              | [require] HTMLElement                   |         | room mount container                       |
+| containerSizeRatio     | [optional] number                       | 9 / 16  | The aspect ratio of the multi-window area, the default is 9 : 16        |
+| chessboard             | [optional] boolean                      | true    | The space outside the multi-window area displays PS checkerboard background, default true |
+| collectorContainer     | [optional] HTMLElement                  |         | dom for multi-window minimize icon mount            |
+| collectorStyles        | [optional] Partial{CSSStyleDeclaration} |         | Configure collector style             |
+| overwriteStyles        | [optional] string                       |         | The style to use for the overlay window                    |
+| cursor                 | [optional] boolean                      | false   | Turn on cursor sync                       |
+| disableCameraTransform | [optional] boolean                      |         | Disable camera movement for the main whiteboard                   |
 | prefersColorScheme     | [optional] string                       | light   | auto, light, dark            |
-| debug                  | [optional] boolean                      | false   | 打印日志信息   
-| applianceIcons         | [optional] {ApplianceNames, string}     |         | 配置光标使用的教具图片           ｜
+| debug                  | [optional] boolean                      | false   | print log information   |
+| applianceIcons         | [optional] {ApplianceNames, string}     |         | Configure the teaching aid picture used by the cursor           |
+
 
-<h3 id="register">WindowManager.register</h3>
+<h3 id="register">WindowManager. register</h3>
 
-> 注册 `APP` 到 `WindowManager`
+> Register `APP` to `WindowManager`
 
 ```typescript
-WindowManager.register({
-    kind: "helloWorld",
+WindowManager. register({
+    kind: "hello World",
     src: NetlessApp,
     appOptions: () => "appOptions",
     addHooks: (emitter) => {
-         emitter.on("created", result => {
+        emitter.on("created", result => {
             console.log("HelloWordResult", result);
         });
         emitter.on("focus", result => {
@@ -94,7 +96,7 @@ WindowManager.register({
 
 <h3 id="registered">WindowManager.registered</h3>
 
-> 获取已经注册过的 `App`
+> Get the registered `App`
 
 ```ts
 WindowManager.registered
@@ -104,7 +106,7 @@ WindowManager.registered
 
 <h3 id="set-container">setContainer</h3>
 
-> 设置白板挂载容器
+> Set whiteboard mount container
 
 ```typescript
 WindowManager.setContainer(document.getElementById("container"));
@@ -112,7 +114,7 @@ WindowManager.setContainer(document.getElementById("container"));
 
 <h3 id="set-container">setCollectorContainer</h3>
 
-> 设置 `Collector` 挂载的容器
+> Set container mounted by `Collector`
 
 ```typescript
 WindowManager.setCollectorContainer(document.getElementById("collector-container"));
@@ -120,25 +122,25 @@ WindowManager.setCollectorContainer(document.getElementById("collector-container
 
 <br>
 
-<h2 id="instance-methods">实例方法</h2>
+<h2 id="instance-methods">Instance methods</h2>
 
 <h3 id="addApp">addApp</h3>
 
-> 添加 `app` 至白板
+> add `app` to whiteboard
 
 ```typescript
 const appId = await manager.addApp({
-    kind: "helloWorld"
-    options: { // 可选配置
-        scenePath: "/hello-world"
-    }
+     kind: "hello World"
+     options: { // optional configuration
+         scenePath: "/hello-world"
+     }
 })
 ```
-具体参数请参考 `APP` 本身的要求
+For specific parameters, please refer to the requirements of `APP` itself
 
 <h3 id="closeApp">closeApp</h3>
 
-> 关闭已经打开的 `APP`
+> Close any open `APP`
 
 ```typescript
 manager.closeApp(appId)
@@ -146,7 +148,7 @@ manager.closeApp(appId)
 
 <h3 id="focusApp">focusApp</h3>
 
-> 切换当前 `focus` 的 `app`, 并把此 `app` 置为最前
+> Switch the `app` of the current `focus`, and set this `app` to the front
 
 ```typescript
 manager.focusApp(appId)
@@ -154,7 +156,7 @@ manager.focusApp(appId)
 
 <h3 id="setMainViewSceneIndex">setMainViewSceneIndex</h3>
 
-> 设置主白板的 `SceneIndex`
+> Set the `SceneIndex` of the main whiteboard
 
 ```ts
 manager.setMainViewSceneIndex(1)
@@ -162,7 +164,7 @@ manager.setMainViewSceneIndex(1)
 
 <h3 id="setBoxState">setBoxState</h3>
 
-> 设置当前的 `boxState`
+> Set the current `boxState`
 
 ```ts
 manager.setBoxState("normal") // boxState: normal | maximized | minimized
@@ -170,7 +172,7 @@ manager.setBoxState("normal") // boxState: normal | maximized | minimized
 
 <h3 id="cleanCurrentScene">cleanCurrentScene</h3>
 
-> 清除当前 focus 的 view 的笔迹
+> Clear the handwriting of the currently focused view
 
 ```ts
 manager.cleanCurrentScene()
@@ -178,7 +180,7 @@ manager.cleanCurrentScene()
 
 <h3 id="redo">redo</h3>
 
-> 在当前 focus 的 view 上重做上一步操作
+> Redo the last operation on the currently focused view
 
 ```ts
 manager.redo()
@@ -186,7 +188,7 @@ manager.redo()
 
 <h3 id="undo">undo</h3>
 
-> 在当前 focus 的 view 上撤消上一步操作
+> Undo the last action on the currently focused view
 
 ```ts
 manager.undo()
@@ -194,49 +196,49 @@ manager.undo()
 
 <h3 id="nextPage">nextPage</h3>
 
-> 切换主白板至下一页
+> Switch main whiteboard to next page
 
 ```ts
 const success = await manager.nextPage()
 if (!success) {
-    // 已经到了最后一页
+     // reached the last page
 }
 ```
 
 <h3 id="prevPage">prevPage</h3>
 
-> 切换主白板至上一页
+> Switch main whiteboard to previous page
 
 ```ts
 const success = await manager.prevPage()
 if (!success) {
-    // 已经到了第一页
+     // have reached the first page
 }
 ```
 
 <h3 id="addPage">addPage</h3>
 
-> 在主白板添加一页
+> Add a page to the main whiteboard
 
 ```ts
-manager.addPage() // 默认在最后添加一页
-manager.addPage({ after: true }) // 在当前页后添加一页
-manager.addPage({ scene: { name: "page2" } }) // 传入 page 信息
+manager.addPage() // add a page at the end by default
+manager.addPage({ after: true }) // add a page after the current page
+manager.addPage({ scene: { name: "page2" } }) // pass in page information
 ```
 
 <h3 id="removePage">removePage</h3>
 
-> 移除一页
-> 当只剩一页时, 最后一页不允许被删除
+> remove a page
+> When there is only one page left, the last page is not allowed to be deleted
 
 ```ts
-const success = await manager.removePage() // 默认删除当前页
-const success = await manager.removePage(1) // 可以删除指定 index
+const success = await manager.removePage() // delete the current page by default
+const success = await manager.removePage(1) // can delete the specified index
 ```
 
 <h3 id="refresh">refresh</h3>
 
-> 刷新 `manager` 的内部状态, 用于从其他房间 `copy` `attributes`
+> Refreshes `manager` internal state for `copy` `attributes` from other rooms
 
 ```ts
 manager.refresh()
@@ -244,7 +246,7 @@ manager.refresh()
 
 <h3 id="setContainerSizeRatio">setContainerSizeRatio</h3>
 
-> 设置白板同步区域的宽高比
+> Set the aspect ratio of the whiteboard synchronization area
 
 ```ts
 manager.setContainerSizeRatio(10 / 16)
@@ -252,25 +254,25 @@ manager.setContainerSizeRatio(10 / 16)
 
 <br>
 
-<h2 id="prototypes">实例属性</h2>
+<h2 id="prototypes">Instance attributes</h2>
 
 | name               | type    | default | desc                   |
 | ------------------ | ------- | ------- | -----------------      |
-| mainView           | View    |         | 主白板                  |
-| mainViewSceneIndex | number  |         | 当前主白板的 SceneIndex  |
-| mainViewScenesLength | number |        | mainView 的 scenes 长度 |
-| boxState           | string  |         | 当前窗口状态             |
-| darkMode           | boolean |         | 黑夜模式                 |
-| prefersColorScheme | string  |         | 颜色主题                 |
-| focused            | string |          | focus 的 app            |
-| canRedoSteps       | number  |         | 当前 focus 的 view 可以重做的步数 |
-| canRedoSteps       | number  |         | 当前 focus 的 view 可以撤销的步数 |
-| sceneState         | SceneState |      | 兼容原本 SDK 的 sceneState 属性, 只对 mainView 生效 |
-| pageState          | PageState |       | 组合 mainView 的 index 和 scenes 的修改 |
+| mainView           | View    |         | main whiteboard                  |
+| mainViewSceneIndex | number  |         | The SceneIndex of the current main whiteboard  |
+| mainViewScenesLength | number |        | mainView's scenes length |
+| boxState           | string  |         | current window status             |
+| darkMode           | boolean |         | dark mode                 |
+| prefersColorScheme | string  |         | color theme                 |
+| focused            | string |          | focus app            |
+| canRedoSteps       | number  |         | The number of steps that the currently focused view can redo |
+| canRedoSteps       | number  |         | The number of steps that the currently focused view can undo |
+| sceneState         | SceneState |      | Compatible with the sceneState property of the original SDK, only valid for mainView |
+| pageState          | PageState |       | Combine the index and scenes modification of mainView |
 
 <br>
 
-<h2 id="events">事件回调</h2>
+<h2 id="events">event callback</h2>
 
 ```typescript
 manager.callbacks.on(events, listener)
@@ -284,26 +286,26 @@ manager.callbacks.on(events, listener)
 | darkModeChange           | boolean        |         |                            |
 | prefersColorSchemeChange | string         |         | auto,light,dark            |
 | cameraStateChange        | CameraState    |         |                            |
-| focusedChange            | string, undefined |     | 当前 focus 的 appId，主白板时为 undefined  |
-| mainViewScenesLengthChange | number      |         | mainView scenes 添加或删除时触发 |
-| canRedoStepsChange       | number         |         | 当前 focus 的 view 可重做步数改变 |
-| canUndoStepsChange       | number         |         | 当前 focus 的 view 可撤销步数改变 |
-| loadApp                  | LoadAppEvent   |         | 加载远程APP 事件                |
-| ready                    | undefined      |         | 当所有 APP 创建完毕时触发      ｜
-| sceneStateChange         | SceneState     |         | 当 sceneState 修改时触发     |
-| pageStateChange          | PageState      |         |                            ｜
+| focusedChange            | string, undefined |     | The appId of the current focus, undefined for the main whiteboard  |
+| mainViewScenesLengthChange | number      |         | fires when mainView scenes are added or removed |
+| canRedoStepsChange       | number         |         | The view of the current focus can redo the number of steps to change |
+| canUndoStepsChange       | number         |         | The current focus view can undo the step change |
+| loadApp                  | LoadAppEvent   |         | Load remote APP event                |
+| ready                    | undefined      |         | Triggered when all apps are created   |  
+| sceneStateChange         | SceneState     |         | Fired when sceneState is modified     |
+| pageStateChange          | PageState      |         |                            |
 
 ```ts
 type LoadAppEvent = {
-    kind: string;
-    status: "start" | "success" | "failed";
-    reason?: string;
+     kind: string;
+     status: "start" | "success" | "failed";
+     reason?: string;
 }
 ```
 
 ```ts
 type PageState = {
-    index: number;
-    length: number;
+     index: number;
+     length: number;
 }
-```
+```