@netless/app-presentation 0.1.1 → 0.1.3

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;
     }
@@ -787,66 +791,161 @@ function arrowRightSVG(namespace) {
 }
 
 // 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 {
@@ -857,6 +956,7 @@ var Presentation = class {
     this.showPreview = false;
     this.pageIndex = 0;
     this.previewLazyload = null;
+    this.timer = null;
     var _a;
     this.pages = config.pages;
     this.preload = new Preload(this.pages);
@@ -1059,15 +1159,22 @@ var Presentation = class {
     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) {
@@ -1106,7 +1213,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 +1245,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 +1312,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 +1364,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 +1484,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 +1493,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 +1548,7 @@ var install = (register, options = {}) => {
 };
 
 // src/index.ts
-var version = "0.1.1";
+var version = "0.1.2";
 
 exports.NetlessAppPresentation = NetlessAppPresentation;
 exports.Presentation = Presentation;