@netless/window-manager 0.4.24 → 0.4.25

package/src/ContainerResizeObserver.ts

@@ -1,11 +1,14 @@
 import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
+import { isFunction } from "lodash";
 import { WindowManager } from "./index";
 import type { EmitterType } from "./InternalEmitter";
+import type { UnsubscribeFn } from "emittery";
 
 const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 
 export class ContainerResizeObserver {
     private containerResizeObserver?: ResizeObserver;
+    private disposer?: UnsubscribeFn;
 
     constructor(private emitter: EmitterType) {}
 
@@ -35,10 +38,14 @@ export class ContainerResizeObserver {
             }
         });
 
+        this.disposer = this.emitter.on("containerSizeRatioUpdate", () => {
+            this.updateSizer(container.getBoundingClientRect(), sizer, wrapper);
+        });
+
         this.containerResizeObserver.observe(container);
     }
 
-    private updateSizer(
+    public updateSizer(
         { width, height }: DOMRectReadOnly,
         sizer: HTMLElement,
         wrapper: HTMLDivElement
@@ -58,5 +65,9 @@ export class ContainerResizeObserver {
 
     public disconnect() {
         this.containerResizeObserver?.disconnect();
+        if (isFunction(this.disposer)) {
+            this.disposer();
+            this.disposer = undefined;
+        }        
     }
 }

package/src/InternalEmitter.ts

@@ -25,6 +25,7 @@ export type EmitterEvent = {
     setReadonly: boolean;
     changePageState: undefined;
     writableChange: boolean;
+    containerSizeRatioUpdate: number;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;

package/src/View/MainView.ts

@@ -32,8 +32,10 @@ export class MainViewProxy {
             this.sizeChangeHandler(this.mainViewSize);
         };
         this.sideEffectManager.add(() => {
-            emitter.on("playgroundSizeChange", playgroundSizeChangeListener);
-            return () => emitter.off("playgroundSizeChange", playgroundSizeChangeListener);
+            return emitter.on("playgroundSizeChange", playgroundSizeChangeListener);
+        });
+        this.sideEffectManager.add(() => {
+            return emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
         });
     }
 
@@ -98,13 +100,21 @@ export class MainViewProxy {
         );
     };
 
-    private sizeChangeHandler = debounce((size: Size) => {
+    public sizeChangeHandler = debounce((size: Size) => {
         if (size) {
             this.moveCameraToContian(size);
             this.moveCamera(this.mainViewCamera);
         }
     }, 30);
 
+    public onUpdateContainerSizeRatio = () => {
+        const size = this.store.getMainViewSize();
+        this.sizeChangeHandler(size);
+        if (size.id === this.manager.uid) {
+            this.setCameraAndSize();
+        }
+    }
+
     public get view(): View {
         return this.mainView;
     }

package/src/index.ts

@@ -11,7 +11,7 @@ import { emitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
-import { isEqual, isNull, isObject, omit } from "lodash";
+import { isEqual, isNull, isObject, omit, isNumber } from "lodash";
 import { log } from "./Utils/log";
 import { PageStateImpl } from "./PageState";
 import { ReconnectRefresher } from "./ReconnectRefresher";
@@ -893,6 +893,15 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         this.appManager?.refresher?.refresh();
     }
 
+    public setContainerSizeRatio(ratio: number) {
+        if (!isNumber(ratio)) {
+            throw new Error(`[WindowManager]: updateContainerSizeRatio error, ratio must be a number. but got ${ratio}`);
+        }
+        WindowManager.containerSizeRatio = ratio;
+        this.containerSizeRatio = ratio;
+        emitter.emit("containerSizeRatioUpdate", ratio);
+    }
+
     private isDynamicPPT(scenes: SceneDefinition[]) {
         const sceneSrc = scenes[0]?.ppt?.src;
         return sceneSrc?.startsWith("pptx://");

package/vite.config.js

@@ -1,5 +1,5 @@
 import path from "path";
-import { defineConfig } from "vite";
+import { defineConfig } from 'vitest/config'
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { dependencies, peerDependencies, version, devDependencies } from "./package.json"
 import { omit } from "lodash";
@@ -8,6 +8,14 @@ export default defineConfig(({ mode }) => {
     const isProd = mode === "production";
 
     return {
+        test: {
+            environment: "jsdom",
+            deps: {
+                inline: [
+                  "@juggle/resize-observer"
+                ]
+            }
+        },
         define: {
             __APP_VERSION__: JSON.stringify(version),
             __APP_DEPENDENCIES__: JSON.stringify({