@netless/window-manager 0.4.0-canary.20 → 0.4.0-canary.24

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.20",
+  "version": "0.4.0-canary.24",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -31,7 +31,7 @@
     "video.js": ">=7"
   },
   "devDependencies": {
-    "@netless/app-docs-viewer": "^0.2.5",
+    "@netless/app-docs-viewer": "^0.2.6",
     "@netless/app-media-player": "0.1.0-beta.5",
     "@netless/telebox-insider": "0.2.21",
     "@rollup/plugin-commonjs": "^20.0.0",

package/src/AppManager.ts

@@ -1,5 +1,5 @@
 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 { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
@@ -20,8 +20,9 @@ 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";
 
 export class AppManager {
     public displayer: Displayer;
@@ -32,12 +33,14 @@ 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;
 
     constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
@@ -68,17 +71,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() {
@@ -110,6 +126,15 @@ export class AppManager {
     public get uid() {
         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);
@@ -384,6 +409,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) {
@@ -469,6 +498,10 @@ 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": {
@@ -549,6 +582,7 @@ export class AppManager {
         this.refresher?.destroy();
         this.mainViewProxy.destroy();
         callbacks.clearListeners();
+        this.callbacksNode?.dispose();
         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,
@@ -22,6 +22,7 @@ import type { NetlessApp } from "./typings";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 
 export class AppProxy {
+    public kind: string;
     public id: string;
     public scenePath?: string;
     public appEmitter: Emittery<AppEmitterEvent>;
@@ -32,7 +33,7 @@ export class AppProxy {
     private appProxies = this.manager.appProxies;
     private viewManager = this.manager.viewManager;
     private store = this.manager.store;
-    private kind: string;
+
     public isAddApp: boolean;
     private status: "normal" | "destroyed" = "normal";
     private stateKey: string;
@@ -66,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;
             }
@@ -133,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,
@@ -187,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

@@ -45,6 +45,12 @@ export class CursorManager {
                 cursorInstance.move(payload.position);
             }
         });
+        this.sideEffectManager.add(() => {
+            const unsubscribe = emitter.on("playgroundSizeChange", () => {
+                this.updateContainerRect();
+            });
+            return unsubscribe;
+        })
     }
 
     public setupWrapper(wrapper: HTMLElement) {

package/src/Register/loader.ts

@@ -18,7 +18,7 @@ export const getScript = async (url: string): Promise<string> => {
 };
 
 export const executeScript = (text: string, appName: string): NetlessApp => {
-    let result = Function(text + `;return ${appName}`)();
+    let result = Function(text + `\n;return ${appName}`)();
     if (typeof result === "undefined") {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore

package/src/Utils/Common.ts

@@ -1,11 +1,13 @@
 import { appRegister } from "../Register";
-import { debounce } from "lodash";
+import { debounce, memoize } from "lodash";
 import { emitter } from "../index";
 import { ScenePathType } from "white-web-sdk";
 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 { log } from "./log";
+import { ROOT_DIR } from "../constants";
 
 export const genAppId = async (kind: string) => {
     const impl = await appRegister.appClasses.get(kind)?.();
@@ -91,7 +93,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}`;
@@ -99,9 +101,16 @@ export const makeValidScenePath = (displayer: Displayer, scenePath: string, inde
 };
 
 export const entireScenes = (displayer: Displayer) => {
-    return displayer.entireScenes();
+    // 缓存 entireScenes 结果, 避免频繁调用
+    const cacheKey = Math.round(Date.now() / 1000);
+    return invokeEntireScenes(cacheKey, displayer);
 };
 
+const invokeEntireScenes = memoize((cacheKey: number, displayer: Displayer) => {
+    log("invokeEntireScenes", cacheKey);
+    return displayer.entireScenes();
+});
+
 export const isValidScenePath = (scenePath: string) => {
     return scenePath.startsWith("/");
 };

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";
@@ -157,6 +157,7 @@ export type PublicEvent = {
     mainViewScenePathChange: string;
     mainViewSceneIndexChange: number;
     focusedChange: string | undefined;
+    mainViewScenesLengthChange: number;
 };
 
 export type MountParams = {
@@ -447,11 +448,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 +619,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 +630,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return this.boxManager?.getTopBox()?.id;
     }
 
+    public get mainViewScenesLength(): number {
+        return this.appManager?.mainViewScenesLength || 0;
+    }
+
     /**
      * 查询所有的 App
      */