@netless/app-presentation 0.1.1 → 0.1.2

package/dist/index.d.ts

@@ -290,15 +290,31 @@ declare class Presentation implements IDisposable<void> {
 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;
@@ -322,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 {
     /**

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;
     }
-    element.className += (element.className ? " " : "") + className;
+    if (className === "") {
+      return;
+    }
+    element.classList.add(className);
   };
   var removeClass = (element, className) => {
-    if (supportsClassList) {
-      element.classList.remove(className);
+    if (!runningOnBrowser) {
       return;
     }
-    element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
+    if (className === "") {
+      return;
+    }
+    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;
       }
@@ -1105,7 +1109,7 @@ var NetlessAppPresentation = (function (exports) {
   var NetlessAppPresentation = {
     kind: "Presentation",
     setup(context) {
-      var _a, _b;
+      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()");
@@ -1137,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) {
@@ -1203,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$$, options.thumbnail));
-      app.contentDOM.dataset.appPresentationVersion = "0.1.1";
+      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);
@@ -1223,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;
@@ -1326,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);
@@ -1335,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);
@@ -1390,7 +1444,7 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/index.ts
-  var version = "0.1.1";
+  var version = "0.1.2";
 
   exports.NetlessAppPresentation = NetlessAppPresentation;
   exports.Presentation = Presentation;

package/dist/index.js

@@ -2,14 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-// 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);
@@ -46,7 +48,7 @@ var methods = {
   flush(disposable) {
     if (disposable) {
       if (this.remove(disposable)) {
-        invokeDispose(disposable);
+        dispose(disposable);
       }
     } else {
       this.dispose();
@@ -55,7 +57,7 @@ var methods = {
 };
 var disposableStore = (disposables) => {
   const disposableStore2 = () => {
-    disposableStore2._d.forEach(invokeDispose);
+    disposableStore2._d.forEach(dispose);
     disposableStore2._d.clear();
   };
   disposableStore2._d = /* @__PURE__ */ new Set();
@@ -74,11 +76,9 @@ function addEventListener(target, type, listener, options) {
 }
 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",
@@ -190,18 +190,22 @@ var safeCallback = (callback, arg1, arg2, arg3) => {
   callback(arg1);
 };
 var addClass = (element, className) => {
-  if (supportsClassList) {
-    element.classList.add(className);
+  if (!runningOnBrowser) {
     return;
   }
-  element.className += (element.className ? " " : "") + className;
+  if (className === "") {
+    return;
+  }
+  element.classList.add(className);
 };
 var removeClass = (element, className) => {
-  if (supportsClassList) {
-    element.classList.remove(className);
+  if (!runningOnBrowser) {
     return;
   }
-  element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
+  if (className === "") {
+    return;
+  }
+  element.classList.remove(className);
 };
 var addTempImage = (element) => {
   element.llTempImage = document.createElement("IMG");
@@ -648,7 +652,7 @@ var updateObserver = (observer, elementsToObserve) => {
   observeElements(observer, elementsToObserve);
 };
 var setObserver = (settings, instance) => {
-  if (!supportsIntersectionObserver || shouldUseNative(settings)) {
+  if (shouldUseNative(settings)) {
     return;
   }
   instance._observer = new IntersectionObserver((entries) => {
@@ -697,7 +701,7 @@ LazyLoad.prototype = {
     const settings = this._settings;
     const elementsToLoad = getElementsToLoad(givenNodeset, settings);
     setToLoadCount(this, elementsToLoad.length);
-    if (isBot || !supportsIntersectionObserver) {
+    if (isBot) {
       this.loadAll(elementsToLoad);
       return;
     }
@@ -1106,7 +1110,7 @@ var createLogger = (room) => {
 var NetlessAppPresentation = {
   kind: "Presentation",
   setup(context) {
-    var _a, _b;
+    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()");
@@ -1138,9 +1142,10 @@ var NetlessAppPresentation = {
         }
       }
     }
-    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) {
@@ -1204,19 +1209,51 @@ var NetlessAppPresentation = {
           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$$, options.thumbnail));
-    app.contentDOM.dataset.appPresentationVersion = "0.1.1";
+    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);
@@ -1224,14 +1261,31 @@ var NetlessAppPresentation = {
       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;
@@ -1327,7 +1381,7 @@ var NetlessAppPresentation = {
       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);
@@ -1336,10 +1390,10 @@ var NetlessAppPresentation = {
       }
     }));
     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);
@@ -1391,7 +1445,7 @@ var install = (register, options = {}) => {
 };
 
 // src/index.ts
-var version = "0.1.1";
+var version = "0.1.2";
 
 exports.NetlessAppPresentation = NetlessAppPresentation;
 exports.Presentation = Presentation;