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

package/dist/index.js

@@ -1968,7 +1968,10 @@ var createDiagnosticLogger = (context) => {
   var _a;
   const createAppLogger = context.createLogger;
   if (typeof createAppLogger === "function") {
-    return createAppLogger.call(context, "camera", { debounceTime: 300, maxWaitTime: 2e3 });
+    return createAppLogger.call(context, "camera", {
+      debounceTime: 300,
+      maxWaitTime: 2e3
+    });
   }
   const roomLogger = (_a = context.getRoom()) == null ? void 0 : _a.logger;
   const prefix = `[Presentation][${context.appId}][camera]`;
@@ -2025,6 +2028,7 @@ var scenesEqual = (scenes1, scenes2) => {
     return scene.name === scene2.name && ((_a = scene.ppt) == null ? void 0 : _a.width) === ((_b = scene2.ppt) == null ? void 0 : _b.width) && ((_c = scene.ppt) == null ? void 0 : _c.height) === ((_d = scene2.ppt) == null ? void 0 : _d.height) && ((_e = scene.ppt) == null ? void 0 : _e.src) === ((_f = scene2.ppt) == null ? void 0 : _f.src);
   });
 };
+var teardownByContext = /* @__PURE__ */ new WeakMap();
 var NetlessAppPresentation = {
   kind: "Presentation",
   setup(context) {
@@ -2032,33 +2036,52 @@ var NetlessAppPresentation = {
     const diagnosticLogger = createDiagnosticLogger(context);
     const view = context.getView();
     if (!view)
-      throw new Error("[Presentation]: no whiteboard view, make sure you have added options.scenePath in addApp()");
+      throw new Error(
+        "[Presentation]: no whiteboard view, make sure you have added options.scenePath in addApp()"
+      );
     const options = context.getAppOptions() || {};
     const room = context.getRoom();
     const log = options.log || createLogger(room);
     const roomLogger = room == null ? void 0 : room.logger;
     const warn = (...data) => (roomLogger == null ? void 0 : roomLogger.warn) ? roomLogger.warn(...data) : log(...data);
     const configuredOriginSize = context.storage.state.originSize;
-    const originSize = isValidSize(configuredOriginSize) ? { width: configuredOriginSize.width, height: configuredOriginSize.height } : void 0;
+    const originSize = isValidSize(configuredOriginSize) ? {
+      width: configuredOriginSize.width,
+      height: configuredOriginSize.height
+    } : void 0;
     if (configuredOriginSize != null && !originSize) {
-      warn(`[Presentation] originSize should contain finite positive width and height, got ${JSON.stringify(configuredOriginSize)}`);
+      warn(
+        `[Presentation] originSize should contain finite positive width and height, got ${JSON.stringify(configuredOriginSize)}`
+      );
     }
     const pages = (_a = context.getScenes()) == null ? void 0 : _a.map(({ ppt, name }) => ppt2page(ppt, name, originSize)).filter(Boolean);
     if (!pages || pages.length === 0)
-      throw new Error("[Presentation]: empty scenes, make sure you have added options.scenes in addApp()");
+      throw new Error(
+        "[Presentation]: empty scenes, make sure you have added options.scenes in addApp()"
+      );
     if (pages[0].src.startsWith("ppt"))
-      throw new Error("[Presentation]: legacy dynamic PPT is unsupported, please use the projector converter and @netless/slide to render it");
+      throw new Error(
+        "[Presentation]: legacy dynamic PPT is unsupported, please use the projector converter and @netless/slide to render it"
+      );
     const scenePath = context.getInitScenePath();
     let maxCameraScale = (_b = options.maxCameraScale) != null ? _b : 3;
     if (!(Number.isFinite(maxCameraScale) && maxCameraScale > 0)) {
-      warn(`[Presentation] maxCameraScale should be a positive number, got ${options.maxCameraScale}`);
+      warn(
+        `[Presentation] maxCameraScale should be a positive number, got ${options.maxCameraScale}`
+      );
       maxCameraScale = 3;
     }
     log(`[Presentation] new ${context.appId}`);
     const dispose2 = disposableStore();
     dispose2.add(() => log(`[Presentation] dispose ${context.appId}`));
     dispose2.add(() => diagnosticLogger.flush());
-    const view$$ = context.createStorage("view", { uid: "", originX: 0, originY: 0, width: 0, height: 0 });
+    const view$$ = context.createStorage("view", {
+      uid: "",
+      originX: 0,
+      originY: 0,
+      width: 0,
+      height: 0
+    });
     const _addScenePathListener = (name, listener) => {
       const windowManger = context.manager.windowManger;
       windowManger.emitter.on(name, listener);
@@ -2080,13 +2103,16 @@ var NetlessAppPresentation = {
     let pageIndex = getPageIndex(view);
     const pageIndex$ = readable(pageIndex, (set) => {
       set(pageIndex);
-      return _addScenePathListener("onAppScenePathChange", (payload) => {
-        const { appId } = payload;
-        if (appId === context.appId) {
-          const _pageIndex = getPageIndex(payload.view);
-          set(_pageIndex);
+      return _addScenePathListener(
+        "onAppScenePathChange",
+        (payload) => {
+          const { appId } = payload;
+          if (appId === context.appId) {
+            const _pageIndex = getPageIndex(payload.view);
+            set(_pageIndex);
+          }
         }
-      });
+      );
     });
     dispose2.add(() => {
       pageIndex$.dispose();
@@ -2103,7 +2129,12 @@ var NetlessAppPresentation = {
       const p = pages[index];
       const name = (_a2 = p.name) != null ? _a2 : String(index + 1);
       if (!scenes.some((scene) => scene.name === name)) {
-        await context.addPage({ scene: { name, ppt: { width: p.width, height: p.height, src: p.src } } });
+        await context.addPage({
+          scene: {
+            name,
+            ppt: { width: p.width, height: p.height, src: p.src }
+          }
+        });
       }
       if (logger) {
         logger.info(`[Presentation] syncPage ${scenePath}/${name}`);
@@ -2115,15 +2146,21 @@ var NetlessAppPresentation = {
       if (!context.isAddApp)
         return;
       if (pages.length > 100)
-        warn(`[Presentation]: too many pages (${pages.length}), may cause performance issues`);
+        warn(
+          `[Presentation]: too many pages (${pages.length}), may cause performance issues`
+        );
       if (!room || !room.isWritable)
         return;
       if (pageIndex$.value < 0 || pageIndex$.value >= pages.length) {
-        throw new Error(`[Presentation] Invalid page index: ${pageIndex$.value}, scenes length: ${pages.length}`);
+        throw new Error(
+          `[Presentation] Invalid page index: ${pageIndex$.value}, scenes length: ${pages.length}`
+        );
       }
       const scenes = room.entireScenes()[scenePath];
       if (!scenes || !scenes[pageIndex$.value]) {
-        throw new Error(`[Presentation]: no initial scene found at ${scenePath}, page index: ${pageIndex$.value}`);
+        throw new Error(
+          `[Presentation]: no initial scene found at ${scenePath}, page index: ${pageIndex$.value}`
+        );
       }
       const { name, ppt } = scenes[pageIndex$.value];
       const nextScenes = pages.map((page, index) => {
@@ -2152,16 +2189,22 @@ var NetlessAppPresentation = {
     const prepareScenesPromise = prepareScenes();
     const canJumpPage = (index) => {
       if (!context.getIsWritable()) {
-        warn("[Presentation]: no permission, make sure you have test room.isWritable");
+        warn(
+          "[Presentation]: no permission, make sure you have test room.isWritable"
+        );
         return false;
       }
       if (!(0 <= index && index < pages.length)) {
-        warn(`[Presentation]: page ${index + 1} out of bounds [1, ${pages.length}]`);
+        warn(
+          `[Presentation]: page ${index + 1} out of bounds [1, ${pages.length}]`
+        );
         return false;
       }
       const scenes = context.getDisplayer().entireScenes()[scenePath];
       if (!scenes) {
-        warn(`[Presentation]: no scenes found at ${scenePath}, make sure you have added options.scenePath in addApp()`);
+        warn(
+          `[Presentation]: no scenes found at ${scenePath}, make sure you have added options.scenePath in addApp()`
+        );
         return false;
       }
       return true;
@@ -2267,13 +2310,20 @@ var NetlessAppPresentation = {
             try {
               const { camera, size } = view;
               const referenceSize = getCameraReferenceSize(originSize, page);
-              const viewport = cameraToSharedViewport(camera, size, referenceSize);
+              const viewport = cameraToSharedViewport(
+                camera,
+                size,
+                referenceSize
+              );
               if (viewport)
                 view$$.setState(__spreadValues({ uid: me }, viewport));
               if (pendingMoveCameraRequest) {
                 diagnosticLogger.debouncedInfo(
                   "moveCamera",
-                  getCameraDiagnosticState("moveCamera", pendingMoveCameraRequest)
+                  getCameraDiagnosticState(
+                    "moveCamera",
+                    pendingMoveCameraRequest
+                  )
                 );
                 pendingMoveCameraRequest = void 0;
               }
@@ -2281,7 +2331,10 @@ var NetlessAppPresentation = {
               diagnosticLogger.error(
                 "syncView.failed",
                 error,
-                getCameraDiagnosticState("moveCamera", pendingMoveCameraRequest)
+                getCameraDiagnosticState(
+                  "moveCamera",
+                  pendingMoveCameraRequest
+                )
               );
               pendingMoveCameraRequest = void 0;
             }
@@ -2306,14 +2359,26 @@ var NetlessAppPresentation = {
         });
       }
     };
-    dispose2.add(view$$.addStateChangedListener(() => syncViewFromRemote(false, true)));
+    dispose2.add(
+      view$$.addStateChangedListener(() => syncViewFromRemote(false, true))
+    );
     const getPageSize = () => {
       const { width, height } = app.page() || {};
       return { width: width || 0, height: height || 0 };
     };
     const box = context.getBox();
-    const app = dispose2.add(createPresentation(box, pages, jumpPage, pageIndex$, view, options.thumbnail, options.useClipView));
-    app.contentDOM.dataset.appPresentationVersion = "0.1.12";
+    const app = dispose2.add(
+      createPresentation(
+        box,
+        pages,
+        jumpPage,
+        pageIndex$,
+        view,
+        options.thumbnail,
+        options.useClipView
+      )
+    );
+    app.contentDOM.dataset.appPresentationVersion = "0.1.13-beta.0";
     app.scaleDocsToFit = scaleDocsToFit;
     app.log = log;
     app.warn = warn;
@@ -2360,12 +2425,14 @@ var NetlessAppPresentation = {
     };
     if (originSize) {
       let previousPageIndex = pageIndex$.value;
-      dispose2.add(pageIndex$.subscribe((nextPageIndex) => {
-        if (nextPageIndex === previousPageIndex)
-          return;
-        previousPageIndex = nextPageIndex;
-        scaleDocsToFit();
-      }));
+      dispose2.add(
+        pageIndex$.subscribe((nextPageIndex) => {
+          if (nextPageIndex === previousPageIndex)
+            return;
+          previousPageIndex = nextPageIndex;
+          scaleDocsToFit();
+        })
+      );
     }
     if (options.justDocsViewReadonly) {
       app.setDocsViewReadonly(true);
@@ -2414,9 +2481,11 @@ var NetlessAppPresentation = {
     });
     syncViewFromRemote(true);
     reportInitializedCamera("setup");
-    dispose2.add(context.emitter.on("writableChange", (isWritable) => {
-      app.setReadonly(!isWritable);
-    }));
+    dispose2.add(
+      context.emitter.on("writableChange", (isWritable) => {
+        app.setReadonly(!isWritable);
+      })
+    );
     const getOriginScale = () => {
       const page = app.page();
       if (!page || !isValidSize(page))
@@ -2438,29 +2507,53 @@ var NetlessAppPresentation = {
       img.crossOrigin = "Anonymous";
       await new Promise((resolve, reject) => {
         img.onload = () => resolve();
-        img.onerror = () => reject(new Error(
-          `[Presentation]: failed to load screenshot page image: ${safeResourceLocation(src)}`
-        ));
+        img.onerror = () => reject(
+          new Error(
+            `[Presentation]: failed to load screenshot page image: ${safeResourceLocation(src)}`
+          )
+        );
         img.src = src;
       });
-      _context.drawImage(img, 0, 0, width, height, 0, 0, _width || width, _height || height);
+      _context.drawImage(
+        img,
+        0,
+        0,
+        width,
+        height,
+        0,
+        0,
+        _width || width,
+        _height || height
+      );
       const currentScenePath = view.focusScenePath;
       if (!currentScenePath) {
         throw new Error("[Presentation]: current scene path not found");
       }
       const windowManger = context.getWindowManager();
       if (windowManger._appliancePlugin) {
-        await windowManger._appliancePlugin.screenshotToCanvasAsync(_context, currentScenePath, _width || width, _height || height, {
-          centerX: 0,
-          centerY: 0,
-          scale: _width && _height ? Math.min(_width / width, _height / height) : 1
-        });
+        await windowManger._appliancePlugin.screenshotToCanvasAsync(
+          _context,
+          currentScenePath,
+          _width || width,
+          _height || height,
+          {
+            centerX: 0,
+            centerY: 0,
+            scale: _width && _height ? Math.min(_width / width, _height / height) : 1
+          }
+        );
       } else {
-        await view.screenshotToCanvasAsync(_context, currentScenePath, _width || width, _height || height, {
-          centerX: 0,
-          centerY: 0,
-          scale: _width && _height ? Math.min(_width / width, _height / height) : 1
-        });
+        await view.screenshotToCanvasAsync(
+          _context,
+          currentScenePath,
+          _width || width,
+          _height || height,
+          {
+            centerX: 0,
+            centerY: 0,
+            scale: _width && _height ? Math.min(_width / width, _height / height) : 1
+          }
+        );
       }
     };
     const screenshotCurrentPageAsync = async (_context, _width, _height) => {
@@ -2478,21 +2571,27 @@ var NetlessAppPresentation = {
     let scrollbar;
     if (options.useScrollbar) {
       dispose2.make(() => {
-        scrollbar = new Scrollbar(app.contentDOM, {
-          appId: context.appId,
-          getPageSize,
-          getOriginScale,
-          syncView,
-          getWritable: () => context.getIsWritable(),
-          scrollbarEventCallback: options.scrollbarEventCallback
-        }, view);
+        scrollbar = new Scrollbar(
+          app.contentDOM,
+          {
+            appId: context.appId,
+            getPageSize,
+            getOriginScale,
+            syncView,
+            getWritable: () => context.getIsWritable(),
+            scrollbarEventCallback: options.scrollbarEventCallback
+          },
+          view
+        );
         return () => scrollbar == null ? void 0 : scrollbar.destroy();
       });
     }
     const moveCamera = (camera) => {
       try {
         if (!context.getIsWritable()) {
-          throw new Error("[Presentation]: moveCamera must be called in writable room");
+          throw new Error(
+            "[Presentation]: moveCamera must be called in writable room"
+          );
         }
         pendingMoveCameraRequest = __spreadValues({}, camera);
         if (scrollbar) {
@@ -2513,9 +2612,29 @@ var NetlessAppPresentation = {
         throw error;
       }
     };
-    context.emitter.on("destroy", () => dispose2());
+    let disposed = false;
+    let offDestroy;
+    const teardown = () => {
+      if (disposed)
+        return;
+      disposed = true;
+      const removeDestroy = offDestroy;
+      offDestroy = void 0;
+      removeDestroy == null ? void 0 : removeDestroy();
+      dispose2();
+    };
+    offDestroy = context.emitter.on("destroy", teardown);
+    teardownByContext.set(context, teardown);
     const reportProgress = (progress, result) => {
-      window.postMessage({ type: "@netless/_result_save_pdf_", appId: context.appId, progress, result }, "*");
+      window.postMessage(
+        {
+          type: "@netless/_result_save_pdf_",
+          appId: context.appId,
+          progress,
+          result
+        },
+        "*"
+      );
       return result;
     };
     const base64url = async (url) => {
@@ -2555,7 +2674,9 @@ var NetlessAppPresentation = {
       }
       const scenes = context.getDisplayer().entireScenes()[scenePath];
       if (!scenes) {
-        throw new Error(`[Presentation]: no scenes found while exporting PDF: ${scenePath}`);
+        throw new Error(
+          `[Presentation]: no scenes found while exporting PDF: ${scenePath}`
+        );
       }
       const stage_canvas = document.createElement("canvas");
       stage_canvas.width = pdfWidth;
@@ -2580,20 +2701,32 @@ var NetlessAppPresentation = {
         const img = document.createElement("img");
         await new Promise((resolve, reject) => {
           img.onload = () => resolve();
-          img.onerror = () => reject(new Error(
-            `[Presentation]: failed to load PDF page image, page index: ${index}`
-          ));
+          img.onerror = () => reject(
+            new Error(
+              `[Presentation]: failed to load PDF page image, page index: ${index}`
+            )
+          );
           img.src = url;
         });
         stage.drawImage(img, 0, 0, width2, height2);
         wb.clearRect(0, 0, pdfWidth, pdfHeight);
         const name = (_a2 = p.name) != null ? _a2 : String(index + 1);
         if (scenes.some((scene) => scene.name == name)) {
-          const camera = { centerX: 0, centerY: 0, scale: Math.min(wb_canvas.width / width2, wb_canvas.height / height2) };
+          const camera = {
+            centerX: 0,
+            centerY: 0,
+            scale: Math.min(wb_canvas.width / width2, wb_canvas.height / height2)
+          };
           const sPath = `${scenePath}/${name}`;
           const windowManger = context.getWindowManager();
           if (windowManger._appliancePlugin) {
-            await windowManger._appliancePlugin.screenshotToCanvasAsync(wb, sPath, wb_canvas.width, wb_canvas.height, camera);
+            await windowManger._appliancePlugin.screenshotToCanvasAsync(
+              wb,
+              sPath,
+              wb_canvas.width,
+              wb_canvas.height,
+              camera
+            );
           } else {
             await view.screenshotToCanvasAsync(
               wb,
@@ -2640,14 +2773,20 @@ var NetlessAppPresentation = {
         throw error;
       }
     };
-    dispose2.add(listen(window, "message", (ev) => {
-      if (ev.data && ev.data.type == "@netless/_request_save_pdf_" && ev.data.appId == context.appId) {
-        toPdf().catch((err) => {
-          warn(err);
-          reportProgress(100, null);
-        });
-      }
-    }));
+    dispose2.add(
+      listen(
+        window,
+        "message",
+        (ev) => {
+          if (ev.data && ev.data.type == "@netless/_request_save_pdf_" && ev.data.appId == context.appId) {
+            toPdf().catch((err) => {
+              warn(err);
+              reportProgress(100, null);
+            });
+          }
+        }
+      )
+    );
     const setDocsViewReadonly = (bol) => {
       app.setDocsViewReadonly(bol);
     };
@@ -2658,19 +2797,52 @@ var NetlessAppPresentation = {
         scrollbar.setReadonly(bol);
       }
     };
-    const controller = { app, view, context, jumpPage, prevPage, nextPage, jumpPageAsync, prevPageAsync, nextPageAsync, pageState, toPdf, log, setDocsViewReadonly, setReadonly, moveCamera, getOriginScale, getScale, getPageSize, screenshotCurrentPageAsync };
-    dispose2.add(listen(window, "message", (ev) => {
-      if (ev.data === "@netless/_presentation_") {
-        if (typeof window !== "undefined")
-          dispose2.make(() => {
-            const debug = window._presentation_ || (window._presentation_ = /* @__PURE__ */ new Set());
-            debug.add(controller);
-            return () => debug.delete(controller);
-          });
-        console.log(controller);
-      }
-    }));
-    return prepareScenesPromise.then(() => controller);
+    const controller = {
+      app,
+      view,
+      context,
+      jumpPage,
+      prevPage,
+      nextPage,
+      jumpPageAsync,
+      prevPageAsync,
+      nextPageAsync,
+      pageState,
+      toPdf,
+      log,
+      setDocsViewReadonly,
+      setReadonly,
+      moveCamera,
+      getOriginScale,
+      getScale,
+      getPageSize,
+      screenshotCurrentPageAsync
+    };
+    dispose2.add(
+      listen(
+        window,
+        "message",
+        (ev) => {
+          if (ev.data === "@netless/_presentation_") {
+            if (typeof window !== "undefined")
+              dispose2.make(() => {
+                const debug = window._presentation_ || (window._presentation_ = /* @__PURE__ */ new Set());
+                debug.add(controller);
+                return () => debug.delete(controller);
+              });
+            console.log(controller);
+          }
+        }
+      )
+    );
+    return prepareScenesPromise.then(
+      () => controller
+    );
+  },
+  teardown(context) {
+    var _a;
+    (_a = teardownByContext.get(context)) == null ? void 0 : _a();
+    teardownByContext.delete(context);
   }
 };
 var AppPresentation = class extends Presentation {
@@ -2690,19 +2862,29 @@ var AppPresentation = class extends Presentation {
     if (0 <= index && index < this.pages.length) {
       this.jumpPage(index);
     } else {
-      (_a = this.warn) == null ? void 0 : _a.call(this, `[Presentation]: page index ${index} out of bounds [0, ${this.pages.length - 1}]`);
+      (_a = this.warn) == null ? void 0 : _a.call(
+        this,
+        `[Presentation]: page index ${index} out of bounds [0, ${this.pages.length - 1}]`
+      );
     }
   }
 };
 function createPresentation(box, pages, jumpPage, pageIndex$, view, thumbnail, useClipView) {
   box.mountStyles(style_default);
-  const app = new AppPresentation({ pages, readonly: box.readonly, jumpPage, thumbnail });
+  const app = new AppPresentation({
+    pages,
+    readonly: box.readonly,
+    jumpPage,
+    thumbnail
+  });
   app.box = box;
   box.mountContent(app.contentDOM);
   box.mountFooter(app.footerDOM);
-  app.dispose.add(pageIndex$.subscribe((pageIndex) => {
-    app.setPageIndex(pageIndex);
-  }));
+  app.dispose.add(
+    pageIndex$.subscribe((pageIndex) => {
+      app.setPageIndex(pageIndex);
+    })
+  );
   if (useClipView && view) {
     const onCameraUpdatedEffectForMaskView = (0, import_debounce2.default)(() => {
       const { width: pageWidth, height: pageHeight } = app.page() || {};
@@ -2711,8 +2893,12 @@ function createPresentation(box, pages, jumpPage, pageIndex$, view, thumbnail, u
       }
       const { scale } = view.camera;
       const { width, height } = view.size;
-      const pageRatioX = Math.round((1 - pageWidth * scale / width) / 2 * 100);
-      const pageRatioY = Math.round((1 - pageHeight * scale / height) / 2 * 100);
+      const pageRatioX = Math.round(
+        (1 - pageWidth * scale / width) / 2 * 100
+      );
+      const pageRatioY = Math.round(
+        (1 - pageHeight * scale / height) / 2 * 100
+      );
       app.whiteboardDOM.style.clipPath = `inset(${pageRatioY}% ${pageRatioX}%)`;
     }, 50);
     onCameraUpdatedEffectForMaskView();
@@ -2737,7 +2923,7 @@ var install = (register, options = {}) => {
 };
 
 // src/index.ts
-var version = "0.1.12";
+var version = "0.1.13-beta.0";
 
 exports.NetlessAppPresentation = NetlessAppPresentation;
 exports.Presentation = Presentation;