@netless/app-presentation 0.1.1 → 0.1.3

package/dist/index.d.ts

@@ -195,17 +195,32 @@ interface ILazyLoadInstance {
   toLoadCount: number;
 }
 
+declare enum ELoadState {
+    unloaded = 0,
+    loading = 1,
+    loaded = 2,
+    error = 3
+}
+interface IPreloadMapValue {
+    src: string;
+    state: ELoadState;
+}
 declare class Preload implements IDisposable {
     readonly pages: PresentationPage[];
-    readonly links: HTMLLinkElement[];
-    head: number;
-    tail: number;
-    timer: number;
-    count: number;
-    get done(): boolean;
+    static maxLinks: number;
+    readonly loadingLinks: Map<number, HTMLLinkElement>;
+    readonly preloadMap: Map<number, IPreloadMapValue>;
+    readonly waitingLoadSet: Set<number>;
+    readonly waitinglinks: number[];
+    touchIndex: number;
+    preloadSize: number;
     constructor(pages: PresentationPage[]);
-    touch(index: number): void;
-    handler(): void;
+    touch(index: number): Promise<ELoadState>;
+    private autoTouch;
+    private createLink;
+    private handler;
+    private requestAsyncCallBack;
+    private destroyLink;
     dispose(): void;
 }
 
@@ -272,6 +287,7 @@ declare class Presentation implements IDisposable<void> {
     showPreview: boolean;
     pageIndex: number;
     previewLazyload: ILazyLoadInstance | null;
+    timer: number | null;
     constructor(config: PresentationConfig);
     initialize(): void;
     setDOM(dom: Element | DocumentFragment): void;
@@ -290,15 +306,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 +354,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;
       }
@@ -786,66 +790,161 @@ var NetlessAppPresentation = (function (exports) {
   }
 
   // src/preload.ts
-  var Preload = class {
+  var _Preload = class _Preload {
     constructor(pages) {
       this.pages = pages;
-      this.head = 0;
-      this.tail = 0;
-      this.timer = 0;
-      this.count = 0;
-      this.links = new Array(pages.length);
+      this.loadingLinks = /* @__PURE__ */ new Map();
+      this.preloadMap = /* @__PURE__ */ new Map();
+      this.waitingLoadSet = /* @__PURE__ */ new Set();
+      this.waitinglinks = [];
+      this.touchIndex = 0;
+      this.preloadSize = 0;
+      this.preloadMap = new Map(pages.map((e, index) => [index, {
+        src: e.src,
+        state: 0 /* unloaded */
+      }]));
+      this.waitingLoadSet = new Set(pages.map((e, index) => index));
+      this.preloadSize = this.preloadMap.size;
       this.touch(0);
     }
-    get done() {
-      return this.head == 0 && this.tail == this.pages.length;
+    async touch(index) {
+      this.touchIndex = index;
+      const value = this.preloadMap.get(index);
+      let state = 0 /* unloaded */;
+      if (value) {
+        state = value.state;
+        if (value.state === 0 /* unloaded */) {
+          if (this.loadingLinks.size) {
+            for (const [i, link] of this.loadingLinks) {
+              this.destroyLink(i, link);
+              this.waitingLoadSet.add(i);
+              const v = this.preloadMap.get(i);
+              if (v) {
+                v.state = 0 /* unloaded */;
+                this.preloadMap.set(i, v);
+              }
+            }
+            for (const i of this.waitinglinks) {
+              this.waitingLoadSet.add(i);
+            }
+            this.waitinglinks.length = 0;
+          }
+          if (this.waitinglinks.includes(index)) {
+            this.waitinglinks.splice(this.waitinglinks.indexOf(index), 1);
+          }
+          state = await new Promise((resolve) => {
+            this.waitingLoadSet.delete(index);
+            this.createLink(index, resolve);
+          });
+        }
+      }
+      if (this.waitingLoadSet.size) {
+        this.requestAsyncCallBack(() => {
+          this.autoTouch();
+        }, 1e3);
+      }
+      return state;
     }
-    touch(index) {
-      if (this.done)
+    autoTouch() {
+      this.handler();
+      if (this.waitingLoadSet.size === 0) {
         return;
-      this.head = this.tail = index;
-      this.timer || (this.timer = setTimeout(this.handler.bind(this)));
+      }
+      let nextTouchDelay = 1e3;
+      this.touchIndex = (this.touchIndex + 1) % this.preloadSize;
+      const value = this.preloadMap.get(this.touchIndex);
+      if (value) {
+        switch (value.state) {
+          case 0 /* unloaded */:
+          case 3 /* error */:
+            if (!this.waitinglinks.includes(this.touchIndex)) {
+              this.waitinglinks.push(this.touchIndex);
+              this.waitingLoadSet.delete(this.touchIndex);
+            }
+            nextTouchDelay = 0;
+            break;
+        }
+      }
+      this.requestAsyncCallBack(() => {
+        this.autoTouch();
+      }, nextTouchDelay);
     }
-    handler() {
-      const { links } = this;
-      while (this.head > 0 && links[this.head])
-        this.head--;
-      if (!links[this.head]) {
+    createLink(index, resolve) {
+      const value = this.preloadMap.get(index);
+      if (value) {
         const link = document.createElement("link");
-        links[this.head] = link;
         link.rel = "preload";
         link.as = "image";
-        link.href = this.pages[this.head].src;
-        link.dataset.order = this.count + "";
+        link.href = value.src;
+        link.dataset.order = index + "";
         document.head.appendChild(link);
-        this.count++;
+        link.onload = () => {
+          value.state = 2 /* loaded */;
+          this.preloadMap.set(index, value);
+          document.head.contains(link) && document.head.removeChild(link);
+          this.loadingLinks.delete(index);
+          resolve && resolve(2 /* loaded */);
+          this.autoTouch();
+        };
+        link.onerror = () => {
+          value.state = 3 /* error */;
+          this.preloadMap.set(index, value);
+          if (!this.waitinglinks.includes(index)) {
+            this.waitinglinks.push(index);
+            this.waitingLoadSet.delete(this.touchIndex);
+          }
+          document.head.contains(link) && document.head.removeChild(link);
+          this.loadingLinks.delete(index);
+          resolve && resolve(3 /* error */);
+          this.autoTouch();
+        };
+        this.loadingLinks.set(index, link);
+        value.state = 1 /* loading */;
+        this.preloadMap.set(index, value);
       }
-      while (links[this.tail])
-        this.tail++;
-      if (this.tail < this.pages.length && !links[this.tail]) {
-        const link = document.createElement("link");
-        links[this.tail] = link;
-        link.rel = "preload";
-        link.as = "image";
-        link.href = this.pages[this.tail].src;
-        link.dataset.order = this.count + "";
-        document.head.appendChild(link);
-        this.count++;
+    }
+    handler() {
+      if (!this.waitinglinks.length) {
+        return;
       }
-      this.timer = setTimeout(this.handler.bind(this), 2e3);
-      this.count++;
-      if (this.count >= 10) {
-        for (const link of this.links)
-          if (link && link.dataset.order && +link.dataset.order < this.count - 10)
-            document.head.contains(link) && document.head.removeChild(link);
+      let i = this.loadingLinks.size;
+      while (i < _Preload.maxLinks) {
+        const index = this.waitinglinks.shift();
+        if (index !== void 0) {
+          this.createLink(index);
+        }
+        i++;
       }
     }
+    async requestAsyncCallBack(callBack, timeout) {
+      await new Promise(function(resolve) {
+        if (window.requestIdleCallback) {
+          requestIdleCallback(() => {
+            resolve(1);
+          }, { timeout });
+        } else {
+          setTimeout(() => {
+            resolve(2);
+          }, timeout);
+        }
+      });
+      callBack();
+    }
+    destroyLink(index, link) {
+      document.head.contains(link) && document.head.removeChild(link);
+      this.loadingLinks.delete(index);
+    }
     dispose() {
-      clearTimeout(this.timer);
-      for (const link of this.links)
-        link && document.head.contains(link) && document.head.removeChild(link);
-      this.links.length = 0;
+      for (const [index, link] of this.loadingLinks) {
+        this.destroyLink(index, link);
+      }
+      this.preloadMap.clear();
+      this.waitingLoadSet.clear();
+      this.waitinglinks.length = 0;
     }
   };
+  _Preload.maxLinks = 5;
+  var Preload = _Preload;
 
   // src/presentation.ts
   var Presentation = class {
@@ -856,6 +955,7 @@ var NetlessAppPresentation = (function (exports) {
       this.showPreview = false;
       this.pageIndex = 0;
       this.previewLazyload = null;
+      this.timer = null;
       var _a;
       this.pages = config.pages;
       this.preload = new Preload(this.pages);
@@ -1058,15 +1158,22 @@ var NetlessAppPresentation = (function (exports) {
       return this.pages[this.pageIndex];
     }
     updateImage() {
-      const page = this.page();
-      if (!page) {
-        this.image.src = "";
-        return;
+      if (this.timer) {
+        clearTimeout(this.timer);
       }
-      this.image.width = page.width;
-      this.image.height = page.height;
-      this.image.src = page.src;
-      this.preload.touch(this.pageIndex);
+      this.timer = setTimeout(() => {
+        this.timer = null;
+        this.preload.touch(this.pageIndex).then(() => {
+          const page = this.page();
+          if (!page) {
+            this.image.src = "";
+            return;
+          }
+          this.image.width = page.width;
+          this.image.height = page.height;
+          this.image.src = page.src;
+        });
+      }, 200);
     }
     /** Returns a modified URL that points to the thumbnail image. */
     thumbnail(src) {
@@ -1105,7 +1212,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 +1244,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 +1311,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 +1363,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 +1483,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 +1492,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 +1547,7 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/index.ts
-  var version = "0.1.1";
+  var version = "0.1.2";
 
   exports.NetlessAppPresentation = NetlessAppPresentation;
   exports.Presentation = Presentation;