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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.13-test.11",
+  "version": "1.0.13-test.12",
   "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,7 @@ export class MainViewProxy {
     private scale?: number;
     private started = false;
     private mainViewIsAddListener = false;
+    private mainViewResizeObserver?: ResizeObserver;
     private mainView: View;
     private store = this.manager.store;
     private viewMode = this.manager.windowManger.viewMode;
@@ -31,6 +32,7 @@ export class MainViewProxy {
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
         internalEmitter.once("mainViewMounted").then(() => {
+            this.observeMainViewDivElement();
             this.addMainViewListener();
             this.start();
             this.ensureCameraAndSize();
@@ -218,9 +220,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);
@@ -277,6 +281,51 @@ export class MainViewProxy {
         this.view.callbacks.off("onSizeUpdated", this.onCameraOrSizeUpdated);
     }
 
+    private observeMainViewDivElement() {
+        this.disconnectMainViewResizeObserver();
+        if (!("ResizeObserver" in window)) return;
+        if (!this.mainView.divElement) return;
+        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;
+        console.log("[window-manager] mainViewResizeObserver " + JSON.stringify({
+            contentRect: {
+                width: entry.contentRect.width,
+                height: entry.contentRect.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 onCameraOrSizeUpdated = () => {
         console.log("[window-manager] onCameraOrSizeUpdated  " + JSON.stringify(this.cameraState));
@@ -357,6 +406,7 @@ export class MainViewProxy {
 
     public destroy() {
         this.removeMainViewListener();
+        this.disconnectMainViewResizeObserver();
         this.stop();
         this.sideEffectManager.flushAll();
     }