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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.13-test.12",
+  "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

@@ -20,6 +20,7 @@ export class MainViewProxy {
     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;
@@ -39,7 +40,7 @@ export class MainViewProxy {
             this.startListenWritableChange();
         });
         const playgroundSizeChangeListener = () => {
-            this.refreshScreenSizeIfStale();
+            // this.refreshScreenSizeIfStale();
             this.playgroundSizeChangeListenerLocalConsole.log(
                 JSON.stringify(this.mainView.camera),
                 JSON.stringify(this.mainView.size), 
@@ -118,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() {
@@ -138,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 = () => {
@@ -271,20 +305,24 @@ 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);
     }
@@ -299,10 +337,15 @@ export class MainViewProxy {
         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: entry.contentRect.width,
-                height: entry.contentRect.height,
+                width: observedSize.width,
+                height: observedSize.height,
             },
             client: {
                 width: target.clientWidth,
@@ -324,17 +367,22 @@ export class MainViewProxy {
                 : 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);
@@ -347,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 ||
@@ -405,6 +461,7 @@ export class MainViewProxy {
     };
 
     public destroy() {
+        console.log("[window-manager] destroy  ");
         this.removeMainViewListener();
         this.disconnectMainViewResizeObserver();
         this.stop();