@netless/window-manager 1.0.13-test.17 → 1.0.13-test.19

package/package.json

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

package/src/AppManager.ts

@@ -146,7 +146,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 +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,11 +713,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){
@@ -879,7 +880,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();
@@ -896,7 +897,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 });
             }
         }
@@ -922,7 +923,6 @@ export class AppManager {
     }
 
     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

@@ -55,7 +55,7 @@ export type ISize = Size & { id: string };
 
 export class AttributesDelegate {
     static readonly kind = "AttributesDelegate";
-    private setMainViewCameraConsole = new LocalConsole("setMainViewCamera", 50);
+    private setMainViewCameraConsole = new LocalConsole("setMainViewCamera", 30);
     constructor(private context: StoreContext) {}
 
     public setContext(context: StoreContext) {
@@ -196,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 });
     }
 
@@ -220,13 +220,13 @@ export class AttributesDelegate {
 
     public setMainViewSize(size: ISize) {
         if (size.width === 0 || size.height === 0) return;
-        console.log("[window-manager] setMainViewSize  ", JSON.stringify(size));
+        console.log("[window-manager] setMainViewSize size:" + 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));
+        console.log("[window-manager] setMainViewCameraAndSize camera:" + JSON.stringify(camera) + ", size:" + 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/ContainerResizeObserver.ts

@@ -3,12 +3,15 @@ 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", 30);
 
     constructor(private emitter: EmitterType) {}
 
@@ -28,21 +31,18 @@ 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, 'observePlaygroundSize');
 
         this.containerResizeObserver = new ResizeObserver(entries => {
             const containerRect = entries[0]?.contentRect;
             if (containerRect) {
                 this.updateSizer(containerRect, sizer, wrapper, 'containerResizeObserver');
-                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, 'containerSizeRatioUpdate');
             this.emitter.emit("playgroundSizeChange", containerRect);
         });
@@ -66,9 +66,8 @@ export class ContainerResizeObserver {
             }
             wrapper.style.width = `${width}px`;
             wrapper.style.height = `${height}px`;
-            wrapper.style.backgroundColor = 'green';
             const wrapperRect = wrapper.getBoundingClientRect();
-            console.log(`[window-manager] updateSizer from ${origin}: ${JSON.stringify({ width, height })} ${wrapper.style.width} ${wrapper.style.height} ${JSON.stringify(wrapperRect)}`);
+            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,

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/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/View/MainView.ts

@@ -19,8 +19,6 @@ export class MainViewProxy {
     private scale?: number;
     private started = false;
     private mainViewIsAddListener = false;
-    private mainViewResizeObserver?: ResizeObserver;
-    private mainViewResizeObserver2?: ResizeObserver;
     private isForcingMainViewDivElement = false;
     private wrapperRectWorkaroundFrame = 0;
     private pendingWrapperRectChange?: { width: number; height: number; origin?: string };
@@ -31,19 +29,19 @@ export class MainViewProxy {
     private sideEffectManager = new SideEffectManager();
 
     private playgroundSizeChangeListenerLocalConsole = new LocalConsole("playgroundSizeChangeListener", 30);
+    private sizeUpdatedLocalConsole = new LocalConsole("sizeUpdated", 30);
+    private cameraUpdatedLocalConsole = new LocalConsole("cameraUpdated", 30);
 
     constructor(private manager: AppManager) {
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
         internalEmitter.once("mainViewMounted").then(() => {
-            this.observeMainViewDivElement();
             this.addMainViewListener();
             this.start();
             this.ensureCameraAndSize();
             this.startListenWritableChange();
         });
         const playgroundSizeChangeListener = () => {
-            // this.refreshScreenSizeIfStale();
             this.playgroundSizeChangeListenerLocalConsole.log(
                 JSON.stringify(this.mainView.camera),
                 JSON.stringify(this.mainView.size), 
@@ -61,9 +59,9 @@ export class MainViewProxy {
         this.sideEffectManager.add(() => {
             return internalEmitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
         });
-        // this.sideEffectManager.add(() => {
-        //     return internalEmitter.on("wrapperRectChange", this.onWrapperRectChange);
-        // });
+        this.sideEffectManager.add(() => {
+            return internalEmitter.on("wrapperRectChange", this.onWrapperRectChange);
+        });
         this.sideEffectManager.add(() => {
             return internalEmitter.on("startReconnect", () => {
                 if (!this.didRelease) {
@@ -119,21 +117,8 @@ 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;
-        this.forceSyncMainViewDivElement("playgroundSizeChange", { width, height }, element);
-    }
-
     private onWrapperRectChange = (payload: { width: number; height: number; origin?: string }) => {
         this.pendingWrapperRectChange = payload;
-        console.log("[window-manager] onWrapperRectChange " + JSON.stringify({
-            ...payload,
-            viewSize: this.mainView.size,
-        }));
         if (this.wrapperRectWorkaroundFrame) {
             cancelAnimationFrame(this.wrapperRectWorkaroundFrame);
         }
@@ -156,15 +141,6 @@ export class MainViewProxy {
             Math.abs(this.mainView.size.width - observedSize.width) > 0.5 ||
             Math.abs(this.mainView.size.height - observedSize.height) > 0.5;
 
-        console.log("[window-manager] runWrapperRectWorkaround " + JSON.stringify({
-            origin: payload.origin,
-            wrapperRect: payload,
-            domRect: observedSize,
-            viewSize: this.mainView.size,
-            wrapperMatchesDom,
-            viewIsStale,
-        }));
-
         if (wrapperMatchesDom && viewIsStale) {
             this.forceSyncMainViewDivElement(
                 `wrapperRectChange:${payload.origin || "unknown"}`,
@@ -216,14 +192,17 @@ export class MainViewProxy {
     }
 
     public start() {
-        console.log("[window-manager] start  " + JSON.stringify(this.mainViewSize));
+        console.log("[window-manager] start attributes size:" + JSON.stringify(this.mainViewSize));
         this.sizeChangeHandler(this.mainViewSize);
         if (this.started) return;
         this.addCameraListener();
         this.addCameraReaction();
         if (this.manager.room) this.syncMainView(this.manager.room);
         this.started = true;
-        console.log("[window-manager] start end " + JSON.stringify(this.mainViewSize), JSON.stringify(this.mainView.size));
+        if(this.mainView.focusScenePath) {
+            this.manager.windowManger.onMainViewScenePathChangeHandler(this.mainView.focusScenePath);
+        }
+        console.log("[window-manager] start end mainView size:" + JSON.stringify(this.mainView.size));
     }
 
     public addCameraReaction = () => {
@@ -254,7 +233,7 @@ export class MainViewProxy {
         if (size) {
             this.moveCameraToContian(size);
             this.moveCamera(this.mainViewCamera);
-            console.log("[window-manager] sizeChangeHandler  current size and camera" + JSON.stringify(size) + JSON.stringify(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();
@@ -306,11 +285,9 @@ export class MainViewProxy {
             this.mainView.release();
         }
         this.removeMainViewListener();
-        this.disconnectMainViewResizeObserver();
         this.mainView = this.createMainView();
         this.mainView.disableCameraTransform = disableCameraTransform;
         this.mainView.divElement = divElement;
-        this.observeMainViewDivElement();
         this.addMainViewListener();
         this.start();
         callbacks.emit("onMainViewRebind", this.mainView);
@@ -367,117 +344,8 @@ export class MainViewProxy {
         this.view.callbacks.off("onSizeUpdated", this.onSizeUpdated);
     }
 
-    private observeMainViewDivElement() {
-        this.disconnectMainViewResizeObserver();
-        if (!("ResizeObserver" in window)) return;
-        if (!this.mainView.divElement) return;
-        console.log("[window-manager] observeMainViewDivElement " + JSON.stringify({
-            rect: this.mainView.divElement.getBoundingClientRect(),
-            viewSize: this.mainView.size,
-        }));
-        this.mainViewResizeObserver = new window.ResizeObserver(this.onResize);
-        this.mainViewResizeObserver.observe(this.mainView.divElement);
-        this.mainViewResizeObserver2 = new window.ResizeObserver(this.onResize2);
-        this.mainViewResizeObserver2.observe(this.mainView.divElement);
-    }
-
-    private disconnectMainViewResizeObserver() {
-        this.mainViewResizeObserver?.disconnect();
-        this.mainViewResizeObserver = undefined;
-        this.mainViewResizeObserver2?.disconnect();
-        this.mainViewResizeObserver2 = undefined;
-    }
-
-    private onResize = (entries: ResizeObserverEntry[]) => {
-        const entry = entries[0];
-        if (!entry) return;
-        const target = entry.target as HTMLDivElement;
-        const child = target.children[0] as HTMLElement | undefined;
-        const observedSize = {
-            width: entry.contentRect.width,
-            height: entry.contentRect.height,
-        };
-        console.log("[window-manager] mainViewResizeObserver " + JSON.stringify({
-            sameTarget: target === this.mainView.divElement,
-            contentRect: {
-                width: observedSize.width,
-                height: observedSize.height,
-            },
-            client: {
-                width: target.clientWidth,
-                height: target.clientHeight,
-            },
-            offset: {
-                width: target.offsetWidth,
-                height: target.offsetHeight,
-            },
-            rect: {
-                width: target.getBoundingClientRect().width,
-                height: target.getBoundingClientRect().height,
-            },
-            childRect: child
-                ? {
-                    width: child.getBoundingClientRect().width,
-                    height: child.getBoundingClientRect().height,
-                }
-                : null,
-            viewSize: this.mainView.size,
-        }));
-        // this.forceSyncMainViewDivElement("mainViewResizeObserver", observedSize, target);
-    };
-
-    private onResize2 = (entries: ResizeObserverEntry[]) => {
-        const entry = entries[0];
-        if (!entry) return;
-        const target = entry.target as HTMLDivElement;
-        const child = target.children[0] as HTMLElement | undefined;
-        const observedSize = {
-            width: entry.contentRect.width,
-            height: entry.contentRect.height,
-        };
-        console.log("[window-manager] mainViewResizeObserver2 " + JSON.stringify({
-            sameTarget: target === this.mainView.divElement,
-            contentRect: {
-                width: observedSize.width,
-                height: observedSize.height,
-            },
-            client: {
-                width: target.clientWidth,
-                height: target.clientHeight,
-            },
-            offset: {
-                width: target.offsetWidth,
-                height: target.offsetHeight,
-            },
-            rect: {
-                width: target.getBoundingClientRect().width,
-                height: target.getBoundingClientRect().height,
-            },
-            childRect: child
-                ? {
-                    width: child.getBoundingClientRect().width,
-                    height: child.getBoundingClientRect().height,
-                }
-                : null,
-            viewSize: this.mainView.size,
-        }));
-    };
-
     private _syncMainViewTimer = 0;
-    private handleCameraOrSizeUpdated = (
-        source: "onCameraUpdated" | "onSizeUpdated",
-        payload: Camera | Size
-    ) => {
-        console.log("[window-manager] " + source + " payload " + JSON.stringify(payload));
-        console.log("[window-manager] " + source + " state " + JSON.stringify(this.cameraState));
-        if(this.mainView.divElement){
-            const children = this.mainView.divElement.children;
-            console.log("[window-manager] " + source + " rect " + JSON.stringify(this.mainView.divElement.getBoundingClientRect()));
-            const child = children[0];
-            if (child) {
-                console.log("[window-manager] " + source + " child" + JSON.stringify(child.getBoundingClientRect()));
-            }
-        }
+    private handleCameraOrSizeUpdated = () => {
         callbacks.emit("cameraStateChange", this.cameraState);
         // sdk >= 2.16.43 的 syncMainView() 可以写入当前 main view 的 camera, 以修复复制粘贴元素的位置
         // 注意到这个操作会发送信令，应当避免频繁调用
@@ -489,11 +357,13 @@ export class MainViewProxy {
     };
 
     private onCameraUpdated = (camera: Camera) => {
-        this.handleCameraOrSizeUpdated("onCameraUpdated", camera);
+        this.cameraUpdatedLocalConsole.log(JSON.stringify(camera));
+        this.handleCameraOrSizeUpdated();
     };
 
     private onSizeUpdated = (size: Size) => {
-        this.handleCameraOrSizeUpdated("onSizeUpdated", size);
+        this.sizeUpdatedLocalConsole.log(JSON.stringify(size));
+        this.handleCameraOrSizeUpdated();
     };
 
     private ensureMainViewSize() {
@@ -510,7 +380,7 @@ export class MainViewProxy {
 
     private syncMainView = (room: Room) => {
         if (room.isWritable) {
-            console.log("[window-manager] syncMainView  ");
+            console.log("[window-manager] syncMainView ");
             room.syncMainView(this.mainView);
         }
     };
@@ -560,7 +430,6 @@ export class MainViewProxy {
             this.wrapperRectWorkaroundFrame = 0;
         }
         this.removeMainViewListener();
-        this.disconnectMainViewResizeObserver();
         this.stop();
         this.sideEffectManager.flushAll();
     }

package/src/index.ts

@@ -403,16 +403,17 @@ export class WindowManager
         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);
+                const camera = this.mainView.camera;
+                console.log("[window-manager] backgroundImageVisible:" + backgroundImageVisible + " camera:" + JSON.stringify(camera));
                 return;
             }
-            console.log("[window-manager] onMainViewScenePathChange" + scenePath + 'backgroundImageVisible is not found');
+            console.log("[window-manager] onMainViewScenePathChange scenePath:" + scenePath + ' backgroundImageVisible is not found');
+            return;
         }
-        console.log("[window-manager] onMainViewScenePathChange" + scenePath + 'mainViewElement is not found');
+        console.log("[window-manager] onMainViewScenePathChange scenePath:" + scenePath + ' mainViewElement is not found');
     }
 
     private static initManager(room: Room): Promise<WindowManager | undefined> {
@@ -1047,7 +1048,6 @@ export class WindowManager
                 animationMode?: AnimationMode;
             }>
     ): void {
-        console.log("[window-manager] moveCameraToContain" + JSON.stringify(rectangle));
         this.mainView.moveCameraToContain(rectangle);
         setTimeout(() => {
             this.appManager?.mainViewProxy.setCameraAndSize();