@netless/window-manager 1.0.12 → 1.0.13-bate.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.12",
+  "version": "1.0.13-bate.0",
   "description": "Multi-window mode for Netless Whiteboard",
   "author": "l1shen <lishen1635@gmail.com> (https://github.com/l1shen)",
   "license": "MIT",
@@ -23,7 +23,7 @@
   },
   "peerDependencies": {
     "jspdf": "2.5.1",
-    "white-web-sdk": "^2.16.52"
+    "white-web-sdk": "^2.16.53"
   },
   "peerDependenciesMeta": {
     "jspdf": {
@@ -72,6 +72,6 @@
     "typescript": "^4.5.5",
     "vite": "^2.9.9",
     "vitest": "^0.14.1",
-    "white-web-sdk": "^2.16.52"
+    "white-web-sdk": "^2.16.53"
   }
 }

package/src/App/AppProxy.ts

@@ -120,6 +120,10 @@ export class AppProxy implements PageRemoveService {
         return this.store.getAppAttributes(this.id);
     }
 
+    public get Logger() {
+        return this.manager.windowManger.Logger;
+    }
+
     public getFullScenePath(): string | undefined {
         if (this.scenePath) {
             return get(this.appAttributes, [Fields.FullPath]) || this.getFullScenePathFromScenes();
@@ -145,6 +149,7 @@ export class AppProxy implements PageRemoveService {
     ): Promise<{ appId: string; app: NetlessApp }> {
         const params = this.params;
         if (!params.kind) {
+            this.Logger && this.Logger.error(`[WindowManager]: kind require`);
             throw new Error("[WindowManager]: kind require");
         }
         const appImpl = await appRegister.appClasses.get(params.kind)?.();
@@ -162,6 +167,7 @@ export class AppProxy implements PageRemoveService {
                 params.isDragContent
             );
         } else {
+            this.Logger && this.Logger.error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
             throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
         }
         internalEmitter.emit("updateManagerRect");
@@ -210,7 +216,7 @@ export class AppProxy implements PageRemoveService {
                 }
                 setTimeout(async () => {
                     // 延迟执行 setup, 防止初始化的属性没有更新成功
-                    console.log("setup app", app);
+                    this.Logger && this.Logger.info(`[WindowManager]: setup app ${this.kind}, appId: ${appId}`);
                     const result = await app.setup(context);
                     this.appResult = result;
                     appRegister.notifyApp(this.kind, "created", { appId, result });
@@ -245,7 +251,7 @@ export class AppProxy implements PageRemoveService {
                 this.boxManager.focusBox({ appId }, false);
             }
         } catch (error: any) {
-            console.error(error);
+            this.Logger && this.Logger.error(`[WindowManager]: app setup error: ${error.message}`);
             throw new Error(`[WindowManager]: app setup error: ${error.message}`);
         }
     }
@@ -532,6 +538,7 @@ export class AppProxy implements PageRemoveService {
             await appRegister.notifyApp(this.kind, "destroy", { appId: this.id });
             await this.appEmitter.emit("destroy", { error });
         } catch (error) {
+            this.Logger && this.Logger.error(`[WindowManager]: notifyApp error: ${error.message}`);
             console.error("[WindowManager]: notifyApp error", error.message, error.stack);
         }
         this.appEmitter.clearListeners();
@@ -554,6 +561,7 @@ export class AppProxy implements PageRemoveService {
         this.manager.refresher.remove(this.stateKey);
         this.manager.refresher.remove(`${this.id}-fullPath`);
         this._prevFullPath = undefined;
+        this.Logger && this.Logger.info(`[WindowManager]: destroy app ${this.kind} appId: ${this.id}`);
     }
 
     public close(): Promise<void> {

package/src/AppListener.ts

@@ -50,14 +50,6 @@ export class AppListeners {
                     this.setMainViewScenePathHandler(data.payload);
                     break;
                 }
-                // case Events.MoveCamera: {
-                //     this.moveCameraHandler(data.payload);
-                //     break;
-                // }
-                // case Events.MoveCameraToContain: {
-                //     this.moveCameraToContainHandler(data.payload);
-                //     break;
-                // }
                 case Events.CursorMove: {
                     this.cursorMoveHandler(data.payload);
                     break;
@@ -102,17 +94,6 @@ export class AppListeners {
         callbacks.emit("mainViewScenePathChange", nextScenePath);
     };
 
-    // private moveCameraHandler = (
-    //     payload: Camera & { animationMode?: AnimationMode | undefined }
-    // ) => {
-    //     if (isEqual(omit(payload, ["animationMode"]), { ...this.manager.mainView.camera })) return;
-    //     this.manager.mainView.moveCamera(payload);
-    // };
-
-    // private moveCameraToContainHandler = (payload: any) => {
-    //     this.manager.mainView.moveCameraToContain(payload);
-    // };
-
     private cursorMoveHandler = (payload: any) => {
         internalEmitter.emit("cursorMove", payload);
     };

package/src/AppManager.ts

@@ -94,11 +94,6 @@ export class AppManager {
 
     constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
-        // this.store.setContext({
-        //     getAttributes: () => this.attributes,
-        //     safeSetAttributes: attributes => this.safeSetAttributes(attributes),
-        //     safeUpdateAttributes: (keys, val) => this.safeUpdateAttributes(keys, val),
-        // });
         this.store = createAttributesDelegate(WindowManager.extendClass, {
             getAttributes: () => this.attributes,
             safeSetAttributes: attributes => this.safeSetAttributes(attributes),
@@ -150,6 +145,7 @@ export class AppManager {
         const { scenePath } = params;
         // 如果移除根目录就把 scenePath 设置为初始值
         if (scenePath === ROOT_DIR) {
+            console.log("[window-manager] onRemoveScenes ROOT_DIR");
             await this.onRootDirRemoved();
             this.dispatchInternalEvent(Events.RootDirRemoved);
             return;
@@ -162,6 +158,7 @@ export class AppManager {
                 sceneName = this.callbacksNode?.scenes[nextIndex];
             }
             if (sceneName) {
+                console.log(`[window-manager] onRemoveScenes  setMainViewScenePath ${ROOT_DIR}${sceneName}`);
                 this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
             }
             await this.setMainViewSceneIndex(nextIndex);
@@ -333,6 +330,10 @@ export class AppManager {
         return this.room?.uid || "";
     }
 
+    public get Logger() {
+        return this.windowManger.Logger;
+    }
+
     public getMainViewSceneDir() {
         const scenePath = this.store.getMainViewScenePath();
         if (scenePath) {
@@ -603,6 +604,9 @@ export class AppManager {
                     try {
                         const appAttributes = this.attributes[id];
                         if (!appAttributes) {
+                            this.Logger && this.Logger.error(
+                                `[WindowManager]: appAttributes is undefined, appId: ${id}`
+                            );
                             throw new Error("appAttributes is undefined");
                         }
 
@@ -706,6 +710,31 @@ export class AppManager {
         }
         internalEmitter.emit("mainViewMounted");
         callbacks.emit("onMainViewMounted", mainView);
+        const hasRoot = this.hasRoot(mainView.divElement);
+        const rect = this.getRectByDivElement(mainView.divElement);
+        let log = `[window-manager] bindMainView hasRoot:${hasRoot}, rect:${JSON.stringify(rect)}, outerHeight:${window.outerHeight}, outerWidth:${window.outerWidth}`;
+        const visualViewport = window.visualViewport;
+        if (visualViewport) {
+            log += `, visualViewportWidth:${visualViewport.width}, visualViewportHeight:${visualViewport.height}, visualViewportOffsetLeft:${visualViewport.offsetLeft}, visualViewportOffsetTop:${visualViewport.offsetTop}`;
+        }
+        console.log(log);
+    }
+
+    private hasRoot(divElement: HTMLDivElement){
+        let current = divElement;
+        while (current) {
+            if (current.parentElement === document.body) {
+                return true;
+            }
+            current = current.parentElement as HTMLDivElement;
+        }
+        return false;
+    }
+
+    private getRectByDivElement(divElement: HTMLDivElement){
+        // 获取当前divElement的矩形区域
+        const rect = divElement.getBoundingClientRect();
+        return rect;
     }
 
     public setMainViewFocusPath(scenePath?: string) {
@@ -725,6 +754,9 @@ export class AppManager {
 
     public async addApp(params: AddAppParams, isDynamicPPT: boolean): Promise<string | undefined> {
         log("addApp", params);
+        this.windowManger.Logger?.info(
+            `[WindowManager]: addApp ${params.kind}, isDynamicPPT: ${isDynamicPPT}`
+        );
         const { appId, needFocus } = await this.beforeAddApp(params, isDynamicPPT);
         const appProxy = await this.baseInsertApp(params, appId, true, needFocus);
         this.afterAddApp(appProxy);
@@ -773,7 +805,9 @@ export class AppManager {
         focus?: boolean
     ) {
         if (this.appProxies.has(appId)) {
-            console.warn("[WindowManager]: app duplicate exists and cannot be created again");
+            this.windowManger.Logger?.warn(
+                `[WindowManager]: app duplicate exists and cannot be created again, appId: ${appId}`
+            );
             return;
         }
         const AppProxyClass = getExtendClass(AppProxy, WindowManager.extendClass);
@@ -784,6 +818,7 @@ export class AppManager {
             return appProxy;
         } else {
             this.appStatus.delete(appId);
+            this.Logger && this.Logger.error(`[WindowManager]: initialize AppProxy failed, appId: ${appId}`);
             throw new Error("[WindowManger]: initialize AppProxy failed");
         }
     }
@@ -823,12 +858,15 @@ export class AppManager {
             const scenePathType = this.displayer.scenePathType(scenePath);
             const sceneDir = parseSceneDir(scenePath);
             if (sceneDir !== ROOT_DIR) {
+                this.Logger && this.Logger.error(`[WindowManager]: main view scenePath must in root dir "/"`);
                 throw new Error(`[WindowManager]: main view scenePath must in root dir "/"`);
             }
             if (scenePathType === ScenePathType.None) {
+                this.Logger && this.Logger.error(`[WindowManager]: ${scenePath} not valid scene`);
                 throw new Error(`[WindowManager]: ${scenePath} not valid scene`);
             } else if (scenePathType === ScenePathType.Page) {
                 await this._setMainViewScenePath(scenePath);
+
             } else if (scenePathType === ScenePathType.Dir) {
                 const validScenePath = makeValidScenePath(this.displayer, scenePath);
                 if (validScenePath) {
@@ -875,6 +913,7 @@ export class AppManager {
                     this.dispatchSetMainViewScenePath(scenePath);
                 }
             } else {
+                this.Logger && this.Logger.error(`[WindowManager]: ${index} not valid index`);
                 throw new Error(`[WindowManager]: ${index} not valid index`);
             }
         }
@@ -961,3 +1000,4 @@ export class AppManager {
         this._resolveTimer = undefined;
     }
 }
+

package/src/AttributesDelegate.ts

@@ -7,6 +7,7 @@ import type { Cursor } from "./Cursor/Cursor";
 import { getExtendClass } from "./Utils/extendClass";
 import type { ExtendClass } from "./Utils/extendClass";
 import type { NotMinimizedBoxState, TeleBoxState } from "@netless/telebox-insider";
+import { LocalConsole } from "./Utils/log";
 
 export enum Fields {
     Apps = "apps",
@@ -54,6 +55,7 @@ export type ISize = Size & { id: string };
 
 export class AttributesDelegate {
     static readonly kind = "AttributesDelegate";
+    private setMainViewCameraConsole = new LocalConsole("setMainViewCamera", 30);
     constructor(private context: StoreContext) {}
 
     public setContext(context: StoreContext) {
@@ -210,6 +212,7 @@ export class AttributesDelegate {
     }
 
     public setMainViewCamera(camera: ICamera) {
+        this.setMainViewCameraConsole.log(JSON.stringify(camera));
         this.context.safeSetAttributes({ [Fields.MainViewCamera]: { ...camera } });
     }
 

package/src/ContainerResizeObserver.ts

@@ -3,12 +3,15 @@ import { isFunction } from "lodash";
 import { WindowManager } from "./index";
 import type { EmitterType } from "./InternalEmitter";
 import type { UnsubscribeFn } from "emittery";
+import { LocalConsole } from "./Utils/log";
 
 const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 
 export class ContainerResizeObserver {
     private containerResizeObserver?: ResizeObserver;
     private disposer?: UnsubscribeFn;
+    
+    private updateSizerLocalConsole = new LocalConsole("updateSizer", 30);
 
     constructor(private emitter: EmitterType) {}
 
@@ -28,19 +31,19 @@ export class ContainerResizeObserver {
         sizer: HTMLElement,
         wrapper: HTMLDivElement
     ) {
-        this.updateSizer(container.getBoundingClientRect(), sizer, wrapper);
+        this.updateSizer(container.getBoundingClientRect(), sizer, wrapper, 'observePlaygroundSize');
 
         this.containerResizeObserver = new ResizeObserver(entries => {
             const containerRect = entries[0]?.contentRect;
             if (containerRect) {
-                this.updateSizer(containerRect, sizer, wrapper);
+                this.updateSizer(containerRect, sizer, wrapper, 'containerResizeObserver');
                 this.emitter.emit("playgroundSizeChange", containerRect);
             }
         });
 
         this.disposer = this.emitter.on("containerSizeRatioUpdate", () => {
             const containerRect = container.getBoundingClientRect();
-            this.updateSizer(containerRect, sizer, wrapper);
+            this.updateSizer(containerRect, sizer, wrapper, 'containerSizeRatioUpdate');
             this.emitter.emit("playgroundSizeChange", containerRect);
         });
 
@@ -50,7 +53,8 @@ export class ContainerResizeObserver {
     public updateSizer(
         { width, height }: DOMRectReadOnly,
         sizer: HTMLElement,
-        wrapper: HTMLDivElement
+        wrapper: HTMLDivElement,
+        origin?: string
     ) {
         if (width && height) {
             if (height / width > WindowManager.containerSizeRatio) {
@@ -62,6 +66,13 @@ export class ContainerResizeObserver {
             }
             wrapper.style.width = `${width}px`;
             wrapper.style.height = `${height}px`;
+            const wrapperRect = wrapper.getBoundingClientRect();
+            this.updateSizerLocalConsole.log(`from ${origin}, traget size: ${JSON.stringify({ width, height })}, wrapperRect: ${wrapperRect.width} ${wrapperRect.height}`);
+            this.emitter.emit("wrapperRectChange", {
+                width: wrapperRect.width,
+                height: wrapperRect.height,
+                origin,
+            });
         }
     }
 

package/src/InternalEmitter.ts

@@ -29,6 +29,7 @@ export type EmitterEvent = {
     changePageState: undefined;
     writableChange: boolean;
     containerSizeRatioUpdate: number;
+    wrapperRectChange: { width: number; height: number; origin?: string };
     boxesStatusChange: Map<string, TeleBoxState>;
     lastNotMinimizedBoxesStatusChange: Map<string, NotMinimizedBoxState>;
 };

package/src/Utils/RoomHacker.ts

@@ -33,7 +33,28 @@ export const replaceRoomFunction = (room: Room | Player, manager: WindowManager)
                 return manager.canRedoSteps;
             },
         });
-
+        const _scalePptToFit = room.scalePptToFit;
+        room.scalePptToFit = (...args) => {
+            _scalePptToFit.call(room, ...args);
+            if (manager.appManager?.mainViewProxy) {
+                manager.appManager.mainViewProxy.setCameraAndSize();
+            }
+        };
+        const _putScenes = room.putScenes;
+        room.putScenes = (...args) => {
+            const [path, scenes] = args;
+            const currentScenePath = manager.mainView.focusScenePath;
+            if (currentScenePath && path && scenes) {
+                console.log("[window-manager] putScenes " + JSON.stringify(args));
+                for (const scene of scenes) {
+                    if (`${path}${scene.name}` === currentScenePath) {
+                        console.error(`[window-manager] putScenes: scene name can not be the same as the current scene path: ${currentScenePath}`);
+                        return;
+                    }
+                }
+            }
+            return _putScenes.call(room, ...args);
+        };
         room.moveCamera = (camera: Camera) => manager.moveCamera(camera);
         room.moveCameraToContain = (...args) => manager.moveCameraToContain(...args);
         room.convertToPointInWorld = (...args) => manager.mainView.convertToPointInWorld(...args);

package/src/Utils/log.ts

@@ -5,3 +5,40 @@ export const log = (...args: any[]): void => {
         console.log(`[WindowManager]:`, ...args);
     }
 };
+
+/**
+ * 按 `[window-manager][tagName]` 前缀输出。
+ * 若传入 `debounceTime`（毫秒）：窗口内多次 `log` 不立即输出，只在连续停止调用满 `debounceTime` 后输出**最后一次**的参数（尾部 debounce）。
+ */
+export class LocalConsole {
+    private pendingArgs: unknown[] | null = null;
+    private flushTimer: ReturnType<typeof setTimeout> | null = null;
+
+    constructor(
+        private readonly name: string,
+        private readonly debounceTime?: number,
+    ) {}
+
+    private flush(): void {
+        this.flushTimer = null;
+        const args = this.pendingArgs;
+        this.pendingArgs = null;
+        if (args === null) {
+            return;
+        }
+        console.log(`[window-manager][${this.name}]: ${args.join(", ")}`);
+    }
+
+    log(...args: unknown[]): void {
+        const ms = this.debounceTime;
+        if (ms != null && ms > 0) {
+            this.pendingArgs = args;
+            if (this.flushTimer != null) {
+                clearTimeout(this.flushTimer);
+            }
+            this.flushTimer = setTimeout(() => this.flush(), ms);
+            return;
+        }
+        console.log(`[window-manager][${this.name}]: ${args.join(", ")}`);
+    }
+}

package/src/View/MainView.ts

@@ -9,6 +9,7 @@ import { SideEffectManager } from "side-effect-manager";
 import type { Camera, Room, Size, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 import { Events } from "../constants";
+import { LocalConsole } from "../Utils/log";
 
 export class MainViewProxy {
     /** Refresh the view's camera in an interval of 1.5s. */
@@ -17,12 +18,19 @@ export class MainViewProxy {
     private scale?: number;
     private started = false;
     private mainViewIsAddListener = false;
+    private isForcingMainViewDivElement = false;
+    private wrapperRectWorkaroundFrame = 0;
+    private pendingWrapperRectChange?: { width: number; height: number; origin?: string };
     private mainView: View;
     private store = this.manager.store;
     private viewMode = this.manager.windowManger.viewMode;
 
     private sideEffectManager = new SideEffectManager();
 
+    private playgroundSizeChangeListenerLocalConsole = new LocalConsole("playgroundSizeChangeListener", 30);
+    private sizeUpdatedLocalConsole = new LocalConsole("sizeUpdated", 30);
+    private cameraUpdatedLocalConsole = new LocalConsole("cameraUpdated", 30);
+
     constructor(private manager: AppManager) {
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
@@ -33,6 +41,15 @@ export class MainViewProxy {
             this.startListenWritableChange();
         });
         const playgroundSizeChangeListener = () => {
+            this.playgroundSizeChangeListenerLocalConsole.log(
+                JSON.stringify(this.mainView.camera),
+                JSON.stringify(this.mainView.size), 
+                JSON.stringify(this.mainViewSize), 
+                JSON.stringify(this.mainViewCamera),
+                window.outerHeight, window.outerWidth, 
+                window.visualViewport?.width ?? "null", window.visualViewport?.height ?? "null",
+                window.visualViewport?.offsetLeft ?? "null", window.visualViewport?.offsetTop ?? "null",
+            );
             this.sizeChangeHandler(this.mainViewSize);
         };
         this.sideEffectManager.add(() => {
@@ -41,6 +58,9 @@ export class MainViewProxy {
         this.sideEffectManager.add(() => {
             return internalEmitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
         });
+        this.sideEffectManager.add(() => {
+            return internalEmitter.on("wrapperRectChange", this.onWrapperRectChange);
+        });
         this.sideEffectManager.add(() => {
             return internalEmitter.on("startReconnect", () => {
                 if (!this.didRelease) {
@@ -96,13 +116,85 @@ export class MainViewProxy {
         this.moveCamera(this.mainViewCamera);
     }
 
+    private onWrapperRectChange = (payload: { width: number; height: number; origin?: string }) => {
+        this.pendingWrapperRectChange = payload;
+        if (this.wrapperRectWorkaroundFrame) {
+            cancelAnimationFrame(this.wrapperRectWorkaroundFrame);
+        }
+        this.wrapperRectWorkaroundFrame = requestAnimationFrame(this.runWrapperRectWorkaround);
+    };
+
+    private runWrapperRectWorkaround = () => {
+        this.wrapperRectWorkaroundFrame = 0;
+        const payload = this.pendingWrapperRectChange;
+        const element = this.mainView.divElement;
+        this.pendingWrapperRectChange = undefined;
+        if (!payload || !element) return;
+
+        const rect = element.getBoundingClientRect();
+        const observedSize = { width: rect.width, height: rect.height };
+        const wrapperMatchesDom =
+            Math.abs(payload.width - observedSize.width) <= 0.5 &&
+            Math.abs(payload.height - observedSize.height) <= 0.5;
+        const viewIsStale =
+            Math.abs(this.mainView.size.width - observedSize.width) > 0.5 ||
+            Math.abs(this.mainView.size.height - observedSize.height) > 0.5;
+
+        if (wrapperMatchesDom && viewIsStale) {
+            this.forceSyncMainViewDivElement(
+                `wrapperRectChange:${payload.origin || "unknown"}`,
+                observedSize,
+                element
+            );
+        }
+    };
+
+    private forceSyncMainViewDivElement(
+        reason: string,
+        observedSize: Pick<Size, "width" | "height">,
+        element: HTMLDivElement
+    ) {
+        const { width: viewWidth, height: viewHeight } = this.mainView.size;
+        if (
+            Math.abs(viewWidth - observedSize.width) <= 0.5 &&
+            Math.abs(viewHeight - observedSize.height) <= 0.5
+        ) {
+            return;
+        }
+        if (this.isForcingMainViewDivElement) {
+            console.log("[window-manager] skipForceSyncMainViewDivElement " + JSON.stringify({
+                reason,
+                observedSize,
+                viewSize: this.mainView.size,
+            }));
+            return;
+        }
+        this.isForcingMainViewDivElement = true;
+        this.mainView.divElement = null;
+        this.mainView.divElement = element;
+        queueMicrotask(() => {
+            const rect = element.getBoundingClientRect();
+            console.log("[window-manager] forceSyncMainViewDivElementResult " + JSON.stringify({
+                reason,
+                viewSize: this.mainView.size,
+                rect: { width: rect.width, height: rect.height },
+            }));
+            this.isForcingMainViewDivElement = false;
+        });
+    }
+
     public start() {
+        console.log("[window-manager] start attributes size:" + JSON.stringify(this.mainViewSize));
         this.sizeChangeHandler(this.mainViewSize);
         if (this.started) return;
         this.addCameraListener();
         this.addCameraReaction();
         if (this.manager.room) this.syncMainView(this.manager.room);
         this.started = true;
+        if(this.mainView.focusScenePath) {
+            this.manager.windowManger.onMainViewScenePathChangeHandler(this.mainView.focusScenePath);
+        }
+        console.log("[window-manager] start end mainView size:" + JSON.stringify(this.mainView.size));
     }
 
     public addCameraReaction = () => {
@@ -120,6 +212,7 @@ export class MainViewProxy {
             () => this.mainViewCamera,
             camera => {
                 if (camera && camera.id !== this.manager.uid) {
+                    console.log("[window-manager] cameraReaction  " + JSON.stringify(camera) + JSON.stringify(this.mainViewSize));
                     this.moveCameraToContian(this.mainViewSize);
                     this.moveCamera(camera);
                 }
@@ -132,12 +225,15 @@ export class MainViewProxy {
         if (size) {
             this.moveCameraToContian(size);
             this.moveCamera(this.mainViewCamera);
+            console.log("[window-manager] sizeChangeHandler current size and camera" + JSON.stringify(size) + JSON.stringify(this.mainViewCamera) +
+            JSON.stringify(this.mainView.camera) + JSON.stringify(this.mainView.size));
         }
         this.ensureMainViewSize();
     }, 30);
 
     public onUpdateContainerSizeRatio = () => {
         const size = this.store.getMainViewSize();
+        console.log("[window-manager] onUpdateContainerSizeRatio  " + JSON.stringify(size));
         this.sizeChangeHandler(size);
     };
 
@@ -230,18 +326,18 @@ export class MainViewProxy {
 
     private addCameraListener() {
         this.view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
-        this.view.callbacks.on("onCameraUpdated", this.onCameraOrSizeUpdated);
-        this.view.callbacks.on("onSizeUpdated", this.onCameraOrSizeUpdated);
+        this.view.callbacks.on("onCameraUpdated", this.onCameraUpdated);
+        this.view.callbacks.on("onSizeUpdated", this.onSizeUpdated);
     }
 
     private removeCameraListener() {
         this.view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
-        this.view.callbacks.off("onCameraUpdated", this.onCameraOrSizeUpdated);
-        this.view.callbacks.off("onSizeUpdated", this.onCameraOrSizeUpdated);
+        this.view.callbacks.off("onCameraUpdated", this.onCameraUpdated);
+        this.view.callbacks.off("onSizeUpdated", this.onSizeUpdated);
     }
 
     private _syncMainViewTimer = 0;
-    private onCameraOrSizeUpdated = () => {
+    private handleCameraOrSizeUpdated = () => {
         callbacks.emit("cameraStateChange", this.cameraState);
         // sdk >= 2.16.43 的 syncMainView() 可以写入当前 main view 的 camera, 以修复复制粘贴元素的位置
         // 注意到这个操作会发送信令，应当避免频繁调用
@@ -252,6 +348,16 @@ export class MainViewProxy {
         this.ensureMainViewSize();
     };
 
+    private onCameraUpdated = (camera: Camera) => {
+        this.cameraUpdatedLocalConsole.log(JSON.stringify(camera));
+        this.handleCameraOrSizeUpdated();
+    };
+
+    private onSizeUpdated = (size: Size) => {
+        this.sizeUpdatedLocalConsole.log(JSON.stringify(size));
+        this.handleCameraOrSizeUpdated();
+    };
+
     private ensureMainViewSize() {
         if (
             (!this.mainViewSize ||
@@ -309,6 +415,11 @@ export class MainViewProxy {
     };
 
     public destroy() {
+        console.log("[window-manager] destroy  ");
+        if (this.wrapperRectWorkaroundFrame) {
+            cancelAnimationFrame(this.wrapperRectWorkaroundFrame);
+            this.wrapperRectWorkaroundFrame = 0;
+        }
         this.removeMainViewListener();
         this.stop();
         this.sideEffectManager.flushAll();