@netless/window-manager 1.0.13-test.4 → 1.0.13-test.6

package/package.json

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

package/src/AppListener.ts

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

package/src/AppManager.ts

@@ -159,7 +159,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);
@@ -713,8 +713,8 @@ 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, 
+        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",
         );

package/src/ContainerResizeObserver.ts

@@ -28,18 +28,21 @@ export class ContainerResizeObserver {
         sizer: HTMLElement,
         wrapper: HTMLDivElement
     ) {
+        console.log(`[window-manager] observePlaygroundSize ${container.getBoundingClientRect(), sizer.getBoundingClientRect(), 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,7 @@ export class ContainerResizeObserver {
             }
             wrapper.style.width = `${width}px`;
             wrapper.style.height = `${height}px`;
+            console.log(`[window-manager] updateSizer ${JSON.stringify({ width, height })}`);
         }
     }
 

package/src/Utils/RoomHacker.ts

@@ -37,7 +37,7 @@ 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));
+                console.log("[window-manager] scalePptToFit  " + JSON.stringify(args));
                 manager.appManager.mainViewProxy.setCameraAndSize();
             }
         };

package/src/Utils/log.ts

@@ -26,7 +26,7 @@ export class LocalConsole {
         if (args === null) {
             return;
         }
-        console.log(`[window-manager][${this.name}]:`, ...args);
+        console.log(`[window-manager][${this.name}]: ${args.join(", ")}`);
     }
 
     log(...args: unknown[]): void {
@@ -39,6 +39,6 @@ export class LocalConsole {
             this.flushTimer = setTimeout(() => this.flush(), ms);
             return;
         }
-        console.log(`[window-manager][${this.name}]:`, ...args);
+        console.log(`[window-manager][${this.name}]: ${args.join(", ")}`);
     }
 }

package/src/View/MainView.ts

@@ -11,6 +11,7 @@ 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;
@@ -36,8 +37,9 @@ export class MainViewProxy {
             this.startListenWritableChange();
         });
         const playgroundSizeChangeListener = () => {
-            // console.log("[window-manager] playgroundSizeChangeListener  ", JSON.stringify(this.mainViewSize), JSON.stringify(this.mainViewCamera));
             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, 
@@ -108,7 +110,7 @@ export class MainViewProxy {
     }
 
     public start() {
-        console.log("[window-manager] start  ", JSON.stringify(this.mainViewSize));
+        console.log("[window-manager] start  " + JSON.stringify(this.mainViewSize));
         this.sizeChangeHandler(this.mainViewSize);
         if (this.started) return;
         this.addCameraListener();
@@ -132,7 +134,7 @@ export class MainViewProxy {
             () => this.mainViewCamera,
             camera => {
                 if (camera && camera.id !== this.manager.uid) {
-                    console.log("[window-manager] cameraReaction  ", JSON.stringify(camera), JSON.stringify(this.mainViewSize));
+                    console.log("[window-manager] cameraReaction  " + JSON.stringify(camera) + JSON.stringify(this.mainViewSize));
                     this.moveCameraToContian(this.mainViewSize);
                     this.moveCamera(camera);
                 }
@@ -143,16 +145,17 @@ export class MainViewProxy {
 
     public sizeChangeHandler = debounce((size: Size) => {
         if (size) {
-            console.log("[window-manager] sizeChangeHandler  current size and camera", JSON.stringify(size), JSON.stringify(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  ", JSON.stringify(size));
+        console.log("[window-manager] onUpdateContainerSizeRatio  " + JSON.stringify(size));
         this.sizeChangeHandler(size);
     };
 

package/src/index.ts

@@ -255,10 +255,12 @@ export class WindowManager
         (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);
+        console.log("[window-manager] visibleStateListener  isVisible:" + !document.hidden);
     }
 
     public static onCreate(manager: WindowManager) {
@@ -392,10 +394,26 @@ 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);
@@ -1029,6 +1047,7 @@ export class WindowManager
                 animationMode?: AnimationMode;
             }>
     ): void {
+        console.log("[window-manager] moveCameraToContain" + JSON.stringify(rectangle));
         this.mainView.moveCameraToContain(rectangle);
         setTimeout(() => {
             this.appManager?.mainViewProxy.setCameraAndSize();
@@ -1065,6 +1084,7 @@ export class WindowManager
         }
         WindowManager.params = undefined;
         document.removeEventListener("visibilitychange", this.visibleStateListener);
+        this.emitter.off('mainViewScenePathChange', this.onMainViewScenePathChangeHandler);
         this._iframeBridge?.destroy();
         this._iframeBridge = undefined;
         log("Destroyed");