@netless/window-manager 1.0.13-test.9 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.13-test.9",
+  "version": "1.0.14",
   "description": "Multi-window mode for Netless Whiteboard",
   "author": "l1shen <lishen1635@gmail.com> (https://github.com/l1shen)",
   "license": "MIT",
@@ -23,7 +23,7 @@
   },
   "peerDependencies": {
     "jspdf": "2.5.1",
-    "white-web-sdk": "^2.16.53"
+    "white-web-sdk": "^2.16.54"
   },
   "peerDependenciesMeta": {
     "jspdf": {
@@ -72,6 +72,6 @@
     "typescript": "^4.5.5",
     "vite": "^2.9.9",
     "vitest": "^0.14.1",
-    "white-web-sdk": "^2.16.53"
+    "white-web-sdk": "^2.16.54"
   }
 }

package/src/App/AppProxy.ts

@@ -149,7 +149,7 @@ export class AppProxy implements PageRemoveService {
     ): Promise<{ appId: string; app: NetlessApp }> {
         const params = this.params;
         if (!params.kind) {
-            this.Logger?.error(`[WindowManager]: kind require`);
+            this.Logger && this.Logger.error(`[WindowManager]: kind require`);
             throw new Error("[WindowManager]: kind require");
         }
         const appImpl = await appRegister.appClasses.get(params.kind)?.();
@@ -167,7 +167,7 @@ export class AppProxy implements PageRemoveService {
                 params.isDragContent
             );
         } else {
-            this.Logger?.error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
+            this.Logger && this.Logger.error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
             throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
         }
         internalEmitter.emit("updateManagerRect");
@@ -216,7 +216,7 @@ export class AppProxy implements PageRemoveService {
                 }
                 setTimeout(async () => {
                     // 延迟执行 setup, 防止初始化的属性没有更新成功
-                    this.Logger?.info(`[WindowManager]: setup app ${this.kind}, appId: ${appId}`);
+                    this.Logger && this.Logger.info(`[WindowManager]: setup app ${this.kind}, appId: ${appId}`);
                     const result = await app.setup(context);
                     this.appResult = result;
                     appRegister.notifyApp(this.kind, "created", { appId, result });
@@ -251,7 +251,7 @@ export class AppProxy implements PageRemoveService {
                 this.boxManager.focusBox({ appId }, false);
             }
         } catch (error: any) {
-            this.Logger?.error(`[WindowManager]: app setup error: ${error.message}`);
+            this.Logger && this.Logger.error(`[WindowManager]: app setup error: ${error.message}`);
             throw new Error(`[WindowManager]: app setup error: ${error.message}`);
         }
     }
@@ -538,7 +538,7 @@ export class AppProxy implements PageRemoveService {
             await appRegister.notifyApp(this.kind, "destroy", { appId: this.id });
             await this.appEmitter.emit("destroy", { error });
         } catch (error) {
-            this.Logger?.error(`[WindowManager]: notifyApp error: ${error.message}`);
+            this.Logger && this.Logger.error(`[WindowManager]: notifyApp error: ${error.message}`);
             console.error("[WindowManager]: notifyApp error", error.message, error.stack);
         }
         this.appEmitter.clearListeners();
@@ -561,7 +561,7 @@ export class AppProxy implements PageRemoveService {
         this.manager.refresher.remove(this.stateKey);
         this.manager.refresher.remove(`${this.id}-fullPath`);
         this._prevFullPath = undefined;
-        this.Logger?.info(`[WindowManager]: destroy app ${this.kind} appId: ${this.id}`);
+        this.Logger && this.Logger.info(`[WindowManager]: destroy app ${this.kind} appId: ${this.id}`);
     }
 
     public close(): Promise<void> {

package/src/AppListener.ts

@@ -47,7 +47,6 @@ export class AppListeners {
                     break;
                 }
                 case Events.SetMainViewScenePath: {
-                    console.log("[window-manager] mainMagixEventListener  " + JSON.stringify(data.payload));
                     this.setMainViewScenePathHandler(data.payload);
                     break;
                 }

package/src/AppManager.ts

@@ -133,7 +133,6 @@ export class AppManager {
         this.createRootDirScenesCallback();
 
         appRegister.setSyncRegisterApp(payload => {
-            this.Logger?.info(`[WindowManager] syncRegisterApp ${JSON.stringify(payload)}`);
             this.safeUpdateAttributes([Fields.Registered, payload.kind], payload);
         });
     }
@@ -146,7 +145,7 @@ export class AppManager {
         const { scenePath } = params;
         // 如果移除根目录就把 scenePath 设置为初始值
         if (scenePath === ROOT_DIR) {
-            console.log("[window-manager] onRemoveScenes   ROOT_DIR");
+            console.log("[window-manager] onRemoveScenes ROOT_DIR");
             await this.onRootDirRemoved();
             this.dispatchInternalEvent(Events.RootDirRemoved);
             return;
@@ -159,7 +158,7 @@ export class AppManager {
                 sceneName = this.callbacksNode?.scenes[nextIndex];
             }
             if (sceneName) {
-                console.log("[window-manager] onRemoveScenes   setMainViewScenePath" + `${ROOT_DIR}${sceneName}`);
+                console.log(`[window-manager] onRemoveScenes  setMainViewScenePath ${ROOT_DIR}${sceneName}`);
                 this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
             }
             await this.setMainViewSceneIndex(nextIndex);
@@ -605,7 +604,7 @@ export class AppManager {
                     try {
                         const appAttributes = this.attributes[id];
                         if (!appAttributes) {
-                            this.Logger?.error(
+                            this.Logger && this.Logger.error(
                                 `[WindowManager]: appAttributes is undefined, appId: ${id}`
                             );
                             throw new Error("appAttributes is undefined");
@@ -713,11 +712,12 @@ export class AppManager {
         callbacks.emit("onMainViewMounted", mainView);
         const hasRoot = this.hasRoot(mainView.divElement);
         const rect = this.getRectByDivElement(mainView.divElement);
-        console.log("[window-manager] bindMainView hasRoot" + hasRoot + JSON.stringify(rect) +
-            window.outerHeight + window.outerWidth,
-            window.visualViewport?.width ?? "null", window.visualViewport?.height ?? "null",
-            window.visualViewport?.offsetLeft ?? "null", window.visualViewport?.offsetTop ?? "null",
-        );
+        let log = `[window-manager] bindMainView hasRoot:${hasRoot}, rect:${JSON.stringify(rect)}, outerHeight:${window.outerHeight}, outerWidth:${window.outerWidth}`;
+        const visualViewport = window.visualViewport;
+        if (visualViewport) {
+            log += `, visualViewportWidth:${visualViewport.width}, visualViewportHeight:${visualViewport.height}, visualViewportOffsetLeft:${visualViewport.offsetLeft}, visualViewportOffsetTop:${visualViewport.offsetTop}`;
+        }
+        console.log(log);
     }
 
     private hasRoot(divElement: HTMLDivElement){
@@ -818,7 +818,7 @@ export class AppManager {
             return appProxy;
         } else {
             this.appStatus.delete(appId);
-            this.Logger?.error(`[WindowManager]: initialize AppProxy failed, appId: ${appId}`);
+            this.Logger && this.Logger.error(`[WindowManager]: initialize AppProxy failed, appId: ${appId}`);
             throw new Error("[WindowManger]: initialize AppProxy failed");
         }
     }
@@ -858,11 +858,11 @@ export class AppManager {
             const scenePathType = this.displayer.scenePathType(scenePath);
             const sceneDir = parseSceneDir(scenePath);
             if (sceneDir !== ROOT_DIR) {
-                this.Logger?.error(`[WindowManager]: main view scenePath must in root dir "/"`);
+                this.Logger && this.Logger.error(`[WindowManager]: main view scenePath must in root dir "/"`);
                 throw new Error(`[WindowManager]: main view scenePath must in root dir "/"`);
             }
             if (scenePathType === ScenePathType.None) {
-                this.Logger?.error(`[WindowManager]: ${scenePath} not valid scene`);
+                this.Logger && this.Logger.error(`[WindowManager]: ${scenePath} not valid scene`);
                 throw new Error(`[WindowManager]: ${scenePath} not valid scene`);
             } else if (scenePathType === ScenePathType.Page) {
                 await this._setMainViewScenePath(scenePath);
@@ -879,7 +879,6 @@ export class AppManager {
     private async _setMainViewScenePath(scenePath: string) {
         const success = this.setMainViewFocusPath(scenePath);
         if (success) {
-            console.log("[window-manager] _setMainViewScenePath  ", scenePath);
             this.safeSetAttributes({ _mainScenePath: scenePath });
             this.store.setMainViewFocusPath(this.mainView);
             this.updateSceneIndex();
@@ -896,7 +895,6 @@ export class AppManager {
             const pageName = scenePath.replace(sceneDir, "").replace("/", "");
             const index = scenes.findIndex(scene => scene.name === pageName);
             if (isInteger(index) && index >= 0) {
-                console.log("[window-manager] updateSceneIndex  ", index);
                 this.safeSetAttributes({ _mainSceneIndex: index });
             }
         }
@@ -915,14 +913,13 @@ export class AppManager {
                     this.dispatchSetMainViewScenePath(scenePath);
                 }
             } else {
-                this.Logger?.error(`[WindowManager]: ${index} not valid index`);
+                this.Logger && this.Logger.error(`[WindowManager]: ${index} not valid index`);
                 throw new Error(`[WindowManager]: ${index} not valid index`);
             }
         }
     }
 
     private dispatchSetMainViewScenePath(scenePath: string): void {
-        console.log("[window-manager] dispatchSetMainViewScenePath  ", JSON.stringify(scenePath));
         this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath: scenePath });
         callbacks.emit("mainViewScenePathChange", scenePath);
         // 兼容 15 的 SDK, 需要 room 的当前 ScenePath

package/src/AttributesDelegate.ts

@@ -7,7 +7,6 @@ import type { Cursor } from "./Cursor/Cursor";
 import { getExtendClass } from "./Utils/extendClass";
 import type { ExtendClass } from "./Utils/extendClass";
 import type { NotMinimizedBoxState, TeleBoxState } from "@netless/telebox-insider";
-import { LocalConsole } from "./Utils/log";
 
 export enum Fields {
     Apps = "apps",
@@ -55,7 +54,6 @@ export type ISize = Size & { id: string };
 
 export class AttributesDelegate {
     static readonly kind = "AttributesDelegate";
-    private setMainViewCameraConsole = new LocalConsole("setMainViewCamera", 50);
     constructor(private context: StoreContext) {}
 
     public setContext(context: StoreContext) {
@@ -196,12 +194,10 @@ export class AttributesDelegate {
     }
 
     public setMainViewScenePath(scenePath: string) {
-        console.log("[window-manager] setMainViewScenePath  ", scenePath);
         this.context.safeSetAttributes({ _mainScenePath: scenePath });
     }
 
     public setMainViewSceneIndex(index: number) {
-        console.log("[window-manager] setMainViewSceneIndex  ", index);
         this.context.safeSetAttributes({ _mainSceneIndex: index });
     }
 
@@ -214,19 +210,16 @@ export class AttributesDelegate {
     }
 
     public setMainViewCamera(camera: ICamera) {
-        this.setMainViewCameraConsole.log(JSON.stringify(camera));
         this.context.safeSetAttributes({ [Fields.MainViewCamera]: { ...camera } });
     }
 
     public setMainViewSize(size: ISize) {
         if (size.width === 0 || size.height === 0) return;
-        console.log("[window-manager] setMainViewSize  ", JSON.stringify(size));
         this.context.safeSetAttributes({ [Fields.MainViewSize]: { ...size } });
     }
 
     public setMainViewCameraAndSize(camera: ICamera, size: ISize) {
         if (size.width === 0 || size.height === 0) return;
-        console.log("[window-manager] setMainViewCameraAndSize  ", JSON.stringify(camera), JSON.stringify(size));
         this.context.safeSetAttributes({
             [Fields.MainViewCamera]: { ...camera },
             [Fields.MainViewSize]: { ...size },

package/src/BoxManager.ts

@@ -420,7 +420,6 @@ export class BoxManager {
         const rect = this.mainView.divElement?.getBoundingClientRect();
         if (rect && rect.width > 0 && rect.height > 0) {
             const containerRect = { x: 0, y: 0, width: rect.width, height: rect.height };
-            console.log("[window-manager] updateManagerRect" + JSON.stringify(containerRect) + "mainView" + this.mainView.size);
             this.teleBoxManager.setContainerRect(containerRect);
             this.context.notifyContainerRectUpdate(this.teleBoxManager.containerRect);
         }

package/src/BuiltinApps.ts

@@ -1,23 +1,26 @@
 import AppDocsViewer from "@netless/app-docs-viewer";
-import AppMediaPlayer, { setOptions } from "@netless/app-media-player";
 import { WindowManager } from "./index";
 
-export const setupBuiltin = () => {
+const loadAppMediaPlayer = async () => {
+    const mod = await import("@netless/app-media-player");
     if (WindowManager.debug) {
-        setOptions({ verbose: true });
+        mod.setOptions({ verbose: true });
     }
+    return (mod.default || mod) as any;
+};
 
+export const setupBuiltin = () => {
     WindowManager.register({
         kind: AppDocsViewer.kind,
         src: AppDocsViewer,
     });
     WindowManager.register({
-        kind: AppMediaPlayer.kind,
-        src: AppMediaPlayer as any,
+        kind: "MediaPlayer",
+        src: loadAppMediaPlayer,
     });
 };
 
 export const BuiltinApps = {
     DocsViewer: AppDocsViewer.kind as string,
-    MediaPlayer: AppMediaPlayer.kind as string,
+    MediaPlayer: "MediaPlayer" as string,
 };

package/src/ContainerResizeObserver.ts

@@ -1,14 +1,16 @@
 import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
-import { isFunction } from "lodash";
 import { WindowManager } from "./index";
 import type { EmitterType } from "./InternalEmitter";
 import type { UnsubscribeFn } from "emittery";
+import { LocalConsole } from "./Utils/log";
 
 const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 
 export class ContainerResizeObserver {
     private containerResizeObserver?: ResizeObserver;
     private disposer?: UnsubscribeFn;
+    
+    private updateSizerLocalConsole = new LocalConsole("updateSizer", 100);
 
     constructor(private emitter: EmitterType) {}
 
@@ -28,22 +30,19 @@ export class ContainerResizeObserver {
         sizer: HTMLElement,
         wrapper: HTMLDivElement
     ) {
-        console.log(`[window-manager] observePlaygroundSize ${JSON.stringify(container.getBoundingClientRect())}, ${JSON.stringify(sizer.getBoundingClientRect())}, ${JSON.stringify(wrapper.getBoundingClientRect())}`);
-        this.updateSizer(container.getBoundingClientRect(), sizer, wrapper);
+        this.updateSizer(container.getBoundingClientRect(), sizer, wrapper, 'observePlaygroundSize');
 
         this.containerResizeObserver = new ResizeObserver(entries => {
             const containerRect = entries[0]?.contentRect;
             if (containerRect) {
-                this.updateSizer(containerRect, sizer, wrapper);
-                console.log(`[window-manager] containerResizeObserver ${JSON.stringify(containerRect)}`);
+                this.updateSizer(containerRect, sizer, wrapper, 'containerResizeObserver');
                 this.emitter.emit("playgroundSizeChange", containerRect);
             }
         });
 
         this.disposer = this.emitter.on("containerSizeRatioUpdate", () => {
             const containerRect = container.getBoundingClientRect();
-            console.log(`[window-manager] containerSizeRatioUpdate ${JSON.stringify(containerRect)}`);
-            this.updateSizer(containerRect, sizer, wrapper);
+            this.updateSizer(containerRect, sizer, wrapper, 'containerSizeRatioUpdate');
             this.emitter.emit("playgroundSizeChange", containerRect);
         });
 
@@ -53,7 +52,8 @@ export class ContainerResizeObserver {
     public updateSizer(
         { width, height }: DOMRectReadOnly,
         sizer: HTMLElement,
-        wrapper: HTMLDivElement
+        wrapper: HTMLDivElement,
+        origin?: string
     ) {
         if (width && height) {
             if (height / width > WindowManager.containerSizeRatio) {
@@ -65,16 +65,20 @@ export class ContainerResizeObserver {
             }
             wrapper.style.width = `${width}px`;
             wrapper.style.height = `${height}px`;
-            wrapper.style.backgroundColor = 'green';
-            console.log(`[window-manager] updateSizer ${JSON.stringify({ width, height })} ${wrapper.style.width} ${wrapper.style.height} ${JSON.stringify(wrapper.getBoundingClientRect())}`);
+            const wrapperRect = wrapper.getBoundingClientRect();
+            this.updateSizerLocalConsole.log(`from ${origin}, traget size: ${JSON.stringify({ width, height })}, wrapperRect: ${wrapperRect.width} ${wrapperRect.height}`);
+            this.emitter.emit("wrapperRectChange", {
+                width: wrapperRect.width,
+                height: wrapperRect.height,
+                origin,
+            });
         }
     }
 
     public disconnect() {
+        this.updateSizerLocalConsole.destroy();
         this.containerResizeObserver?.disconnect();
-        if (isFunction(this.disposer)) {
-            this.disposer();
-            this.disposer = undefined;
-        }
+        this.disposer?.();
+        this.disposer = undefined;
     }
 }

package/src/InternalEmitter.ts

@@ -29,6 +29,7 @@ export type EmitterEvent = {
     changePageState: undefined;
     writableChange: boolean;
     containerSizeRatioUpdate: number;
+    wrapperRectChange: { width: number; height: number; origin?: string };
     boxesStatusChange: Map<string, TeleBoxState>;
     lastNotMinimizedBoxesStatusChange: Map<string, NotMinimizedBoxState>;
 };

package/src/Utils/Common.ts

@@ -34,7 +34,6 @@ export const setScenePath = (room: Room | undefined, scenePath: string) => {
     if (room && room.isWritable) {
         if (room.state.sceneState.scenePath !== scenePath) {
             const nextScenePath = scenePath === "/" ? "" : scenePath;
-            console.log("[window-manager] real setScenePath for current room  ", nextScenePath);
             room.setScenePath(nextScenePath);
         }
     }

package/src/Utils/Reactive.ts

@@ -30,8 +30,8 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
     };
 };
 
-export const safeListenPropsUpdated = <T>(
-    getProps: () => T,
+export const safeListenPropsUpdated = <T extends Record<string, unknown>>(
+    getProps: () => T | null | undefined,
     callback: AkkoObjectUpdatedListener<T>,
     onDestroyed?: (props: unknown) => void
 ) => {

package/src/Utils/RoomHacker.ts

@@ -37,10 +37,24 @@ export const replaceRoomFunction = (room: Room | Player, manager: WindowManager)
         room.scalePptToFit = (...args) => {
             _scalePptToFit.call(room, ...args);
             if (manager.appManager?.mainViewProxy) {
-                console.log("[window-manager] scalePptToFit  " + JSON.stringify(args));
                 manager.appManager.mainViewProxy.setCameraAndSize();
             }
         };
+        const _putScenes = room.putScenes;
+        room.putScenes = (...args) => {
+            const [path, scenes] = args;
+            const currentScenePath = manager.mainView.focusScenePath;
+            if (currentScenePath && path && scenes) {
+                console.log("[window-manager] putScenes " + JSON.stringify(args));
+                for (const scene of scenes) {
+                    if (`${path}${scene.name}` === currentScenePath) {
+                        console.error(`[window-manager] putScenes: scene name can not be the same as the current scene path: ${currentScenePath}`);
+                        return;
+                    }
+                }
+            }
+            return _putScenes.call(room, ...args);
+        };
         room.moveCamera = (camera: Camera) => manager.moveCamera(camera);
         room.moveCameraToContain = (...args) => manager.moveCameraToContain(...args);
         room.convertToPointInWorld = (...args) => manager.mainView.convertToPointInWorld(...args);

package/src/Utils/attributesLogStringify.ts

@@ -0,0 +1,78 @@
+/** 合法标识符形式的 key 省略引号，形如 `{aaa:undefined}` */
+function formatAttributesLogObjectKey(key: string): string {
+    return /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key) ? key : JSON.stringify(key);
+}
+
+/**
+ * attributes 调试日志：对象/数组会写成近似 JS 字面量（保留 `undefined`、数组空洞），避免 `[object Object]`；
+ * 并处理 BigInt、循环引用等。
+ */
+export function stringifyForAttributesLog(value: unknown, seen?: WeakSet<object>): string {
+    if (value === undefined) {
+        return "undefined";
+    }
+    if (value === null) {
+        return "null";
+    }
+    const t = typeof value;
+    if (t === "bigint") {
+        return `${value}n`;
+    }
+    if (t === "symbol") {
+        return String(value);
+    }
+    if (t === "function") {
+        const fn = value as (...args: unknown[]) => unknown;
+        return `[Function ${fn.name || "anonymous"}]`;
+    }
+    if (t !== "object") {
+        return t === "string" ? JSON.stringify(value as string) : String(value);
+    }
+
+    const obj = value as object;
+    if (seen?.has(obj)) {
+        return "[Circular]";
+    }
+
+    const nextSeen = seen ?? new WeakSet<object>();
+    nextSeen.add(obj);
+    try {
+        if (Array.isArray(value)) {
+            return `[${Array.from(value as unknown[], (item) =>
+                stringifyForAttributesLog(item, nextSeen),
+            ).join(",")}]`;
+        }
+        if (value instanceof Date) {
+            return JSON.stringify(value.toISOString());
+        }
+        if (value instanceof RegExp) {
+            return String(value);
+        }
+        const keys = Object.keys(value as object);
+        const pairs = keys.map((k) => {
+            let v: unknown;
+            try {
+                v = (value as Record<string, unknown>)[k];
+            } catch {
+                return `${formatAttributesLogObjectKey(k)}:[Threw]`;
+            }
+            return `${formatAttributesLogObjectKey(k)}:${stringifyForAttributesLog(v, nextSeen)}`;
+        });
+        return `{${pairs.join(",")}}`;
+    } catch {
+        return "[Unserializable]";
+    } finally {
+        nextSeen.delete(obj);
+    }
+}
+
+/** 仅一层 key 合并：可作为 attributes 片段的「普通对象」（非数组、Date 等） */
+export function isShallowMergeAttributesRecord(value: unknown): value is Record<string, unknown> {
+    return (
+        value !== null &&
+        typeof value === "object" &&
+        !Array.isArray(value) &&
+        !(value instanceof Date) &&
+        !(value instanceof RegExp)
+    );
+}