@netless/window-manager 0.4.25 → 0.4.27

package/dist/typings.d.ts

@@ -74,3 +74,4 @@ export type { ReadonlyTeleBox, TeleBoxRect };
 export type { SceneState, SceneDefinition, View, AnimationMode, Displayer, Room, Player };
 export type { Storage, StorageStateChangedEvent, StorageStateChangedListener } from "./App/Storage";
 export * from "./Page";
+export * from "./Utils/error";

package/docs/advanced.md

@@ -6,6 +6,7 @@
   - [判断是否打开某种 APP](#has-kind)
   - [页面控制器](#page-control)
   - [视角](#view-mode)
+  - [插入图片到当前app](#insert-image-to-app)
 
 
 <h3 id="redo-undo">撤销重做</h3>
@@ -109,3 +110,19 @@ manager.addPage()
     同时其他为 `broadcaster` 模式的人也会影响我的视角
 
     在 `isWritable` 为 `false` 时只会跟随其他 `broadcaster` 的视角
+
+<br>
+
+<h3 id="insert-image-to-app">插入图片到当前 app</h3>
+
+```ts
+// 判断当前是否为最大化
+if (manager.boxState === "maximized") {
+    // `focused` 的值的会根据当前 focus 的 app 不同而变化
+    const app = manager.queryOne(manager.focused)
+    // 有 view 的 app 才可以插入图片, 像是 视频，音频之类的 app 是没有 view 的
+    if (app.view) {
+        app.view.insertImage()
+    }
+}
+```

package/docs/api.md

@@ -27,6 +27,7 @@
     - [`nextPage`](#nextPage)
     - [`prevPage`](#prevPage)
     - [`addPage`](#addPage)
+    - [`removePage`](#removePage)
     - [`refresh`](#refresh)
     - [`setContainerSizeRatio`](#setContainerSizeRatio)
   - [实例属性](#prototypes)
@@ -214,6 +215,14 @@ manager.addPage({ after: true }) // 在当前页后添加一页
 manager.addPage({ scene: { name: "page2" } }) // 传入 page 信息
 ```
 
+<h3 id="removePage">removePage</h3>
+
+> 移除一页
+
+```ts
+const success = await manager.removePage(1)
+```
+
 <h3 id="refresh">refresh</h3>
 
 > 刷新 `manager` 的内部状态, 用于从其他房间 `copy` `attributes`

package/docs/app-context.md

@@ -1,156 +1,205 @@
 ## AppContext
 
-- [api](#api)
-- [events](#events)
+-   [api](#api)
+    - [view](#view)
+    - [page](#page)
+    - [storage](#storage)
+-   [events](#events)
 
 <h2 id="api">API</h2>
 
-### appId
+- **context.appId**
 
-插入 `app` 时生成的唯一 ID
+    插入 `app` 时生成的唯一 ID
 
-```ts
-const appId = context.appId
-```
+    ```ts
+    const appId = context.appId;
+    ```
 
-### getDisplayer
+- **context.getDisplayer()**
 
-在默认情况下 `Displayer` 为白板的 `room` 实例
+    在默认情况下 `Displayer` 为白板的 `room` 实例
 
-回放时则为 `Player` 实例
+    回放时则为 `Player` 实例
 
-```ts
-const displayer = context.getDisplayer()
+    ```ts
+    const displayer = context.getDisplayer();
 
-assert(displayer, room) // 互动房间
-assert(displayer, player) // 回放房间
-```
+    assert(displayer, room); // 互动房间
+    assert(displayer, player); // 回放房间
+    ```
 
-### getScenes
 
-`scenes` 在 `addApp` 时传入 `scenePath` 会由 `WindowManager` 创建
+- **context.getIsWritable()**
 
-```ts
-const scenes = context.getScenes()
-```
+    获取当前状态是否可写
 
-### getView
+    ```ts
+    // isWritable === (room.isWritable && box.readonly)
+    const isWritable = context.getIsWritable();
+    ```
 
-`View` 为白板中一块可标注部分
+- **context.getBox()**
 
-```ts
-const view = context.getView()
-```
+    获取当前 app 的 box
 
-### getIsWritable
+    ```ts
+    const box = context.getBox();
 
-获取当前状态是否可写
+    box.$content; // box 的 main element
+    box.$footer;
+    ```
 
-```ts
-// isWritable === (room.isWritable && box.readonly)
-const isWritable = context.getIsWritable()
-```
+<h3 id="view">View</h3>
 
-### getBox
+`view` 可以理解为一块白板，可以从 `context` 中拿到这个实例并挂载到 `Dom` 中
 
-获取当前 app 的 box
+- **context.getView()**
 
-```ts
-const box = context.getBox()
+    获取 `view` 实例
 
-box.$content // box 的 main element
-box.$footer
-```
+    ```ts
+    const view = context.getView();
+    ```
 
-### setScenePath
+- **context.mountView()**
 
-切换当前 `view` 的 `scenePath`
+    挂载 view 到指定 dom
 
-```ts
-context.setScenePath("/page/2")
-```
+    ```ts
+    context.mountView(element);
+    ```
 
-### mountView
+- **context.getScenes()**
 
-挂载 view 到指定 dom
+    `scenes` 在 `addApp` 时传入 `scenePath` 会由 `WindowManager` 创建
 
-```ts
-context.mountView(ref)
-```
+    ```ts
+    const scenes = context.getScenes();
+    ```
 
-### addPage
+- **context.setScenePath()**
 
-```ts
-context.addPage()
-```
+    切换当前 `view` 到指定的 `scenePath`
 
-### nextPage
+    ```ts
+    context.setScenePath("/page/2");
+    ```
 
-```ts
-context.nextPage()
-```
 
-### prevPage
+<h3 id="page">Page</h3>
 
-```ts
-context.prevPage()
-```
+`Page` 是封装后 `scenes` 的一些概念
 
-### pageState
+- **context.addPage()**
 
-```ts
-context.pageState
-```
+    添加一页至 `view`
 
+    ```ts
+    context.addPage() // 默认在最后添加一页
+    context.addPage({ after: true }) // 在当前页后添加一页
+    context.addPage({ scene: { name: "page2" } }) // 传入 page 信息
+    ```
 
-<h2 id="events">events</h2>
+- **context.nextPage()**
+
+    上一页
+
+    ```ts
+    context.nextPage();
+    ```
+
+- **context.prevPage()**
+
+    下一页
+
+    ```ts
+    context.prevPage();
+    ```
+
+- **context.pageState**
+
+    获取当前所在的 `index` 和一共有多少页
+
+    ```ts
+    context.pageState;
+    // {
+    //     index: number,
+    //     length: number,
+    // }
+    ```
+
+<h3 id="storage">storage</h3>
+
+存储和同步状态，以及发送事件的一系列集合
 
-### destroy
+- **context.storage**
+
+    默认创建的 storage 实例
+
+    ```ts
+    context.storage
+    ```
+
+- **createStorage()**
+
+    同时你也可以创建多个 `storage` 实例
+
+    ```ts
+    const defaultState = { count: 0 } // 可选
+    const storage = context.createStorage("store1", defaultState);
+    ```
+
+
+
+
+<h2 id="events">events</h2>
 
-app 被关闭时发送的事件
+- **destroy**
 
-```ts
-context.emitter.on("destroy", () => {
-    // release your listeners
-})
-```
+    app 被关闭时发送
 
-### writableChange
+    ```ts
+    context.emitter.on("destroy", () => {
+        // release your listeners
+    });
+    ```
 
-白板可写状态切换时触发
+- **writableChange**
 
-```ts
-context.emitter.on("writableChange", isWritable => {
-    //
-})
-```
+    白板可写状态切换时触发
 
-### focus
+    ```ts
+    context.emitter.on("writableChange", isWritable => {
+        //
+    });
+    ```
 
-当前 app 获得焦点或者失去焦点时触发
+- **focus**
 
-```ts
-context.emitter.on("focus", focus => {
-    //
-})
-```
+    当前 app 获得焦点或者失去焦点时触发
 
+    ```ts
+    context.emitter.on("focus", focus => {
+        //
+    });
+    ```
 
-### pageStateChange
+- **pageStateChange**
 
-#### PageState
+    `PageState`
 
-```ts
-type PateState {
-    index: number;
-    length: number;
-}
-```
+    ```ts
+    type PateState {
+        index: number;
+        length: number;
+    }
+    ```
 
-当前页数和总页数变化时触发
+    当前页数和总页数变化时触发
 
-```ts
-context.emitter.on("pageStateChange", pageState => {
-    // { index: 0, length: 1 }
-})
-```
+    ```ts
+    context.emitter.on("pageStateChange", pageState => {
+        // { index: 0, length: 1 }
+    });
+    ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.25",
+  "version": "0.4.27",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/App/AppContext.ts

@@ -82,6 +82,17 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         return this.appProxy.view;
     };
 
+    public mountView = (dom: HTMLElement): void => {
+        const view = this.getView();
+        if (view) {
+            view.divElement = dom as HTMLDivElement;
+            setTimeout(() => {
+                // 渲染需要时间，延迟 refresh
+                this.getRoom()?.refreshViewSize();
+            }, 1000);
+        }
+    };
+
     public getInitScenePath = () => {
         return this.manager.getAppInitPath(this.appId);
     };
@@ -124,17 +135,6 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         this.getRoom()?.setScenePath(scenePath);
     };
 
-    public mountView = (dom: HTMLElement): void => {
-        const view = this.getView();
-        if (view) {
-            view.divElement = dom as HTMLDivElement;
-            setTimeout(() => {
-                // 渲染需要时间，延迟 refresh
-                this.getRoom()?.refreshViewSize();
-            }, 1000);
-        }
-    };
-
     /** Get the local App options. */
     public getAppOptions = (): TAppOptions | undefined => {
         return typeof this.appOptions === "function"
@@ -231,6 +231,15 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         }
     };
 
+    public removePage = async (index: number): Promise<boolean> => {
+        if (index < 0 || index >= this.pageState.length) {
+            console.warn(`[WindowManager]: page index ${index} out of range`);
+            return false;
+        }
+        this.appProxy.removeSceneByIndex(index);
+        return true;
+    }
+
     public get pageState(): PageState {
         return this.appProxy.pageState;
     }

package/src/App/AppProxy.ts

@@ -27,11 +27,11 @@ import type { SceneState, View, SceneDefinition } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 import type { NetlessApp } from "../typings";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
-import type { PageState } from "../Page";
+import { calculateNextIndex, PageRemoveService, PageState } from "../Page";
 
 export type AppEmitter = Emittery<AppEmitterEvent>;
 
-export class AppProxy {
+export class AppProxy implements PageRemoveService {
     public kind: string;
     public id: string;
     public scenePath?: string;
@@ -48,6 +48,7 @@ export class AppProxy {
     private status: "normal" | "destroyed" = "normal";
     private stateKey: string;
     private _pageState: AppPageStateImpl;
+    private _prevFullPath: string | undefined;
 
     public appResult?: NetlessApp<any>;
     public appContext?: AppContext<any, any>;
@@ -248,6 +249,24 @@ export class AppProxy {
         this.boxManager?.updateBoxState(currentAppState);
     }
 
+    public async onRemoveScene(scenePath: string) {
+        if (this.scenePath && scenePath.startsWith(this.scenePath + "/")) {
+            let nextIndex = this.pageState.index;
+            let fullPath = this._pageState.getFullPath(nextIndex);
+            if (!fullPath) {
+                nextIndex = 0;
+                fullPath = this._pageState.getFullPath(nextIndex);
+            }
+            if (fullPath) {
+                this.setFullPath(fullPath);
+            }
+            this.setViewFocusScenePath();
+            if (this.view) {
+                this.view.focusSceneIndex = nextIndex;
+            }
+        }
+    }
+
     public getAppInitState = (id: string) => {
         const attrs = this.store.getAppState(id);
         if (!attrs) return;
@@ -348,7 +367,10 @@ export class AppProxy {
             return autorun(() => {
                 const fullPath = this.appAttributes?.fullPath;
                 this.setFocusScenePathHandler(fullPath);
-                this.notifyPageStateChange();
+                if (this._prevFullPath !== fullPath) {
+                    this.notifyPageStateChange();
+                    this._prevFullPath = fullPath;
+                }
             });
         });
     };
@@ -381,14 +403,47 @@ export class AppProxy {
         return view;
     }
 
-    public notifyPageStateChange = () => {
+    public notifyPageStateChange = debounce(() => {
         this.appEmitter.emit("pageStateChange", this.pageState);
-    };
+    }, 50);
 
     public get pageState(): PageState {
         return this._pageState.toObject();
     }
 
+    // PageRemoveService
+    public async removeSceneByIndex(index: number) {
+        const scenePath = this._pageState.getFullPath(index);
+        if (scenePath) {
+            // 不能删除所有场景
+            if (this.pageState.length <= 1) {
+                return false;
+            }
+            const nextIndex = calculateNextIndex(index, this.pageState);
+            // 只修改 focus path 不修改 FullPath
+            this.setSceneIndexWithoutSync(nextIndex);
+            this.manager.dispatchInternalEvent(Events.SetAppFocusIndex, {
+                type: "app",
+                appID: this.id,
+                index: nextIndex,
+            });
+            // 手动添加一个延迟, 让 app 切换场景后再删除以避免闪烁
+            setTimeout(() => {
+                removeScenes(this.manager.room, scenePath, index);
+            }, 100);
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    public setSceneIndexWithoutSync(index: number) {
+        if (this.view) {
+            this.view.focusSceneIndex = index;
+        }
+    }
+    // PageRemoveService end
+
     public setSceneIndex(index: number) {
         if (this.view) {
             this.view.focusSceneIndex = index;
@@ -432,6 +487,7 @@ export class AppProxy {
         this.manager.refresher?.remove(this.id);
         this.manager.refresher?.remove(this.stateKey);
         this.manager.refresher?.remove(`${this.id}-fullPath`);
+        this._prevFullPath = undefined;
     }
 
     public close(): Promise<void> {

package/src/App/Storage/index.ts

@@ -37,15 +37,21 @@ export class Storage<TState extends Record<string, any> = any> implements Storag
     this._state = {} as TState;
     const rawState = this._getRawState(this._state);
 
-    if (this.id !== null && this._context.getIsWritable()) {
-      if (rawState === this._state || !isObject(rawState)) {
-        if (!get(this._context.getAttributes(), [STORAGE_NS])) {
-          this._context.updateAttributes([STORAGE_NS], {});
+    if (this._context.getIsWritable()) {
+      if (this.id === null) {
+        if (context.isAddApp && defaultState) {
+            this.setState(defaultState);
+        }
+      } else {
+        if (rawState === this._state || !isObject(rawState)) {
+          if (!get(this._context.getAttributes(), [STORAGE_NS])) {
+            this._context.updateAttributes([STORAGE_NS], {});
+          }
+          this._context.updateAttributes([STORAGE_NS, this.id], this._state);
+          if (defaultState) {
+            this.setState(defaultState);
+          }
         }
-        this._context.updateAttributes([STORAGE_NS, this.id], this._state);
-      }
-      if (defaultState) {
-        this.setState(defaultState);
       }
     }
 

package/src/AppListener.ts

@@ -6,6 +6,13 @@ import { setViewFocusScenePath } from "./Utils/Common";
 import type { AnimationMode, Camera, Event } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 import type { TeleBoxState } from "@netless/telebox-insider";
+
+type SetAppFocusIndex = {
+    type: "main" | "app";
+    appID?: string;
+    index: number;
+}
+
 export class AppListeners {
     private displayer = this.manager.displayer;
 
@@ -67,6 +74,10 @@ export class AppListeners {
                     this.initMainViewCameraHandler();
                     break;
                 }
+                case Events.SetAppFocusIndex: {
+                    this.setAppFocusViewIndexHandler(data.payload);
+                    break;
+                }
                 default:
                     break;
             }
@@ -119,4 +130,15 @@ export class AppListeners {
     private initMainViewCameraHandler = () => {
         this.manager.mainViewProxy.addCameraReaction();
     }
+
+    private setAppFocusViewIndexHandler = (payload: SetAppFocusIndex) => {
+        if (payload.type === "main") {
+            this.manager.setSceneIndexWithoutSync(payload.index);
+        } else if (payload.type === "app" && payload.appID) {
+            const app = this.manager.appProxies.get(payload.appID);
+            if (app) {
+                app.setSceneIndexWithoutSync(payload.index);
+            }
+        }
+    }
 }