@netless/app-presentation 0.1.0 → 0.1.2

package/dist/index.d.ts

@@ -218,6 +218,7 @@ interface PresentationPage {
 interface PresentationConfig {
     readonly pages: PresentationPage[];
     readonly readonly?: boolean;
+    readonly thumbnail?: (src: string) => string;
 }
 /**
  * Standalone presentation slide viewer.
@@ -280,21 +281,40 @@ declare class Presentation implements IDisposable<void> {
     onNewPageIndex(index: number, _origin: "navigation" | "keydown" | "input" | "preview"): void;
     page(): PresentationPage | undefined;
     updateImage(): void;
+    /** Returns a modified URL that points to the thumbnail image. */
+    thumbnail(src: string): string;
     private c;
     private isEditable;
-    private x_oss_process;
 }
 
 declare const __inline: string;
 
 type Logger = (...data: any[]) => void;
+interface Viewport {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
 interface PresentationAppOptions {
     /** Disables user move / scale the image and whiteboard. */
     disableCameraTransform?: boolean;
     /** Max scale = `maxCameraScale` * default scale. Not working when `disableCameraTransform` is true. Default: 3 */
     maxCameraScale?: number;
-    /** Custom logger. Default: `console.log` */
+    /** Custom logger. Default: a logger that reports to the whiteboard server. */
     log?: Logger;
+    /** Custom thumbnail generator. Default is appending `"?x-oss-process=image/resize,l_50"` to `src`. */
+    thumbnail?: (src: string) => string;
+    /**
+     * Custom viewport to set on the first time the presentation was added. Default is full page.
+     * Numbers range in 0 to 1 is considered a ratio to multiply the real page size.
+     * Example settings:
+     *
+     * - Full page: `{ x: 0, y: 0, width: 1, height: 1 }`
+     * - Half page: `{ x: 0, y: 0, width: 1, height: 0.5 }`
+     * - Absolute top-left area of the page: `{ x: 0, y: 0, width: 100, height: 100 }`
+     */
+    viewport?: Viewport | ((page: PresentationPage) => Viewport);
 }
 interface PresentationController {
     readonly app: Presentation;
@@ -318,7 +338,7 @@ interface PresentationController {
     log: Logger;
 }
 
-declare const NetlessAppPresentation: NetlessApp<{}, unknown, PresentationAppOptions, PresentationController>;
+declare const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions, PresentationController>;
 type RegisterFn = typeof WindowManager["register"];
 interface InstallOptions {
     /**
@@ -328,6 +348,10 @@ interface InstallOptions {
      * @example "DocsViewer"
      */
     as?: string;
+    /**
+     * Options to customize the local app (not synced to others).
+     */
+    appOptions?: PresentationAppOptions;
 }
 /**
  * Call `register({ kind: "Presentation", src: NetlessAppPresentation })` to register this app.

package/dist/index.global.js

@@ -1,14 +1,16 @@
 var NetlessAppPresentation = (function (exports) {
   'use strict';
 
-  // node_modules/.pnpm/@wopjs+disposable@0.1.4/node_modules/@wopjs/disposable/dist/index.mjs
+  // node_modules/.pnpm/@wopjs+disposable@0.1.5/node_modules/@wopjs/disposable/dist/index.mjs
   var isAbortable = (disposable) => disposable && disposable.abortable;
-  var invokeDispose = (disposable) => {
+  var dispose = (disposable) => {
     try {
-      if (disposable.dispose) {
-        disposable.dispose();
-      } else {
-        disposable();
+      if (disposable) {
+        if (disposable.dispose) {
+          disposable.dispose();
+        } else if (disposable.constructor && disposable.call && disposable.apply) {
+          disposable();
+        }
       }
     } catch (e) {
       console.error(e);
@@ -45,7 +47,7 @@ var NetlessAppPresentation = (function (exports) {
     flush(disposable) {
       if (disposable) {
         if (this.remove(disposable)) {
-          invokeDispose(disposable);
+          dispose(disposable);
         }
       } else {
         this.dispose();
@@ -54,7 +56,7 @@ var NetlessAppPresentation = (function (exports) {
   };
   var disposableStore = (disposables) => {
     const disposableStore2 = () => {
-      disposableStore2._d.forEach(invokeDispose);
+      disposableStore2._d.forEach(dispose);
       disposableStore2._d.clear();
     };
     disposableStore2._d = /* @__PURE__ */ new Set();
@@ -73,11 +75,9 @@ var NetlessAppPresentation = (function (exports) {
   }
   var listen = addEventListener;
 
-  // node_modules/.pnpm/vanilla-lazyload@17.8.5/node_modules/vanilla-lazyload/dist/lazyload.esm.js
+  // node_modules/.pnpm/vanilla-lazyload@18.0.0/node_modules/vanilla-lazyload/dist/lazyload.esm.js
   var runningOnBrowser = typeof window !== "undefined";
   var isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
-  var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
-  var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
   var isHiDpi = runningOnBrowser && window.devicePixelRatio > 1;
   var defaultSettings = {
     elements_selector: ".lazy",
@@ -189,18 +189,22 @@ var NetlessAppPresentation = (function (exports) {
     callback(arg1);
   };
   var addClass = (element, className) => {
-    if (supportsClassList) {
-      element.classList.add(className);
+    if (!runningOnBrowser) {
+      return;
+    }
+    if (className === "") {
       return;
     }
-    element.className += (element.className ? " " : "") + className;
+    element.classList.add(className);
   };
   var removeClass = (element, className) => {
-    if (supportsClassList) {
-      element.classList.remove(className);
+    if (!runningOnBrowser) {
+      return;
+    }
+    if (className === "") {
       return;
     }
-    element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
+    element.classList.remove(className);
   };
   var addTempImage = (element) => {
     element.llTempImage = document.createElement("IMG");
@@ -647,7 +651,7 @@ var NetlessAppPresentation = (function (exports) {
     observeElements(observer, elementsToObserve);
   };
   var setObserver = (settings, instance) => {
-    if (!supportsIntersectionObserver || shouldUseNative(settings)) {
+    if (shouldUseNative(settings)) {
       return;
     }
     instance._observer = new IntersectionObserver((entries) => {
@@ -696,7 +700,7 @@ var NetlessAppPresentation = (function (exports) {
       const settings = this._settings;
       const elementsToLoad = getElementsToLoad(givenNodeset, settings);
       setToLoadCount(this, elementsToLoad.length);
-      if (isBot || !supportsIntersectionObserver) {
+      if (isBot) {
         this.loadAll(elementsToLoad);
         return;
       }
@@ -859,6 +863,8 @@ var NetlessAppPresentation = (function (exports) {
       var _a;
       this.pages = config.pages;
       this.preload = new Preload(this.pages);
+      if (config.thumbnail)
+        this.thumbnail = config.thumbnail;
       this.dispose.add(this.preload);
       this.readonly = (_a = config.readonly) != null ? _a : false;
       this.dom = document.createElement("div");
@@ -904,7 +910,7 @@ var NetlessAppPresentation = (function (exports) {
       const c_previewPageName = this.c("preview-page-name");
       for (let index = 0; index < this.pages.length; ++index) {
         const page = this.pages[index];
-        const previewSRC = page.thumbnail || this.x_oss_process(page.src);
+        const previewSRC = page.thumbnail || this.thumbnail(page.src);
         const previewPage = document.createElement("a");
         previewPage.className = `${c_previewPage} ${this.c(`preview-page-${index}`)}`;
         previewPage.setAttribute("href", "#");
@@ -1066,16 +1072,8 @@ var NetlessAppPresentation = (function (exports) {
       this.image.src = page.src;
       this.preload.touch(this.pageIndex);
     }
-    c(className) {
-      return `${this.namespace}-${className}`;
-    }
-    isEditable(el) {
-      if (!el)
-        return false;
-      const { tagName } = el;
-      return tagName == "INPUT" || tagName == "TEXTAREA" || tagName == "SELECT";
-    }
-    x_oss_process(src) {
+    /** Returns a modified URL that points to the thumbnail image. */
+    thumbnail(src) {
       try {
         const url = new URL(src);
         url.searchParams.set("x-oss-process", "image/resize,l_50");
@@ -1085,6 +1083,15 @@ var NetlessAppPresentation = (function (exports) {
         return src;
       }
     }
+    c(className) {
+      return `${this.namespace}-${className}`;
+    }
+    isEditable(el) {
+      if (!el)
+        return false;
+      const { tagName } = el;
+      return tagName == "INPUT" || tagName == "TEXTAREA" || tagName == "SELECT";
+    }
   };
 
   // src/style.scss?inline
@@ -1102,7 +1109,7 @@ var NetlessAppPresentation = (function (exports) {
   var NetlessAppPresentation = {
     kind: "Presentation",
     setup(context) {
-      var _a;
+      var _a, _b, _c;
       const view = context.getView();
       if (!view)
         throw new Error("[Presentation]: no whiteboard view, make sure you have added options.scenePath in addApp()");
@@ -1113,8 +1120,10 @@ var NetlessAppPresentation = (function (exports) {
         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() || {};
-      if (!(Number.isFinite(options.maxCameraScale) && options.maxCameraScale > 0)) {
+      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}`);
+        maxCameraScale = 3;
       }
       const log = options.log || createLogger(context.getRoom());
       log(`[Presentation] new ${context.appId}`);
@@ -1132,9 +1141,10 @@ var NetlessAppPresentation = (function (exports) {
           }
         }
       }
-      const dispose = disposableStore();
-      dispose.add(() => log(`[Presentation] dispose ${context.appId}`));
+      const dispose2 = disposableStore();
+      dispose2.add(() => log(`[Presentation] dispose ${context.appId}`));
       const page$$ = context.createStorage("page", { index: 0 });
+      const view$$ = context.createStorage("view", { uid: "", originX: 0, originY: 0, width: 0, height: 0 });
       let lastIndex = -1;
       const syncPage = async (index) => {
         if (lastIndex !== index) {
@@ -1187,7 +1197,7 @@ var NetlessAppPresentation = (function (exports) {
             height,
             animationMode: "immediately"
           });
-          const maxScale = view.camera.scale * (options.disableCameraTransform ? 1 : options.maxCameraScale || 3);
+          const maxScale = view.camera.scale * (options.disableCameraTransform ? 1 : maxCameraScale);
           const minScale = view.camera.scale;
           view.setCameraBound({
             damping: 1,
@@ -1198,19 +1208,51 @@ var NetlessAppPresentation = (function (exports) {
             width,
             height
           });
+          syncViewFromRemote(true);
         }
       };
-      syncPage(page$$.state.index);
-      dispose.add(page$$.addStateChangedListener(() => syncPage(page$$.state.index)));
-      dispose.add(context.emitter.on("roomStateChange", (state) => {
-        var _a2;
-        if ((_a2 = state.sceneState) == null ? void 0 : _a2.scenePath.endsWith("/0")) {
-          syncPage(page$$.state.index);
+      const me = ((_c = context.getRoom()) == null ? void 0 : _c.uid) || context.getDisplayer().observerId + "";
+      let throttleSyncView = 0;
+      const syncView = () => {
+        if (throttleSyncView > 0)
+          return;
+        const { width, height } = app.page() || {};
+        if (width && height && context.getIsWritable()) {
+          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;
+          throttleSyncView = setTimeout(() => {
+            throttleSyncView = 0;
+            view$$.setState({ uid: me, originX: x, originY: y, width: w, height: h });
+          }, 50);
         }
-      }));
+      };
+      dispose2.add(() => {
+        clearTimeout(throttleSyncView);
+        throttleSyncView = 0;
+      });
+      const syncViewFromRemote = (force = false, animate = false) => {
+        const { uid, originX, originY, width, height } = view$$.state;
+        if ((force || uid !== me) && width > 0 && height > 0) {
+          view.moveCameraToContain({
+            originX,
+            originY,
+            width,
+            height,
+            animationMode: animate ? "continuous" : "immediately"
+          });
+        }
+      };
+      syncPage(page$$.state.index);
+      dispose2.add(page$$.addStateChangedListener(() => syncPage(page$$.state.index)));
+      dispose2.add(view$$.addStateChangedListener(() => syncViewFromRemote(false, true)));
       const box = context.getBox();
-      const app = dispose.add(createPresentation(box, pages, jumpPage, page$$));
-      app.contentDOM.dataset.appPresentationVersion = "0.1.0";
+      const app = dispose2.add(createPresentation(box, pages, jumpPage, page$$, options.thumbnail));
+      app.contentDOM.dataset.appPresentationVersion = "0.1.2";
       app.scaleDocsToFit = scaleDocsToFit;
       app.log = log;
       context.mountView(app.whiteboardDOM);
@@ -1218,14 +1260,31 @@ var NetlessAppPresentation = (function (exports) {
         view.disableCameraTransform = true;
       }
       scaleDocsToFit();
-      dispose.make(() => {
+      dispose2.make(() => {
         view.callbacks.on("onSizeUpdated", scaleDocsToFit);
         return () => view.callbacks.off("onSizeUpdated", scaleDocsToFit);
       });
-      dispose.add(context.emitter.on("writableChange", (isWritable) => {
+      if (options.viewport && context.isAddApp && app.page()) {
+        const page = app.page();
+        const viewport = typeof options.viewport === "function" ? options.viewport(page) : options.viewport;
+        const fix = (i, x) => i == 0 ? i : i <= 1 ? i * x : i;
+        view$$.setState({
+          uid: me,
+          originX: fix(viewport.x, page.width) - page.width / 2,
+          originY: fix(viewport.y, page.height) - page.height / 2,
+          width: fix(viewport.width, page.width),
+          height: fix(viewport.height, page.height)
+        });
+      }
+      dispose2.make(() => {
+        view.callbacks.on("onCameraUpdatedByDevice", syncView);
+        return () => view.callbacks.off("onCameraUpdatedByDevice", syncView);
+      });
+      syncViewFromRemote(true);
+      dispose2.add(context.emitter.on("writableChange", (isWritable) => {
         app.setReadonly(!isWritable);
       }));
-      context.emitter.on("destroy", () => dispose());
+      context.emitter.on("destroy", () => dispose2());
       const reportProgress = (progress, result) => {
         window.postMessage({ type: "@netless/_result_save_pdf_", appId: context.appId, progress, result }, "*");
         return result;
@@ -1321,7 +1380,7 @@ var NetlessAppPresentation = (function (exports) {
         const title = box.title;
         return reportProgress(100, { pdf: data, title });
       };
-      dispose.add(listen(window, "message", (ev) => {
+      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);
@@ -1330,10 +1389,10 @@ var NetlessAppPresentation = (function (exports) {
         }
       }));
       const controller = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log };
-      dispose.add(listen(window, "message", (ev) => {
+      dispose2.add(listen(window, "message", (ev) => {
         if (ev.data === "@netless/_presentation_") {
           if (typeof window !== "undefined")
-            dispose.make(() => {
+            dispose2.make(() => {
               const debug = window._presentation_ || (window._presentation_ = /* @__PURE__ */ new Set());
               debug.add(controller);
               return () => debug.delete(controller);
@@ -1364,9 +1423,9 @@ var NetlessAppPresentation = (function (exports) {
       }
     }
   };
-  var createPresentation = (box, pages, jumpPage, page$$) => {
+  function createPresentation(box, pages, jumpPage, page$$, thumbnail) {
     box.mountStyles(style_default);
-    const app = new AppPresentation({ pages, readonly: box.readonly, jumpPage });
+    const app = new AppPresentation({ pages, readonly: box.readonly, jumpPage, thumbnail });
     app.box = box;
     box.mountContent(app.contentDOM);
     box.mountFooter(app.footerDOM);
@@ -1375,17 +1434,17 @@ var NetlessAppPresentation = (function (exports) {
       app.setPageIndex(page$$.state.index);
     }));
     return app;
-  };
+  }
   var install = (register, options = {}) => {
     let app = NetlessAppPresentation;
     if (options.as) {
       app = Object.assign({}, app, { kind: options.as });
     }
-    return register({ kind: app.kind, src: app });
+    return register({ kind: app.kind, src: app, appOptions: options.appOptions });
   };
 
   // src/index.ts
-  var version = "0.1.0";
+  var version = "0.1.2";
 
   exports.NetlessAppPresentation = NetlessAppPresentation;
   exports.Presentation = Presentation;