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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.13-test.10",
+  "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,12 +32,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.playgroundSizeChangeListenerLocalConsole.log(
                 JSON.stringify(this.mainView.camera),
                 JSON.stringify(this.mainView.size), 
@@ -109,6 +112,24 @@ 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;
+
+        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({
+                viewSize: this.mainView.size,
+                domSize: { width, height },
+            }));
+            resizableView.resizeScreen?.();
+        }
+    }
+
     public start() {
         console.log("[window-manager] start  " + JSON.stringify(this.mainViewSize));
         this.sizeChangeHandler(this.mainViewSize);
@@ -199,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);
@@ -258,9 +281,62 @@ 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));
+        if(this.mainView.divElement){
+            const children = this.mainView.divElement.children;
+            console.log("[window-manager] onCameraOrSizeUpdated  " + this.mainView.divElement.getBoundingClientRect());
+            const child = children[0];
+            if (child) {
+                console.log("[window-manager] child" + JSON.stringify(child.getBoundingClientRect()));
+            }
+        }
         callbacks.emit("cameraStateChange", this.cameraState);
         // sdk >= 2.16.43 的 syncMainView() 可以写入当前 main view 的 camera, 以修复复制粘贴元素的位置
         // 注意到这个操作会发送信令，应当避免频繁调用
@@ -330,6 +406,7 @@ export class MainViewProxy {
 
     public destroy() {
         this.removeMainViewListener();
+        this.disconnectMainViewResizeObserver();
         this.stop();
         this.sideEffectManager.flushAll();
     }