@netless/window-manager 0.4.22 → 0.4.25

package/src/AppManager.ts

@@ -585,6 +585,7 @@ export class AppManager {
         } else {
             this.mainView.disableCameraTransform = true;
         }
+        emitter.emit("writableChange", isWritable);
     };
 
     public safeSetAttributes(attributes: any) {

package/src/AttributesDelegate.ts

@@ -38,6 +38,11 @@ export type StoreContext = {
     safeUpdateAttributes: (keys: string[], value: any) => void;
     safeSetAttributes: (attributes: any) => void;
 }
+
+export type ICamera = Camera & { id: string };
+
+export type ISize = Size & { id: string };
+
 export class AttributesDelegate {
 
     constructor(private context: StoreContext) {}
@@ -152,14 +157,21 @@ export class AttributesDelegate {
         return get(this.attributes, [Fields.MainViewSize]);
     }
 
-    public setMainViewCamera(camera: (Camera & { id: string }) | undefined) {
+    public setMainViewCamera(camera: ICamera) {
         this.context.safeSetAttributes({ [Fields.MainViewCamera]: { ...camera } });
     }
 
-    public setMainViewSize(size: (Size & { id: string }) | undefined) {
+    public setMainViewSize(size: ISize) {
         this.context.safeSetAttributes({ [Fields.MainViewSize]: { ...size } });
     }
 
+    public setMainViewCameraAndSize(camera: ICamera, size: ISize) {
+        this.context.safeSetAttributes({
+            [Fields.MainViewCamera]: { ...camera },
+            [Fields.MainViewSize]: { ...size },
+        });
+    }
+
     public setAppFocus = (appId: string, focus: boolean) => {
         if (focus) {
             this.context.safeSetAttributes({ [Fields.Focus]: appId });

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

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

package/src/View/MainView.ts

@@ -25,20 +25,37 @@ export class MainViewProxy {
         emitter.once("mainViewMounted").then(() => {
             this.addMainViewListener();
             this.start();
-            if (!this.mainViewCamera || !this.mainViewSize) {
-                manager.dispatchInternalEvent(Events.InitMainViewCamera)
-                this.setCameraAndSize();
-            }
+            this.ensureCameraAndSize();
+            this.startListenWritableChange();
         });
         const playgroundSizeChangeListener = () => {
             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);
+        });
+    }
+
+    private startListenWritableChange = () => {
+        this.sideEffectManager.add(() => {
+            return emitter.on("writableChange", isWritable => {
+                if (isWritable) {
+                    this.ensureCameraAndSize();
+                }
+            });
         });
     }
 
+    public ensureCameraAndSize() {
+        if (!this.mainViewCamera || !this.mainViewSize) {
+            this.manager.dispatchInternalEvent(Events.InitMainViewCamera);
+            this.setCameraAndSize();
+        }
+    }
+
     private get mainViewCamera() {
         return this.store.getMainViewCamera();
     }
@@ -62,11 +79,12 @@ export class MainViewProxy {
 
     public addCameraReaction = () => {
         this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
-    }
+    };
 
     public setCameraAndSize(): void {
-        this.store.setMainViewCamera({ ...this.mainView.camera, id: this.manager.uid });
-        this.store.setMainViewSize({ ...this.mainView.size, id: this.manager.uid });
+        const camera = { ...this.mainView.camera, id: this.manager.uid };
+        const size = { ...this.mainView.size, id: this.manager.uid };
+        this.store.setMainViewCameraAndSize(camera, size);
     }
 
     private cameraReaction = () => {
@@ -77,17 +95,26 @@ export class MainViewProxy {
                     this.moveCameraToContian(this.mainViewSize);
                     this.moveCamera(camera);
                 }
-            }, { fireImmediately: true }
+            },
+            { fireImmediately: true }
         );
     };
 
-    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({
@@ -26,7 +34,7 @@ export default defineConfig(({ mode }) => {
             lib: {
                 // eslint-disable-next-line no-undef
                 entry: path.resolve(__dirname, "src/index.ts"),
-                formats: ["es", "umd"], // TODO cjs 版本待修复
+                formats: ["es", "umd", "cjs"],
                 name: "WindowManager",
                 fileName: "index"
             },