@netless/window-manager 1.0.13-test.9 → 1.0.13

package/dist/index.mjs

@@ -352,7 +352,6 @@ const setScenePath = (room, scenePath) => {
   if (room && room.isWritable) {
     if (room.state.sceneState.scenePath !== scenePath) {
       const nextScenePath = scenePath === "/" ? "" : scenePath;
-      console.log("[window-manager] real setScenePath for current room  ", nextScenePath);
       room.setScenePath(nextScenePath);
     }
   }
@@ -464,7 +463,6 @@ class AppListeners {
             break;
           }
           case Events.SetMainViewScenePath: {
-            console.log("[window-manager] mainMagixEventListener  " + JSON.stringify(data.payload));
             this.setMainViewScenePathHandler(data.payload);
             break;
           }
@@ -5626,7 +5624,6 @@ class BoxManager {
     const rect = (_a = this.mainView.divElement) == null ? void 0 : _a.getBoundingClientRect();
     if (rect && rect.width > 0 && rect.height > 0) {
       const containerRect = { x: 0, y: 0, width: rect.width, height: rect.height };
-      console.log("[window-manager] updateManagerRect" + JSON.stringify(containerRect) + "mainView" + this.mainView.size);
       this.teleBoxManager.setContainerRect(containerRect);
       this.context.notifyContainerRectUpdate(this.teleBoxManager.containerRect);
     }
@@ -5693,6 +5690,88 @@ class BoxManager {
   }
 }
 BoxManager.kind = "BoxManager";
+function formatAttributesLogObjectKey(key) {
+  return /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key) ? key : JSON.stringify(key);
+}
+function stringifyForAttributesLog(value, seen) {
+  if (value === void 0) {
+    return "undefined";
+  }
+  if (value === null) {
+    return "null";
+  }
+  const t2 = typeof value;
+  if (t2 === "bigint") {
+    return `${value}n`;
+  }
+  if (t2 === "symbol") {
+    return String(value);
+  }
+  if (t2 === "function") {
+    const fn = value;
+    return `[Function ${fn.name || "anonymous"}]`;
+  }
+  if (t2 !== "object") {
+    return t2 === "string" ? JSON.stringify(value) : String(value);
+  }
+  const obj = value;
+  if (seen == null ? void 0 : seen.has(obj)) {
+    return "[Circular]";
+  }
+  const nextSeen = seen != null ? seen : /* @__PURE__ */ new WeakSet();
+  nextSeen.add(obj);
+  try {
+    if (Array.isArray(value)) {
+      return `[${Array.from(
+        value,
+        (item) => stringifyForAttributesLog(item, nextSeen)
+      ).join(",")}]`;
+    }
+    if (value instanceof Date) {
+      return JSON.stringify(value.toISOString());
+    }
+    if (value instanceof RegExp) {
+      return String(value);
+    }
+    const keys = Object.keys(value);
+    const pairs = keys.map((k2) => {
+      let v2;
+      try {
+        v2 = value[k2];
+      } catch {
+        return `${formatAttributesLogObjectKey(k2)}:[Threw]`;
+      }
+      return `${formatAttributesLogObjectKey(k2)}:${stringifyForAttributesLog(v2, nextSeen)}`;
+    });
+    return `{${pairs.join(",")}}`;
+  } catch {
+    return "[Unserializable]";
+  } finally {
+    nextSeen.delete(obj);
+  }
+}
+function isShallowMergeAttributesRecord(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value) && !(value instanceof Date) && !(value instanceof RegExp);
+}
+const ARGUS_LOG_INFO_MAX_LENGTH = 1500;
+function truncateArgusLogInfoMessage(message) {
+  if (message.length <= ARGUS_LOG_INFO_MAX_LENGTH) {
+    return message;
+  }
+  const ellipsis = "\u2026";
+  return message.slice(0, ARGUS_LOG_INFO_MAX_LENGTH - ellipsis.length) + ellipsis;
+}
+function keysPathEqual(a2, b2) {
+  if (a2.length !== b2.length) {
+    return false;
+  }
+  for (let i2 = 0; i2 < a2.length; i2++) {
+    if (a2[i2] !== b2[i2]) {
+      return false;
+    }
+  }
+  return true;
+}
 const log = (...args) => {
   if (WindowManager.debug) {
     console.log(`[WindowManager]:`, ...args);
@@ -5726,6 +5805,158 @@ class LocalConsole {
     }
     console.log(`[window-manager][${this.name}]: ${args.join(", ")}`);
   }
+  destroy() {
+    if (this.flushTimer != null) {
+      clearTimeout(this.flushTimer);
+      this.flushTimer = null;
+    }
+    this.pendingArgs = null;
+  }
+}
+class ArgusLog {
+  constructor(logger, name, debounceTime) {
+    this.logger = logger;
+    this.name = name;
+    this.debounceTime = debounceTime;
+    this.pendingArgs = null;
+    this.flushTimer = null;
+    this.pendingShallowMerge = null;
+    this.shallowMergeTimer = null;
+    this.pendingUpdateSegments = null;
+    this.updateMergeTimer = null;
+  }
+  emitInfo(message) {
+    this.logger.info(truncateArgusLogInfoMessage(message));
+  }
+  flush() {
+    this.flushTimer = null;
+    const args = this.pendingArgs;
+    this.pendingArgs = null;
+    if (args === null) {
+      return;
+    }
+    this.emitInfo(`[WindowManager][${this.name}]: ${args.join(", ")}`);
+  }
+  flushShallowMerge() {
+    this.shallowMergeTimer = null;
+    const p2 = this.pendingShallowMerge;
+    this.pendingShallowMerge = null;
+    if (p2 === null) {
+      return;
+    }
+    const body = p2.kind === "record" ? stringifyForAttributesLog(p2.data) : stringifyForAttributesLog(p2.value);
+    this.emitInfo(`[WindowManager][${this.name}]: ${p2.label} ${body}`);
+    if (p2.kind === "record") {
+      for (const k2 of Object.keys(p2.data)) {
+        delete p2.data[k2];
+      }
+    }
+  }
+  log(...args) {
+    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;
+    }
+    this.emitInfo(`[WindowManager][${this.name}]: ${args.join(", ")}`);
+  }
+  logDebouncedShallowMerge(label, payload) {
+    var _a;
+    const ms = this.debounceTime;
+    const debounced = ms != null && ms > 0;
+    const emit = (text2) => {
+      this.emitInfo(`[WindowManager][${this.name}]: ${label} ${text2}`);
+    };
+    if (!debounced) {
+      emit(stringifyForAttributesLog(payload));
+      return;
+    }
+    if (this.shallowMergeTimer != null) {
+      clearTimeout(this.shallowMergeTimer);
+      this.shallowMergeTimer = null;
+    }
+    if (isShallowMergeAttributesRecord(payload)) {
+      if (((_a = this.pendingShallowMerge) == null ? void 0 : _a.kind) === "record") {
+        this.pendingShallowMerge = {
+          kind: "record",
+          label,
+          data: { ...this.pendingShallowMerge.data, ...payload }
+        };
+      } else {
+        this.pendingShallowMerge = { kind: "record", label, data: { ...payload } };
+      }
+    } else {
+      this.pendingShallowMerge = { kind: "atom", label, value: payload };
+    }
+    this.shallowMergeTimer = setTimeout(() => this.flushShallowMerge(), ms);
+  }
+  flushUpdateAttributesMerge() {
+    this.updateMergeTimer = null;
+    const segments = this.pendingUpdateSegments;
+    this.pendingUpdateSegments = null;
+    if (segments === null || segments.length === 0) {
+      return;
+    }
+    const parts = segments.map(
+      (s2) => `${s2.keys.join(", ")} ${stringifyForAttributesLog(s2.value)}`
+    );
+    this.emitInfo(`[WindowManager][${this.name}]: safeUpdateAttributes ${parts.join(" | ")}`);
+    for (const s2 of segments) {
+      s2.keys.length = 0;
+      s2.value = void 0;
+    }
+    segments.length = 0;
+  }
+  logDebouncedUpdateAttributes(keys, value) {
+    const ms = this.debounceTime;
+    const debounced = ms != null && ms > 0;
+    const keysCopy = [...keys];
+    if (!debounced) {
+      this.emitInfo(
+        `[WindowManager][${this.name}]: safeUpdateAttributes ${keysCopy.join(", ")} ${stringifyForAttributesLog(value)}`
+      );
+      return;
+    }
+    if (this.updateMergeTimer != null) {
+      clearTimeout(this.updateMergeTimer);
+      this.updateMergeTimer = null;
+    }
+    if (this.pendingUpdateSegments === null || this.pendingUpdateSegments.length === 0) {
+      this.pendingUpdateSegments = [{ keys: keysCopy, value }];
+    } else {
+      const last = this.pendingUpdateSegments[this.pendingUpdateSegments.length - 1];
+      if (keysPathEqual(last.keys, keysCopy)) {
+        last.value = value;
+      } else {
+        this.pendingUpdateSegments.push({ keys: keysCopy, value });
+      }
+    }
+    this.updateMergeTimer = setTimeout(() => this.flushUpdateAttributesMerge(), ms);
+  }
+  destroy() {
+    if (this.flushTimer != null) {
+      clearTimeout(this.flushTimer);
+      this.flushTimer = null;
+    }
+    if (this.shallowMergeTimer != null) {
+      clearTimeout(this.shallowMergeTimer);
+      this.shallowMergeTimer = null;
+    }
+    if (this.updateMergeTimer != null) {
+      clearTimeout(this.updateMergeTimer);
+      this.updateMergeTimer = null;
+    }
+    this.pendingArgs = null;
+    this.pendingShallowMerge = null;
+    this.pendingUpdateSegments = null;
+  }
+  dispose() {
+    this.destroy();
+  }
 }
 const setupWrapper = (root) => {
   const playground = document.createElement("div");
@@ -7034,7 +7265,6 @@ var Fields = /* @__PURE__ */ ((Fields2) => {
 class AttributesDelegate {
   constructor(context) {
     this.context = context;
-    this.setMainViewCameraConsole = new LocalConsole("setMainViewCamera", 50);
     this.setAppFocus = (appId, focus) => {
       if (focus) {
         this.context.safeSetAttributes({ ["focus"]: appId });
@@ -7160,11 +7390,9 @@ class AttributesDelegate {
     return this.attributes["boxState"];
   }
   setMainViewScenePath(scenePath) {
-    console.log("[window-manager] setMainViewScenePath  ", scenePath);
     this.context.safeSetAttributes({ _mainScenePath: scenePath });
   }
   setMainViewSceneIndex(index2) {
-    console.log("[window-manager] setMainViewSceneIndex  ", index2);
     this.context.safeSetAttributes({ _mainSceneIndex: index2 });
   }
   getMainViewCamera() {
@@ -7174,19 +7402,16 @@ class AttributesDelegate {
     return get(this.attributes, ["mainViewSize"]);
   }
   setMainViewCamera(camera) {
-    this.setMainViewCameraConsole.log(JSON.stringify(camera));
     this.context.safeSetAttributes({ ["mainViewCamera"]: { ...camera } });
   }
   setMainViewSize(size2) {
     if (size2.width === 0 || size2.height === 0)
       return;
-    console.log("[window-manager] setMainViewSize  ", JSON.stringify(size2));
     this.context.safeSetAttributes({ ["mainViewSize"]: { ...size2 } });
   }
   setMainViewCameraAndSize(camera, size2) {
     if (size2.width === 0 || size2.height === 0)
       return;
-    console.log("[window-manager] setMainViewCameraAndSize  ", JSON.stringify(camera), JSON.stringify(size2));
     this.context.safeSetAttributes({
       ["mainViewCamera"]: { ...camera },
       ["mainViewSize"]: { ...size2 }
@@ -7430,13 +7655,13 @@ const _AppProxy = class {
     this.manager.safeUpdateAttributes(["apps", this.id, Fields.FullPath], path);
   }
   async baseInsertApp(skipUpdate = false, boxStatus = TELE_BOX_STATE.Normal) {
-    var _a, _b, _c;
+    var _a;
     const params = this.params;
     if (!params.kind) {
-      (_a = this.Logger) == null ? void 0 : _a.error(`[WindowManager]: kind require`);
+      this.Logger && this.Logger.error(`[WindowManager]: kind require`);
       throw new Error("[WindowManager]: kind require");
     }
-    const appImpl = await ((_b = appRegister.appClasses.get(params.kind)) == null ? void 0 : _b());
+    const appImpl = await ((_a = appRegister.appClasses.get(params.kind)) == null ? void 0 : _a());
     const appParams = appRegister.registered.get(params.kind);
     if (appImpl) {
       await this.setupApp(
@@ -7451,7 +7676,7 @@ const _AppProxy = class {
         params.isDragContent
       );
     } else {
-      (_c = this.Logger) == null ? void 0 : _c.error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
+      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");
@@ -7465,7 +7690,7 @@ const _AppProxy = class {
     return (_a = this.boxManager) == null ? void 0 : _a.getBox(this.id);
   }
   async setupApp(appId, skipUpdate, app, options, appOptions, boxStatus, forceTop, forceNormal, isDragContent) {
-    var _a, _b;
+    var _a;
     log("setupApp", appId, app, options, boxStatus, forceTop, forceNormal, isDragContent);
     if (!this.boxManager) {
       throw new BoxManagerNotFoundError();
@@ -7489,8 +7714,7 @@ const _AppProxy = class {
           currentMainViewScenePath = this.manager.mainView.scenePath;
         }
         setTimeout(async () => {
-          var _a3;
-          (_a3 = this.Logger) == null ? void 0 : _a3.info(`[WindowManager]: setup app ${this.kind}, appId: ${appId}`);
+          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 });
@@ -7525,7 +7749,7 @@ const _AppProxy = class {
         this.boxManager.focusBox({ appId }, false);
       }
     } catch (error) {
-      (_b = this.Logger) == null ? void 0 : _b.error(`[WindowManager]: app setup error: ${error.message}`);
+      this.Logger && this.Logger.error(`[WindowManager]: app setup error: ${error.message}`);
       throw new Error(`[WindowManager]: app setup error: ${error.message}`);
     }
   }
@@ -7696,7 +7920,7 @@ const _AppProxy = class {
     }
   }
   async destroy(needCloseBox, cleanAttrs, skipUpdate, error) {
-    var _a, _b, _c;
+    var _a;
     if (this.status === "destroyed")
       return;
     this.status = "destroyed";
@@ -7704,13 +7928,13 @@ const _AppProxy = class {
       await appRegister.notifyApp(this.kind, "destroy", { appId: this.id });
       await this.appEmitter.emit("destroy", { error });
     } catch (error2) {
-      (_a = this.Logger) == null ? void 0 : _a.error(`[WindowManager]: notifyApp error: ${error2.message}`);
+      this.Logger && this.Logger.error(`[WindowManager]: notifyApp error: ${error2.message}`);
       console.error("[WindowManager]: notifyApp error", error2.message, error2.stack);
     }
     this.appEmitter.clearListeners();
     internalEmitter.emit(`destroy-${this.id}`, { error });
     if (needCloseBox) {
-      (_b = this.boxManager) == null ? void 0 : _b.closeBox(this.id, skipUpdate);
+      (_a = this.boxManager) == null ? void 0 : _a.closeBox(this.id, skipUpdate);
     }
     if (cleanAttrs) {
       this.store.cleanAppAttributes(this.id);
@@ -7726,7 +7950,7 @@ const _AppProxy = class {
     this.manager.refresher.remove(this.stateKey);
     this.manager.refresher.remove(`${this.id}-fullPath`);
     this._prevFullPath = void 0;
-    (_c = this.Logger) == null ? void 0 : _c.info(`[WindowManager]: destroy app ${this.kind} appId: ${this.id}`);
+    this.Logger && this.Logger.info(`[WindowManager]: destroy app ${this.kind} appId: ${this.id}`);
   }
   close() {
     return this.destroy(true, true, false);
@@ -7784,17 +8008,21 @@ const setDefaultCameraBound = (view) => {
     minContentMode: () => 0.1
   });
 };
-window.___local_log = window.___local_log || /* @__PURE__ */ new Set();
 class MainViewProxy {
   constructor(manager) {
     this.manager = manager;
     this.polling = false;
     this.started = false;
     this.mainViewIsAddListener = false;
+    this.isForcingMainViewDivElement = false;
+    this.wrapperRectWorkaroundFrame = 0;
     this.store = this.manager.store;
     this.viewMode = this.manager.windowManger.viewMode;
     this.sideEffectManager = new o$2();
-    this.playgroundSizeChangeListenerLocalConsole = new LocalConsole("playgroundSizeChangeListener", 30);
+    this.playgroundSizeChangeListenerLocalConsole = new LocalConsole("playgroundSizeChangeListener", 100);
+    this.sizeUpdatedLocalConsole = new LocalConsole("sizeUpdated", 100);
+    this.cameraUpdatedLocalConsole = new LocalConsole("cameraUpdated", 100);
+    this.cameraReactionLocalConsole = new LocalConsole("cameraReaction", 100);
     this.syncCamera = () => {
       if (!this.polling || this.viewMode !== ViewMode.Broadcaster)
         return;
@@ -7814,6 +8042,32 @@ class MainViewProxy {
         });
       });
     };
+    this.onWrapperRectChange = (payload) => {
+      this.pendingWrapperRectChange = payload;
+      if (this.wrapperRectWorkaroundFrame) {
+        cancelAnimationFrame(this.wrapperRectWorkaroundFrame);
+      }
+      this.wrapperRectWorkaroundFrame = requestAnimationFrame(this.runWrapperRectWorkaround);
+    };
+    this.runWrapperRectWorkaround = () => {
+      this.wrapperRectWorkaroundFrame = 0;
+      const payload = this.pendingWrapperRectChange;
+      const element2 = this.mainView.divElement;
+      this.pendingWrapperRectChange = void 0;
+      if (!payload || !element2)
+        return;
+      const rect = element2.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,
+          element2
+        );
+      }
+    };
     this.addCameraReaction = () => {
       this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
     };
@@ -7822,9 +8076,9 @@ 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);
+            this.cameraReactionLocalConsole.log(`camera: ${JSON.stringify(camera)}, current size: ${JSON.stringify(this.mainViewSize)}`);
           }
         },
         { fireImmediately: true }
@@ -7834,7 +8088,7 @@ class MainViewProxy {
       if (size2) {
         this.moveCameraToContian(size2);
         this.moveCamera(this.mainViewCamera);
-        console.log("[window-manager] sizeChangeHandler  current size and camera" + JSON.stringify(size2) + JSON.stringify(this.mainViewCamera) + JSON.stringify(this.mainView.camera) + JSON.stringify(this.mainView.size));
+        console.log("[window-manager] sizeChangeHandler current size and camera" + JSON.stringify(size2) + JSON.stringify(this.mainViewCamera) + JSON.stringify(this.mainView.camera) + JSON.stringify(this.mainView.size));
       }
       this.ensureMainViewSize();
     }, 30);
@@ -7858,7 +8112,7 @@ class MainViewProxy {
       this.store.setMainViewSize({ ...size2, id: this.manager.uid });
     }, 50);
     this._syncMainViewTimer = 0;
-    this.onCameraOrSizeUpdated = () => {
+    this.handleCameraOrSizeUpdated = () => {
       callbacks$1.emit("cameraStateChange", this.cameraState);
       if (this.manager.room && this.manager.room.syncMainView) {
         clearTimeout(this._syncMainViewTimer);
@@ -7866,9 +8120,16 @@ class MainViewProxy {
       }
       this.ensureMainViewSize();
     };
+    this.onCameraUpdated = (camera) => {
+      this.cameraUpdatedLocalConsole.log(JSON.stringify(camera));
+      this.handleCameraOrSizeUpdated();
+    };
+    this.onSizeUpdated = (size2) => {
+      this.sizeUpdatedLocalConsole.log(JSON.stringify(size2));
+      this.handleCameraOrSizeUpdated();
+    };
     this.syncMainView = (room) => {
       if (room.isWritable) {
-        console.log("[window-manager] syncMainView  ");
         room.syncMainView(this.mainView);
       }
     };
@@ -7905,6 +8166,9 @@ 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) {
@@ -7935,8 +8199,52 @@ class MainViewProxy {
     this.moveCameraToContian(this.mainViewSize);
     this.moveCamera(this.mainViewCamera);
   }
+  forceSyncMainViewDivElement(reason, observedSize, element2) {
+    var _a, _b;
+    const { width: viewWidth, height: viewHeight } = this.mainView.size;
+    let targetElement = element2;
+    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;
+    try {
+      const mainView = this.mainView;
+      const screen = mainView.screen;
+      const resizeObserver = screen == null ? void 0 : screen.resizeObserver;
+      if (typeof (screen == null ? void 0 : screen.refreshSize) === "function") {
+        console.log(
+          "[window-manager] forceSyncMainViewDivElement observerReset " + JSON.stringify({
+            reason,
+            viewSize: this.mainView.size,
+            observedSize
+          })
+        );
+        (_a = resizeObserver == null ? void 0 : resizeObserver.disconnect) == null ? void 0 : _a.call(resizeObserver);
+        screen.refreshSize(observedSize.width, observedSize.height);
+        (_b = resizeObserver == null ? void 0 : resizeObserver.observe) == null ? void 0 : _b.call(resizeObserver, element2);
+      }
+    } finally {
+      queueMicrotask(() => {
+        const rect = targetElement.getBoundingClientRect();
+        console.log("[window-manager] forceSyncMainViewDivElementResult " + JSON.stringify({
+          reason,
+          viewSize: this.mainView.size,
+          rect: { width: rect.width, height: rect.height }
+        }));
+        this.isForcingMainViewDivElement = false;
+      });
+    }
+  }
   start() {
-    console.log("[window-manager] start  " + JSON.stringify(this.mainViewSize));
+    console.log("[window-manager] start attributes size:" + JSON.stringify(this.mainViewSize));
     this.sizeChangeHandler(this.mainViewSize);
     if (this.started)
       return;
@@ -7945,6 +8253,10 @@ class MainViewProxy {
     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));
   }
   setCameraAndSize() {
     const camera = { ...this.mainView.camera, id: this.manager.uid };
@@ -8018,13 +8330,13 @@ class MainViewProxy {
   }
   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);
   }
   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);
   }
   ensureMainViewSize() {
     if ((!this.mainViewSize || this.mainViewSize.width === 0 || this.mainViewSize.height === 0) && this.mainView.size.width > 0 && this.mainView.size.height > 0) {
@@ -8064,6 +8376,15 @@ class MainViewProxy {
     this.started = false;
   }
   destroy() {
+    console.log("[window-manager] destroy  ");
+    if (this.wrapperRectWorkaroundFrame) {
+      cancelAnimationFrame(this.wrapperRectWorkaroundFrame);
+      this.wrapperRectWorkaroundFrame = 0;
+    }
+    this.playgroundSizeChangeListenerLocalConsole.destroy();
+    this.sizeUpdatedLocalConsole.destroy();
+    this.cameraUpdatedLocalConsole.destroy();
+    this.cameraReactionLocalConsole.destroy();
     this.removeMainViewListener();
     this.stop();
     this.sideEffectManager.flushAll();
@@ -8153,7 +8474,7 @@ class AppManager {
       var _a, _b;
       const { scenePath } = params;
       if (scenePath === ROOT_DIR) {
-        console.log("[window-manager] onRemoveScenes   ROOT_DIR");
+        console.log("[window-manager] onRemoveScenes ROOT_DIR");
         await this.onRootDirRemoved();
         this.dispatchInternalEvent(Events.RootDirRemoved);
         return;
@@ -8166,7 +8487,7 @@ class AppManager {
           sceneName = (_b = this.callbacksNode) == null ? void 0 : _b.scenes[nextIndex];
         }
         if (sceneName) {
-          console.log(`[window-manager] onRemoveScenes   setMainViewScenePath${ROOT_DIR}${sceneName}`);
+          console.log(`[window-manager] onRemoveScenes  setMainViewScenePath ${ROOT_DIR}${sceneName}`);
           this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
         }
         await this.setMainViewSceneIndex(nextIndex);
@@ -8464,7 +8785,6 @@ class AppManager {
         const pageName = scenePath.replace(sceneDir, "").replace("/", "");
         const index2 = scenes.findIndex((scene) => scene.name === pageName);
         if (isInteger(index2) && index2 >= 0) {
-          console.log("[window-manager] updateSceneIndex  ", index2);
           this.safeSetAttributes({ _mainSceneIndex: index2 });
         }
       }
@@ -8505,8 +8825,6 @@ class AppManager {
     internalEmitter.on("setReadonly", this.onReadonlyChanged);
     this.createRootDirScenesCallback();
     appRegister.setSyncRegisterApp((payload) => {
-      var _a;
-      (_a = this.Logger) == null ? void 0 : _a.info(`[WindowManager] syncRegisterApp ${JSON.stringify(payload)}`);
       this.safeUpdateAttributes([Fields.Registered, payload.kind], payload);
     });
   }
@@ -8658,7 +8976,6 @@ class AppManager {
     }
   }
   async _attributesUpdateCallback(apps) {
-    var _a;
     if (apps && WindowManager.container) {
       const appIds = Object.keys(apps);
       if (appIds.length === 0) {
@@ -8682,7 +8999,7 @@ class AppManager {
           try {
             const appAttributes = this.attributes[id2];
             if (!appAttributes) {
-              (_a = this.Logger) == null ? void 0 : _a.error(
+              this.Logger && this.Logger.error(
                 `[WindowManager]: appAttributes is undefined, appId: ${id2}`
               );
               throw new Error("appAttributes is undefined");
@@ -8732,7 +9049,6 @@ class AppManager {
     (_a = this.boxManager) == null ? void 0 : _a.setMinimized(Boolean(this.store.getMinimized()));
   }
   bindMainView(divElement, disableCameraTransform) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     const mainView = this.mainViewProxy.view;
     mainView.disableCameraTransform = disableCameraTransform;
     mainView.divElement = divElement;
@@ -8743,13 +9059,12 @@ class AppManager {
     callbacks$1.emit("onMainViewMounted", mainView);
     const hasRoot = this.hasRoot(mainView.divElement);
     const rect = this.getRectByDivElement(mainView.divElement);
-    console.log(
-      "[window-manager] bindMainView hasRoot" + hasRoot + JSON.stringify(rect) + window.outerHeight + window.outerWidth,
-      (_b = (_a = window.visualViewport) == null ? void 0 : _a.width) != null ? _b : "null",
-      (_d = (_c = window.visualViewport) == null ? void 0 : _c.height) != null ? _d : "null",
-      (_f = (_e = window.visualViewport) == null ? void 0 : _e.offsetLeft) != null ? _f : "null",
-      (_h = (_g = window.visualViewport) == null ? void 0 : _g.offsetTop) != null ? _h : "null"
-    );
+    let log2 = `[window-manager] bindMainView hasRoot:${hasRoot}, rect:${JSON.stringify(rect)}, outerHeight:${window.outerHeight}, outerWidth:${window.outerWidth}`;
+    const visualViewport = window.visualViewport;
+    if (visualViewport) {
+      log2 += `, visualViewportWidth:${visualViewport.width}, visualViewportHeight:${visualViewport.height}, visualViewportOffsetLeft:${visualViewport.offsetLeft}, visualViewportOffsetTop:${visualViewport.offsetTop}`;
+    }
+    console.log(log2);
   }
   hasRoot(divElement) {
     let current = divElement;
@@ -8825,7 +9140,7 @@ class AppManager {
     }
   }
   async baseInsertApp(params, appId, isAddApp, focus) {
-    var _a, _b;
+    var _a;
     if (this.appProxies.has(appId)) {
       (_a = this.windowManger.Logger) == null ? void 0 : _a.warn(
         `[WindowManager]: app duplicate exists and cannot be created again, appId: ${appId}`
@@ -8840,7 +9155,7 @@ class AppManager {
       return appProxy;
     } else {
       this.appStatus.delete(appId);
-      (_b = this.Logger) == null ? void 0 : _b.error(`[WindowManager]: initialize AppProxy failed, appId: ${appId}`);
+      this.Logger && this.Logger.error(`[WindowManager]: initialize AppProxy failed, appId: ${appId}`);
       throw new Error("[WindowManger]: initialize AppProxy failed");
     }
   }
@@ -8851,16 +9166,15 @@ class AppManager {
     this.windowManger.safeUpdateAttributes(keys, value);
   }
   async setMainViewScenePath(scenePath) {
-    var _a, _b;
     if (this.room) {
       const scenePathType = this.displayer.scenePathType(scenePath);
       const sceneDir = parseSceneDir(scenePath);
       if (sceneDir !== ROOT_DIR) {
-        (_a = this.Logger) == null ? void 0 : _a.error(`[WindowManager]: main view scenePath must in 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) {
-        (_b = this.Logger) == null ? void 0 : _b.error(`[WindowManager]: ${scenePath} not valid scene`);
+        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);
@@ -8875,7 +9189,6 @@ class AppManager {
   async _setMainViewScenePath(scenePath) {
     const success = this.setMainViewFocusPath(scenePath);
     if (success) {
-      console.log("[window-manager] _setMainViewScenePath  ", scenePath);
       this.safeSetAttributes({ _mainScenePath: scenePath });
       this.store.setMainViewFocusPath(this.mainView);
       this.updateSceneIndex();
@@ -8883,7 +9196,7 @@ class AppManager {
     }
   }
   async setMainViewSceneIndex(index2) {
-    var _a, _b;
+    var _a;
     if (this.room) {
       if (this.store.getMainViewSceneIndex() === index2)
         return;
@@ -8897,13 +9210,12 @@ class AppManager {
           this.dispatchSetMainViewScenePath(scenePath);
         }
       } else {
-        (_b = this.Logger) == null ? void 0 : _b.error(`[WindowManager]: ${index2} not valid index`);
+        this.Logger && this.Logger.error(`[WindowManager]: ${index2} not valid index`);
         throw new Error(`[WindowManager]: ${index2} not valid index`);
       }
     }
   }
   dispatchSetMainViewScenePath(scenePath) {
-    console.log("[window-manager] dispatchSetMainViewScenePath  ", JSON.stringify(scenePath));
     this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath: scenePath });
     callbacks$1.emit("mainViewScenePathChange", scenePath);
     setScenePath(this.room, scenePath);
@@ -8979,6 +9291,7 @@ const ResizeObserver$2 = window.ResizeObserver || ResizeObserver$3;
 class ContainerResizeObserver {
   constructor(emitter) {
     this.emitter = emitter;
+    this.updateSizerLocalConsole = new LocalConsole("updateSizer", 100);
   }
   static create(container, sizer, wrapper, emitter) {
     const containerResizeObserver = new ContainerResizeObserver(emitter);
@@ -8986,26 +9299,23 @@ class ContainerResizeObserver {
     return containerResizeObserver;
   }
   observePlaygroundSize(container, sizer, wrapper) {
-    console.log(`[window-manager] observePlaygroundSize ${JSON.stringify(container.getBoundingClientRect())}, ${JSON.stringify(sizer.getBoundingClientRect())}, ${JSON.stringify(wrapper.getBoundingClientRect())}`);
-    this.updateSizer(container.getBoundingClientRect(), sizer, wrapper);
+    this.updateSizer(container.getBoundingClientRect(), sizer, wrapper, "observePlaygroundSize");
     this.containerResizeObserver = new ResizeObserver$2((entries) => {
       var _a;
       const containerRect = (_a = entries[0]) == null ? void 0 : _a.contentRect;
       if (containerRect) {
-        this.updateSizer(containerRect, sizer, wrapper);
-        console.log(`[window-manager] containerResizeObserver ${JSON.stringify(containerRect)}`);
+        this.updateSizer(containerRect, sizer, wrapper, "containerResizeObserver");
         this.emitter.emit("playgroundSizeChange", containerRect);
       }
     });
     this.disposer = this.emitter.on("containerSizeRatioUpdate", () => {
       const containerRect = container.getBoundingClientRect();
-      console.log(`[window-manager] containerSizeRatioUpdate ${JSON.stringify(containerRect)}`);
-      this.updateSizer(containerRect, sizer, wrapper);
+      this.updateSizer(containerRect, sizer, wrapper, "containerSizeRatioUpdate");
       this.emitter.emit("playgroundSizeChange", containerRect);
     });
     this.containerResizeObserver.observe(container);
   }
-  updateSizer({ width, height }, sizer, wrapper) {
+  updateSizer({ width, height }, sizer, wrapper, origin) {
     if (width && height) {
       if (height / width > WindowManager.containerSizeRatio) {
         height = width * WindowManager.containerSizeRatio;
@@ -9016,17 +9326,21 @@ class ContainerResizeObserver {
       }
       wrapper.style.width = `${width}px`;
       wrapper.style.height = `${height}px`;
-      wrapper.style.backgroundColor = "green";
-      console.log(`[window-manager] updateSizer ${JSON.stringify({ width, height })} ${wrapper.style.width} ${wrapper.style.height} ${JSON.stringify(wrapper.getBoundingClientRect())}`);
+      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
+      });
     }
   }
   disconnect() {
-    var _a;
+    var _a, _b;
+    this.updateSizerLocalConsole.destroy();
     (_a = this.containerResizeObserver) == null ? void 0 : _a.disconnect();
-    if (isFunction(this.disposer)) {
-      this.disposer();
-      this.disposer = void 0;
-    }
+    (_b = this.disposer) == null ? void 0 : _b.call(this);
+    this.disposer = void 0;
   }
 }
 class PageStateImpl {
@@ -9179,10 +9493,24 @@ const replaceRoomFunction = (room, manager) => {
       var _a;
       _scalePptToFit.call(room, ...args);
       if ((_a = manager.appManager) == null ? void 0 : _a.mainViewProxy) {
-        console.log("[window-manager] scalePptToFit  " + JSON.stringify(args));
         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) => manager.moveCamera(camera);
     room.moveCameraToContain = (...args) => manager.moveCameraToContain(...args);
     room.convertToPointInWorld = (...args) => manager.mainView.convertToPointInWorld(...args);
@@ -11429,7 +11757,7 @@ class StaticDocsViewer {
         img.src = pdfPageSrc;
         await new Promise((resolve) => img.onload = resolve);
         whiteCtx.drawImage(img, 0, 0);
-        const pdfPageBase64 = whiteSnapshotCanvas.toDataURL("image/jpeg", 0.6);
+        const pdfPageBase64 = whiteSnapshotCanvas.toDataURL("image/png");
         whiteCtx.clearRect(0, 0, width, height);
         const camera = {
           centerX: width / 2,
@@ -11449,7 +11777,7 @@ class StaticDocsViewer {
           this.whiteboardView.screenshotToCanvas(whiteCtx, scenePath, width, height, camera);
         }
         const snapshot = whiteSnapshotCanvas.toDataURL("image/png");
-        pdf.addImage(pdfPageBase64, "JPEG", 0, 0, width, height, "", "FAST");
+        pdf.addImage(pdfPageBase64, "PNG", 0, 0, width, height, "", "FAST");
         pdf.addImage(snapshot, "PNG", 0, 0, width, height, "", "FAST");
         whiteCtx.clearRect(0, 0, width, height);
         const progress = Math.ceil((index2 + 1) / this.pages.length * 100);
@@ -19773,16 +20101,13 @@ const reconnectRefresher = new ReconnectRefresher({ emitter: internalEmitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.13-test.9";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.3.0", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.53" }, "devDependencies": { "@hyrious/dts": "^0.2.2", "@netless/app-docs-viewer": "^0.2.19", "@netless/app-media-player": "0.1.4", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "1.0.0-next.30", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "side-effect-manager": "0.1.5", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.9.9", "vitest": "^0.14.1", "white-web-sdk": "^2.16.53" } };
+    this.version = "1.0.13";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.3.0", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.54" }, "devDependencies": { "@hyrious/dts": "^0.2.2", "@netless/app-docs-viewer": "^0.2.19", "@netless/app-media-player": "0.1.4", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "1.0.0-next.30", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "side-effect-manager": "0.1.5", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.9.9", "vitest": "^0.14.1", "white-web-sdk": "^2.16.54" } };
     this.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;
     this.isReplay = isPlayer(this.displayer);
     this._cursorUIDs = [];
     this.containerSizeRatio = _WindowManager.containerSizeRatio;
-    this.visibleStateListener = () => {
-      console.log("[window-manager] visibleStateListener  isVisible:" + !document.hidden);
-    };
     this.onMainViewScenePathChangeHandler = (scenePath) => {
       const mainViewElement = this.mainView.divElement;
       if (mainViewElement) {
@@ -19791,17 +20116,17 @@ const _WindowManager = class extends InvisiblePlugin {
           const backgroundImageRect = backgroundImage == null ? void 0 : backgroundImage.getBoundingClientRect();
           const backgroundImageCSS = window.getComputedStyle(backgroundImage);
           const backgroundImageVisible = (backgroundImageRect == null ? void 0 : backgroundImageRect.width) > 0 && (backgroundImageRect == null ? void 0 : backgroundImageRect.height) > 0 && backgroundImageCSS.display !== "none";
-          console.log("[window-manager] backgroundImageVisible" + backgroundImageVisible);
+          const camera = this.mainView.camera;
+          console.log("[window-manager] backgroundImageVisible:" + backgroundImageVisible + " camera:" + JSON.stringify(camera));
           return;
         }
-        console.log("[window-manager] onMainViewScenePathChange" + scenePath + "backgroundImageVisible is not found");
+        console.log("[window-manager] onMainViewScenePathChange scenePath:" + scenePath + " backgroundImageVisible is not found");
+        return;
       }
-      console.log("[window-manager] onMainViewScenePathChange" + scenePath + "mainViewElement is not found");
+      console.log("[window-manager] onMainViewScenePathChange scenePath:" + scenePath + " mainViewElement is not found");
     };
     _WindowManager.displayer = context.displayer;
-    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.3.0", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.53" }, "devDependencies": { "@hyrious/dts": "^0.2.2", "@netless/app-docs-viewer": "^0.2.19", "@netless/app-media-player": "0.1.4", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "1.0.0-next.30", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "side-effect-manager": "0.1.5", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.9.9", "vitest": "^0.14.1", "white-web-sdk": "^2.16.53" } };
-    this.visibleStateListener();
-    document.addEventListener("visibilitychange", this.visibleStateListener);
+    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.3.0", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.54" }, "devDependencies": { "@hyrious/dts": "^0.2.2", "@netless/app-docs-viewer": "^0.2.19", "@netless/app-media-player": "0.1.4", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "1.0.0-next.30", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "side-effect-manager": "0.1.5", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.9.9", "vitest": "^0.14.1", "white-web-sdk": "^2.16.54" } };
     this.emitter.on("mainViewScenePathChange", this.onMainViewScenePathChangeHandler);
   }
   get Logger() {
@@ -19833,6 +20158,7 @@ const _WindowManager = class extends InvisiblePlugin {
       manager = await this.initManager(room);
       if (manager) {
         manager._roomLogger = room.logger;
+        manager.attributesDeboundceLog = new ArgusLog(manager._roomLogger, "attributes", 300);
         if (_WindowManager.registered.size > 0) {
           manager._roomLogger.info(
             `[WindowManager] registered apps: ${JSON.stringify(
@@ -20447,7 +20773,6 @@ const _WindowManager = class extends InvisiblePlugin {
     }, 500);
   }
   moveCameraToContain(rectangle) {
-    console.log("[window-manager] moveCameraToContain" + JSON.stringify(rectangle));
     this.mainView.moveCameraToContain(rectangle);
     setTimeout(() => {
       var _a;
@@ -20467,22 +20792,23 @@ const _WindowManager = class extends InvisiblePlugin {
     this._destroy();
   }
   _destroy() {
-    var _a, _b, _c, _d, _e, _f;
-    (_a = this.containerResizeObserver) == null ? void 0 : _a.disconnect();
-    (_b = this.appManager) == null ? void 0 : _b.destroy();
-    (_c = this.cursorManager) == null ? void 0 : _c.destroy();
-    (_d = this.extendPluginManager) == null ? void 0 : _d.destroy();
+    var _a, _b, _c, _d, _e, _f, _g;
+    (_a = this.attributesDeboundceLog) == null ? void 0 : _a.destroy();
+    this.attributesDeboundceLog = void 0;
+    (_b = this.containerResizeObserver) == null ? void 0 : _b.disconnect();
+    (_c = this.appManager) == null ? void 0 : _c.destroy();
+    (_d = this.cursorManager) == null ? void 0 : _d.destroy();
+    (_e = this.extendPluginManager) == null ? void 0 : _e.destroy();
     _WindowManager.container = void 0;
     _WindowManager.wrapper = void 0;
     _WindowManager.sizer = void 0;
     _WindowManager.isCreated = false;
     if (_WindowManager.playground) {
-      (_e = _WindowManager.playground.parentNode) == null ? void 0 : _e.removeChild(_WindowManager.playground);
+      (_f = _WindowManager.playground.parentNode) == null ? void 0 : _f.removeChild(_WindowManager.playground);
     }
     _WindowManager.params = void 0;
-    document.removeEventListener("visibilitychange", this.visibleStateListener);
     this.emitter.off("mainViewScenePathChange", this.onMainViewScenePathChangeHandler);
-    (_f = this._iframeBridge) == null ? void 0 : _f.destroy();
+    (_g = this._iframeBridge) == null ? void 0 : _g.destroy();
     this._iframeBridge = void 0;
     log("Destroyed");
   }
@@ -20506,11 +20832,17 @@ const _WindowManager = class extends InvisiblePlugin {
   safeSetAttributes(attributes) {
     if (this.canOperate) {
       this.setAttributes(attributes);
+      if (this.attributesDeboundceLog) {
+        this.attributesDeboundceLog.logDebouncedShallowMerge("safeSetAttributes", attributes);
+      }
     }
   }
   safeUpdateAttributes(keys, value) {
     if (this.canOperate) {
       this.updateAttributes(keys, value);
+      if (this.attributesDeboundceLog) {
+        this.attributesDeboundceLog.logDebouncedUpdateAttributes(keys, value);
+      }
     }
   }
   setPrefersColorScheme(scheme) {
@@ -20518,9 +20850,10 @@ const _WindowManager = class extends InvisiblePlugin {
     (_b = (_a = this.appManager) == null ? void 0 : _a.boxManager) == null ? void 0 : _b.setPrefersColorScheme(scheme);
   }
   cleanCurrentScene() {
-    var _a;
+    var _a, _b;
     log("clean current scene");
     (_a = this.focusedView) == null ? void 0 : _a.cleanCurrentScene();
+    this.Logger && this.Logger.info(`[WindowManager]: cleanCurrentScene ${(_b = this.focusedView) == null ? void 0 : _b.focusScenePath}`);
   }
   redo() {
     var _a;
@@ -20531,8 +20864,9 @@ const _WindowManager = class extends InvisiblePlugin {
     return ((_a = this.focusedView) == null ? void 0 : _a.undo()) || 0;
   }
   delete() {
-    var _a;
+    var _a, _b;
     (_a = this.focusedView) == null ? void 0 : _a.delete();
+    this.Logger && this.Logger.info(`[WindowManager]: delete ${(_b = this.focusedView) == null ? void 0 : _b.focusScenePath}`);
   }
   copy() {
     var _a;