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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.0-canary.26",
+  "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, 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, 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;
@@ -41,6 +41,7 @@ export class AppManager {
     private _prevSceneIndex: number | undefined;
     private _prevFocused: string | undefined;
     private callbacksNode: ScenesCallbacksNode | null;
+    private appCreateQueue = new AppCreateQueue();
 
     constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
@@ -185,13 +186,18 @@ export class AppManager {
             return autorun(() => {
                 const focused = get(this.attributes, "focus");
                 if (this._prevFocused !== focused) {
-                    this.boxManager?.focusBox({ appId: focused });
-                    const appProxy = this.appProxies.get(focused);
-                    if (appProxy) {
-                        appRegister.notifyApp(appProxy.kind, "focus", { 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);
+                    }
                 }
             });
         });
@@ -223,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,
@@ -244,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);
+                    }
                 }
             }
         }
@@ -583,6 +586,7 @@ export class AppManager {
         this.mainViewProxy.destroy();
         callbacks.clearListeners();
         this.callbacksNode?.dispose();
+        this.appCreateQueue.destroy();
         this._prevSceneIndex = undefined;
     }
 }

package/src/AppProxy.ts

@@ -165,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);

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/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/index.ts

@@ -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";
@@ -161,7 +162,7 @@ export type PublicEvent = {
 };
 
 export type MountParams = {
-    room: Room;
+    room: Room | Player;
     container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
@@ -224,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");
@@ -232,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);
 
@@ -247,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();
@@ -257,6 +260,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             );
         }
 
+        if (!manager) {
+            throw new Error("[WindowManager]: create manager failed");
+        }
+
         if (containerSizeRatio) {
             WindowManager.containerSizeRatio = containerSizeRatio;
         }