@netless/window-manager 0.4.0-canary.23 → 0.4.0-canary.27

package/docs/api.md

@@ -136,6 +136,7 @@ manager.setBoxState("normal") // boxState: normal | maximized | minimized
 | ------------------ | ------- | ------- | ----------------- |
 | mainView           | View    |         | 主白板               |
 | mainViewSceneIndex | number  |         | 当前主白板的 SceneIndex |
+| mainViewScenesLength | number |        | mainView 的 scenes 长度 |
 | boxState           | string  |         | 当前窗口状态            |
 | darkMode           | boolean |         | 黑夜模式              |
 | prefersColorScheme | string  |         | 颜色主题              |
@@ -158,3 +159,4 @@ manager.callbacks.on(events, listener)
 | prefersColorSchemeChange | string         |         | auto,light,dark            |
 | cameraStateChange        | CameraState    |         |                            |
 | focusedChange            | string, undefined |     | 当前 focus 的 appId，主白板时为 undefined  |
+| mainViewScenesLengthChange | number      |         | mainView scenes 添加或删除时触发 |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.0-canary.23",
+  "version": "0.4.0-canary.27",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -33,7 +33,7 @@
   "devDependencies": {
     "@netless/app-docs-viewer": "^0.2.6",
     "@netless/app-media-player": "0.1.0-beta.5",
-    "@netless/telebox-insider": "0.2.21",
+    "@netless/telebox-insider": "0.2.22",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-url": "^6.1.0",

package/src/AppManager.ts

@@ -1,9 +1,15 @@
-import pRetry from "p-retry";
-import { AppAttributes, AppStatus, Events, MagixEventName } from "./constants";
+import { AppAttributes, AppStatus, Events, MagixEventName, ROOT_DIR } from "./constants";
 import { AppListeners } from "./AppListener";
 import { AppProxy } from "./AppProxy";
+import { appRegister } from "./Register";
 import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
-import { callbacks, emitter, WindowManager, reconnectRefresher } from "./index";
+import { callbacks, emitter, reconnectRefresher, WindowManager } from "./index";
+import { get, isInteger, orderBy } from "lodash";
+import { log } from "./Utils/log";
+import { MainViewProxy } from "./View/MainView";
+import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
+import { store } from "./AttributesDelegate";
+import { ViewManager } from "./View/ViewManager";
 import {
     entireScenes,
     genAppId,
@@ -12,17 +18,11 @@ import {
     setScenePath,
     setViewFocusScenePath,
 } from "./Utils/Common";
-import { log } from "./Utils/log";
-import { MainViewProxy } from "./View/MainView";
-import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
-import { get, isInteger, sortBy } from "lodash";
-import { store } from "./AttributesDelegate";
-import { ViewManager } from "./View/ViewManager";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
-import type { Displayer, DisplayerState, Room } from "white-web-sdk";
+import type { Displayer, DisplayerState, Room, ScenesCallbacksNode } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect, EmitterEvent } from "./index";
-import { appRegister } from "./Register";
+import { AppCreateQueue } from "./Utils/AppCreateQueue";
 
 export class AppManager {
     public displayer: Displayer;
@@ -33,12 +33,15 @@ export class AppManager {
     public mainViewProxy: MainViewProxy;
     public refresher?: ReconnectRefresher;
     public isReplay = this.windowManger.isReplay;
+    public mainViewScenesLength = 0;
 
     private appListeners: AppListeners;
     public boxManager?: BoxManager;
 
     private _prevSceneIndex: number | undefined;
     private _prevFocused: string | undefined;
+    private callbacksNode: ScenesCallbacksNode | null;
+    private appCreateQueue = new AppCreateQueue();
 
     constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
@@ -69,17 +72,30 @@ export class AppManager {
             });
         }
         emitter.on("removeScenes", scenePath => {
-            if (scenePath === "/") {
-                this.setMainViewScenePath("/");
+            if (scenePath === ROOT_DIR) {
+                this.setMainViewScenePath(ROOT_DIR);
                 return;
             }
             const mainViewScenePath = this.store.getMainViewScenePath();
             if (this.room && mainViewScenePath) {
                 if (mainViewScenePath === scenePath) {
-                    this.setMainViewScenePath("/");
+                    this.setMainViewScenePath(ROOT_DIR);
                 }
             }
         });
+        this.callbacksNode = this.displayer.createScenesCallback(ROOT_DIR, {
+            onAddScene: scenesCallback => {
+                this.mainViewScenesLength = scenesCallback.scenes.length;
+                callbacks.emit("mainViewScenesLengthChange", this.mainViewScenesLength);
+            },
+            onRemoveScene: scenesCallback => {
+                this.mainViewScenesLength = scenesCallback.scenes.length;
+                callbacks.emit("mainViewScenesLengthChange", this.mainViewScenesLength);
+            },
+        });
+        if (this.callbacksNode) {
+            this.mainViewScenesLength = this.callbacksNode.scenes.length;
+        }
     }
 
     private get eventName() {
@@ -112,6 +128,15 @@ export class AppManager {
         return this.room?.uid || "";
     }
 
+    public getMainViewSceneDir() {
+        const scenePath = this.store.getMainViewScenePath();
+        if (scenePath) {
+            return parseSceneDir(scenePath);
+        } else {
+            throw new Error("[WindowManager]: mainViewSceneDir not found");
+        }
+    }
+
     private async onCreated() {
         await this.attributesUpdateCallback(this.attributes.apps);
         this.boxManager?.updateManagerRect();
@@ -161,9 +186,18 @@ export class AppManager {
             return autorun(() => {
                 const focused = get(this.attributes, "focus");
                 if (this._prevFocused !== focused) {
-                    this.boxManager?.focusBox({ appId: focused });
                     callbacks.emit("focusedChange", focused);
                     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);
+                    }
                 }
             });
         });
@@ -195,19 +229,18 @@ export class AppManager {
                     createdAt: apps[appId].createdAt,
                 };
             });
-            for (const { id } of sortBy(appsWithCreatedAt, "createdAt")) {
+            for (const { id } of orderBy(appsWithCreatedAt, "createdAt", "asc")) {
                 if (!this.appProxies.has(id) && !this.appStatus.has(id)) {
                     const app = apps[id];
 
-                    pRetry(
-                        async () => {
-                            this.appStatus.set(id, AppStatus.StartCreate);
-                            // 防御 appAttributes 有可能为 undefined 的情况，这里做一个重试
-                            const appAttributes = this.attributes[id];
-                            if (!appAttributes) {
-                                throw new Error("appAttributes is undefined");
-                            }
-                            await this.baseInsertApp(
+                    this.appStatus.set(id, AppStatus.StartCreate);
+                    try {
+                        const appAttributes = this.attributes[id];
+                        if (!appAttributes) {
+                            throw new Error("appAttributes is undefined");
+                        }
+                        this.appCreateQueue.push(() => {
+                            return this.baseInsertApp(
                                 {
                                     kind: app.kind,
                                     options: app.options,
@@ -216,13 +249,11 @@ export class AppManager {
                                 id,
                                 false
                             );
-                            this.focusByAttributes(apps);
-                        },
-                        { retries: 3 }
-                    ).catch(err => {
-                        console.warn(`[WindowManager]: Insert App Error`, err);
-                        this.appStatus.delete(id);
-                    });
+                        });
+                        this.focusByAttributes(apps);
+                    } catch (error) {
+                        console.warn(`[WindowManager]: Insert App Error`, error);
+                    }
                 }
             }
         }
@@ -385,6 +416,10 @@ export class AppManager {
     public async setMainViewScenePath(scenePath: string) {
         if (this.room) {
             const scenePathType = this.displayer.scenePathType(scenePath);
+            const sceneDir = parseSceneDir(scenePath);
+            if (sceneDir !== ROOT_DIR) {
+                throw new Error(`[WindowManager]: main view scenePath must in root dir "/"`);
+            }
             if (scenePathType === ScenePathType.None) {
                 throw new Error(`[WindowManager]: ${scenePath} not valid scene`);
             } else if (scenePathType === ScenePathType.Page) {
@@ -470,10 +505,6 @@ export class AppManager {
             }
             case "focus": {
                 this.windowManger.safeSetAttributes({ focus: payload.appId });
-                const appProxy = this.appProxies.get(payload.appId);
-                if (appProxy) {
-                    appRegister.notifyApp(appProxy.kind, "focus", { appId: payload.appId });
-                }
                 break;
             }
             case "resize": {
@@ -554,6 +585,8 @@ export class AppManager {
         this.refresher?.destroy();
         this.mainViewProxy.destroy();
         callbacks.clearListeners();
+        this.callbacksNode?.dispose();
+        this.appCreateQueue.destroy();
         this._prevSceneIndex = undefined;
     }
 }

package/src/AppProxy.ts

@@ -7,7 +7,7 @@ import { BoxManagerNotFoundError } from "./Utils/error";
 import { debounce, get } from "lodash";
 import { emitter } from "./index";
 import { Fields } from "./AttributesDelegate";
-import { getScenePath, removeScenes, setScenePath, setViewFocusScenePath } from "./Utils/Common";
+import { entireScenes, getScenePath, removeScenes, setScenePath, setViewFocusScenePath } from "./Utils/Common";
 import { log } from "./Utils/log";
 import type {
     AppEmitterEvent,
@@ -67,7 +67,7 @@ export class AppProxy {
         if (options) {
             this.scenePath = options.scenePath;
             if (this.appAttributes?.isDynamicPPT && this.scenePath) {
-                this.scenes = this.manager.displayer.entireScenes()[this.scenePath];
+                this.scenes = entireScenes(this.manager.displayer)[this.scenePath];
             } else {
                 this.scenes = options.scenes;
             }
@@ -134,19 +134,10 @@ export class AppProxy {
         };
     }
 
-    private focusApp() {
-        this.focusBox();
-        this.store.setMainViewFocusPath(this.manager.mainView);
-    }
-
     public get box(): ReadonlyTeleBox | undefined {
         return this.boxManager?.getBox(this.id);
     }
 
-    public focusBox() {
-        this.boxManager?.focusBox({ appId: this.id });
-    }
-
     private async setupApp(
         appId: string,
         skipUpdate: boolean,
@@ -174,7 +165,7 @@ export class AppProxy {
                     // 延迟执行 setup, 防止初始化的属性没有更新成功
                     const result = await app.setup(context);
                     this.appResult = result;
-                    appRegister.notifyApp(app.kind, "created", { appId, result });
+                    appRegister.notifyApp(this.kind, "created", { appId, result });
                     this.afterSetupApp(boxInitState);
                     this.fixMobileSize();
                 }, 50);
@@ -188,8 +179,7 @@ export class AppProxy {
             });
             if (this.isAddApp && this.box) {
                 this.store.updateAppState(appId, AppAttributes.ZIndex, this.box.zIndex);
-                this.store.setAppFocus(appId, true);
-                this.focusBox();
+                this.boxManager.focusBox({ appId }, false);
             }
         } catch (error: any) {
             console.error(error);

package/src/Cursor/index.ts

@@ -42,6 +42,7 @@ export class CursorManager {
             if (payload.state === CursorState.Leave) {
                 cursorInstance.leave();
             } else {
+                cursorInstance.setMember();
                 cursorInstance.move(payload.position);
             }
         });

package/src/Utils/AppCreateQueue.ts

@@ -0,0 +1,54 @@
+import type { AppProxy } from "../AppProxy";
+
+export type Invoker = () => Promise<AppProxy | undefined>;
+
+export class AppCreateQueue {
+    private list: Invoker[] = [];
+    private currentInvoker: Invoker | undefined;
+    private timer: number | undefined;
+
+    private initInterval() {
+        return setInterval(() => {
+            this.invoke();
+        }, 50);
+    }
+
+    public push(item: Invoker) {
+        this.list.push(item);
+        this.invoke();
+        if (this.timer === undefined && this.list.length > 0) {
+            this.timer = this.initInterval();
+        }
+    }
+
+    public invoke() {
+        if (this.list.length === 0) {
+            return;
+        }
+        if (this.currentInvoker !== undefined) {
+            return;
+        }
+
+        const item = this.list.shift();
+        if (item) {
+            this.currentInvoker = item;
+            item()
+                .then(() => {
+                    this.currentInvoker = undefined;
+                    if (this.list.length === 0) {
+                        clearInterval(this.timer);
+                    }
+                })
+                .catch(error => {
+                    console.error(`[WindowManager]: create app error: ${error.message}`);
+                    clearInterval(this.timer);
+                });
+        }
+    }
+
+    public destroy() {
+        if (this.timer) {
+            clearInterval(this.timer);
+        }
+    }
+}

package/src/Utils/Common.ts

@@ -6,6 +6,7 @@ import { v4 } from "uuid";
 import type { PublicEvent } from "../index";
 import type { Displayer, ViewVisionMode, Room, View } 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)?.();
@@ -91,7 +92,7 @@ export const makeValidScenePath = (displayer: Displayer, scenePath: string, inde
     const scene = scenes[index];
     if (!scene) return;
     const firstSceneName = scene.name;
-    if (scenePath === "/") {
+    if (scenePath === ROOT_DIR) {
         return `/${firstSceneName}`;
     } else {
         return `${scenePath}/${firstSceneName}`;
@@ -102,6 +103,7 @@ export const entireScenes = (displayer: Displayer) => {
     return displayer.entireScenes();
 };
 
+
 export const isValidScenePath = (scenePath: string) => {
     return scenePath.startsWith("/");
 };

package/src/Utils/RoomHacker.ts

@@ -4,11 +4,12 @@ import type { WindowManager } from "../index";
 import type { Camera, Room, Player, PlayerSeekingResult } from "white-web-sdk";
 
 // 修改多窗口状态下一些失效的方法实现到 manager 的 mainview 上, 降低迁移成本
-export const replaceRoomFunction = (room: Room, manager: WindowManager) => {
+export const replaceRoomFunction = (room: Room | Player, manager: WindowManager) => {
     if (isPlayer(room)) {
         const player = room as unknown as Player;
         delegateSeekToProgressTime(player);
     } else {
+        room = room as unknown as Room;
         const descriptor = Object.getOwnPropertyDescriptor(room, "disableCameraTransform");
         if (descriptor) return;
         Object.defineProperty(room, "disableCameraTransform", {

package/src/constants.ts

@@ -46,3 +46,5 @@ export const MIN_HEIGHT = 340 / 720;
 export const SET_SCENEPATH_DELAY = 100; // 设置 scenePath 的延迟事件
 
 export const DEFAULT_CONTAINER_RATIO = 9 / 16;
+
+export const ROOT_DIR = "/";

package/src/index.ts

@@ -19,9 +19,9 @@ import "@netless/telebox-insider/dist/style.css";
 import {
     addEmitterOnceListener,
     ensureValidScenePath,
+    entireScenes,
     getVersionNumber,
     isValidScenePath,
-    parseSceneDir,
     wait,
 } from "./Utils/Common";
 import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
@@ -54,6 +54,7 @@ import type {
     Rectangle,
     ViewVisionMode,
     CameraState,
+    Player,
 } from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
 import type { NetlessApp, RegisterParams } from "./typings";
@@ -157,10 +158,11 @@ export type PublicEvent = {
     mainViewScenePathChange: string;
     mainViewSceneIndexChange: number;
     focusedChange: string | undefined;
+    mainViewScenesLengthChange: number;
 };
 
 export type MountParams = {
-    room: Room;
+    room: Room | Player;
     container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
@@ -223,6 +225,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         WindowManager.params = params;
 
         this.checkVersion();
+        let manager: WindowManager | undefined = undefined;
         if (isRoom(room)) {
             if (room.phase !== RoomPhase.Connected) {
                 throw new Error("[WindowManager]: Room only Connected can be mount");
@@ -231,11 +234,12 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
                 // redo undo 需要设置这个属性
                 room.disableSerialization = false;
             }
+            manager = await this.initManager(room);
         }
         if (WindowManager.isCreated) {
             throw new Error("[WindowManager]: Already created cannot be created again");
         }
-        let manager = await this.initManager(room);
+
         this.debug = Boolean(debug);
         log("Already insert room", manager);
 
@@ -246,7 +250,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         } else {
             await pRetry(
                 async count => {
-                    manager = await this.initManager(room);
+                    manager = (await room.getInvisiblePlugin(WindowManager.kind)) as WindowManager;
                     if (!manager) {
                         log(`manager is empty. retrying ${count}`);
                         throw new Error();
@@ -256,6 +260,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             );
         }
 
+        if (!manager) {
+            throw new Error("[WindowManager]: create manager failed");
+        }
+
         if (containerSizeRatio) {
             WindowManager.containerSizeRatio = containerSizeRatio;
         }
@@ -447,11 +455,11 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             if (scenePath && scenes && scenes.length > 0) {
                 if (this.isDynamicPPT(scenes)) {
                     isDynamicPPT = true;
-                    if (!this.displayer.entireScenes()[scenePath]) {
+                    if (!entireScenes(this.displayer)[scenePath]) {
                         this.room?.putScenes(scenePath, scenes);
                     }
                 } else {
-                    if (!this.displayer.entireScenes()[scenePath]) {
+                    if (!entireScenes(this.displayer)[scenePath]) {
                         this.room?.putScenes(scenePath, [{ name: scenes[0].name }]);
                     }
                 }
@@ -618,11 +626,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     }
 
     public get mainViewSceneDir(): string {
-        const scenePath = this.appManager?.store.getMainViewScenePath();
-        if (scenePath) {
-            return parseSceneDir(scenePath);
+        if (this.appManager) {
+            return this.appManager?.getMainViewSceneDir();
         } else {
-            throw new Error("[WindowManager]: mainViewSceneDir not found");
+            throw new AppManagerNotInitError();
         }
     }
 
@@ -630,6 +637,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return this.boxManager?.getTopBox()?.id;
     }
 
+    public get mainViewScenesLength(): number {
+        return this.appManager?.mainViewScenesLength || 0;
+    }
+
     /**
      * 查询所有的 App
      */
@@ -770,10 +781,6 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             }
         }
     }
-
-    private _removeScenes = (scenePath: string) => {
-        this.room.removeScenes(scenePath);
-    };
 }
 
 setupBuiltin();