@netless/app-presentation 0.1.10 → 0.1.11

package/dist/index.mjs

@@ -1880,10 +1880,80 @@ var Scrollbar = class {
   }
 };
 
+// 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 ORIGIN_SIZE_COORDINATE_VERSION = 2;
+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);
@@ -1891,6 +1961,55 @@ var createLogger = (room) => {
     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;
@@ -1907,25 +2026,43 @@ var NetlessAppPresentation = {
   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 useOriginSizeCoordinates = Boolean(
+      originSize && (context.isAddApp || context.storage.state._originSizeCoordinateVersion === ORIGIN_SIZE_COORDINATE_VERSION)
+    );
+    if (originSize && context.isAddApp && context.getIsWritable()) {
+      context.storage.setState({
+        _originSizeCoordinateVersion: ORIGIN_SIZE_COORDINATE_VERSION
+      });
+    }
+    const pages = (_a = context.getScenes()) == null ? void 0 : _a.map(({ ppt, name }) => ppt2page(ppt, name, useOriginSizeCoordinates ? originSize : void 0)).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;
@@ -1959,58 +2096,15 @@ var NetlessAppPresentation = {
     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)) {
@@ -2020,57 +2114,149 @@ var NetlessAppPresentation = {
         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) {
@@ -2079,18 +2265,31 @@ var NetlessAppPresentation = {
         }
         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);
         }
       }
@@ -2098,6 +2297,7 @@ var NetlessAppPresentation = {
     dispose2.add(() => {
       clearTimeout(throttleSyncView);
       throttleSyncView = 0;
+      pendingMoveCameraRequest = void 0;
     });
     const syncViewFromRemote = (force = false, animate = false) => {
       const { uid, originX, originY, width, height } = view$$.state;
@@ -2118,13 +2318,63 @@ var NetlessAppPresentation = {
     };
     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.11";
     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 : "";
@@ -2139,13 +2389,17 @@ var NetlessAppPresentation = {
       });
     }
     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();
@@ -2164,20 +2418,20 @@ var NetlessAppPresentation = {
       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");
@@ -2187,8 +2441,11 @@ var NetlessAppPresentation = {
       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);
@@ -2211,6 +2468,18 @@ var NetlessAppPresentation = {
         });
       }
     };
+    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(() => {
@@ -2226,14 +2495,28 @@ var NetlessAppPresentation = {
       });
     }
     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) => {
@@ -2248,8 +2531,11 @@ var NetlessAppPresentation = {
       } 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) => {
@@ -2258,7 +2544,7 @@ var NetlessAppPresentation = {
         reader.readAsDataURL(blob);
       });
     };
-    const toPdf = async () => {
+    const toPdfInternal = async () => {
       var _a2;
       const MAX = 1920;
       const firstPage = pages[0];
@@ -2273,6 +2559,9 @@ var NetlessAppPresentation = {
         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;
@@ -2294,11 +2583,14 @@ var NetlessAppPresentation = {
         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)) {
@@ -2325,7 +2617,7 @@ var NetlessAppPresentation = {
             });
             stage.drawImage(wb_img, 0, 0, pdfWidth, pdfHeight);
           } catch (err) {
-            console.warn(err);
+            warn(err);
           }
         }
         const output = stage_canvas.toDataURL("image/jpeg", 0.6);
@@ -2341,10 +2633,22 @@ var NetlessAppPresentation = {
       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);
         });
       }
@@ -2359,7 +2663,7 @@ var NetlessAppPresentation = {
         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")
@@ -2371,7 +2675,7 @@ var NetlessAppPresentation = {
         console.log(controller);
       }
     }));
-    return controller;
+    return prepareScenesPromise.then(() => controller);
   }
 };
 var AppPresentation = class extends Presentation {
@@ -2383,6 +2687,7 @@ var AppPresentation = class extends Presentation {
     super.updateImage();
   }
   onNewPageIndex(index, origin) {
+    var _a;
     if (origin === "keydown" && this.box && !this.box.focus)
       return;
     if (this.log)
@@ -2390,7 +2695,7 @@ var AppPresentation = class extends Presentation {
     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}]`);
     }
   }
 };
@@ -2437,7 +2742,7 @@ var install = (register, options = {}) => {
 };
 
 // src/index.ts
-var version = "0.1.10";
+var version = "0.1.11";
 
 export { NetlessAppPresentation, Presentation, Scrollbar, NetlessAppPresentation as default, install, version };
 //# sourceMappingURL=index.mjs.map