@netless/app-presentation 0.1.11 → 0.1.13-beta.0

package/dist/index.d.ts

@@ -378,12 +378,9 @@ declare class Scrollbar {
 }
 
 type Logger = (...data: any[]) => void;
-declare const ORIGIN_SIZE_COORDINATE_VERSION = 2;
 interface PresentationAttributes {
     /** Shared logical camera reference size. New pages are proportionally contained within it. */
     originSize?: Size | null;
-    /** Internal marker for scenes whose ppt size has been normalized to originSize. */
-    _originSizeCoordinateVersion?: typeof ORIGIN_SIZE_COORDINATE_VERSION;
 }
 interface Viewport {
     readonly x: number;
@@ -472,8 +469,10 @@ interface PresentationController {
     /** screenshot the current page */
     screenshotCurrentPageAsync: (context: CanvasRenderingContext2D, width?: number, height?: number) => Promise<void>;
 }
-declare const NetlessAppPresentation: NetlessApp<PresentationAttributes, {}, PresentationAppOptions, PresentationController>;
-type RegisterFn = typeof WindowManager["register"];
+declare const NetlessAppPresentation: NetlessApp<PresentationAttributes, {}, PresentationAppOptions, PresentationController> & {
+    teardown(context: AppContext): void;
+};
+type RegisterFn = (typeof WindowManager)["register"];
 interface InstallOptions {
     /**
      * Register as another "kind", to hijack existing apps.

package/dist/index.global.js

@@ -1950,7 +1950,6 @@ var NetlessAppPresentation = (function (exports) {
   // src/app-presentation.ts
   var import_debounce2 = __toESM(require_debounce());
   var emptySceneName = "$$empty$$";
-  var ORIGIN_SIZE_COORDINATE_VERSION = 2;
   var ppt2page = (ppt, name, originSize) => {
     if (!ppt)
       return null;
@@ -1968,7 +1967,10 @@ var NetlessAppPresentation = (function (exports) {
     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,6 +2027,7 @@ var NetlessAppPresentation = (function (exports) {
       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) {
@@ -2032,41 +2035,52 @@ var NetlessAppPresentation = (function (exports) {
       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)}`);
-      }
-      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
-        });
+        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, useOriginSizeCoordinates ? originSize : void 0)).filter(Boolean);
+      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);
@@ -2088,13 +2102,16 @@ var NetlessAppPresentation = (function (exports) {
       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();
@@ -2111,7 +2128,12 @@ var NetlessAppPresentation = (function (exports) {
         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}`);
@@ -2123,15 +2145,21 @@ var NetlessAppPresentation = (function (exports) {
         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) => {
@@ -2160,16 +2188,22 @@ var NetlessAppPresentation = (function (exports) {
       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;
@@ -2275,13 +2309,20 @@ var NetlessAppPresentation = (function (exports) {
               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;
                 }
@@ -2289,7 +2330,10 @@ var NetlessAppPresentation = (function (exports) {
                 diagnosticLogger.error(
                   "syncView.failed",
                   error,
-                  getCameraDiagnosticState("moveCamera", pendingMoveCameraRequest)
+                  getCameraDiagnosticState(
+                    "moveCamera",
+                    pendingMoveCameraRequest
+                  )
                 );
                 pendingMoveCameraRequest = void 0;
               }
@@ -2314,14 +2358,26 @@ var NetlessAppPresentation = (function (exports) {
           });
         }
       };
-      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.11";
+      const app = dispose2.add(
+        createPresentation(
+          box,
+          pages,
+          jumpPage,
+          pageIndex$,
+          view,
+          options.thumbnail,
+          options.useClipView
+        )
+      );
+      app.contentDOM.dataset.appPresentationVersion = "0.1.13-beta.0";
       app.scaleDocsToFit = scaleDocsToFit;
       app.log = log;
       app.warn = warn;
@@ -2368,12 +2424,14 @@ var NetlessAppPresentation = (function (exports) {
       };
       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);
@@ -2422,9 +2480,11 @@ var NetlessAppPresentation = (function (exports) {
       });
       syncViewFromRemote(true);
       reportInitializedCamera("setup");
-      dispose2.add(context.emitter.on("writableChange", (isWritable) => {
-        app.setReadonly(!isWritable);
-      }));
+      dispose2.add(
+        context.emitter.on("writableChange", (isWritable) => {
+          app.setReadonly(!isWritable);
+        })
+      );
       const getOriginScale = () => {
         const page = app.page();
         if (!page || !isValidSize(page))
@@ -2446,29 +2506,53 @@ var NetlessAppPresentation = (function (exports) {
         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) => {
@@ -2486,21 +2570,27 @@ var NetlessAppPresentation = (function (exports) {
       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) {
@@ -2521,9 +2611,29 @@ var NetlessAppPresentation = (function (exports) {
           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) => {
@@ -2563,7 +2673,9 @@ var NetlessAppPresentation = (function (exports) {
         }
         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;
@@ -2588,20 +2700,32 @@ var NetlessAppPresentation = (function (exports) {
           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,
@@ -2648,14 +2772,20 @@ var NetlessAppPresentation = (function (exports) {
           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);
       };
@@ -2666,19 +2796,52 @@ var NetlessAppPresentation = (function (exports) {
           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);
+            }
+          }
+        )
+      );
+      return prepareScenesPromise.then(
+        () => controller
+      );
+    },
+    teardown(context) {
+      var _a;
+      (_a = teardownByContext.get(context)) == null ? void 0 : _a();
+      teardownByContext.delete(context);
     }
   };
   var AppPresentation = class extends Presentation {
@@ -2698,19 +2861,29 @@ var NetlessAppPresentation = (function (exports) {
       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() || {};
@@ -2719,8 +2892,12 @@ var NetlessAppPresentation = (function (exports) {
         }
         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();
@@ -2745,7 +2922,7 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/index.ts
-  var version = "0.1.11";
+  var version = "0.1.13-beta.0";
 
   exports.NetlessAppPresentation = NetlessAppPresentation;
   exports.Presentation = Presentation;