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

package/package.json

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

package/src/View/MainView.ts

@@ -19,6 +19,8 @@ export class MainViewProxy {
     private scale?: number;
     private started = false;
     private mainViewIsAddListener = false;
+    private mainViewResizeObserver?: ResizeObserver;
+    private isForcingMainViewDivElement = false;
     private mainView: View;
     private store = this.manager.store;
     private viewMode = this.manager.windowManger.viewMode;
@@ -31,13 +33,14 @@ export class MainViewProxy {
         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.refreshScreenSizeIfStale();
             this.playgroundSizeChangeListenerLocalConsole.log(
                 JSON.stringify(this.mainView.camera),
                 JSON.stringify(this.mainView.size), 
@@ -116,16 +119,48 @@ export class MainViewProxy {
 
         const { width, height } = element.getBoundingClientRect();
         if (width <= 0 || height <= 0) return;
+        this.forceSyncMainViewDivElement("playgroundSizeChange", { width, height }, element);
+    }
 
+    private forceSyncMainViewDivElement(
+        reason: string,
+        observedSize: Pick<Size, "width" | "height">,
+        element: HTMLDivElement
+    ) {
         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({
+        if (
+            Math.abs(viewWidth - observedSize.width) <= 0.5 &&
+            Math.abs(viewHeight - observedSize.height) <= 0.5
+        ) {
+            return;
+        }
+        if (this.isForcingMainViewDivElement) {
+            console.log("[window-manager] skipForceSyncMainViewDivElement " + JSON.stringify({
+                reason,
+                observedSize,
                 viewSize: this.mainView.size,
-                domSize: { width, height },
             }));
-            resizableView.resizeScreen?.();
+            return;
         }
+        this.isForcingMainViewDivElement = true;
+        console.log("[window-manager] forceSyncMainViewDivElement " + JSON.stringify({
+            reason,
+            observedSize,
+            viewSize: this.mainView.size,
+            mainViewSize: this.mainViewSize,
+            mainViewCamera: this.mainViewCamera,
+        }));
+        this.mainView.divElement = null;
+        this.mainView.divElement = element;
+        queueMicrotask(() => {
+            const rect = element.getBoundingClientRect();
+            console.log("[window-manager] forceSyncMainViewDivElementResult " + JSON.stringify({
+                reason,
+                viewSize: this.mainView.size,
+                rect: { width: rect.width, height: rect.height },
+            }));
+            this.isForcingMainViewDivElement = false;
+        });
     }
 
     public start() {
@@ -136,6 +171,7 @@ export class MainViewProxy {
         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));
     }
 
     public addCameraReaction = () => {
@@ -218,9 +254,11 @@ 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);
@@ -267,25 +305,84 @@ export class MainViewProxy {
 
     private addCameraListener() {
         this.view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
-        this.view.callbacks.on("onCameraUpdated", this.onCameraOrSizeUpdated);
-        this.view.callbacks.on("onSizeUpdated", this.onCameraOrSizeUpdated);
+        this.view.callbacks.on("onCameraUpdated", this.onCameraUpdated);
+        this.view.callbacks.on("onSizeUpdated", this.onSizeUpdated);
     }
 
     private removeCameraListener() {
         this.view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
-        this.view.callbacks.off("onCameraUpdated", this.onCameraOrSizeUpdated);
-        this.view.callbacks.off("onSizeUpdated", this.onCameraOrSizeUpdated);
+        this.view.callbacks.off("onCameraUpdated", this.onCameraUpdated);
+        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 onCameraOrSizeUpdated = () => {
-        console.log("[window-manager] onCameraOrSizeUpdated  " + JSON.stringify(this.cameraState));
+    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] onCameraOrSizeUpdated  " + this.mainView.divElement.getBoundingClientRect());
+            console.log("[window-manager] " + source + " rect " + JSON.stringify(this.mainView.divElement.getBoundingClientRect()));
             const child = children[0];
             if (child) {
-                console.log("[window-manager] child" + JSON.stringify(child.getBoundingClientRect()));
+                console.log("[window-manager] " + source + " child" + JSON.stringify(child.getBoundingClientRect()));
             }
         }
         callbacks.emit("cameraStateChange", this.cameraState);
@@ -298,6 +395,14 @@ export class MainViewProxy {
         this.ensureMainViewSize();
     };
 
+    private onCameraUpdated = (camera: Camera) => {
+        this.handleCameraOrSizeUpdated("onCameraUpdated", camera);
+    };
+
+    private onSizeUpdated = (size: Size) => {
+        this.handleCameraOrSizeUpdated("onSizeUpdated", size);
+    };
+
     private ensureMainViewSize() {
         if (
             (!this.mainViewSize ||
@@ -356,7 +461,9 @@ export class MainViewProxy {
     };
 
     public destroy() {
+        console.log("[window-manager] destroy  ");
         this.removeMainViewListener();
+        this.disconnectMainViewResizeObserver();
         this.stop();
         this.sideEffectManager.flushAll();
     }