@netless/window-manager 0.4.13 → 0.4.16

package/docs/app-context.md

@@ -0,0 +1,111 @@
+## AppContext
+
+- [api](#api)
+- [events](#events)
+
+<h2 id="api">API</h2>
+
+### appId
+
+插入 `app` 时生成的唯一 ID
+
+```ts
+const appId = context.appId
+```
+
+### getDisplayer
+
+在默认情况下 `Displayer` 为白板的 `room` 实例
+
+回放时则为 `Player` 实例
+
+```ts
+const displayer = context.getDisplayer()
+
+assert(displayer, room) // 互动房间
+assert(displayer, player) // 回放房间
+```
+
+### getScenes
+
+`scenes` 在 `addApp` 时传入 `scenePath` 会由 `WindowManager` 创建
+
+```ts
+const scenes = context.getScenes()
+```
+
+### getView
+
+`View` 为白板中一块可标注部分
+
+```ts
+const view = context.getView()
+```
+
+### getIsWritable
+
+获取当前状态是否可写
+
+```ts
+// isWritable === (room.isWritable && box.readonly)
+const isWritable = context.getIsWritable()
+```
+
+### getBox
+
+获取当前 app 的 box
+
+```ts
+const box = context.getBox()
+
+box.$content // box 的 main element
+box.$footer
+```
+
+### setScenePath
+
+切换当前 `view` 的 `scenePath`
+
+```ts
+context.setScenePath("/page/2")
+```
+
+### mountView
+
+挂载 view 到指定 dom
+
+```ts
+context.mountView(ref)
+```
+
+<h2 id="events">events</h2>
+
+### destroy
+
+app 被关闭时发送的事件
+
+```ts
+context.emitter.on("destroy", () => {
+    // release your listeners
+})
+```
+
+### writableChange
+
+白板可写状态切换时触发
+
+```ts
+context.emitter.on("writableChange", isWritable => {
+    //
+})
+```
+
+### focus
+
+当前 app 获得焦点或者失去焦点时触发
+
+```ts
+context.emitter.on("focus", focus => {
+    //
+})
+```

package/docs/develop-app.md

@@ -1,5 +1,7 @@
 # 开发自定义 APP
 
+- [AppContext](./app-context.md)
+
 ## official apps https://github.com/netless-io/netless-app
 
 <br>

package/package.json

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

package/src/AppListener.ts

@@ -55,6 +55,10 @@ export class AppListeners {
                     this.cursorMoveHandler(data.payload);
                     break;
                 }
+                case Events.RootDirRemoved: {
+                    this.rootDirRemovedHandler();
+                    break;
+                }
                 default:
                     break;
             }
@@ -93,4 +97,10 @@ export class AppListeners {
     private cursorMoveHandler = (payload: any) => {
         emitter.emit("cursorMove", payload);
     };
+
+    private rootDirRemovedHandler = () => {
+        this.manager.createRootDirScenesCallback();
+        this.manager.mainViewProxy.rebind();
+        emitter.emit("rootDirRemoved");
+    }
 }

package/src/AppManager.ts

@@ -59,6 +59,8 @@ export class AppManager {
 
     public sceneState: SceneState | null = null;
 
+    public rootDirRemoving = false;
+
     constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
         this.store.setContext({
@@ -106,13 +108,11 @@ export class AppManager {
         });
     }
 
-    private onRemoveScenes = (scenePath: string) => {
+    private onRemoveScenes = async (scenePath: string) => {
         // 如果移除根目录就把 scenePath 设置为初始值
         if (scenePath === ROOT_DIR) {
-            this.setMainViewScenePath(INIT_DIR);
-            this.createRootDirScenesCallback();
-            this.onRootDirRemoved();
-            emitter.emit("rootDirRemoved");
+            await this.onRootDirRemoved();
+            this.dispatchInternalEvent(Events.RootDirRemoved);
             return;
         }
         // 如果移除的 path 跟 MainViewScenePath 相同就取当前目录的当前 index
@@ -129,14 +129,22 @@ export class AppManager {
      * 根目录被删除时所有的 scene 都会被删除.
      * 所以需要关掉所有开启了 view 的 app
      */
-    private onRootDirRemoved() {
-        this.appProxies.forEach(appProxy => {
+    public async onRootDirRemoved(needClose = true) {
+        this.rootDirRemoving =  true;
+        this.setMainViewScenePath(INIT_DIR);
+
+        this.createRootDirScenesCallback();
+        
+        for (const [id, appProxy] of this.appProxies.entries()) {
             if (appProxy.view) {
-                this.closeApp(appProxy.id);
+                await this.closeApp(id, needClose);
             }
-        });
+        }
         // 删除了根目录的 scenes 之后 mainview 需要重新绑定, 否则主白板会不能渲染
         this.mainViewProxy.rebind();
+
+        emitter.emit("rootDirRemoved");
+        this.rootDirRemoving = false;
     }
 
     private onReadonlyChanged = () => {
@@ -156,7 +164,7 @@ export class AppManager {
         });
     };
 
-    private createRootDirScenesCallback = () => {
+    public createRootDirScenesCallback = () => {
         let isRecreate = false;
         if (this.callbacksNode) {
             this.callbacksNode.dispose();
@@ -274,34 +282,13 @@ export class AppManager {
         this.refresher?.add("mainViewIndex", () => {
             return autorun(() => {
                 const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
-                if (mainSceneIndex !== undefined && this._prevSceneIndex !== mainSceneIndex) {
-                    callbacks.emit("mainViewSceneIndexChange", mainSceneIndex);
-                    emitter.emit("changePageState");
-                    if (this.callbacksNode) {
-                        this.updateSceneState(this.callbacksNode);
-                    }
-                    this._prevSceneIndex = mainSceneIndex;
-                }
+                this.onMainViewIndexChange(mainSceneIndex);
             });
         });
         this.refresher?.add("focusedChange", () => {
             return autorun(() => {
                 const focused = get(this.attributes, "focus");
-                if (this._prevFocused !== focused) {
-                    callbacks.emit("focusedChange", focused);
-                    emitter.emit("focusedChange", { focused, prev: this._prevFocused });
-                    this._prevFocused = focused;
-                    if (focused !== undefined) {
-                        this.boxManager?.focusBox({ appId: focused });
-                        // 确保 focus 修改的时候, appProxy 已经创建
-                        setTimeout(() => {
-                            const appProxy = this.appProxies.get(focused);
-                            if (appProxy) {
-                                appRegister.notifyApp(appProxy.kind, "focus", { appId: focused });
-                            }
-                        }, 0);
-                    }
-                }
+                this.onFocusChange(focused);
             });
         });
         this.refresher?.add("registeredChange", () => {
@@ -329,6 +316,35 @@ export class AppManager {
         });
     }
 
+    private onMainViewIndexChange = (index: number) => {
+        if (index !== undefined && this._prevSceneIndex !== index) {
+            callbacks.emit("mainViewSceneIndexChange", index);
+            emitter.emit("changePageState");
+            if (this.callbacksNode) {
+                this.updateSceneState(this.callbacksNode);
+            }
+            this._prevSceneIndex = index;
+        }
+    }
+
+    private onFocusChange = (focused: string | undefined) => {
+        if (this._prevFocused !== focused) {
+            callbacks.emit("focusedChange", focused);
+            emitter.emit("focusedChange", { focused, prev: this._prevFocused });
+            this._prevFocused = focused;
+            if (focused !== undefined) {
+                this.boxManager?.focusBox({ appId: focused });
+                // 确保 focus 修改的时候, appProxy 已经创建
+                setTimeout(() => {
+                    const appProxy = this.appProxies.get(focused);
+                    if (appProxy) {
+                        appRegister.notifyApp(appProxy.kind, "focus", { appId: focused });
+                    }
+                }, 0);
+            }
+        }
+    }
+
     /**
      * 插件更新 attributes 时的回调
      *
@@ -350,14 +366,13 @@ export class AppManager {
             for (const { id } of orderBy(appsWithCreatedAt, "createdAt", "asc")) {
                 if (!this.appProxies.has(id) && !this.appStatus.has(id)) {
                     const app = apps[id];
-
-                    this.appStatus.set(id, AppStatus.StartCreate);
                     try {
                         const appAttributes = this.attributes[id];
                         if (!appAttributes) {
                             throw new Error("appAttributes is undefined");
                         }
                         this.appCreateQueue.push(() => {
+                            this.appStatus.set(id, AppStatus.StartCreate);
                             return this.baseInsertApp(
                                 {
                                     kind: app.kind,
@@ -494,10 +509,10 @@ export class AppManager {
         }
     }
 
-    public async closeApp(appId: string) {
+    public async closeApp(appId: string, needClose = true) {
         const appProxy = this.appProxies.get(appId);
         if (appProxy) {
-            appProxy.destroy(true, true, false);
+            appProxy.destroy(true, needClose, false);
         }
     }
 
@@ -717,7 +732,7 @@ export class AppManager {
         });
     }
 
-    public dispatchInternalEvent(event: Events, payload: any) {
+    public dispatchInternalEvent(event: Events, payload?: any) {
         this.safeDispatchMagixEvent(MagixEventName, {
             eventName: event,
             payload: payload,

package/src/AppProxy.ts

@@ -1,5 +1,5 @@
 import Emittery from "emittery";
-import { AppAttributes, AppEvents, Events } from "./constants";
+import { AppAttributes, AppEvents, Events, SETUP_APP_DELAY } from "./constants";
 import { AppContext } from "./AppContext";
 import { appRegister } from "./Register";
 import { autorun } from "white-web-sdk";
@@ -168,7 +168,7 @@ export class AppProxy {
                     appRegister.notifyApp(this.kind, "created", { appId, result });
                     this.afterSetupApp(boxInitState);
                     this.fixMobileSize();
-                }, 50);
+                }, SETUP_APP_DELAY);
             });
             this.boxManager?.createBox({
                 appId: appId,
@@ -346,6 +346,7 @@ export class AppProxy {
 
     public setViewFocusScenePath() {
         const fullPath = this.getFullScenePath();
+        console.log("setViewFocusScenePath", this.kind, this.id, fullPath)
         if (fullPath && this.view) {
             setViewFocusScenePath(this.view, fullPath);
         }
@@ -380,6 +381,7 @@ export class AppProxy {
         if (cleanAttrs) {
             this.store.cleanAppAttributes(this.id);
             if (this.scenePath) {
+                console.log("put closeApp", this.scenePath);
                 removeScenes(this.manager.room, this.scenePath);
             }
         }

package/src/ScenePath/index.ts

@@ -0,0 +1,47 @@
+import type { ScenesCallbacks, ScenesCallbacksNode } from "white-web-sdk";
+import type { AppManager } from "../AppManager";
+
+export class ScenesCallbackManager {
+    
+    private nodes: Map<string, ScenesCallbacksNode> = new Map();
+
+    constructor(private manager: AppManager) {}
+
+    public createNode(path: string, callbacks?: Partial<ScenesCallbacks>): ScenesCallbacksNode | null {
+        const node = this.manager.displayer.createScenesCallback(path, callbacks);
+        if (node) {
+            this.nodes.set(path, node);
+        }
+        return node;
+    }
+
+    public getScenes(path: string) {
+        const node = this.nodes.get(path);
+        return node?.scenes;
+    }
+
+    public getScenesOnce(path: string) {
+        let node = this.nodes.get(path);
+        if (!node) {
+            const created = this.createNode(path);
+            if (created) {
+                node = created;
+            }
+        }
+        const scenes = node?.scenes;
+        this.removeNode(path);
+        return scenes;
+    }
+
+    public removeNode(path: string) {
+        const node = this.nodes.get(path);
+        if (node) {
+            node.dispose();
+            this.nodes.delete(path);
+        }
+    }
+
+    public destroy(): void {
+        this.nodes.forEach(node => node.dispose());
+    }
+}

package/src/Utils/AppCreateQueue.ts

@@ -1,5 +1,6 @@
 import { callbacks } from "../callback";
 import type { AppProxy } from "../AppProxy";
+import { SETUP_APP_DELAY } from "../constants";
 
 export type Invoker = () => Promise<AppProxy | undefined>;
 
@@ -60,11 +61,18 @@ export class AppCreateQueue {
 
     public emitReady() {
         if (!this.isEmit) {
-            callbacks.emit("ready");
+            setTimeout(() => {
+                callbacks.emit("ready");
+            }, SETUP_APP_DELAY);
         }
         this.isEmit = true;
     }
 
+    public empty() {
+        this.list = [];
+        this.clear();
+    }
+
     public destroy() {
         if (this.timer) {
             this.clear();

package/src/Utils/Common.ts

@@ -1,12 +1,12 @@
 import { appRegister } from "../Register";
 import { debounce } from "lodash";
 import { emitter } from "../InternalEmitter";
+import { ROOT_DIR } from "../constants";
 import { ScenePathType } from "white-web-sdk";
 import { v4 } from "uuid";
 import type { PublicEvent } from "../callback";
-import type { Displayer, ViewVisionMode, Room, View } from "white-web-sdk";
+import type { Displayer, ViewVisionMode, Room, View , SceneDefinition} from "white-web-sdk";
 import type Emittery from "emittery";
-import { ROOT_DIR } from "../constants";
 
 export const genAppId = async (kind: string) => {
     const impl = await appRegister.appClasses.get(kind)?.();
@@ -104,6 +104,9 @@ export const entireScenes = (displayer: Displayer) => {
     return displayer.entireScenes();
 };
 
+export const putScenes = (room: Room | undefined, path: string, scenes: SceneDefinition[]) => {
+    return room?.putScenes(path, scenes);
+}
 
 export const isValidScenePath = (scenePath: string) => {
     return scenePath.startsWith("/");

package/src/View/MainView.ts

@@ -22,7 +22,6 @@ export class MainViewProxy {
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
         emitter.once("mainViewMounted").then(() => {
-            this.addMainViewListener();
             setTimeout(() => {
                 this.start();
                 if (!this.mainViewCamera || !this.mainViewSize) {
@@ -55,6 +54,7 @@ export class MainViewProxy {
     public start() {
         if (this.started) return;
         this.sizeChangeHandler(this.mainViewSize);
+        this.addMainViewListener();
         this.addCameraListener();
         this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
         this.started = true;
@@ -143,6 +143,7 @@ export class MainViewProxy {
             this.view.divElement.removeEventListener("click", this.mainViewClickListener);
             this.view.divElement.removeEventListener("touchend", this.mainViewClickListener);
         }
+        this.mainViewIsAddListener = false;
     }
 
     private mainViewClickListener = () => {

package/src/constants.ts

@@ -13,6 +13,7 @@ export enum Events {
     MoveCamera = "MoveCamera",
     MoveCameraToContain = "MoveCameraToContain",
     CursorMove = "CursorMove",
+    RootDirRemoved = "RootDirRemoved",
 }
 
 export const MagixEventName = "__WindowManger";
@@ -50,3 +51,5 @@ export const DEFAULT_CONTAINER_RATIO = 9 / 16;
 
 export const ROOT_DIR = "/";
 export const INIT_DIR = "/init";
+
+export const SETUP_APP_DELAY = 50;

package/src/index.ts

@@ -25,6 +25,7 @@ import {
     ensureValidScenePath,
     entireScenes,
     isValidScenePath,
+    putScenes,
     wait,
 } from "./Utils/Common";
 import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
@@ -387,6 +388,28 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
      * 创建一个 app 至白板
      */
     public async addApp<T = any>(params: AddAppParams<T>): Promise<string | undefined> {
+        if (this.appManager) {
+            // 移除根目录时需要做一些异步的释放操作 addApp 需要等待释放完成才可以继续添加
+            if (this.appManager.rootDirRemoving) {
+                return new Promise((resolve, reject) => {
+                    emitter.once("rootDirRemoved").then(async () => {
+                        try {
+                            const appId = await this._addApp(params);
+                            resolve(appId);
+                        } catch (error) {
+                            reject(error.message);
+                        }
+                    });
+                });
+            } else {
+                return this._addApp(params);
+            }
+        } else {
+            throw new AppManagerNotInitError();
+        }
+    }
+
+    private async _addApp<T = any>(params: AddAppParams<T>): Promise<string | undefined> {
         if (this.appManager) {
             if (!params.kind || typeof params.kind !== "string") {
                 throw new ParamsInvalidError();
@@ -438,16 +461,16 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
                 if (this.isDynamicPPT(scenes)) {
                     isDynamicPPT = true;
                     if (!entireScenes(this.displayer)[scenePath]) {
-                        this.room?.putScenes(scenePath, scenes);
+                        putScenes(this.room, scenePath, scenes);
                     }
                 } else {
                     if (!entireScenes(this.displayer)[scenePath]) {
-                        this.room?.putScenes(scenePath, [{ name: scenes[0].name }]);
+                        putScenes(this.room, scenePath, [{ name: scenes[0].name }]);
                     }
                 }
             }
             if (scenePath && scenes === undefined) {
-                this.room?.putScenes(scenePath, [{}]);
+                putScenes(this.room, scenePath, [{}]);
             }
         }
         return isDynamicPPT;