@netless/window-manager 0.4.54 → 0.4.56

package/docs/cn/migrate.md

@@ -0,0 +1,60 @@
+
+### 注意事项
+
+多窗口模式必须开启白板的 `useMultiViews` 和 `useMobXState` 选项
+
+会造成原本以下 `room` 上的一些方法和 `state` 失效
+
+`方法`
+
+-   `room.bindHtmlElement()` 用 `WindowManager.mount()` 代替
+-   `room.scalePptToFit()` 暂无代替,不再推荐调用 `scalePptToFit`
+-   `room.setScenePath()` 用 `manager.setMainViewScenePath()` 代替
+-   `room.setSceneIndex()` 用 `manager.setMainViewSceneIndex()` 代替
+
+> 为了方便使用 `manager` 替换了 `room` 上的一些方法可以直接对 `mainView` 生效
+
+-   `room.disableCameraTransform`
+-   `room.moveCamera`
+-   `room.moveCameraToContain`
+-   `room.convertToPointInWorld`
+-   `room.setCameraBound`
+
+`camera`
+
+-   `room.state.cameraState` 用 `manager.mainView.camera` 和 `manager.mainView.size` 代替
+
+想要监听主白板 `camera` 的变化, 请使用如下方式代替
+
+```javascript
+manager.mainView.callbacks.on("onCameraUpdated", camera => {
+    console.log(camera);
+});
+```
+
+监听主白板 `size` 变化
+
+```javascript
+manager.mainView.callbacks.on("onSizeUpdated", size => {
+    console.log(size);
+});
+```
+
+<br>
+
+## `white-web-sdk` 从 `2.15.x` 迁移至 `2.16.x`
+
+### `room.setMemberState`
+
+此方法在开启多窗口时要等待 `WindowManager` 挂载完成后才可以直接调用。
+
+或者使用 `manager.mainView.setMemberState` 代替
+
+<br>
+
+### `room.pptPreviousStep` `room.pptNextStep` 切换上下页
+
+因为窗口实现机制的改变, `pptPreviousStep` 和 `pptNextStep` 不再生效
+
+如果需要切换主白板的上下页, 请使用 `manager.nextPage` 和 `manager.prevPage`
+

package/docs/cn/replay.md

@@ -0,0 +1,40 @@
+## 回放
+
+> 注意: 多窗口的回放只支持从创建房间开始就是多窗口的房间
+
+> 如果是一开始作为单窗口模式使用，又转变成多窗口模式使用, 则会造成回放渲染空白
+
+<br>
+
+
+```typescript
+import { WhiteWebSdk } from "white-web-sdk";
+import { WindowManager, BuiltinApps } from "@netless/window-manager";
+import "@netless/window-manager/dist/style.css";
+
+const sdk = new WhiteWebSdk({
+    appIdentifier: "appIdentifier",
+    useMobXState: true // 请确保打开这个选项
+});
+
+let manager: WindowManager;
+
+sdk.replayRoom({
+    uuid: "room uuid",
+    roomToken: "room token",
+    invisiblePlugins: [WindowManager],
+    useMultiViews: true, // 多窗口必须用开启 useMultiViews
+}).then(player => {
+   player.callbacks.on("onPhaseChanged", async (phase) => {
+       if (phase === PlayerPhase.Playing) {
+           if (manager) return;
+            manager = await WindowManager.mount({
+                room: player,
+                container: document.getElementById("container")
+            });
+       }
+   })
+});
+
+player.play(); // WindowManager 只有在播放之后才能挂载
+```

package/docs/concept.md

@@ -1,9 +1,10 @@
-# 概念
+# Concept
 
-## 同步区域
+## Sync Zone
 
-在不同分辨率的设备上，想要看到相同的区域和窗口，我们就需要在所有设备保持一个相同的比例。
+On devices with different resolutions, if we want to see the same area and window, we need to maintain the same ratio on all devices.
 
-所以 `WindowManager` 有一个 `containerSizeRatio` 的选项来配置白板的宽高比，默认为 `9 / 16`
+So `WindowManager` has a `containerSizeRatio` option to configure the aspect ratio of the whiteboard, the default is `9 / 16`
+
+If the width and height given to WindowManager by the outer layer do not perfectly fit this aspect ratio, WindowManger will automatically calculate a maximum width and height that fits this ratio internally, and then fill it in. At this time, there will be some internal areas that cannot be operated
 
-如果外层给到 `WindowManager` 宽高并不是完美适配这个宽高比的话, `WindowManger` 会自动在内部算出一个适配这个比例的最大宽高，然后填充上去，这时在内部就会有一些区域不能操作

package/docs/custom-max-bar.md

@@ -1,30 +1,30 @@
-## 如何自定义最大化 `titleBar`
+## How to customize maximized `titleBar`
 
-获取并订阅所有的 `box`
+Get and subscribe to all `box`
 
 ```js
 manager.boxManager.teleboxManager.boxes$.subscribe(boxes => {
-    // boxes 为所有的窗口，当窗口添加和删除时都会触发
+     // boxes are all windows, trigger when windows are added and deleted
 })
 ```
 
-切换 `box` 的 `focus`
+Toggle `focus` of `box`
 ```js
 manager.boxManager.teleBoxManager.focusBox(box)
 ```
 
-关闭某个 `box`
+close a `box`
 ```js
 manager.boxManager.teleBoxManager.remove(box)
 ```
 
-切换最大化状态
+Toggle maximized state
 ```js
 manager.boxManager.teleBoxManager.setMaximized(false)
 manager.boxManager.teleBoxManager.setMaximized(true)
 ```
 
-切换最小化状态
+Toggle minimized state
 ```js
 manager.boxManager.teleBoxManager.setMinimized(true)
 manager.boxManager.teleBoxManager.setMaximized(false)

package/docs/develop-app.md

@@ -1,12 +1,12 @@
-# 开发自定义 APP
+# Develop custom APP
 
-- [AppContext](./app-context.md)
+-   [AppContext](./app-context.md)
 
 ## official apps https://github.com/netless-io/netless-app
 
 ## app-with-whiteboard
 
-如果需要 app 中挂载白板请参考 [board.tsx](https://github.com/netless-io/window-manager/blob/master/example/app/board.tsx)
+If you need to mount a whiteboard in the app, please refer to [board.tsx](https://github.com/netless-io/window-manager/blob/master/example/app/board.tsx)
 
 <br>
 
@@ -14,9 +14,9 @@
 import type { NetlessApp, AppContext } from "@netless/window-manager";
 
 const HelloWorld: NetlessApp = {
-    kind: "HelloWorld",
+    kind: "Hello World",
     setup: (context: AppContext) => {
-        context.mountView(context.getBox().$content); // 可选: 挂载 View 到 box 上
+        context.mountView(context.getBox().$content); // optional: mount the View to the box
     },
 };
 
@@ -26,9 +26,9 @@ WindowManager.register({
 });
 
 manager.addApp({
-    kind: "HelloWorld",
+    kind: "Hello World",
     options: {
-        scenePath: "/hello-world", // 如果需要在 App 中使用白板则必须声明 scenePath
+        scenePath: "/hello-world", // If you need to use the whiteboard in the app, you must declare scenePath
     },
 });
 ```
@@ -38,21 +38,21 @@ manager.addApp({
 ```ts
 const Counter: NetlessApp<{ count: number }> = {
     kind: "Counter",
-    setup: (context) => {
+    setup: context => {
         const storage = context.storage;
         storage.ensureState({ count: 0 });
 
-        const box = context.getBox(); // box 为这个应用打开的窗口
-        const $content = box.$content // 获取窗口的 content
+        const box = context.getBox(); // box is the window opened for this application
+        const $content = box.$content; // Get the content of the window
 
         const countDom = document.createElement("div");
         countDom.innerText = storage.state.count.toString();
         $content.appendChild(countDom);
 
-        // 监听 state 变化回调
+        // Listen for state change callbacks
         storage.addStateChangedListener(diff => {
             if (diff.count) {
-                // diff 会给出 newValue 和 oldValue
+                // diff will give newValue and oldValue
                 console.log(diff.count.newValue);
                 console.log(diff.count.oldValue);
                 countDom.innerText = diff.count.newValue.toString();
@@ -63,7 +63,7 @@ const Counter: NetlessApp<{ count: number }> = {
         incButton.innerText = "Inc";
         const incButtonOnClick = () => {
             storage.setState({ count: storage.state.count + 1 });
-        }
+        };
         incButton.addEventListener("click", incButtonOnClick);
         $content.appendChild(incButton);
 
@@ -71,24 +71,24 @@ const Counter: NetlessApp<{ count: number }> = {
         decButton.innerText = "Dec";
         const decButtonOnClick = () => {
             storage.setState({ count: storage.state.count - 1 });
-        }
+        };
         decButton.addEventListener("click", decButtonOnClick);
         $content.appendChild(decButton);
 
-            // 监听事件
+        // listen for events
         const event1Disposer = context.addMagixEventListener("event1", msg => {
             console.log("event1", msg);
         });
 
-        // 向打开 app 的其他人发送消息
+        // Send a message to other people who have the app open
         context.dispatchMagixEvent("event1", { count: 10 });
 
-        // 应用销毁时, 注意清理掉监听器
+        // When the application is destroyed, pay attention to clean up the listener
         context.emitter.on("destroy", () => {
             incButton.removeEventListener("click", incButtonOnClick);
             decButton.removeEventListener("click", decButtonOnClick);
             event1Disposer();
         });
-    }
-}
-```
+    },
+};
+```

package/docs/export-pdf.md

@@ -1,48 +1,48 @@
-# 导出 PDF
+# Export PDF
 
-此功能需要额外安装 `jspdf` 依赖才能使用
+This feature requires additional installation of the `jspdf` dependency to use
 
 ```
 npm install jspdf@2.5.1
 ```
 
-### 支持的 app 及版本
+### Supported apps and versions
 
-1. @netless/app-slide  `0.2.23` 及以上版本支持保存动态 ppt 板书
+1. @netless/app-slide `0.2.23` and above support saving dynamic ppt board writing
 
-2. @netless/app-docs-viewer  `0.2.10` 及以上版本支持保存 pdf 板书, **注意** app-docs-viewer 中可以展示静态 ppt, pdf, 动态 ppt. 其中只有 pdf 文件支持保存板书
+2. @netless/app-docs-viewer `0.2.10` and above support saving pdf board writing, **Note** app-docs-viewer can show static ppt, pdf, dynamic ppt. Only pdf files support saving board writing
 
-   对应 @netless/window-manager `0.4.50` 及以上
+   Only pdf files can be saved in the app-docs-viewer, which is compatible with @netless/window-manager `0.4.50` and above.
 
-3. white-web-sdk  `2.16.37` 及以上
+3. white-web-sdk `2.16.37` and above
 
-### 发起保存板书任务
+### Initiate a save board writing task
 
-通过 `window.postMessage` 发事件来发起保存板书任务, 注意不要在任务尚未完成之前重复发送该事件.
+Launch the save board writing task with a `window.postMessage` event, and be careful not to repeat the event before the task is completed.
 
 ```js
 window.postMessage({
     type: "@netless/_request_save_pdf_",
-    appId: /* windowManager.addApp 返回的值, 指定要保存哪个窗口的板书, */
+    appId: /* windowManager.addApp return value, specify which window to save the board writing, */
 })
 ```
 
-### 获取任务进度
+### Get task progress
 
-任务进度也通过 message 事件传递, 你需要在发起任务之前监听任务进度事件, 实例代码如下所示.
-其中 data.result 只有在任务成功时候才有值, 任务失败或者任务进行中都为 Null.
-**如果下载任务失败, 则 progress 为 100 但是 result 为 Null.**
+Task progress is also passed through the message event, you need to listen to the task progress event before launching the task, the example code is shown below.
+The data.result will only have a value if the task succeeds, and will be null if the task fails or is in progress.
+**If the download task fails, then progress is 100 but result is null.**
 
 ```js
 window.addEventListener("message", evt => {
     if (evt.data.type === "@netless/_result_save_pdf_") {
         console.log(evt.data);
-        // data 包含如下属性
-        // data.type: 固定值 "@netless/_result_save_pdf_"
-        // data.appId: 指明是哪次下载任务, 与发起保存板书时候传递的 appId 值一致
-        // data.progress: 下载进度,  0 ~ 100
-        // data.result: ArrayBuffer 或者 Null, 值为板书的 pdf 文件内容, 仅当下载进度 100 时才有值.
-        //              获取到 ArrayBuffer 后需要自行完成下载到本地的逻辑.
+        // data contains the following properties
+        // data.type: fixed value "@netless/_result_save_pdf_"
+        // data.appId: specifies which download task, same as the appId value passed when the board writing was saved
+        // data.progress: progress of the download, 0 ~ 100
+        // data.result: { pdf: ArrayBuffer {}, title: "a.pptx" } or null, the contents of the pdf file for the board writing.
+        // value only when the download progresses to 100. After getting the ArrayBuffer you need to complete the logic of downloading to local.
     }
 });
 ```

package/docs/migrate.md

@@ -1,60 +1,58 @@
+### Precautions
 
-### 注意事项
+Multi-window mode must enable whiteboard `useMultiViews` and `useMobXState` options
 
-多窗口模式必须开启白板的 `useMultiViews` 和 `useMobXState` 选项
+It will cause some methods and `state` on the following `room` to fail
 
-会造成原本以下 `room` 上的一些方法和 `state` 失效
+`method`
 
-`方法`
+- `room.bindHtmlElement()` is replaced by `WindowManager.mount()`
+- There is no replacement for `room.scalePptToFit()`, calling `scalePptToFit` is no longer recommended
+- `room.setScenePath()` is replaced by `manager.setMainViewScenePath()`
+- `room.setSceneIndex()` is replaced by `manager.setMainViewSceneIndex()`
 
--   `room.bindHtmlElement()` 用 `WindowManager.mount()` 代替
--   `room.scalePptToFit()` 暂无代替,不再推荐调用 `scalePptToFit`
--   `room.setScenePath()` 用 `manager.setMainViewScenePath()` 代替
--   `room.setSceneIndex()` 用 `manager.setMainViewSceneIndex()` 代替
+> In order to use `manager` to replace some methods on `room`, it can directly take effect on `mainView`
 
-> 为了方便使用 `manager` 替换了 `room` 上的一些方法可以直接对 `mainView` 生效
-
--   `room.disableCameraTransform`
--   `room.moveCamera`
--   `room.moveCameraToContain`
--   `room.convertToPointInWorld`
--   `room.setCameraBound`
+- `room.disableCameraTransform`
+- `room.moveCamera`
+- `room.moveCameraToContain`
+- `room.convertToPointInWorld`
+- `room.setCameraBound`
 
 `camera`
 
--   `room.state.cameraState` 用 `manager.mainView.camera` 和 `manager.mainView.size` 代替
+- `room.state.cameraState` is replaced by `manager.mainView.camera` and `manager.mainView.size`
 
-想要监听主白板 `camera` 的变化, 请使用如下方式代替
+If you want to monitor the main whiteboard `camera` changes, please use the following method instead
 
 ```javascript
 manager.mainView.callbacks.on("onCameraUpdated", camera => {
-    console.log(camera);
+     console.log(camera);
 });
 ```
 
-监听主白板 `size` 变化
+Monitor main whiteboard `size` changes
 
 ```javascript
 manager.mainView.callbacks.on("onSizeUpdated", size => {
-    console.log(size);
+     console.log(size);
 });
 ```
 
 <br>
 
-## `white-web-sdk` 从 `2.15.x` 迁移至 `2.16.x`
+## `white-web-sdk` migrated from `2.15.x` to `2.16.x`
 
 ### `room.setMemberState`
 
-此方法在开启多窗口时要等待 `WindowManager` 挂载完成后才可以直接调用。
+This method can be called directly after waiting for `WindowManager` to be mounted when multi-window is enabled.
 
-或者使用 `manager.mainView.setMemberState` 代替
+Or use `manager.mainView.setMemberState` instead
 
 <br>
 
-### `room.pptPreviousStep` `room.pptNextStep` 切换上下页
-
-因为窗口实现机制的改变, `pptPreviousStep` 和 `pptNextStep` 不再生效
+### `room.pptPreviousStep` `room.pptNextStep` Switch to the next page
 
-如果需要切换主白板的上下页, 请使用 `manager.nextPage` 和 `manager.prevPage`
+`pptPreviousStep` and `pptNextStep` no longer work due to changes in window implementation
 
+If you need to switch the top and bottom pages of the main whiteboard, please use `manager.nextPage` and `manager.prevPage`

package/docs/quickstart.md

@@ -0,0 +1,50 @@
+# Get started quickly
+
+## Install
+Install `WindowManager` via `npm` or `yarn`.
+```bash
+# npm
+$ npm install @netless/window-manager
+
+# yarn
+$ yarn add @netless/window-manager
+```
+
+Import:
+```typescript
+import { WhiteWindowSDK } from "@netless/window-manager";
+import "@netless/window-manager/dist/style.css";
+```
+
+## Start using
+
+### Prepare container
+Create a container for mounting in the page
+```html
+<div id="container"></div>
+```
+
+### Initialize the SDK
+```typescript
+const sdk = new WhiteWindowSDK({
+     appIdentifier: "appIdentifier"
+})
+```
+
+### Join the room and mount the container
+```typescript
+const manager = await sdk.mount({
+     joinRoomParams: {
+         uuid: "room uuid",
+         roomToken: "room token",
+     },
+     mountParams: {
+         container: document.getElementById("container")
+     }
+})
+```
+
+### Uninstall
+```typescript
+manager.destroy();
+```

package/docs/replay.md

@@ -1,8 +1,8 @@
-## 回放
+## playback
 
-> 注意: 多窗口的回放只支持从创建房间开始就是多窗口的房间
+> Note: Multi-window playback only supports multi-window rooms from the creation of the room
 
-> 如果是一开始作为单窗口模式使用，又转变成多窗口模式使用, 则会造成回放渲染空白
+> If it is used as a single-window mode at the beginning and then converted to a multi-window mode, it will cause blank playback rendering
 
 <br>
 
@@ -13,28 +13,28 @@ import { WindowManager, BuiltinApps } from "@netless/window-manager";
 import "@netless/window-manager/dist/style.css";
 
 const sdk = new WhiteWebSdk({
-    appIdentifier: "appIdentifier",
-    useMobXState: true // 请确保打开这个选项
+     appIdentifier: "appIdentifier",
+     useMobXState: true // make sure this option is turned on
 });
 
 let manager: WindowManager;
 
 sdk.replayRoom({
-    uuid: "room uuid",
-    roomToken: "room token",
-    invisiblePlugins: [WindowManager],
-    useMultiViews: true, // 多窗口必须用开启 useMultiViews
+     uuid: "room uuid",
+     roomToken: "room token",
+     invisiblePlugins: [WindowManager],
+     useMultiViews: true, // Multi-window must be enabled useMultiViews
 }).then(player => {
-   player.callbacks.on("onPhaseChanged", async (phase) => {
-       if (phase === PlayerPhase.Playing) {
-           if (manager) return;
-            manager = await WindowManager.mount({
-                room: player,
-                container: document.getElementById("container")
-            });
-       }
-   })
+    player.callbacks.on("onPhaseChanged", async (phase) => {
+        if (phase === PlayerPhase.Playing) {
+            if (manager) return;
+             manager = await WindowManager.mount({
+                 room: player,
+                 container: document.getElementById("container")
+             });
+        }
+    })
 });
 
-player.play(); // WindowManager 只有在播放之后才能挂载
-```
+player.play(); // WindowManager can only be mounted after playing
+```

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.54",
+  "version": "0.4.56",
   "description": "",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "repository": "netless-io/window-manager",
   "author": "l1shen <lishen1635@gmail.com> (https://github.com/l1shen)",

package/src/Helper.ts

@@ -44,7 +44,7 @@ export const checkVersion = () => {
 
 export const findMemberByUid = (room: Room | undefined, uid: string) => {
     const roomMembers = room?.state.roomMembers || [];
-    let maxMemberId = 0;
+    let maxMemberId = -1; // 第一个进入房间的用户 memberId 是 0
     let result: RoomMember | undefined = undefined;
     for (const member of roomMembers) {
         if (member.payload?.uid === uid && maxMemberId < member.memberId) {

package/vite.config.js

@@ -36,7 +36,9 @@ export default defineConfig(({ mode }) => {
                 entry: path.resolve(__dirname, "src/index.ts"),
                 formats: ["es", "umd", "cjs"],
                 name: "WindowManager",
-                fileName: "index"
+                fileName: (moduleType) => {
+                    return moduleType === "es" ? "index.mjs" : "index.js";
+                }
             },
             outDir: "dist",
             sourcemap: true,