@netless/window-manager 1.0.13-test.16 → 1.0.13-test.18

package/src/View/MainView.ts

@@ -19,7 +19,6 @@ export class MainViewProxy {
     private scale?: number;
     private started = false;
     private mainViewIsAddListener = false;
-    private mainViewResizeObserver?: ResizeObserver;
     private isForcingMainViewDivElement = false;
     private wrapperRectWorkaroundFrame = 0;
     private pendingWrapperRectChange?: { width: number; height: number; origin?: string };
@@ -30,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), 
@@ -118,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);
         }
@@ -155,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"}`,
@@ -215,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 = () => {
@@ -253,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();
@@ -305,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);
@@ -366,76 +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);
-    }
-
-    private disconnectMainViewResizeObserver() {
-        this.mainViewResizeObserver?.disconnect();
-        this.mainViewResizeObserver = 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 _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, 以修复复制粘贴元素的位置
         // 注意到这个操作会发送信令，应当避免频繁调用
@@ -447,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() {
@@ -518,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();

package/src/style.css

@@ -51,8 +51,6 @@
 .netless-window-manager-main-view {
     width: 100%;
     height: 100%;
-    box-sizing: border-box;
-    border: 0.1px solid transparent
 }
 
 .netless-window-manager-cursor-pencil-image {