@netless/app-presentation 0.1.10 → 0.1.12

package/dist/index.global.js

@@ -1883,10 +1883,79 @@ var NetlessAppPresentation = (function (exports) {
     }
   };
 
+  // src/camera-options.ts
+  function getCameraScaleRange(fitScale, maxCameraScale, disableCameraTransform) {
+    return {
+      minScale: fitScale,
+      maxScale: fitScale * (disableCameraTransform ? 1 : maxCameraScale)
+    };
+  }
+  function shouldDisableDeviceCameraTransform(options) {
+    return Boolean(options.disableCameraTransform || options.disableDeviceCameraTransform);
+  }
+
+  // src/camera-reference.ts
+  function isValidSize(size) {
+    return Boolean(
+      size && Number.isFinite(size.width) && Number.isFinite(size.height) && size.width > 0 && size.height > 0
+    );
+  }
+  function isValidSharedViewport(viewport) {
+    return Boolean(
+      viewport && Number.isFinite(viewport.originX) && Number.isFinite(viewport.originY) && isValidSize(viewport)
+    );
+  }
+  function getCameraReferenceSize(originSize, pageSize) {
+    return isValidSize(originSize) ? originSize : pageSize;
+  }
+  function fitPageSizeToOrigin(pageSize, originSize) {
+    if (!isValidSize(pageSize) || !isValidSize(originSize))
+      return __spreadValues({}, pageSize);
+    const ratio = Math.min(
+      originSize.width / pageSize.width,
+      originSize.height / pageSize.height
+    );
+    if (!(Number.isFinite(ratio) && ratio > 0))
+      return __spreadValues({}, pageSize);
+    return {
+      width: pageSize.width * ratio,
+      height: pageSize.height * ratio
+    };
+  }
+  function getFitScale(viewSize, referenceSize) {
+    if (!isValidSize(viewSize) || !isValidSize(referenceSize))
+      return;
+    const scale = Math.min(
+      viewSize.width / referenceSize.width,
+      viewSize.height / referenceSize.height
+    );
+    return Number.isFinite(scale) && scale > 0 ? scale : void 0;
+  }
+  function cameraToSharedViewport(camera, viewSize, referenceSize) {
+    const fitScale = getFitScale(viewSize, referenceSize);
+    if (fitScale === void 0 || !Number.isFinite(camera.centerX) || !Number.isFinite(camera.centerY) || !Number.isFinite(camera.scale) || camera.scale <= 0) {
+      return;
+    }
+    const normalizedScale = camera.scale / fitScale;
+    const width = referenceSize.width / normalizedScale;
+    const height = referenceSize.height / normalizedScale;
+    return {
+      originX: camera.centerX - width / 2,
+      originY: camera.centerY - height / 2,
+      width,
+      height
+    };
+  }
+
   // src/app-presentation.ts
   var import_debounce2 = __toESM(require_debounce());
   var emptySceneName = "$$empty$$";
-  var ppt2page = (ppt, name) => ppt ? { width: ppt.width, height: ppt.height, src: ppt.src, thumbnail: ppt.previewURL, name } : null;
+  var ppt2page = (ppt, name, originSize) => {
+    if (!ppt)
+      return null;
+    const size = fitPageSizeToOrigin(ppt, originSize);
+    return __spreadProps(__spreadValues({}, size), { src: ppt.src, thumbnail: ppt.previewURL, name });
+  };
   var createLogger = (room) => {
     if (room && room.logger) {
       return (...args) => room.logger.info(...args);
@@ -1894,6 +1963,55 @@ var NetlessAppPresentation = (function (exports) {
       return (...args) => console.log(...args);
     }
   };
+  var createDiagnosticLogger = (context) => {
+    var _a;
+    const createAppLogger = context.createLogger;
+    if (typeof createAppLogger === "function") {
+      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]`;
+    const emit = (level, event, ...data) => {
+      try {
+        const printer = roomLogger == null ? void 0 : roomLogger[level];
+        if (typeof printer === "function")
+          printer.call(roomLogger, `${prefix}[${event}]`, ...data);
+      } catch (e) {
+      }
+    };
+    const debouncedByEvent = /* @__PURE__ */ new Map();
+    const debouncedInfo = (event, payload) => {
+      let emitDebounced = debouncedByEvent.get(event);
+      if (!emitDebounced) {
+        emitDebounced = (0, import_debounce2.default)(
+          (nextPayload) => emit("info", event, nextPayload),
+          300,
+          { maxWait: 2e3 }
+        );
+        debouncedByEvent.set(event, emitDebounced);
+      }
+      emitDebounced(payload);
+    };
+    return {
+      info: (event, payload) => emit("info", event, payload),
+      warn: (event, payload) => emit("warn", event, payload),
+      error: (event, error, payload) => emit("error", event, error, payload),
+      debouncedInfo,
+      flush: () => debouncedByEvent.forEach((logger) => logger.flush())
+    };
+  };
+  var safeResourceLocation = (value) => {
+    if (value.startsWith("data:"))
+      return "data:[omitted]";
+    if (value.startsWith("blob:"))
+      return "blob:[omitted]";
+    try {
+      const url = new URL(value);
+      return `${url.origin}${url.pathname}`;
+    } catch (e) {
+      return value.split("?")[0];
+    }
+  };
   var scenesEqual = (scenes1, scenes2) => {
     if (!scenes1 || !scenes2) {
       return false;
@@ -1910,25 +2028,35 @@ var NetlessAppPresentation = (function (exports) {
     kind: "Presentation",
     setup(context) {
       var _a, _b, _c;
+      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()");
-      const pages = (_a = context.getScenes()) == null ? void 0 : _a.map(({ ppt, name }) => ppt2page(ppt, name)).filter(Boolean);
+      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;
+      if (configuredOriginSize != null && !originSize) {
+        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()");
       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");
       const scenePath = context.getInitScenePath();
-      const options = context.getAppOptions() || {};
       let maxCameraScale = (_b = options.maxCameraScale) != null ? _b : 3;
       if (!(Number.isFinite(maxCameraScale) && maxCameraScale > 0)) {
-        console.warn(`[Presentation] maxCameraScale should be a positive number, got ${options.maxCameraScale}`);
+        warn(`[Presentation] maxCameraScale should be a positive number, got ${options.maxCameraScale}`);
         maxCameraScale = 3;
       }
-      const log = options.log || createLogger(context.getRoom());
       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 _addScenePathListener = (name, listener) => {
         const windowManger = context.manager.windowManger;
@@ -1962,58 +2090,15 @@ var NetlessAppPresentation = (function (exports) {
       dispose2.add(() => {
         pageIndex$.dispose();
       });
-      if (context.isAddApp) {
-        if (pages.length > 100)
-          console.warn(`[Presentation]: too many pages (${pages.length}), may cause performance issues`);
-        let redirectResolve = void 0;
-        const room2 = context.getRoom();
-        if (room2 && room2.isWritable) {
-          const scenes = room2.entireScenes()[scenePath];
-          if (pageIndex$.value < 0 || pageIndex$.value >= pages.length) {
-            throw new Error(`[Presentation] Invalid page index: ${pageIndex$.value}, scenes length: ${pages.length}`);
-          }
-          new Promise((resolve) => {
-            const { name, ppt } = scenes[pageIndex$.value];
-            redirectResolve = resolve;
-            const _scenes = pages.map((p, index) => {
-              var _a2;
-              return {
-                name: (_a2 = p.name) != null ? _a2 : String(index + 1),
-                ppt: { width: p.width, height: p.height, src: p.src }
-              };
-            });
-            if (!scenesEqual(scenes, _scenes)) {
-              room2.removeScenes(scenePath);
-              room2.putScenes(scenePath, _scenes);
-            }
-            if (name === _scenes[pageIndex$.value].name && !ppt) {
-              context.addPage({ scene: { name: emptySceneName } }).then(() => {
-                log(`[Presentation] setup setScenePath ${scenePath}/${emptySceneName}`);
-                context.setScenePath(`${scenePath}/${emptySceneName}`).then(() => {
-                  redirectResolve && redirectResolve(true);
-                });
-              });
-            } else {
-              redirectResolve && redirectResolve(false);
-            }
-          }).then(async (bol) => {
-            await syncPage(pageIndex$.value, room2.logger);
-            if (bol) {
-              log(`[Presentation] setup removeScenes ${scenePath}/${emptySceneName}`);
-              room2.removeScenes(`${scenePath}/${emptySceneName}`);
-            }
-          });
-        }
-      }
       const me = ((_c = context.getRoom()) == null ? void 0 : _c.uid) || context.getDisplayer().observerId + "";
       let throttleSyncView = 0;
       const syncPage = async (index, logger) => {
         var _a2;
         if (!context.getIsWritable())
-          return;
+          return false;
         const scenes = context.getDisplayer().entireScenes()[scenePath];
         if (!scenes)
-          return;
+          return false;
         const p = pages[index];
         const name = (_a2 = p.name) != null ? _a2 : String(index + 1);
         if (!scenes.some((scene) => scene.name === name)) {
@@ -2023,57 +2108,149 @@ var NetlessAppPresentation = (function (exports) {
           logger.info(`[Presentation] syncPage ${scenePath}/${name}`);
         }
         await context.setScenePath(`${scenePath}/${name}`);
+        return true;
       };
-      const jumpPage = (index) => {
-        var _a2;
+      const prepareScenes = async () => {
+        if (!context.isAddApp)
+          return;
+        if (pages.length > 100)
+          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}`);
+        }
+        const scenes = room.entireScenes()[scenePath];
+        if (!scenes || !scenes[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) => {
+          var _a2;
+          return {
+            name: (_a2 = page.name) != null ? _a2 : String(index + 1),
+            ppt: { width: page.width, height: page.height, src: page.src }
+          };
+        });
+        if (!scenesEqual(scenes, nextScenes)) {
+          room.removeScenes(scenePath);
+          room.putScenes(scenePath, nextScenes);
+        }
+        const shouldRedirect = name === nextScenes[pageIndex$.value].name && !ppt;
+        if (shouldRedirect) {
+          await context.addPage({ scene: { name: emptySceneName } });
+          log(`[Presentation] setup setScenePath ${scenePath}/${emptySceneName}`);
+          await context.setScenePath(`${scenePath}/${emptySceneName}`);
+        }
+        await syncPage(pageIndex$.value, room.logger);
+        if (shouldRedirect) {
+          log(`[Presentation] setup removeScenes ${scenePath}/${emptySceneName}`);
+          room.removeScenes(`${scenePath}/${emptySceneName}`);
+        }
+      };
+      const prepareScenesPromise = prepareScenes();
+      const canJumpPage = (index) => {
         if (!context.getIsWritable()) {
-          console.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)) {
-          console.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) {
-          console.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;
         }
-        const p = pages[index];
-        const name = (_a2 = p.name) != null ? _a2 : String(index + 1);
-        if (!scenes.some((scene) => scene.name === name)) {
-          context.addPage({ scene: { name, ppt: { width: p.width, height: p.height, src: p.src } } });
-        }
-        syncPage(index);
+        return true;
+      };
+      const jumpPage = (index) => {
+        if (!canJumpPage(index))
+          return false;
+        void syncPage(index).catch((error) => {
+          warn("[Presentation]: failed to sync page", error);
+          diagnosticLogger.error("jumpPage.failed", error, {
+            index,
+            pageIndex: pageIndex$.value,
+            focusScenePath: view.focusScenePath
+          });
+        });
         return true;
       };
       const prevPage = () => jumpPage(pageIndex$.value - 1);
       const nextPage = () => jumpPage(pageIndex$.value + 1);
+      const jumpPageAsync = async (index) => {
+        if (!canJumpPage(index))
+          return false;
+        try {
+          return await syncPage(index);
+        } catch (error) {
+          diagnosticLogger.error("jumpPageAsync.failed", error, {
+            index,
+            pageIndex: pageIndex$.value,
+            focusScenePath: view.focusScenePath
+          });
+          throw error;
+        }
+      };
+      const prevPageAsync = () => jumpPageAsync(pageIndex$.value - 1);
+      const nextPageAsync = () => jumpPageAsync(pageIndex$.value + 1);
       const pageState = () => ({ index: pageIndex$.value, length: pages.length });
       const scaleDocsToFit = () => {
-        const { width, height } = app.page() || {};
-        if (width && height) {
+        const page = app.page();
+        if (page && isValidSize(page)) {
+          const referenceSize = getCameraReferenceSize(originSize, page);
+          if (originSize) {
+            const fitScale = getFitScale(view.size, referenceSize);
+            if (!fitScale)
+              return;
+            const { minScale, maxScale } = getCameraScaleRange(
+              fitScale,
+              maxCameraScale,
+              options.disableCameraTransform
+            );
+            view.setCameraBound({
+              damping: 1,
+              maxContentMode: () => maxScale,
+              minContentMode: () => minScale,
+              centerX: 0,
+              centerY: 0,
+              width: page.width,
+              height: page.height
+            });
+            if (isValidSharedViewport(view$$.state)) {
+              syncViewFromRemote(true);
+              return;
+            }
+          }
           view.moveCameraToContain({
-            originX: -width / 2,
-            originY: -height / 2,
-            width,
-            height,
+            originX: -referenceSize.width / 2,
+            originY: -referenceSize.height / 2,
+            width: referenceSize.width,
+            height: referenceSize.height,
             animationMode: "immediately"
           });
-          const maxScale = view.camera.scale * (options.disableCameraTransform ? 1 : maxCameraScale);
-          const minScale = view.camera.scale;
-          view.setCameraBound({
-            damping: 1,
-            maxContentMode: () => maxScale,
-            minContentMode: () => minScale,
-            centerX: 0,
-            centerY: 0,
-            width,
-            height
-          });
+          if (!originSize) {
+            const { minScale, maxScale } = getCameraScaleRange(
+              view.camera.scale,
+              maxCameraScale,
+              options.disableCameraTransform
+            );
+            view.setCameraBound({
+              damping: 1,
+              maxContentMode: () => maxScale,
+              minContentMode: () => minScale,
+              centerX: 0,
+              centerY: 0,
+              width: page.width,
+              height: page.height
+            });
+          }
           syncViewFromRemote(true);
         }
       };
+      let pendingMoveCameraRequest;
       const syncView = () => {
         if (context.getIsWritable()) {
           if (options.debounceSync) {
@@ -2082,18 +2259,31 @@ var NetlessAppPresentation = (function (exports) {
           }
           if (throttleSyncView > 0)
             return;
-          const { width, height } = app.page() || {};
-          if (width && height) {
+          const page = app.page();
+          if (page && isValidSize(page)) {
             throttleSyncView = setTimeout(() => {
               throttleSyncView = 0;
-              const { camera, size } = view;
-              const fixedW = Math.min(size.width, size.height * width / height);
-              const fixedH = Math.min(size.height, size.width * height / width);
-              const w = fixedW / camera.scale;
-              const h = fixedH / camera.scale;
-              const x = camera.centerX - w / 2;
-              const y = camera.centerY - h / 2;
-              view$$.setState({ uid: me, originX: x, originY: y, width: w, height: h });
+              try {
+                const { camera, size } = view;
+                const referenceSize = getCameraReferenceSize(originSize, page);
+                const viewport = cameraToSharedViewport(camera, size, referenceSize);
+                if (viewport)
+                  view$$.setState(__spreadValues({ uid: me }, viewport));
+                if (pendingMoveCameraRequest) {
+                  diagnosticLogger.debouncedInfo(
+                    "moveCamera",
+                    getCameraDiagnosticState("moveCamera", pendingMoveCameraRequest)
+                  );
+                  pendingMoveCameraRequest = void 0;
+                }
+              } catch (error) {
+                diagnosticLogger.error(
+                  "syncView.failed",
+                  error,
+                  getCameraDiagnosticState("moveCamera", pendingMoveCameraRequest)
+                );
+                pendingMoveCameraRequest = void 0;
+              }
             }, 50);
           }
         }
@@ -2101,6 +2291,7 @@ var NetlessAppPresentation = (function (exports) {
       dispose2.add(() => {
         clearTimeout(throttleSyncView);
         throttleSyncView = 0;
+        pendingMoveCameraRequest = void 0;
       });
       const syncViewFromRemote = (force = false, animate = false) => {
         const { uid, originX, originY, width, height } = view$$.state;
@@ -2121,13 +2312,63 @@ var NetlessAppPresentation = (function (exports) {
       };
       const box = context.getBox();
       const app = dispose2.add(createPresentation(box, pages, jumpPage, pageIndex$, view, options.thumbnail, options.useClipView));
-      app.contentDOM.dataset.appPresentationVersion = "0.1.10";
+      app.contentDOM.dataset.appPresentationVersion = "0.1.12";
       app.scaleDocsToFit = scaleDocsToFit;
       app.log = log;
+      app.warn = warn;
+      const getCameraDiagnosticState = (reason, requestedCamera) => {
+        const page = app.page();
+        const pageSize = page && isValidSize(page) ? { width: page.width, height: page.height } : void 0;
+        const referenceSize = pageSize ? getCameraReferenceSize(originSize, pageSize) : void 0;
+        const viewSize = { width: view.size.width, height: view.size.height };
+        const viewCamera = {
+          centerX: view.camera.centerX,
+          centerY: view.camera.centerY,
+          scale: view.camera.scale
+        };
+        const sharedViewport = __spreadValues({}, view$$.state);
+        const originScale = referenceSize ? getFitScale(viewSize, referenceSize) : void 0;
+        const normalizedScale = originScale && originScale > 0 ? viewCamera.scale / originScale : void 0;
+        const sharedScaleX = referenceSize && sharedViewport.width > 0 ? referenceSize.width / sharedViewport.width : void 0;
+        const sharedScaleY = referenceSize && sharedViewport.height > 0 ? referenceSize.height / sharedViewport.height : void 0;
+        return {
+          reason,
+          requestedCamera,
+          storageOriginSize: context.storage.state.originSize,
+          sharedViewport,
+          pageSize,
+          referenceSize,
+          viewSize,
+          viewCamera,
+          originScale,
+          normalizedScale,
+          sharedScaleX,
+          sharedScaleY,
+          focusScenePath: view.focusScenePath,
+          isWritable: context.getIsWritable()
+        };
+      };
+      let didReportInitializedCamera = false;
+      const reportInitializedCamera = (source) => {
+        if (didReportInitializedCamera || !isValidSize(view.size) || !isValidSize(app.page()))
+          return;
+        didReportInitializedCamera = true;
+        diagnosticLogger.info("initialize", __spreadValues({
+          source
+        }, getCameraDiagnosticState("initialize")));
+      };
+      if (originSize) {
+        let previousPageIndex = pageIndex$.value;
+        dispose2.add(pageIndex$.subscribe((nextPageIndex) => {
+          if (nextPageIndex === previousPageIndex)
+            return;
+          previousPageIndex = nextPageIndex;
+          scaleDocsToFit();
+        }));
+      }
       if (options.justDocsViewReadonly) {
         app.setDocsViewReadonly(true);
       }
-      const room = context.getRoom();
       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 : "";
@@ -2142,13 +2383,17 @@ var NetlessAppPresentation = (function (exports) {
         });
       }
       context.mountView(app.whiteboardDOM);
-      if (options.disableCameraTransform) {
+      if (shouldDisableDeviceCameraTransform(options)) {
         view.disableCameraTransform = true;
       }
       scaleDocsToFit();
       dispose2.make(() => {
-        view.callbacks.on("onSizeUpdated", scaleDocsToFit);
-        return () => view.callbacks.off("onSizeUpdated", scaleDocsToFit);
+        const onSizeUpdated = () => {
+          scaleDocsToFit();
+          reportInitializedCamera("onSizeUpdated");
+        };
+        view.callbacks.on("onSizeUpdated", onSizeUpdated);
+        return () => view.callbacks.off("onSizeUpdated", onSizeUpdated);
       });
       if (options.viewport && context.isAddApp && app.page()) {
         const page = app.page();
@@ -2167,20 +2412,20 @@ var NetlessAppPresentation = (function (exports) {
         return () => view.callbacks.off("onCameraUpdatedByDevice", syncView);
       });
       syncViewFromRemote(true);
+      reportInitializedCamera("setup");
       dispose2.add(context.emitter.on("writableChange", (isWritable) => {
         app.setReadonly(!isWritable);
       }));
       const getOriginScale = () => {
-        const { size } = view;
-        const { width, height } = getPageSize();
-        return Math.min(size.height / height, size.width / width);
+        const page = app.page();
+        if (!page || !isValidSize(page))
+          return 0;
+        return getFitScale(view.size, getCameraReferenceSize(originSize, page)) || 0;
       };
       const getScale = () => {
         return view.camera.scale;
       };
-      const screenshotCurrentPageAsync = async (_context, _width, _height) => {
-        var _a2, _b2;
-        (_b2 = (_a2 = room == null ? void 0 : room.calibrationTimestamp) == null ? void 0 : _a2.toString()) != null ? _b2 : Date.now().toString();
+      const screenshotCurrentPage = async (_context, _width, _height) => {
         const currentPage = pages[pageIndex$.value];
         if (!currentPage) {
           throw new Error("[Presentation]: current page not found");
@@ -2190,8 +2435,11 @@ var NetlessAppPresentation = (function (exports) {
         img.width = width;
         img.height = height;
         img.crossOrigin = "Anonymous";
-        await new Promise((resolve) => {
-          img.onload = resolve;
+        await new Promise((resolve, reject) => {
+          img.onload = () => resolve();
+          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);
@@ -2214,6 +2462,18 @@ var NetlessAppPresentation = (function (exports) {
           });
         }
       };
+      const screenshotCurrentPageAsync = async (_context, _width, _height) => {
+        try {
+          await screenshotCurrentPage(_context, _width, _height);
+        } catch (error) {
+          diagnosticLogger.error("screenshotCurrentPage.failed", error, {
+            pageIndex: pageIndex$.value,
+            outputSize: { width: _width, height: _height },
+            camera: getCameraDiagnosticState("initialize")
+          });
+          throw error;
+        }
+      };
       let scrollbar;
       if (options.useScrollbar) {
         dispose2.make(() => {
@@ -2229,14 +2489,28 @@ var NetlessAppPresentation = (function (exports) {
         });
       }
       const moveCamera = (camera) => {
-        if (context.getIsWritable() && scrollbar) {
-          if (!scrollbar) {
-            throw new Error("[Presentation]: moveCamera must be called when appOptions: useScrollbar is true");
+        try {
+          if (!context.getIsWritable()) {
+            throw new Error("[Presentation]: moveCamera must be called in writable room");
           }
-          scrollbar.moveCamera(camera);
-          return;
+          pendingMoveCameraRequest = __spreadValues({}, camera);
+          if (scrollbar) {
+            scrollbar.moveCamera(camera);
+            return;
+          }
+          view.moveCamera(__spreadProps(__spreadValues({}, camera), {
+            animationMode: "immediately"
+          }));
+          syncView();
+        } catch (error) {
+          pendingMoveCameraRequest = void 0;
+          diagnosticLogger.error(
+            "moveCamera.failed",
+            error,
+            getCameraDiagnosticState("moveCamera", camera)
+          );
+          throw error;
         }
-        throw new Error("[Presentation]: moveCamera must be called in writable room");
       };
       context.emitter.on("destroy", () => dispose2());
       const reportProgress = (progress, result) => {
@@ -2251,8 +2525,11 @@ var NetlessAppPresentation = (function (exports) {
         } catch (e) {
         }
         const data = await fetch(url);
-        if (!data.ok)
-          throw new Error(`[Presentation]: failed to fetch ${url} - ${await data.text()}`);
+        if (!data.ok) {
+          throw new Error(
+            `[Presentation]: failed to fetch ${safeResourceLocation(url)}, status: ${data.status} ${data.statusText}`
+          );
+        }
         const blob = await data.blob();
         const reader = new FileReader();
         return new Promise((resolve, reject) => {
@@ -2261,7 +2538,7 @@ var NetlessAppPresentation = (function (exports) {
           reader.readAsDataURL(blob);
         });
       };
-      const toPdf = async () => {
+      const toPdfInternal = async () => {
         var _a2;
         const MAX = 1920;
         const firstPage = pages[0];
@@ -2276,6 +2553,9 @@ var NetlessAppPresentation = (function (exports) {
           pdfWidth = Math.floor(width * pdfHeight / height);
         }
         const scenes = context.getDisplayer().entireScenes()[scenePath];
+        if (!scenes) {
+          throw new Error(`[Presentation]: no scenes found while exporting PDF: ${scenePath}`);
+        }
         const stage_canvas = document.createElement("canvas");
         stage_canvas.width = pdfWidth;
         stage_canvas.height = pdfHeight;
@@ -2297,11 +2577,14 @@ var NetlessAppPresentation = (function (exports) {
           const { width: width2, height: height2, src } = p;
           const url = await base64url(src);
           const img = document.createElement("img");
-          await new Promise((resolve) => {
-            img.onload = resolve;
+          await new Promise((resolve, reject) => {
+            img.onload = () => resolve();
+            img.onerror = () => reject(new Error(
+              `[Presentation]: failed to load PDF page image, page index: ${index}`
+            ));
             img.src = url;
           });
-          stage.drawImage(img, 0, 0);
+          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)) {
@@ -2328,7 +2611,7 @@ var NetlessAppPresentation = (function (exports) {
               });
               stage.drawImage(wb_img, 0, 0, pdfWidth, pdfHeight);
             } catch (err) {
-              console.warn(err);
+              warn(err);
             }
           }
           const output = stage_canvas.toDataURL("image/jpeg", 0.6);
@@ -2344,10 +2627,22 @@ var NetlessAppPresentation = (function (exports) {
         const title = box.title;
         return reportProgress(100, { pdf: data, title });
       };
+      const toPdf = async () => {
+        try {
+          return await toPdfInternal();
+        } catch (error) {
+          diagnosticLogger.error("toPdf.failed", error, {
+            pageIndex: pageIndex$.value,
+            pageCount: pages.length,
+            focusScenePath: view.focusScenePath
+          });
+          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) => {
-            console.warn(err);
+            warn(err);
             reportProgress(100, null);
           });
         }
@@ -2362,7 +2657,7 @@ var NetlessAppPresentation = (function (exports) {
           scrollbar.setReadonly(bol);
         }
       };
-      const controller = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log, setDocsViewReadonly, setReadonly, moveCamera, getOriginScale, getScale, getPageSize, screenshotCurrentPageAsync };
+      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")
@@ -2374,7 +2669,7 @@ var NetlessAppPresentation = (function (exports) {
           console.log(controller);
         }
       }));
-      return controller;
+      return prepareScenesPromise.then(() => controller);
     }
   };
   var AppPresentation = class extends Presentation {
@@ -2386,6 +2681,7 @@ var NetlessAppPresentation = (function (exports) {
       super.updateImage();
     }
     onNewPageIndex(index, origin) {
+      var _a;
       if (origin === "keydown" && this.box && !this.box.focus)
         return;
       if (this.log)
@@ -2393,7 +2689,7 @@ var NetlessAppPresentation = (function (exports) {
       if (0 <= index && index < this.pages.length) {
         this.jumpPage(index);
       } else {
-        console.warn(`[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}]`);
       }
     }
   };
@@ -2440,7 +2736,7 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/index.ts
-  var version = "0.1.10";
+  var version = "0.1.12";
 
   exports.NetlessAppPresentation = NetlessAppPresentation;
   exports.Presentation = Presentation;