@netless/window-manager 0.4.23 → 0.4.26

package/src/App/AppProxy.ts

@@ -48,6 +48,7 @@ export class AppProxy {
     private status: "normal" | "destroyed" = "normal";
     private stateKey: string;
     private _pageState: AppPageStateImpl;
+    private _prevFullPath: string | undefined;
 
     public appResult?: NetlessApp<any>;
     public appContext?: AppContext<any, any>;
@@ -348,7 +349,10 @@ export class AppProxy {
             return autorun(() => {
                 const fullPath = this.appAttributes?.fullPath;
                 this.setFocusScenePathHandler(fullPath);
-                this.notifyPageStateChange();
+                if (this._prevFullPath !== fullPath) {
+                    this.notifyPageStateChange();
+                    this._prevFullPath = fullPath;
+                }
             });
         });
     };
@@ -432,6 +436,7 @@ export class AppProxy {
         this.manager.refresher?.remove(this.id);
         this.manager.refresher?.remove(this.stateKey);
         this.manager.refresher?.remove(`${this.id}-fullPath`);
+        this._prevFullPath = undefined;
     }
 
     public close(): Promise<void> {

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

@@ -16,7 +16,8 @@ export type EmitterEvent = {
     observerIdChange: number;
     boxStateChange: string;
     playgroundSizeChange: DOMRect;
-    onReconnected: void;
+    startReconnect: undefined;
+    onReconnected: undefined;
     removeScenes: string;
     cursorMove: CursorMovePayload;
     updateManagerRect: undefined;
@@ -25,6 +26,7 @@ export type EmitterEvent = {
     setReadonly: boolean;
     changePageState: undefined;
     writableChange: boolean;
+    containerSizeRatioUpdate: number;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;

package/src/ReconnectRefresher.ts

@@ -29,6 +29,9 @@ export class ReconnectRefresher {
     }
 
     private onPhaseChanged = (phase: RoomPhase) => {
+        if (phase === RoomPhase.Reconnecting) {
+            this.ctx.emitter.emit("startReconnect");
+        }
         if (phase === RoomPhase.Connected && this.phase === RoomPhase.Reconnecting) {
             this.onReconnected();
         }
@@ -47,7 +50,7 @@ export class ReconnectRefresher {
                 this.disposers.set(id, func());
             }
         });
-        this.ctx.emitter.emit("onReconnected", undefined);
+        this.ctx.emitter.emit("onReconnected");
     }
 
     private releaseDisposers() {

package/src/View/MainView.ts

@@ -1,7 +1,7 @@
 import { AnimationMode, reaction } from "white-web-sdk";
 import { callbacks } from "../callback";
 import { createView } from "./ViewManager";
-import { debounce, isEmpty, isEqual } from "lodash";
+import { debounce, get, isEmpty, isEqual } from "lodash";
 import { emitter } from "../InternalEmitter";
 import { Fields } from "../AttributesDelegate";
 import { setViewFocusScenePath } from "../Utils/Common";
@@ -32,8 +32,15 @@ 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);
+        });
+        this.sideEffectManager.add(() => {
+            return emitter.on("startReconnect", () => {
+                this.mainView.release();
+            });
         });
     }
 
@@ -62,6 +69,10 @@ export class MainViewProxy {
         return this.store.getMainViewSize();
     }
 
+    private get didRelease(): boolean {
+        return get(this.view, ["didRelease"]);
+    }
+
     private moveCameraSizeByAttributes() {
         this.moveCameraToContian(this.mainViewSize);
         this.moveCamera(this.mainViewCamera);
@@ -98,13 +109,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;
     }
@@ -123,9 +142,13 @@ export class MainViewProxy {
     }
 
     public onReconnect(): void {
-        const mainViewScenePath = this.store.getMainViewScenePath();
-        if (mainViewScenePath) {
-            setViewFocusScenePath(this.view, mainViewScenePath);
+        if (this.didRelease) {
+            this.rebind();
+        } else {
+            const mainViewScenePath = this.store.getMainViewScenePath();
+            if (mainViewScenePath) {
+                setViewFocusScenePath(this.view, mainViewScenePath);
+            }
         }
     }
 
@@ -133,7 +156,9 @@ export class MainViewProxy {
         const divElement = this.mainView.divElement;
         const disableCameraTransform = this.mainView.disableCameraTransform;
         this.stop();
-        this.mainView.release();
+        if (!this.didRelease) {
+            this.mainView.release();
+        }
         this.removeMainViewListener();
         this.mainView = this.createMainView();
         this.mainView.disableCameraTransform = disableCameraTransform;

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"
             },