@netless/window-manager 1.0.13-test.1 → 1.0.13-test.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.13-test.1",
+  "version": "1.0.13-test.11",
   "description": "Multi-window mode for Netless Whiteboard",
   "author": "l1shen <lishen1635@gmail.com> (https://github.com/l1shen)",
   "license": "MIT",

package/src/AppListener.ts

@@ -47,18 +47,10 @@ export class AppListeners {
                     break;
                 }
                 case Events.SetMainViewScenePath: {
-                    console.log("[window-manager] mainMagixEventListener====>", data.payload);
+                    console.log("[window-manager] mainMagixEventListener  " + JSON.stringify(data.payload));
                     this.setMainViewScenePathHandler(data.payload);
                     break;
                 }
-                // case Events.MoveCamera: {
-                //     this.moveCameraHandler(data.payload);
-                //     break;
-                // }
-                // case Events.MoveCameraToContain: {
-                //     this.moveCameraToContainHandler(data.payload);
-                //     break;
-                // }
                 case Events.CursorMove: {
                     this.cursorMoveHandler(data.payload);
                     break;
@@ -103,17 +95,6 @@ export class AppListeners {
         callbacks.emit("mainViewScenePathChange", nextScenePath);
     };
 
-    // private moveCameraHandler = (
-    //     payload: Camera & { animationMode?: AnimationMode | undefined }
-    // ) => {
-    //     if (isEqual(omit(payload, ["animationMode"]), { ...this.manager.mainView.camera })) return;
-    //     this.manager.mainView.moveCamera(payload);
-    // };
-
-    // private moveCameraToContainHandler = (payload: any) => {
-    //     this.manager.mainView.moveCameraToContain(payload);
-    // };
-
     private cursorMoveHandler = (payload: any) => {
         internalEmitter.emit("cursorMove", payload);
     };

package/src/AppManager.ts

@@ -51,7 +51,6 @@ import type {
 } from "./BoxEmitter";
 import { getExtendClass } from "./Utils/extendClass";
 import type { TeleBoxState } from "@netless/telebox-insider";
-import { getAttribute } from "video.js/dist/types/utils/dom";
 
 export class AppManager {
     static readonly kind = "AppManager";
@@ -147,6 +146,7 @@ export class AppManager {
         const { scenePath } = params;
         // 如果移除根目录就把 scenePath 设置为初始值
         if (scenePath === ROOT_DIR) {
+            console.log("[window-manager] onRemoveScenes   ROOT_DIR");
             await this.onRootDirRemoved();
             this.dispatchInternalEvent(Events.RootDirRemoved);
             return;
@@ -159,6 +159,7 @@ export class AppManager {
                 sceneName = this.callbacksNode?.scenes[nextIndex];
             }
             if (sceneName) {
+                console.log("[window-manager] onRemoveScenes   setMainViewScenePath" + `${ROOT_DIR}${sceneName}`);
                 this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
             }
             await this.setMainViewSceneIndex(nextIndex);
@@ -710,6 +711,30 @@ export class AppManager {
         }
         internalEmitter.emit("mainViewMounted");
         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",
+        );
+    }
+
+    private hasRoot(divElement: HTMLDivElement){
+        let current = divElement;
+        while (current) {
+            if (current.parentElement === document.body) {
+                return true;
+            }
+            current = current.parentElement as HTMLDivElement;
+        }
+        return false;
+    }
+
+    private getRectByDivElement(divElement: HTMLDivElement){
+        // 获取当前divElement的矩形区域
+        const rect = divElement.getBoundingClientRect();
+        return rect;
     }
 
     public setMainViewFocusPath(scenePath?: string) {
@@ -854,7 +879,7 @@ export class AppManager {
     private async _setMainViewScenePath(scenePath: string) {
         const success = this.setMainViewFocusPath(scenePath);
         if (success) {
-            console.log("[window-manager] _setMainViewScenePath====>", scenePath);
+            console.log("[window-manager] _setMainViewScenePath  ", scenePath);
             this.safeSetAttributes({ _mainScenePath: scenePath });
             this.store.setMainViewFocusPath(this.mainView);
             this.updateSceneIndex();
@@ -871,7 +896,7 @@ 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);
+                console.log("[window-manager] updateSceneIndex  ", index);
                 this.safeSetAttributes({ _mainSceneIndex: index });
             }
         }
@@ -897,7 +922,7 @@ export class AppManager {
     }
 
     private dispatchSetMainViewScenePath(scenePath: string): void {
-        console.log("[window-manager] dispatchSetMainViewScenePath====>", scenePath);
+        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,6 +7,7 @@ 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",
@@ -54,6 +55,7 @@ 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) {
@@ -194,12 +196,12 @@ export class AttributesDelegate {
     }
 
     public setMainViewScenePath(scenePath: string) {
-        console.log("[window-manager] setMainViewScenePath====>", scenePath);
+        console.log("[window-manager] setMainViewScenePath  ", scenePath);
         this.context.safeSetAttributes({ _mainScenePath: scenePath });
     }
 
     public setMainViewSceneIndex(index: number) {
-        console.log("[window-manager] setMainViewSceneIndex====>", index);
+        console.log("[window-manager] setMainViewSceneIndex  ", index);
         this.context.safeSetAttributes({ _mainSceneIndex: index });
     }
 
@@ -212,19 +214,19 @@ export class AttributesDelegate {
     }
 
     public setMainViewCamera(camera: ICamera) {
-        console.log("[window-manager] setMainViewCamera", camera);
+        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", size);
+        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", camera, size);
+        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,6 +420,7 @@ 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/ContainerResizeObserver.ts

@@ -28,18 +28,21 @@ 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.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.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.emitter.emit("playgroundSizeChange", containerRect);
         });
@@ -62,6 +65,8 @@ 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())}`);
         }
     }
 

package/src/Utils/Common.ts

@@ -34,7 +34,7 @@ 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);
+            console.log("[window-manager] real setScenePath for current room  ", nextScenePath);
             room.setScenePath(nextScenePath);
         }
     }

package/src/Utils/RoomHacker.ts

@@ -33,7 +33,14 @@ export const replaceRoomFunction = (room: Room | Player, manager: WindowManager)
                 return manager.canRedoSteps;
             },
         });
-
+        const _scalePptToFit = room.scalePptToFit;
+        room.scalePptToFit = (...args) => {
+            _scalePptToFit.call(room, ...args);
+            if (manager.appManager?.mainViewProxy) {
+                console.log("[window-manager] scalePptToFit  " + JSON.stringify(args));
+                manager.appManager.mainViewProxy.setCameraAndSize();
+            }
+        };
         room.moveCamera = (camera: Camera) => manager.moveCamera(camera);
         room.moveCameraToContain = (...args) => manager.moveCameraToContain(...args);
         room.convertToPointInWorld = (...args) => manager.mainView.convertToPointInWorld(...args);

package/src/Utils/log.ts

@@ -5,3 +5,40 @@ export const log = (...args: any[]): void => {
         console.log(`[WindowManager]:`, ...args);
     }
 };
+
+/**
+ * 按 `[window-manager][tagName]` 前缀输出。
+ * 若传入 `debounceTime`（毫秒）：窗口内多次 `log` 不立即输出，只在连续停止调用满 `debounceTime` 后输出**最后一次**的参数（尾部 debounce）。
+ */
+export class LocalConsole {
+    private pendingArgs: unknown[] | null = null;
+    private flushTimer: ReturnType<typeof setTimeout> | null = null;
+
+    constructor(
+        private readonly name: string,
+        private readonly debounceTime?: number,
+    ) {}
+
+    private flush(): void {
+        this.flushTimer = null;
+        const args = this.pendingArgs;
+        this.pendingArgs = null;
+        if (args === null) {
+            return;
+        }
+        console.log(`[window-manager][${this.name}]: ${args.join(", ")}`);
+    }
+
+    log(...args: unknown[]): void {
+        const ms = this.debounceTime;
+        if (ms != null && ms > 0) {
+            this.pendingArgs = args;
+            if (this.flushTimer != null) {
+                clearTimeout(this.flushTimer);
+            }
+            this.flushTimer = setTimeout(() => this.flush(), ms);
+            return;
+        }
+        console.log(`[window-manager][${this.name}]: ${args.join(", ")}`);
+    }
+}

package/src/View/MainView.ts

@@ -9,7 +9,9 @@ import { SideEffectManager } from "side-effect-manager";
 import type { Camera, Room, Size, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 import { Events } from "../constants";
+import { LocalConsole } from "../Utils/log";
 
+(window as any).___local_log = (window as any).___local_log || new Set();
 export class MainViewProxy {
     /** Refresh the view's camera in an interval of 1.5s. */
     public polling = false;
@@ -23,6 +25,8 @@ export class MainViewProxy {
 
     private sideEffectManager = new SideEffectManager();
 
+    private playgroundSizeChangeListenerLocalConsole = new LocalConsole("playgroundSizeChangeListener", 30);
+
     constructor(private manager: AppManager) {
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
@@ -33,7 +37,16 @@ export class MainViewProxy {
             this.startListenWritableChange();
         });
         const playgroundSizeChangeListener = () => {
-            console.log("[window-manager] playgroundSizeChangeListener====>", this.mainViewSize);
+            this.refreshScreenSizeIfStale();
+            this.playgroundSizeChangeListenerLocalConsole.log(
+                JSON.stringify(this.mainView.camera),
+                JSON.stringify(this.mainView.size), 
+                JSON.stringify(this.mainViewSize), 
+                JSON.stringify(this.mainViewCamera),
+                window.outerHeight, window.outerWidth, 
+                window.visualViewport?.width ?? "null", window.visualViewport?.height ?? "null",
+                window.visualViewport?.offsetLeft ?? "null", window.visualViewport?.offsetTop ?? "null",
+            );
             this.sizeChangeHandler(this.mainViewSize);
         };
         this.sideEffectManager.add(() => {
@@ -97,8 +110,26 @@ export class MainViewProxy {
         this.moveCamera(this.mainViewCamera);
     }
 
+    private refreshScreenSizeIfStale() {
+        const element = this.mainView.divElement;
+        if (!element) return;
+
+        const { width, height } = element.getBoundingClientRect();
+        if (width <= 0 || height <= 0) return;
+
+        const { width: viewWidth, height: viewHeight } = this.mainView.size;
+        if (Math.abs(viewWidth - width) > 0.5 || Math.abs(viewHeight - height) > 0.5) {
+            const resizableView = this.mainView as View & { resizeScreen?: () => void };
+            console.log("[window-manager] forceResizeScreen stale size" + JSON.stringify({
+                viewSize: this.mainView.size,
+                domSize: { width, height },
+            }));
+            resizableView.resizeScreen?.();
+        }
+    }
+
     public start() {
-        console.log("[window-manager] start====>", this.mainViewSize);
+        console.log("[window-manager] start  " + JSON.stringify(this.mainViewSize));
         this.sizeChangeHandler(this.mainViewSize);
         if (this.started) return;
         this.addCameraListener();
@@ -122,7 +153,7 @@ export class MainViewProxy {
             () => this.mainViewCamera,
             camera => {
                 if (camera && camera.id !== this.manager.uid) {
-                    console.log("[window-manager] cameraReaction====>", camera, this.mainViewSize);
+                    console.log("[window-manager] cameraReaction  " + JSON.stringify(camera) + JSON.stringify(this.mainViewSize));
                     this.moveCameraToContian(this.mainViewSize);
                     this.moveCamera(camera);
                 }
@@ -133,16 +164,17 @@ export class MainViewProxy {
 
     public sizeChangeHandler = debounce((size: Size) => {
         if (size) {
-            console.log("[window-manager] sizeChangeHandler====>", size, this.mainViewCamera);
             this.moveCameraToContian(size);
             this.moveCamera(this.mainViewCamera);
+            console.log("[window-manager] sizeChangeHandler  current size and camera" + JSON.stringify(size) + JSON.stringify(this.mainViewCamera) +
+            JSON.stringify(this.mainView.camera) + JSON.stringify(this.mainView.size));
         }
         this.ensureMainViewSize();
     }, 30);
 
     public onUpdateContainerSizeRatio = () => {
         const size = this.store.getMainViewSize();
-        console.log("[window-manager] onUpdateContainerSizeRatio====>", size);
+        console.log("[window-manager] onUpdateContainerSizeRatio  " + JSON.stringify(size));
         this.sizeChangeHandler(size);
     };
 
@@ -247,6 +279,15 @@ export class MainViewProxy {
 
     private _syncMainViewTimer = 0;
     private onCameraOrSizeUpdated = () => {
+        console.log("[window-manager] onCameraOrSizeUpdated  " + JSON.stringify(this.cameraState));
+        if(this.mainView.divElement){
+            const children = this.mainView.divElement.children;
+            console.log("[window-manager] onCameraOrSizeUpdated  " + this.mainView.divElement.getBoundingClientRect());
+            const child = children[0];
+            if (child) {
+                console.log("[window-manager] child" + JSON.stringify(child.getBoundingClientRect()));
+            }
+        }
         callbacks.emit("cameraStateChange", this.cameraState);
         // sdk >= 2.16.43 的 syncMainView() 可以写入当前 main view 的 camera, 以修复复制粘贴元素的位置
         // 注意到这个操作会发送信令，应当避免频繁调用
@@ -271,6 +312,7 @@ export class MainViewProxy {
 
     private syncMainView = (room: Room) => {
         if (room.isWritable) {
+            console.log("[window-manager] syncMainView  ");
             room.syncMainView(this.mainView);
         }
     };

package/src/index.ts

@@ -253,6 +253,14 @@ export class WindowManager
         super(context);
         WindowManager.displayer = context.displayer;
         (window as any).NETLESS_DEPS = __APP_DEPENDENCIES__;
+        this.visibleStateListener();
+        document.addEventListener("visibilitychange", this.visibleStateListener);
+        this.emitter.on('mainViewScenePathChange', this.onMainViewScenePathChangeHandler)
+    }
+
+
+    private visibleStateListener = () => {
+        console.log("[window-manager] visibleStateListener  isVisible:" + !document.hidden);
     }
 
     public static onCreate(manager: WindowManager) {
@@ -386,10 +394,27 @@ export class WindowManager
             console.warn("[WindowManager]: indexedDB open failed");
             console.log(error);
         }
-
+        manager.emitter.on('mainViewScenePathChange', manager.onMainViewScenePathChangeHandler)
         return manager;
     }
 
+    public onMainViewScenePathChangeHandler = (scenePath: string) => {
+        const mainViewElement = this.mainView.divElement;
+        if (mainViewElement) {
+            const backgroundImage = mainViewElement.querySelector('.background img');
+            if (backgroundImage) {
+                // todo 获取到 back ground image 的 rect情况以及css情况是否可见
+                const backgroundImageRect = backgroundImage?.getBoundingClientRect();
+                const backgroundImageCSS = window.getComputedStyle(backgroundImage);
+                const backgroundImageVisible = backgroundImageRect?.width > 0 && backgroundImageRect?.height > 0 && backgroundImageCSS.display !== 'none';
+                console.log("[window-manager] backgroundImageVisible" + backgroundImageVisible);
+                return;
+            }
+            console.log("[window-manager] onMainViewScenePathChange" + scenePath + 'backgroundImageVisible is not found');
+        }
+        console.log("[window-manager] onMainViewScenePathChange" + scenePath + 'mainViewElement is not found');
+    }
+
     private static initManager(room: Room): Promise<WindowManager | undefined> {
         return createInvisiblePlugin(room);
     }
@@ -1011,7 +1036,6 @@ export class WindowManager
         const mainViewCamera = { ...this.mainView.camera };
         if (isEqual({ ...mainViewCamera, ...pureCamera }, mainViewCamera)) return;
         this.mainView.moveCamera(camera);
-        // this.appManager?.dispatchInternalEvent(Events.MoveCamera, camera);
         setTimeout(() => {
             this.appManager?.mainViewProxy.setCameraAndSize();
         }, 500);
@@ -1023,8 +1047,8 @@ export class WindowManager
                 animationMode?: AnimationMode;
             }>
     ): void {
+        console.log("[window-manager] moveCameraToContain" + JSON.stringify(rectangle));
         this.mainView.moveCameraToContain(rectangle);
-        // this.appManager?.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
         setTimeout(() => {
             this.appManager?.mainViewProxy.setCameraAndSize();
         }, 500);
@@ -1059,6 +1083,8 @@ export class WindowManager
             WindowManager.playground.parentNode?.removeChild(WindowManager.playground);
         }
         WindowManager.params = undefined;
+        document.removeEventListener("visibilitychange", this.visibleStateListener);
+        this.emitter.off('mainViewScenePathChange', this.onMainViewScenePathChangeHandler);
         this._iframeBridge?.destroy();
         this._iframeBridge = undefined;
         log("Destroyed");