@netless/window-manager 1.0.13-test.2 → 1.0.13-test.20

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,7 @@ class AppListeners {
             break;
           }
           case Events.SetMainViewScenePath: {
-            console.log("[window-manager] mainMagixEventListener====>", JSON.stringify(data.payload));
+            console.log("[window-manager] mainMagixEventListener  " + JSON.stringify(data.payload));
             this.setMainViewScenePathHandler(data.payload);
             break;
           }
@@ -5697,6 +5696,35 @@ const log = (...args) => {
     console.log(`[WindowManager]:`, ...args);
   }
 };
+class LocalConsole {
+  constructor(name, debounceTime) {
+    this.name = name;
+    this.debounceTime = debounceTime;
+    this.pendingArgs = null;
+    this.flushTimer = null;
+  }
+  flush() {
+    this.flushTimer = null;
+    const args = this.pendingArgs;
+    this.pendingArgs = null;
+    if (args === null) {
+      return;
+    }
+    console.log(`[window-manager][${this.name}]: ${args.join(", ")}`);
+  }
+  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;
+    }
+    console.log(`[window-manager][${this.name}]: ${args.join(", ")}`);
+  }
+}
 const setupWrapper = (root) => {
   const playground = document.createElement("div");
   playground.className = "netless-window-manager-playground";
@@ -7004,6 +7032,7 @@ var Fields = /* @__PURE__ */ ((Fields2) => {
 class AttributesDelegate {
   constructor(context) {
     this.context = context;
+    this.setMainViewCameraConsole = new LocalConsole("setMainViewCamera", 30);
     this.setAppFocus = (appId, focus) => {
       if (focus) {
         this.context.safeSetAttributes({ ["focus"]: appId });
@@ -7129,11 +7158,11 @@ class AttributesDelegate {
     return this.attributes["boxState"];
   }
   setMainViewScenePath(scenePath) {
-    console.log("[window-manager] setMainViewScenePath====>", scenePath);
+    console.log("[window-manager] setMainViewScenePath  " + scenePath);
     this.context.safeSetAttributes({ _mainScenePath: scenePath });
   }
   setMainViewSceneIndex(index2) {
-    console.log("[window-manager] setMainViewSceneIndex====>", index2);
+    console.log("[window-manager] setMainViewSceneIndex  " + index2);
     this.context.safeSetAttributes({ _mainSceneIndex: index2 });
   }
   getMainViewCamera() {
@@ -7143,19 +7172,19 @@ class AttributesDelegate {
     return get(this.attributes, ["mainViewSize"]);
   }
   setMainViewCamera(camera) {
-    console.log("[window-manager] setMainViewCamera====>", JSON.stringify(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));
+    console.log("[window-manager] setMainViewSize size:" + 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));
+    console.log("[window-manager] setMainViewCameraAndSize camera:" + JSON.stringify(camera) + ", size:" + JSON.stringify(size2));
     this.context.safeSetAttributes({
       ["mainViewCamera"]: { ...camera },
       ["mainViewSize"]: { ...size2 }
@@ -7759,9 +7788,14 @@ class MainViewProxy {
     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.sizeUpdatedLocalConsole = new LocalConsole("sizeUpdated", 30);
+    this.cameraUpdatedLocalConsole = new LocalConsole("cameraUpdated", 30);
     this.syncCamera = () => {
       if (!this.polling || this.viewMode !== ViewMode.Broadcaster)
         return;
@@ -7781,6 +7815,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);
     };
@@ -7789,7 +7849,7 @@ class MainViewProxy {
         () => this.mainViewCamera,
         (camera) => {
           if (camera && camera.id !== this.manager.uid) {
-            console.log("[window-manager] cameraReaction====>", JSON.stringify(camera), JSON.stringify(this.mainViewSize));
+            console.log("[window-manager] cameraReaction  " + JSON.stringify(camera) + JSON.stringify(this.mainViewSize));
             this.moveCameraToContian(this.mainViewSize);
             this.moveCamera(camera);
           }
@@ -7801,13 +7861,13 @@ 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));
+        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);
     this.onUpdateContainerSizeRatio = () => {
       const size2 = this.store.getMainViewSize();
-      console.log("[window-manager] onUpdateContainerSizeRatio====>", JSON.stringify(size2));
+      console.log("[window-manager] onUpdateContainerSizeRatio  " + JSON.stringify(size2));
       this.sizeChangeHandler(size2);
     };
     this.onCameraUpdatedByDevice = (camera) => {
@@ -7825,18 +7885,25 @@ 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);
         this._syncMainViewTimer = setTimeout(this.syncMainView, 100, this.manager.room);
       }
-      console.log("[window-manager] onCameraOrSizeUpdated====>", JSON.stringify(this.cameraState));
       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====>");
+        console.log("[window-manager] syncMainView ");
         room.syncMainView(this.mainView);
       }
     };
@@ -7852,7 +7919,19 @@ class MainViewProxy {
       this.startListenWritableChange();
     });
     const playgroundSizeChangeListener = () => {
-      console.log("[window-manager] playgroundSizeChangeListener====>", JSON.stringify(this.mainViewSize));
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      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,
+        (_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"
+      );
       this.sizeChangeHandler(this.mainViewSize);
     };
     this.sideEffectManager.add(() => {
@@ -7861,6 +7940,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) {
@@ -7891,8 +7973,41 @@ class MainViewProxy {
     this.moveCameraToContian(this.mainViewSize);
     this.moveCamera(this.mainViewCamera);
   }
+  forceSyncMainViewDivElement(reason, observedSize, element2) {
+    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;
+    console.log("[window-manager] forceSyncMainViewDivElement " + JSON.stringify({
+      reason,
+      observedSize,
+      viewSize: this.mainView.size,
+      mainViewSize: this.mainViewSize,
+      mainViewCamera: this.mainViewCamera
+    }));
+    this.mainView.divElement = null;
+    this.mainView.divElement = element2;
+    queueMicrotask(() => {
+      const rect = element2.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;
@@ -7901,6 +8016,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 };
@@ -7974,13 +8093,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) {
@@ -8020,6 +8139,11 @@ class MainViewProxy {
     this.started = false;
   }
   destroy() {
+    console.log("[window-manager] destroy  ");
+    if (this.wrapperRectWorkaroundFrame) {
+      cancelAnimationFrame(this.wrapperRectWorkaroundFrame);
+      this.wrapperRectWorkaroundFrame = 0;
+    }
     this.removeMainViewListener();
     this.stop();
     this.sideEffectManager.flushAll();
@@ -8109,6 +8233,7 @@ class AppManager {
       var _a, _b;
       const { scenePath } = params;
       if (scenePath === ROOT_DIR) {
+        console.log("[window-manager] onRemoveScenes ROOT_DIR");
         await this.onRootDirRemoved();
         this.dispatchInternalEvent(Events.RootDirRemoved);
         return;
@@ -8121,6 +8246,7 @@ class AppManager {
           sceneName = (_b = this.callbacksNode) == null ? void 0 : _b.scenes[nextIndex];
         }
         if (sceneName) {
+          console.log(`[window-manager] onRemoveScenes  setMainViewScenePath ${ROOT_DIR}${sceneName}`);
           this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
         }
         await this.setMainViewSceneIndex(nextIndex);
@@ -8418,7 +8544,7 @@ 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);
+          console.log("[window-manager] updateSceneIndex  " + index2);
           this.safeSetAttributes({ _mainSceneIndex: index2 });
         }
       }
@@ -8694,6 +8820,28 @@ class AppManager {
     }
     internalEmitter.emit("mainViewMounted");
     callbacks$1.emit("onMainViewMounted", mainView);
+    const hasRoot = this.hasRoot(mainView.divElement);
+    const rect = this.getRectByDivElement(mainView.divElement);
+    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;
+    while (current) {
+      if (current.parentElement === document.body) {
+        return true;
+      }
+      current = current.parentElement;
+    }
+    return false;
+  }
+  getRectByDivElement(divElement) {
+    const rect = divElement.getBoundingClientRect();
+    return rect;
   }
   setMainViewFocusPath(scenePath) {
     var _a;
@@ -8805,7 +8953,7 @@ class AppManager {
   async _setMainViewScenePath(scenePath) {
     const success = this.setMainViewFocusPath(scenePath);
     if (success) {
-      console.log("[window-manager] _setMainViewScenePath====>", scenePath);
+      console.log("[window-manager] _setMainViewScenePath " + scenePath);
       this.safeSetAttributes({ _mainScenePath: scenePath });
       this.store.setMainViewFocusPath(this.mainView);
       this.updateSceneIndex();
@@ -8833,7 +8981,6 @@ class AppManager {
     }
   }
   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);
@@ -8909,6 +9056,7 @@ const ResizeObserver$2 = window.ResizeObserver || ResizeObserver$3;
 class ContainerResizeObserver {
   constructor(emitter) {
     this.emitter = emitter;
+    this.updateSizerLocalConsole = new LocalConsole("updateSizer", 30);
   }
   static create(container, sizer, wrapper, emitter) {
     const containerResizeObserver = new ContainerResizeObserver(emitter);
@@ -8916,23 +9064,23 @@ class ContainerResizeObserver {
     return containerResizeObserver;
   }
   observePlaygroundSize(container, sizer, wrapper) {
-    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);
+        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);
     });
     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;
@@ -8943,6 +9091,13 @@ 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
+      });
     }
   }
   disconnect() {
@@ -9101,8 +9256,26 @@ const replaceRoomFunction = (room, manager) => {
     });
     const _scalePptToFit = room.scalePptToFit;
     room.scalePptToFit = (...args) => {
-      console.log("[window-manager] scalePptToFit====>", JSON.stringify(args));
+      var _a;
       _scalePptToFit.call(room, ...args);
+      if ((_a = manager.appManager) == null ? void 0 : _a.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) => manager.moveCamera(camera);
     room.moveCameraToContain = (...args) => manager.moveCameraToContain(...args);
@@ -19694,15 +19867,34 @@ const reconnectRefresher = new ReconnectRefresher({ emitter: internalEmitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.13-test.2";
+    this.version = "1.0.13-test.20";
     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.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;
     this.isReplay = isPlayer(this.displayer);
     this._cursorUIDs = [];
     this.containerSizeRatio = _WindowManager.containerSizeRatio;
+    this.onMainViewScenePathChangeHandler = (scenePath) => {
+      const mainViewElement = this.mainView.divElement;
+      this.logMainViewVisibilityDiagnostics("onMainViewScenePathChange", scenePath, mainViewElement);
+      if (mainViewElement) {
+        const backgroundImage = mainViewElement.querySelector(".background img");
+        if (backgroundImage) {
+          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";
+          const camera = this.mainView.camera;
+          console.log("[window-manager] backgroundImageVisible:" + backgroundImageVisible + " camera:" + JSON.stringify(camera));
+          return;
+        }
+        console.log("[window-manager] onMainViewScenePathChange scenePath:" + scenePath + " backgroundImageVisible is not found");
+        return;
+      }
+      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.emitter.on("mainViewScenePathChange", this.onMainViewScenePathChangeHandler);
   }
   get Logger() {
     return this._roomLogger;
@@ -19818,8 +20010,338 @@ const _WindowManager = class extends InvisiblePlugin {
       console.warn("[WindowManager]: indexedDB open failed");
       console.log(error);
     }
+    manager.emitter.on("mainViewScenePathChange", manager.onMainViewScenePathChangeHandler);
     return manager;
   }
+  logMainViewVisibilityDiagnostics(tag, scenePath, mainViewElement) {
+    var _a;
+    const element2 = mainViewElement != null ? mainViewElement : (_a = this.mainView) == null ? void 0 : _a.divElement;
+    const label = scenePath ? `${tag}:${scenePath}` : tag;
+    const payload = this.collectMainViewVisibilityDiagnostics(element2, scenePath);
+    this.emitMainViewVisibilityDiagnostic(label, payload.summary);
+    if (payload.details) {
+      this.emitMainViewVisibilityDiagnostic(`${label}:details`, payload.details);
+    }
+  }
+  emitMainViewVisibilityDiagnostic(tag, payload) {
+    var _a;
+    const content = `[window-manager][visibility][${tag}] ${JSON.stringify(payload)}`;
+    (_a = this._roomLogger) == null ? void 0 : _a.info(content);
+  }
+  collectMainViewVisibilityDiagnostics(mainViewElement, scenePath) {
+    var _a, _b;
+    const element2 = mainViewElement != null ? mainViewElement : null;
+    const backgroundImage = element2 == null ? void 0 : element2.querySelector(".background img");
+    const elementDiagnostic = element2 ? this.collectElementDiagnostic(element2) : null;
+    const chainDiagnostics = element2 ? this.collectElementChainDiagnostics(element2) : [];
+    const elementRect = (_b = (_a = element2 == null ? void 0 : element2.getBoundingClientRect) == null ? void 0 : _a.call(element2)) != null ? _b : null;
+    const centerPoint = elementRect ? {
+      x: elementRect.left + elementRect.width / 2,
+      y: elementRect.top + elementRect.height / 2
+    } : void 0;
+    const topElement = centerPoint && Number.isFinite(centerPoint.x) && Number.isFinite(centerPoint.y) ? document.elementFromPoint(centerPoint.x, centerPoint.y) : null;
+    const overlayStack = centerPoint && Number.isFinite(centerPoint.x) && Number.isFinite(centerPoint.y) && document.elementsFromPoint ? document.elementsFromPoint(centerPoint.x, centerPoint.y).slice(0, 10).map((item) => this.describeElement(item)).filter((item) => item !== null) : [];
+    const topElementDiagnostic = topElement ? this.collectElementDiagnostic(topElement) : null;
+    const backgroundImageDiagnostic = backgroundImage ? this.collectImageDiagnostic(backgroundImage) : null;
+    const blockers = [];
+    const warnings = [];
+    const suspiciousAncestors = [];
+    const mainViewBlockers = [];
+    const mainViewWarnings = [];
+    if (!element2) {
+      blockers.push("mainViewElement.missing");
+    }
+    if (document.hidden || document.visibilityState === "hidden") {
+      blockers.push("document.hidden");
+    }
+    if (elementDiagnostic) {
+      this.appendRenderImpactIssues(
+        "mainViewElement",
+        elementDiagnostic,
+        mainViewBlockers,
+        mainViewWarnings
+      );
+      blockers.push(...mainViewBlockers);
+      warnings.push(...mainViewWarnings);
+    }
+    chainDiagnostics.slice(1).forEach((diagnostic, index2) => {
+      const ancestorBlockers = [];
+      const ancestorWarnings = [];
+      this.appendRenderImpactIssues(
+        `ancestor[${index2 + 1}]`,
+        diagnostic,
+        ancestorBlockers,
+        ancestorWarnings
+      );
+      if (ancestorBlockers.length > 0 || ancestorWarnings.length > 0) {
+        blockers.push(...ancestorBlockers);
+        warnings.push(...ancestorWarnings);
+        suspiciousAncestors.push(this.pickRenderRelevantFields(diagnostic));
+      }
+    });
+    let backgroundImageStatus = null;
+    const backgroundImageBlockers = [];
+    const backgroundImageWarnings = [];
+    if (backgroundImageDiagnostic) {
+      backgroundImageStatus = this.pickBackgroundImageStatus(backgroundImageDiagnostic);
+      this.appendRenderImpactIssues(
+        "backgroundImage",
+        backgroundImageDiagnostic,
+        backgroundImageBlockers,
+        backgroundImageWarnings
+      );
+      blockers.push(...backgroundImageBlockers);
+      warnings.push(...backgroundImageWarnings);
+      if (backgroundImageDiagnostic.complete === false) {
+        warnings.push("backgroundImage.loading");
+      } else if (backgroundImageDiagnostic.naturalWidth === 0) {
+        warnings.push("backgroundImage.empty");
+      }
+    }
+    let topElementSummary = null;
+    if (topElementDiagnostic) {
+      const coveredByOutsideElement = Boolean(
+        element2 && topElement && topElement !== element2 && !element2.contains(topElement)
+      );
+      topElementSummary = {
+        node: topElementDiagnostic.node,
+        coveredByOutsideElement
+      };
+      if (coveredByOutsideElement) {
+        warnings.push(`center.coveredBy:${topElementDiagnostic.node}`);
+      }
+    }
+    const summary = {
+      scenePath: scenePath || null,
+      timestamp: new Date().toISOString(),
+      status: blockers.length > 0 ? "blocked" : warnings.length > 0 ? "uncertain" : "likely-renderable",
+      canRender: blockers.length === 0,
+      blockers,
+      warnings
+    };
+    if (backgroundImageStatus && backgroundImageDiagnostic && (backgroundImageDiagnostic.complete === false || backgroundImageDiagnostic.naturalWidth === 0)) {
+      summary.backgroundImage = backgroundImageStatus;
+    }
+    if (topElementSummary == null ? void 0 : topElementSummary.coveredByOutsideElement) {
+      summary.coveringElement = topElementSummary.node;
+    }
+    const shouldEmitDetails = blockers.length > 0 || warnings.some(
+      (warning) => warning !== "backgroundImage.loading" && warning !== "backgroundImage.empty"
+    );
+    const details = {};
+    if ((mainViewBlockers.length > 0 || mainViewWarnings.length > 0) && elementDiagnostic) {
+      details.mainViewElement = this.pickRenderRelevantFields(elementDiagnostic);
+    }
+    if (suspiciousAncestors.length > 0) {
+      details.suspiciousAncestors = suspiciousAncestors;
+    }
+    if (backgroundImageDiagnostic && (backgroundImageBlockers.length > 0 || backgroundImageWarnings.length > 0 || backgroundImageDiagnostic.complete === false || backgroundImageDiagnostic.naturalWidth === 0)) {
+      details.backgroundImage = {
+        ...this.pickRenderRelevantFields(backgroundImageDiagnostic),
+        loadState: backgroundImageStatus
+      };
+    }
+    if ((topElementSummary == null ? void 0 : topElementSummary.coveredByOutsideElement) && topElementDiagnostic) {
+      details.topElementAtCenter = {
+        ...this.pickRenderRelevantFields(topElementDiagnostic),
+        overlayStack
+      };
+    }
+    return {
+      summary,
+      details: shouldEmitDetails && Object.keys(details).length > 0 ? details : null
+    };
+  }
+  collectElementChainDiagnostics(element2) {
+    const chain = [];
+    let current = element2;
+    while (current) {
+      const diagnostic = this.collectElementDiagnostic(current);
+      if (diagnostic) {
+        chain.push(diagnostic);
+      }
+      current = current.parentElement;
+    }
+    return chain;
+  }
+  collectImageDiagnostic(image) {
+    const diagnostic = this.collectElementDiagnostic(image);
+    return {
+      ...diagnostic,
+      currentSrc: image.currentSrc,
+      src: image.getAttribute("src"),
+      complete: image.complete,
+      naturalWidth: image.naturalWidth,
+      naturalHeight: image.naturalHeight
+    };
+  }
+  appendRenderImpactIssues(label, diagnostic, blockers, warnings) {
+    const opacity = Number.parseFloat(diagnostic.opacity || "1");
+    if (diagnostic.hiddenAttribute) {
+      blockers.push(`${label}.hiddenAttribute`);
+    }
+    if (diagnostic.display === "none") {
+      blockers.push(`${label}.display:none`);
+    }
+    if (diagnostic.visibility === "hidden" || diagnostic.visibility === "collapse") {
+      blockers.push(`${label}.visibility:${diagnostic.visibility}`);
+    }
+    if (Number.isFinite(opacity) && opacity <= 0.01) {
+      blockers.push(`${label}.opacity:${diagnostic.opacity}`);
+    }
+    if (diagnostic.contentVisibility === "hidden") {
+      blockers.push(`${label}.contentVisibility:hidden`);
+    }
+    if (diagnostic.transform !== "none") {
+      warnings.push(`${label}.transform`);
+    }
+    if (diagnostic.filter !== "none") {
+      warnings.push(`${label}.filter`);
+    }
+    if (diagnostic.backdropFilter !== "none") {
+      warnings.push(`${label}.backdropFilter`);
+    }
+    if (diagnostic.clipPath !== "none") {
+      warnings.push(`${label}.clipPath`);
+    }
+    if (diagnostic.maskImage !== "none") {
+      warnings.push(`${label}.maskImage`);
+    }
+    if (diagnostic.mixBlendMode !== "normal") {
+      warnings.push(`${label}.mixBlendMode:${diagnostic.mixBlendMode}`);
+    }
+  }
+  pickRenderRelevantFields(diagnostic) {
+    var _a, _b, _c, _d, _e, _f;
+    const result = {
+      node: diagnostic.node,
+      display: diagnostic.display,
+      visibility: diagnostic.visibility,
+      opacity: diagnostic.opacity,
+      hiddenAttribute: diagnostic.hiddenAttribute,
+      contentVisibility: diagnostic.contentVisibility,
+      backgroundColor: diagnostic.backgroundColor,
+      backgroundAlpha: (_b = (_a = diagnostic.backgroundColorChannels) == null ? void 0 : _a.a) != null ? _b : null,
+      color: diagnostic.color,
+      colorAlpha: (_d = (_c = diagnostic.colorChannels) == null ? void 0 : _c.a) != null ? _d : null,
+      textFillColor: diagnostic.textFillColor,
+      textFillAlpha: (_f = (_e = diagnostic.textFillColorChannels) == null ? void 0 : _e.a) != null ? _f : null
+    };
+    if (diagnostic.transform !== "none") {
+      result.transform = diagnostic.transform;
+    }
+    if (diagnostic.filter !== "none") {
+      result.filter = diagnostic.filter;
+    }
+    if (diagnostic.backdropFilter !== "none") {
+      result.backdropFilter = diagnostic.backdropFilter;
+    }
+    if (diagnostic.mixBlendMode !== "normal") {
+      result.mixBlendMode = diagnostic.mixBlendMode;
+    }
+    if (diagnostic.clipPath !== "none") {
+      result.clipPath = diagnostic.clipPath;
+    }
+    if (diagnostic.maskImage !== "none") {
+      result.maskImage = diagnostic.maskImage;
+    }
+    if (diagnostic.overflow !== "visible") {
+      result.overflow = diagnostic.overflow;
+    }
+    if (diagnostic.zIndex !== "auto") {
+      result.zIndex = diagnostic.zIndex;
+    }
+    return result;
+  }
+  pickBackgroundImageStatus(diagnostic) {
+    return {
+      found: true,
+      complete: diagnostic.complete,
+      currentSrc: diagnostic.currentSrc || diagnostic.src || "",
+      naturalWidth: diagnostic.naturalWidth,
+      naturalHeight: diagnostic.naturalHeight
+    };
+  }
+  collectElementDiagnostic(element2) {
+    if (!element2) {
+      return null;
+    }
+    const style2 = window.getComputedStyle(element2);
+    const htmlElement = element2;
+    return {
+      node: this.describeElement(element2),
+      isConnected: element2.isConnected,
+      hiddenAttribute: htmlElement.hidden,
+      ariaHidden: htmlElement.getAttribute("aria-hidden"),
+      opacity: style2.opacity,
+      alpha: style2.opacity,
+      display: style2.display,
+      visibility: style2.visibility,
+      backgroundColor: style2.backgroundColor,
+      backgroundColorChannels: this.parseColorChannels(style2.backgroundColor),
+      color: style2.color,
+      colorChannels: this.parseColorChannels(style2.color),
+      textFillColor: style2.getPropertyValue("-webkit-text-fill-color"),
+      textFillColorChannels: this.parseColorChannels(
+        style2.getPropertyValue("-webkit-text-fill-color")
+      ),
+      filter: style2.filter,
+      backdropFilter: style2.getPropertyValue("backdrop-filter"),
+      mixBlendMode: style2.mixBlendMode,
+      transform: style2.transform,
+      contentVisibility: style2.getPropertyValue("content-visibility"),
+      clipPath: style2.clipPath,
+      maskImage: style2.getPropertyValue("mask-image") || style2.getPropertyValue("-webkit-mask-image"),
+      overflow: style2.overflow,
+      zIndex: style2.zIndex
+    };
+  }
+  describeElement(element2) {
+    if (!element2) {
+      return null;
+    }
+    const tagName = element2.tagName.toLowerCase();
+    const id2 = element2.id ? `#${element2.id}` : "";
+    const className = typeof element2.className === "string" && element2.className.trim() ? `.${element2.className.trim().replace(/\s+/g, ".")}` : "";
+    return `${tagName}${id2}${className}`;
+  }
+  serializeRect(rect) {
+    if (!rect) {
+      return null;
+    }
+    return {
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+      left: rect.left
+    };
+  }
+  parseColorChannels(value) {
+    const raw = (value == null ? void 0 : value.trim()) || "";
+    if (!raw) {
+      return { raw };
+    }
+    if (raw === "transparent") {
+      return { raw, r: 0, g: 0, b: 0, a: 0 };
+    }
+    const matches = raw.match(/^rgba?\((.+)\)$/i);
+    if (!matches) {
+      return { raw };
+    }
+    const parts = matches[1].split(",").map((part) => part.trim());
+    const [r2, g2, b2, a2] = parts.map((part) => Number(part));
+    return {
+      raw,
+      r: Number.isFinite(r2) ? r2 : void 0,
+      g: Number.isFinite(g2) ? g2 : void 0,
+      b: Number.isFinite(b2) ? b2 : void 0,
+      a: Number.isFinite(a2) ? a2 : raw.startsWith("rgb(") ? 1 : void 0
+    };
+  }
   static initManager(room) {
     return createInvisiblePlugin(room);
   }
@@ -19882,6 +20404,7 @@ const _WindowManager = class extends InvisiblePlugin {
           this.appManager.setBoxManager(boxManager);
         }
         this.bindMainView(mainViewElement, params.disableCameraTransform);
+        this.logMainViewVisibilityDiagnostics("bindContainer.afterBindMainView");
         if (_WindowManager.wrapper) {
           (_a = this.cursorManager) == null ? void 0 : _a.setupWrapper(_WindowManager.wrapper);
         }
@@ -20378,6 +20901,7 @@ const _WindowManager = class extends InvisiblePlugin {
       (_e = _WindowManager.playground.parentNode) == null ? void 0 : _e.removeChild(_WindowManager.playground);
     }
     _WindowManager.params = void 0;
+    this.emitter.off("mainViewScenePathChange", this.onMainViewScenePathChangeHandler);
     (_f = this._iframeBridge) == null ? void 0 : _f.destroy();
     this._iframeBridge = void 0;
     log("Destroyed");