@netless/app-presentation 0.1.12 → 0.1.13-beta.1

package/dist/index.js

@@ -1151,6 +1151,9 @@ var _Preload = class _Preload {
     // 当前触摸的索引
     this.touchIndex = 0;
     this.preloadSize = 0;
+    // 暂停后不再创建预加载链接（app 失焦降级时调用）；已插入的 link 会被移除，
+    // 挂起的 idle 回调重新进入 touch() 时也会被跳过
+    this.paused = false;
     this.preloadMap = new Map(pages.map((e, index) => [index, {
       src: e.src,
       state: 0 /* unloaded */
@@ -1158,7 +1161,21 @@ var _Preload = class _Preload {
     this.preloadSize = this.preloadMap.size;
     this.touch(0, true);
   }
+  pause() {
+    if (this.paused)
+      return;
+    this.paused = true;
+    this.destroySomeLink();
+  }
+  resume(index) {
+    if (!this.paused)
+      return;
+    this.paused = false;
+    this.touch(index != null ? index : this.touchIndex, true);
+  }
   touch(index, force = false) {
+    if (this.paused)
+      return;
     if (index >= this.preloadSize) {
       this.touchIndex = 0;
     } else {
@@ -1957,6 +1974,138 @@ var ppt2page = (ppt, name, originSize) => {
   const size = fitPageSizeToOrigin(ppt, originSize);
   return __spreadProps(__spreadValues({}, size), { src: ppt.src, thumbnail: ppt.previewURL, name });
 };
+var findBackgroundImage = (view) => {
+  const container = view.divElement;
+  if (!container || typeof container.querySelector !== "function")
+    return null;
+  return container.querySelector('img[alt="background"]');
+};
+var isBlurDegradationAllowed = (context) => {
+  const boxStatus = context.getBoxStatus();
+  if (boxStatus) {
+    return boxStatus !== "normal";
+  }
+  const boxState = context.getWindowManager().boxState;
+  return boxState !== void 0 && boxState !== "normal";
+};
+var DEFAULT_SETUP_READY_TIMEOUT = 5e3;
+var waitForCurrentPageImage = (view, timeoutMs, isDisposed) => {
+  return new Promise((resolve) => {
+    let settled = false;
+    let pollTimer;
+    const settle = (loaded) => {
+      if (settled)
+        return;
+      settled = true;
+      window.clearTimeout(timeoutTimer);
+      if (pollTimer !== void 0)
+        window.clearInterval(pollTimer);
+      resolve(loaded);
+    };
+    const timeoutTimer = window.setTimeout(() => settle(false), timeoutMs);
+    const check = () => {
+      if (isDisposed()) {
+        settle(false);
+        return;
+      }
+      const img = findBackgroundImage(view);
+      if (img && img.complete && img.naturalWidth > 0) {
+        settle(true);
+      }
+    };
+    check();
+    if (!settled) {
+      pollTimer = window.setInterval(check, 100);
+    }
+  });
+};
+var resolveImageUrl = (url) => {
+  try {
+    return new URL(url, window.location.href).href;
+  } catch (e) {
+    return url;
+  }
+};
+var setupBlurThumbnailDegradation = (config) => {
+  const { context, view, pages, pageIndex$, app, dispose: dispose2 } = config;
+  let blurEpisode = false;
+  let reDegradeEnabled = false;
+  const degrade = () => {
+    const page = pages[pageIndex$.value];
+    if (!(page == null ? void 0 : page.thumbnail))
+      return;
+    const img = findBackgroundImage(view);
+    if (img && resolveImageUrl(img.src) !== resolveImageUrl(page.thumbnail)) {
+      img.src = page.thumbnail;
+    }
+  };
+  const restore2 = () => {
+    const page = pages[pageIndex$.value];
+    const img = findBackgroundImage(view);
+    if (page && img && resolveImageUrl(img.src) !== resolveImageUrl(page.src)) {
+      img.src = page.src;
+    }
+  };
+  const isBackgroundImg = (target) => {
+    var _a;
+    const el = target;
+    return Boolean(
+      el && el.tagName === "IMG" && ((_a = el.matches) == null ? void 0 : _a.call(el, 'img[alt="background"]'))
+    );
+  };
+  const onImgLoad = (ev) => {
+    if (!blurEpisode || !reDegradeEnabled)
+      return;
+    if (!isBackgroundImg(ev.target))
+      return;
+    degrade();
+  };
+  const onImgError = (ev) => {
+    if (!blurEpisode || !reDegradeEnabled)
+      return;
+    if (!isBackgroundImg(ev.target))
+      return;
+    reDegradeEnabled = false;
+  };
+  const offFocus = context.emitter.on("focus", (isFocused) => {
+    if (isFocused) {
+      if (blurEpisode) {
+        blurEpisode = false;
+        reDegradeEnabled = false;
+        restore2();
+        app.preload.resume(pageIndex$.value);
+      }
+    } else {
+      if (!isBlurDegradationAllowed(context))
+        return;
+      blurEpisode = true;
+      reDegradeEnabled = true;
+      degrade();
+      app.preload.pause();
+    }
+  });
+  dispose2.add(offFocus);
+  const viewEl = view.divElement;
+  if (viewEl && typeof viewEl.addEventListener === "function") {
+    viewEl.addEventListener("load", onImgLoad, true);
+    viewEl.addEventListener("error", onImgError, true);
+    dispose2.add(() => {
+      viewEl.removeEventListener("load", onImgLoad, true);
+      viewEl.removeEventListener("error", onImgError, true);
+    });
+  } else {
+    warnOnceMissingViewContainer(view);
+  }
+};
+var degradedWarnedViews = /* @__PURE__ */ new WeakSet();
+var warnOnceMissingViewContainer = (view) => {
+  if (degradedWarnedViews.has(view))
+    return;
+  degradedWarnedViews.add(view);
+  console.warn(
+    "[Presentation]: blur thumbnail degradation runs without re-degrade coverage (view container unavailable)"
+  );
+};
 var createLogger = (room) => {
   if (room && room.logger) {
     return (...args) => room.logger.info(...args);
@@ -1968,7 +2117,10 @@ var createDiagnosticLogger = (context) => {
   var _a;
   const createAppLogger = context.createLogger;
   if (typeof createAppLogger === "function") {
-    return createAppLogger.call(context, "camera", { debounceTime: 300, maxWaitTime: 2e3 });
+    return createAppLogger.call(context, "camera", {
+      debounceTime: 300,
+      maxWaitTime: 2e3
+    });
   }
   const roomLogger = (_a = context.getRoom()) == null ? void 0 : _a.logger;
   const prefix = `[Presentation][${context.appId}][camera]`;
@@ -2025,40 +2177,60 @@ var scenesEqual = (scenes1, scenes2) => {
     return scene.name === scene2.name && ((_a = scene.ppt) == null ? void 0 : _a.width) === ((_b = scene2.ppt) == null ? void 0 : _b.width) && ((_c = scene.ppt) == null ? void 0 : _c.height) === ((_d = scene2.ppt) == null ? void 0 : _d.height) && ((_e = scene.ppt) == null ? void 0 : _e.src) === ((_f = scene2.ppt) == null ? void 0 : _f.src);
   });
 };
+var teardownByContext = /* @__PURE__ */ new WeakMap();
 var NetlessAppPresentation = {
   kind: "Presentation",
   setup(context) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const diagnosticLogger = createDiagnosticLogger(context);
     const view = context.getView();
     if (!view)
-      throw new Error("[Presentation]: no whiteboard view, make sure you have added options.scenePath in addApp()");
+      throw new Error(
+        "[Presentation]: no whiteboard view, make sure you have added options.scenePath in addApp()"
+      );
     const options = context.getAppOptions() || {};
     const room = context.getRoom();
     const log = options.log || createLogger(room);
     const roomLogger = room == null ? void 0 : room.logger;
     const warn = (...data) => (roomLogger == null ? void 0 : roomLogger.warn) ? roomLogger.warn(...data) : log(...data);
     const configuredOriginSize = context.storage.state.originSize;
-    const originSize = isValidSize(configuredOriginSize) ? { width: configuredOriginSize.width, height: configuredOriginSize.height } : void 0;
+    const originSize = isValidSize(configuredOriginSize) ? {
+      width: configuredOriginSize.width,
+      height: configuredOriginSize.height
+    } : void 0;
     if (configuredOriginSize != null && !originSize) {
-      warn(`[Presentation] originSize should contain finite positive width and height, got ${JSON.stringify(configuredOriginSize)}`);
+      warn(
+        `[Presentation] originSize should contain finite positive width and height, got ${JSON.stringify(configuredOriginSize)}`
+      );
     }
     const pages = (_a = context.getScenes()) == null ? void 0 : _a.map(({ ppt, name }) => ppt2page(ppt, name, originSize)).filter(Boolean);
     if (!pages || pages.length === 0)
-      throw new Error("[Presentation]: empty scenes, make sure you have added options.scenes in addApp()");
+      throw new Error(
+        "[Presentation]: empty scenes, make sure you have added options.scenes in addApp()"
+      );
     if (pages[0].src.startsWith("ppt"))
-      throw new Error("[Presentation]: legacy dynamic PPT is unsupported, please use the projector converter and @netless/slide to render it");
+      throw new Error(
+        "[Presentation]: legacy dynamic PPT is unsupported, please use the projector converter and @netless/slide to render it"
+      );
     const scenePath = context.getInitScenePath();
     let maxCameraScale = (_b = options.maxCameraScale) != null ? _b : 3;
     if (!(Number.isFinite(maxCameraScale) && maxCameraScale > 0)) {
-      warn(`[Presentation] maxCameraScale should be a positive number, got ${options.maxCameraScale}`);
+      warn(
+        `[Presentation] maxCameraScale should be a positive number, got ${options.maxCameraScale}`
+      );
       maxCameraScale = 3;
     }
     log(`[Presentation] new ${context.appId}`);
     const dispose2 = disposableStore();
     dispose2.add(() => log(`[Presentation] dispose ${context.appId}`));
     dispose2.add(() => diagnosticLogger.flush());
-    const view$$ = context.createStorage("view", { uid: "", originX: 0, originY: 0, width: 0, height: 0 });
+    const view$$ = context.createStorage("view", {
+      uid: "",
+      originX: 0,
+      originY: 0,
+      width: 0,
+      height: 0
+    });
     const _addScenePathListener = (name, listener) => {
       const windowManger = context.manager.windowManger;
       windowManger.emitter.on(name, listener);
@@ -2080,13 +2252,16 @@ var NetlessAppPresentation = {
     let pageIndex = getPageIndex(view);
     const pageIndex$ = readable(pageIndex, (set) => {
       set(pageIndex);
-      return _addScenePathListener("onAppScenePathChange", (payload) => {
-        const { appId } = payload;
-        if (appId === context.appId) {
-          const _pageIndex = getPageIndex(payload.view);
-          set(_pageIndex);
+      return _addScenePathListener(
+        "onAppScenePathChange",
+        (payload) => {
+          const { appId } = payload;
+          if (appId === context.appId) {
+            const _pageIndex = getPageIndex(payload.view);
+            set(_pageIndex);
+          }
         }
-      });
+      );
     });
     dispose2.add(() => {
       pageIndex$.dispose();
@@ -2103,7 +2278,12 @@ var NetlessAppPresentation = {
       const p = pages[index];
       const name = (_a2 = p.name) != null ? _a2 : String(index + 1);
       if (!scenes.some((scene) => scene.name === name)) {
-        await context.addPage({ scene: { name, ppt: { width: p.width, height: p.height, src: p.src } } });
+        await context.addPage({
+          scene: {
+            name,
+            ppt: { width: p.width, height: p.height, src: p.src }
+          }
+        });
       }
       if (logger) {
         logger.info(`[Presentation] syncPage ${scenePath}/${name}`);
@@ -2115,15 +2295,21 @@ var NetlessAppPresentation = {
       if (!context.isAddApp)
         return;
       if (pages.length > 100)
-        warn(`[Presentation]: too many pages (${pages.length}), may cause performance issues`);
+        warn(
+          `[Presentation]: too many pages (${pages.length}), may cause performance issues`
+        );
       if (!room || !room.isWritable)
         return;
       if (pageIndex$.value < 0 || pageIndex$.value >= pages.length) {
-        throw new Error(`[Presentation] Invalid page index: ${pageIndex$.value}, scenes length: ${pages.length}`);
+        throw new Error(
+          `[Presentation] Invalid page index: ${pageIndex$.value}, scenes length: ${pages.length}`
+        );
       }
       const scenes = room.entireScenes()[scenePath];
       if (!scenes || !scenes[pageIndex$.value]) {
-        throw new Error(`[Presentation]: no initial scene found at ${scenePath}, page index: ${pageIndex$.value}`);
+        throw new Error(
+          `[Presentation]: no initial scene found at ${scenePath}, page index: ${pageIndex$.value}`
+        );
       }
       const { name, ppt } = scenes[pageIndex$.value];
       const nextScenes = pages.map((page, index) => {
@@ -2152,16 +2338,22 @@ var NetlessAppPresentation = {
     const prepareScenesPromise = prepareScenes();
     const canJumpPage = (index) => {
       if (!context.getIsWritable()) {
-        warn("[Presentation]: no permission, make sure you have test room.isWritable");
+        warn(
+          "[Presentation]: no permission, make sure you have test room.isWritable"
+        );
         return false;
       }
       if (!(0 <= index && index < pages.length)) {
-        warn(`[Presentation]: page ${index + 1} out of bounds [1, ${pages.length}]`);
+        warn(
+          `[Presentation]: page ${index + 1} out of bounds [1, ${pages.length}]`
+        );
         return false;
       }
       const scenes = context.getDisplayer().entireScenes()[scenePath];
       if (!scenes) {
-        warn(`[Presentation]: no scenes found at ${scenePath}, make sure you have added options.scenePath in addApp()`);
+        warn(
+          `[Presentation]: no scenes found at ${scenePath}, make sure you have added options.scenePath in addApp()`
+        );
         return false;
       }
       return true;
@@ -2267,13 +2459,20 @@ var NetlessAppPresentation = {
             try {
               const { camera, size } = view;
               const referenceSize = getCameraReferenceSize(originSize, page);
-              const viewport = cameraToSharedViewport(camera, size, referenceSize);
+              const viewport = cameraToSharedViewport(
+                camera,
+                size,
+                referenceSize
+              );
               if (viewport)
                 view$$.setState(__spreadValues({ uid: me }, viewport));
               if (pendingMoveCameraRequest) {
                 diagnosticLogger.debouncedInfo(
                   "moveCamera",
-                  getCameraDiagnosticState("moveCamera", pendingMoveCameraRequest)
+                  getCameraDiagnosticState(
+                    "moveCamera",
+                    pendingMoveCameraRequest
+                  )
                 );
                 pendingMoveCameraRequest = void 0;
               }
@@ -2281,7 +2480,10 @@ var NetlessAppPresentation = {
               diagnosticLogger.error(
                 "syncView.failed",
                 error,
-                getCameraDiagnosticState("moveCamera", pendingMoveCameraRequest)
+                getCameraDiagnosticState(
+                  "moveCamera",
+                  pendingMoveCameraRequest
+                )
               );
               pendingMoveCameraRequest = void 0;
             }
@@ -2306,17 +2508,32 @@ var NetlessAppPresentation = {
         });
       }
     };
-    dispose2.add(view$$.addStateChangedListener(() => syncViewFromRemote(false, true)));
+    dispose2.add(
+      view$$.addStateChangedListener(() => syncViewFromRemote(false, true))
+    );
     const getPageSize = () => {
       const { width, height } = app.page() || {};
       return { width: width || 0, height: height || 0 };
     };
     const box = context.getBox();
-    const app = dispose2.add(createPresentation(box, pages, jumpPage, pageIndex$, view, options.thumbnail, options.useClipView));
-    app.contentDOM.dataset.appPresentationVersion = "0.1.12";
+    const app = dispose2.add(
+      createPresentation(
+        box,
+        pages,
+        jumpPage,
+        pageIndex$,
+        view,
+        options.thumbnail,
+        options.useClipView
+      )
+    );
+    app.contentDOM.dataset.appPresentationVersion = "0.1.13-beta.1";
     app.scaleDocsToFit = scaleDocsToFit;
     app.log = log;
     app.warn = warn;
+    if (pageIndex$.value !== 0) {
+      app.preload.touch(pageIndex$.value, true);
+    }
     const getCameraDiagnosticState = (reason, requestedCamera) => {
       const page = app.page();
       const pageSize = page && isValidSize(page) ? { width: page.width, height: page.height } : void 0;
@@ -2360,19 +2577,21 @@ var NetlessAppPresentation = {
     };
     if (originSize) {
       let previousPageIndex = pageIndex$.value;
-      dispose2.add(pageIndex$.subscribe((nextPageIndex) => {
-        if (nextPageIndex === previousPageIndex)
-          return;
-        previousPageIndex = nextPageIndex;
-        scaleDocsToFit();
-      }));
+      dispose2.add(
+        pageIndex$.subscribe((nextPageIndex) => {
+          if (nextPageIndex === previousPageIndex)
+            return;
+          previousPageIndex = nextPageIndex;
+          scaleDocsToFit();
+        })
+      );
     }
     if (options.justDocsViewReadonly) {
       app.setDocsViewReadonly(true);
     }
     const goToPageByClick = () => {
-      var _a2, _b2, _c2, _d;
-      const currentApplianceName = (_d = (_c2 = (_b2 = (_a2 = context.getRoom()) == null ? void 0 : _a2.state) == null ? void 0 : _b2.memberState) == null ? void 0 : _c2.currentApplianceName) != null ? _d : "";
+      var _a2, _b2, _c2, _d2;
+      const currentApplianceName = (_d2 = (_c2 = (_b2 = (_a2 = context.getRoom()) == null ? void 0 : _a2.state) == null ? void 0 : _b2.memberState) == null ? void 0 : _c2.currentApplianceName) != null ? _d2 : "";
       if (!app.readonly && currentApplianceName === "clicker") {
         nextPage();
       }
@@ -2414,9 +2633,14 @@ var NetlessAppPresentation = {
     });
     syncViewFromRemote(true);
     reportInitializedCamera("setup");
-    dispose2.add(context.emitter.on("writableChange", (isWritable) => {
-      app.setReadonly(!isWritable);
-    }));
+    dispose2.add(
+      context.emitter.on("writableChange", (isWritable) => {
+        app.setReadonly(!isWritable);
+      })
+    );
+    if (!options.disableBlurThumbnailDegradation) {
+      setupBlurThumbnailDegradation({ context, view, pages, pageIndex$, app, dispose: dispose2 });
+    }
     const getOriginScale = () => {
       const page = app.page();
       if (!page || !isValidSize(page))
@@ -2438,29 +2662,53 @@ var NetlessAppPresentation = {
       img.crossOrigin = "Anonymous";
       await new Promise((resolve, reject) => {
         img.onload = () => resolve();
-        img.onerror = () => reject(new Error(
-          `[Presentation]: failed to load screenshot page image: ${safeResourceLocation(src)}`
-        ));
+        img.onerror = () => reject(
+          new Error(
+            `[Presentation]: failed to load screenshot page image: ${safeResourceLocation(src)}`
+          )
+        );
         img.src = src;
       });
-      _context.drawImage(img, 0, 0, width, height, 0, 0, _width || width, _height || height);
+      _context.drawImage(
+        img,
+        0,
+        0,
+        width,
+        height,
+        0,
+        0,
+        _width || width,
+        _height || height
+      );
       const currentScenePath = view.focusScenePath;
       if (!currentScenePath) {
         throw new Error("[Presentation]: current scene path not found");
       }
       const windowManger = context.getWindowManager();
       if (windowManger._appliancePlugin) {
-        await windowManger._appliancePlugin.screenshotToCanvasAsync(_context, currentScenePath, _width || width, _height || height, {
-          centerX: 0,
-          centerY: 0,
-          scale: _width && _height ? Math.min(_width / width, _height / height) : 1
-        });
+        await windowManger._appliancePlugin.screenshotToCanvasAsync(
+          _context,
+          currentScenePath,
+          _width || width,
+          _height || height,
+          {
+            centerX: 0,
+            centerY: 0,
+            scale: _width && _height ? Math.min(_width / width, _height / height) : 1
+          }
+        );
       } else {
-        await view.screenshotToCanvasAsync(_context, currentScenePath, _width || width, _height || height, {
-          centerX: 0,
-          centerY: 0,
-          scale: _width && _height ? Math.min(_width / width, _height / height) : 1
-        });
+        await view.screenshotToCanvasAsync(
+          _context,
+          currentScenePath,
+          _width || width,
+          _height || height,
+          {
+            centerX: 0,
+            centerY: 0,
+            scale: _width && _height ? Math.min(_width / width, _height / height) : 1
+          }
+        );
       }
     };
     const screenshotCurrentPageAsync = async (_context, _width, _height) => {
@@ -2478,21 +2726,27 @@ var NetlessAppPresentation = {
     let scrollbar;
     if (options.useScrollbar) {
       dispose2.make(() => {
-        scrollbar = new Scrollbar(app.contentDOM, {
-          appId: context.appId,
-          getPageSize,
-          getOriginScale,
-          syncView,
-          getWritable: () => context.getIsWritable(),
-          scrollbarEventCallback: options.scrollbarEventCallback
-        }, view);
+        scrollbar = new Scrollbar(
+          app.contentDOM,
+          {
+            appId: context.appId,
+            getPageSize,
+            getOriginScale,
+            syncView,
+            getWritable: () => context.getIsWritable(),
+            scrollbarEventCallback: options.scrollbarEventCallback
+          },
+          view
+        );
         return () => scrollbar == null ? void 0 : scrollbar.destroy();
       });
     }
     const moveCamera = (camera) => {
       try {
         if (!context.getIsWritable()) {
-          throw new Error("[Presentation]: moveCamera must be called in writable room");
+          throw new Error(
+            "[Presentation]: moveCamera must be called in writable room"
+          );
         }
         pendingMoveCameraRequest = __spreadValues({}, camera);
         if (scrollbar) {
@@ -2513,9 +2767,29 @@ var NetlessAppPresentation = {
         throw error;
       }
     };
-    context.emitter.on("destroy", () => dispose2());
+    let disposed = false;
+    let offDestroy;
+    const teardown = () => {
+      if (disposed)
+        return;
+      disposed = true;
+      const removeDestroy = offDestroy;
+      offDestroy = void 0;
+      removeDestroy == null ? void 0 : removeDestroy();
+      dispose2();
+    };
+    offDestroy = context.emitter.on("destroy", teardown);
+    teardownByContext.set(context, teardown);
     const reportProgress = (progress, result) => {
-      window.postMessage({ type: "@netless/_result_save_pdf_", appId: context.appId, progress, result }, "*");
+      window.postMessage(
+        {
+          type: "@netless/_result_save_pdf_",
+          appId: context.appId,
+          progress,
+          result
+        },
+        "*"
+      );
       return result;
     };
     const base64url = async (url) => {
@@ -2555,7 +2829,9 @@ var NetlessAppPresentation = {
       }
       const scenes = context.getDisplayer().entireScenes()[scenePath];
       if (!scenes) {
-        throw new Error(`[Presentation]: no scenes found while exporting PDF: ${scenePath}`);
+        throw new Error(
+          `[Presentation]: no scenes found while exporting PDF: ${scenePath}`
+        );
       }
       const stage_canvas = document.createElement("canvas");
       stage_canvas.width = pdfWidth;
@@ -2580,20 +2856,32 @@ var NetlessAppPresentation = {
         const img = document.createElement("img");
         await new Promise((resolve, reject) => {
           img.onload = () => resolve();
-          img.onerror = () => reject(new Error(
-            `[Presentation]: failed to load PDF page image, page index: ${index}`
-          ));
+          img.onerror = () => reject(
+            new Error(
+              `[Presentation]: failed to load PDF page image, page index: ${index}`
+            )
+          );
           img.src = url;
         });
         stage.drawImage(img, 0, 0, width2, height2);
         wb.clearRect(0, 0, pdfWidth, pdfHeight);
         const name = (_a2 = p.name) != null ? _a2 : String(index + 1);
         if (scenes.some((scene) => scene.name == name)) {
-          const camera = { centerX: 0, centerY: 0, scale: Math.min(wb_canvas.width / width2, wb_canvas.height / height2) };
+          const camera = {
+            centerX: 0,
+            centerY: 0,
+            scale: Math.min(wb_canvas.width / width2, wb_canvas.height / height2)
+          };
           const sPath = `${scenePath}/${name}`;
           const windowManger = context.getWindowManager();
           if (windowManger._appliancePlugin) {
-            await windowManger._appliancePlugin.screenshotToCanvasAsync(wb, sPath, wb_canvas.width, wb_canvas.height, camera);
+            await windowManger._appliancePlugin.screenshotToCanvasAsync(
+              wb,
+              sPath,
+              wb_canvas.width,
+              wb_canvas.height,
+              camera
+            );
           } else {
             await view.screenshotToCanvasAsync(
               wb,
@@ -2640,14 +2928,20 @@ var NetlessAppPresentation = {
         throw error;
       }
     };
-    dispose2.add(listen(window, "message", (ev) => {
-      if (ev.data && ev.data.type == "@netless/_request_save_pdf_" && ev.data.appId == context.appId) {
-        toPdf().catch((err) => {
-          warn(err);
-          reportProgress(100, null);
-        });
-      }
-    }));
+    dispose2.add(
+      listen(
+        window,
+        "message",
+        (ev) => {
+          if (ev.data && ev.data.type == "@netless/_request_save_pdf_" && ev.data.appId == context.appId) {
+            toPdf().catch((err) => {
+              warn(err);
+              reportProgress(100, null);
+            });
+          }
+        }
+      )
+    );
     const setDocsViewReadonly = (bol) => {
       app.setDocsViewReadonly(bol);
     };
@@ -2658,19 +2952,57 @@ var NetlessAppPresentation = {
         scrollbar.setReadonly(bol);
       }
     };
-    const controller = { app, view, context, jumpPage, prevPage, nextPage, jumpPageAsync, prevPageAsync, nextPageAsync, pageState, toPdf, log, setDocsViewReadonly, setReadonly, moveCamera, getOriginScale, getScale, getPageSize, screenshotCurrentPageAsync };
-    dispose2.add(listen(window, "message", (ev) => {
-      if (ev.data === "@netless/_presentation_") {
-        if (typeof window !== "undefined")
-          dispose2.make(() => {
-            const debug = window._presentation_ || (window._presentation_ = /* @__PURE__ */ new Set());
-            debug.add(controller);
-            return () => debug.delete(controller);
-          });
-        console.log(controller);
-      }
-    }));
-    return prepareScenesPromise.then(() => controller);
+    const controller = {
+      app,
+      view,
+      context,
+      jumpPage,
+      prevPage,
+      nextPage,
+      jumpPageAsync,
+      prevPageAsync,
+      nextPageAsync,
+      pageState,
+      toPdf,
+      log,
+      setDocsViewReadonly,
+      setReadonly,
+      moveCamera,
+      getOriginScale,
+      getScale,
+      getPageSize,
+      screenshotCurrentPageAsync
+    };
+    dispose2.add(
+      listen(
+        window,
+        "message",
+        (ev) => {
+          if (ev.data === "@netless/_presentation_") {
+            if (typeof window !== "undefined")
+              dispose2.make(() => {
+                const debug = window._presentation_ || (window._presentation_ = /* @__PURE__ */ new Set());
+                debug.add(controller);
+                return () => debug.delete(controller);
+              });
+            console.log(controller);
+          }
+        }
+      )
+    );
+    const setupReadyTimeout = (_d = options.setupReadyTimeout) != null ? _d : DEFAULT_SETUP_READY_TIMEOUT;
+    return prepareScenesPromise.then(async () => {
+      const loaded = await waitForCurrentPageImage(view, setupReadyTimeout, () => disposed);
+      if (!loaded) {
+        warn(`[Presentation] setup ready wait timed out after ${setupReadyTimeout}ms`);
+      }
+      return controller;
+    });
+  },
+  teardown(context) {
+    var _a;
+    (_a = teardownByContext.get(context)) == null ? void 0 : _a();
+    teardownByContext.delete(context);
   }
 };
 var AppPresentation = class extends Presentation {
@@ -2690,19 +3022,29 @@ var AppPresentation = class extends Presentation {
     if (0 <= index && index < this.pages.length) {
       this.jumpPage(index);
     } else {
-      (_a = this.warn) == null ? void 0 : _a.call(this, `[Presentation]: page index ${index} out of bounds [0, ${this.pages.length - 1}]`);
+      (_a = this.warn) == null ? void 0 : _a.call(
+        this,
+        `[Presentation]: page index ${index} out of bounds [0, ${this.pages.length - 1}]`
+      );
     }
   }
 };
 function createPresentation(box, pages, jumpPage, pageIndex$, view, thumbnail, useClipView) {
   box.mountStyles(style_default);
-  const app = new AppPresentation({ pages, readonly: box.readonly, jumpPage, thumbnail });
+  const app = new AppPresentation({
+    pages,
+    readonly: box.readonly,
+    jumpPage,
+    thumbnail
+  });
   app.box = box;
   box.mountContent(app.contentDOM);
   box.mountFooter(app.footerDOM);
-  app.dispose.add(pageIndex$.subscribe((pageIndex) => {
-    app.setPageIndex(pageIndex);
-  }));
+  app.dispose.add(
+    pageIndex$.subscribe((pageIndex) => {
+      app.setPageIndex(pageIndex);
+    })
+  );
   if (useClipView && view) {
     const onCameraUpdatedEffectForMaskView = (0, import_debounce2.default)(() => {
       const { width: pageWidth, height: pageHeight } = app.page() || {};
@@ -2711,8 +3053,12 @@ function createPresentation(box, pages, jumpPage, pageIndex$, view, thumbnail, u
       }
       const { scale } = view.camera;
       const { width, height } = view.size;
-      const pageRatioX = Math.round((1 - pageWidth * scale / width) / 2 * 100);
-      const pageRatioY = Math.round((1 - pageHeight * scale / height) / 2 * 100);
+      const pageRatioX = Math.round(
+        (1 - pageWidth * scale / width) / 2 * 100
+      );
+      const pageRatioY = Math.round(
+        (1 - pageHeight * scale / height) / 2 * 100
+      );
       app.whiteboardDOM.style.clipPath = `inset(${pageRatioY}% ${pageRatioX}%)`;
     }, 50);
     onCameraUpdatedEffectForMaskView();
@@ -2737,7 +3083,7 @@ var install = (register, options = {}) => {
 };
 
 // src/index.ts
-var version = "0.1.12";
+var version = "0.1.13-beta.1";
 
 exports.NetlessAppPresentation = NetlessAppPresentation;
 exports.Presentation = Presentation;