@netless/window-manager 1.0.0-canary.9 → 1.0.0

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

@@ -0,0 +1,31 @@
+## How to customize maximized `titleBar`
+
+Get and subscribe to all `box`
+
+```js
+manager.boxManager.teleboxManager.boxes$.subscribe(boxes => {
+     // boxes are all windows, trigger when windows are added and deleted
+})
+```
+
+Toggle `focus` of `box`
+```js
+manager.boxManager.teleBoxManager.focusBox(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.createWhiteBoardView(); // 可选: 创建 View 到 box 上
+        context.mountView(context.getBox().$content); // optional: mount the View to the box
     },
 };
 
@@ -26,7 +26,10 @@ WindowManager.register({
 });
 
 manager.addApp({
-    kind: "HelloWorld",
+    kind: "Hello World",
+    options: {
+        scenePath: "/hello-world", // If you need to use the whiteboard in the app, you must declare scenePath
+    },
 });
 ```
 
@@ -35,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.box; // 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();
@@ -60,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);
 
@@ -68,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

@@ -0,0 +1,48 @@
+# Export PDF
+
+This feature requires additional installation of the `jspdf` dependency to use
+
+```
+npm install jspdf@2.5.1
+```
+
+### Supported apps and versions
+
+1. @netless/app-slide `0.2.23` and above support saving dynamic ppt board writing
+
+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
+
+   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` and above
+
+### Initiate a save board writing task
+
+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 return value, specify which window to save the board writing, */
+})
+```
+
+### Get task progress
+
+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 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,40 +1,48 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.9",
-  "description": "",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "version": "1.0.0",
+  "description": "Multi-window mode for Netless Whiteboard",
+  "author": "l1shen <lishen1635@gmail.com> (https://github.com/l1shen)",
+  "license": "MIT",
   "repository": "netless-io/window-manager",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "docs",
+    "src"
+  ],
   "scripts": {
-    "prettier": "prettier --write .",
-    "build": "vite build && yarn type-gen",
-    "type-gen": "tsc --emitDeclarationOnly",
-    "predev": "yarn type-gen",
-    "build:lib:types": "tsc --emitDeclarationOnly",
+    "build": "vite build && npm run type-gen",
     "lint": "eslint --ext .ts,.tsx,.svelte . && prettier --check .",
-    "test": "vitest"
+    "predev": "npm run type-gen",
+    "prettier": "prettier --write .",
+    "test": "vitest",
+    "type-gen": "dts src/index.ts -o dist/index.d.ts"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
   "peerDependencies": {
-    "white-web-sdk": "^2.16.0"
+    "jspdf": "2.5.1",
+    "white-web-sdk": "^2.16.52"
+  },
+  "peerDependenciesMeta": {
+    "jspdf": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/telebox-insider": "1.0.0-alpha.14",
+    "@netless/telebox-insider": "0.2.28",
     "emittery": "^0.9.2",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.1",
-    "side-effect-manager": "^1.1.0",
     "uuid": "^7.0.3",
-    "value-enhancer": "^1.2.1",
     "video.js": ">=7"
   },
   "devDependencies": {
-    "@netless/app-docs-viewer": "^0.2.9",
-    "@netless/app-media-player": "0.1.0-beta.5",
+    "@hyrious/dts": "^0.2.2",
+    "@netless/app-docs-viewer": "^0.2.18",
+    "@netless/app-media-player": "0.1.0-beta.9",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-url": "^6.1.0",
@@ -53,15 +61,17 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.0",
     "jsdom": "^19.0.0",
+    "jspdf": "^2.5.1",
     "less": "^4.1.1",
     "prettier": "^2.3.2",
     "prettier-plugin-svelte": "^2.4.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-styles": "^3.14.1",
+    "side-effect-manager": "0.1.5",
     "svelte": "^3.42.4",
     "typescript": "^4.5.5",
-    "vite": "^2.5.3",
+    "vite": "^2.9.9",
     "vitest": "^0.14.1",
-    "white-web-sdk": "2.16.10"
+    "white-web-sdk": "2.16.52"
   }
 }