@netless/app-presentation 0.1.9-beta.5 → 0.1.9-beta.7

package/dist/index.global.js

@@ -40,7 +40,7 @@ var NetlessAppPresentation = (function (exports) {
     // file that has been converted to a CommonJS file using a Babel-
     // compatible transform (i.e. "__esModule" has not been set), then set
     // "default" to the CommonJS "module.exports" for node compatibility.
-    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
     mod
   ));
 
@@ -1026,9 +1026,9 @@ var NetlessAppPresentation = (function (exports) {
             return getMapData(this, key).has(key);
           }
           function mapCacheSet(key, value) {
-            var data = getMapData(this, key), size2 = data.size;
+            var data = getMapData(this, key), size3 = data.size;
             data.set(key, value);
-            this.size += data.size == size2 ? 0 : 1;
+            this.size += data.size == size3 ? 0 : 1;
             return this;
           }
           MapCache.prototype.clear = mapCacheClear;
@@ -2485,7 +2485,7 @@ var NetlessAppPresentation = (function (exports) {
             bitmask |= isCurry ? WRAP_PARTIAL_FLAG : WRAP_PARTIAL_RIGHT_FLAG;
             bitmask &= ~(isCurry ? WRAP_PARTIAL_RIGHT_FLAG : WRAP_PARTIAL_FLAG);
             if (!(bitmask & WRAP_CURRY_BOUND_FLAG)) {
-              bitmask &= ~(WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG);
+              bitmask &= -4;
             }
             var newData = [
               func,
@@ -2541,7 +2541,7 @@ var NetlessAppPresentation = (function (exports) {
             }
             var length = partials ? partials.length : 0;
             if (!length) {
-              bitmask &= ~(WRAP_PARTIAL_FLAG | WRAP_PARTIAL_RIGHT_FLAG);
+              bitmask &= -97;
               partials = holders = undefined2;
             }
             ary2 = ary2 === undefined2 ? ary2 : nativeMax(toInteger(ary2), 0);
@@ -2574,7 +2574,7 @@ var NetlessAppPresentation = (function (exports) {
             holders = newData[4];
             arity = newData[9] = newData[9] === undefined2 ? isBindKey ? 0 : func.length : nativeMax(newData[9] - length, 0);
             if (!arity && bitmask & (WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG)) {
-              bitmask &= ~(WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG);
+              bitmask &= -25;
             }
             if (!bitmask || bitmask == WRAP_BIND_FLAG) {
               var result2 = createBind(func, bitmask, thisArg);
@@ -2842,19 +2842,19 @@ var NetlessAppPresentation = (function (exports) {
           function getView(start, end, transforms) {
             var index = -1, length = transforms.length;
             while (++index < length) {
-              var data = transforms[index], size2 = data.size;
+              var data = transforms[index], size3 = data.size;
               switch (data.type) {
                 case "drop":
-                  start += size2;
+                  start += size3;
                   break;
                 case "dropRight":
-                  end -= size2;
+                  end -= size3;
                   break;
                 case "take":
-                  end = nativeMin(end, start + size2);
+                  end = nativeMin(end, start + size3);
                   break;
                 case "takeRight":
-                  start = nativeMax(start, end - size2);
+                  start = nativeMax(start, end - size3);
                   break;
               }
             }
@@ -3114,15 +3114,15 @@ var NetlessAppPresentation = (function (exports) {
               return func.apply(undefined2, arguments);
             };
           }
-          function shuffleSelf(array, size2) {
+          function shuffleSelf(array, size3) {
             var index = -1, length = array.length, lastIndex = length - 1;
-            size2 = size2 === undefined2 ? length : size2;
-            while (++index < size2) {
+            size3 = size3 === undefined2 ? length : size3;
+            while (++index < size3) {
               var rand = baseRandom(index, lastIndex), value = array[rand];
               array[rand] = array[index];
               array[index] = value;
             }
-            array.length = size2;
+            array.length = size3;
             return array;
           }
           var stringToPath = memoizeCapped(function(string) {
@@ -3174,19 +3174,19 @@ var NetlessAppPresentation = (function (exports) {
             result2.__values__ = wrapper.__values__;
             return result2;
           }
-          function chunk(array, size2, guard) {
-            if (guard ? isIterateeCall(array, size2, guard) : size2 === undefined2) {
-              size2 = 1;
+          function chunk(array, size3, guard) {
+            if (guard ? isIterateeCall(array, size3, guard) : size3 === undefined2) {
+              size3 = 1;
             } else {
-              size2 = nativeMax(toInteger(size2), 0);
+              size3 = nativeMax(toInteger(size3), 0);
             }
             var length = array == null ? 0 : array.length;
-            if (!length || size2 < 1) {
+            if (!length || size3 < 1) {
               return [];
             }
-            var index = 0, resIndex = 0, result2 = Array2(nativeCeil(length / size2));
+            var index = 0, resIndex = 0, result2 = Array2(nativeCeil(length / size3));
             while (index < length) {
-              result2[resIndex++] = baseSlice(array, index, index += size2);
+              result2[resIndex++] = baseSlice(array, index, index += size3);
             }
             return result2;
           }
@@ -3862,7 +3862,7 @@ var NetlessAppPresentation = (function (exports) {
             result2.placeholder = curryRight.placeholder;
             return result2;
           }
-          function debounce2(func, wait, options) {
+          function debounce3(func, wait, options) {
             var lastArgs, lastThis, maxWait, result2, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
             if (typeof func != "function") {
               throw new TypeError2(FUNC_ERROR_TEXT);
@@ -4042,7 +4042,7 @@ var NetlessAppPresentation = (function (exports) {
               leading = "leading" in options ? !!options.leading : leading;
               trailing = "trailing" in options ? !!options.trailing : trailing;
             }
-            return debounce2(func, wait, {
+            return debounce3(func, wait, {
               "leading": leading,
               "maxWait": wait,
               "trailing": trailing
@@ -4174,7 +4174,7 @@ var NetlessAppPresentation = (function (exports) {
             return baseIsMatch(object, source, getMatchData(source), customizer);
           }
           function isNaN(value) {
-            return isNumber(value) && value != +value;
+            return isNumber2(value) && value != +value;
           }
           function isNative(value) {
             if (isMaskable(value)) {
@@ -4188,7 +4188,7 @@ var NetlessAppPresentation = (function (exports) {
           function isNil(value) {
             return value == null;
           }
-          function isNumber(value) {
+          function isNumber2(value) {
             return typeof value == "number" || isObjectLike(value) && baseGetTag(value) == numberTag;
           }
           function isPlainObject(value) {
@@ -4994,7 +4994,7 @@ var NetlessAppPresentation = (function (exports) {
             var id = ++idCounter;
             return toString(prefix) + id;
           }
-          var add = createMathOperation(function(augend, addend) {
+          var add2 = createMathOperation(function(augend, addend) {
             return augend + addend;
           }, 0);
           var ceil = createRound("ceil");
@@ -5056,7 +5056,7 @@ var NetlessAppPresentation = (function (exports) {
           lodash.create = create;
           lodash.curry = curry;
           lodash.curryRight = curryRight;
-          lodash.debounce = debounce2;
+          lodash.debounce = debounce3;
           lodash.defaults = defaults;
           lodash.defaultsDeep = defaultsDeep;
           lodash.defer = defer;
@@ -5187,7 +5187,7 @@ var NetlessAppPresentation = (function (exports) {
           lodash.extend = assignIn;
           lodash.extendWith = assignInWith;
           mixin(lodash, lodash);
-          lodash.add = add;
+          lodash.add = add2;
           lodash.attempt = attempt;
           lodash.camelCase = camelCase;
           lodash.capitalize = capitalize;
@@ -5254,7 +5254,7 @@ var NetlessAppPresentation = (function (exports) {
           lodash.isNative = isNative;
           lodash.isNil = isNil;
           lodash.isNull = isNull;
-          lodash.isNumber = isNumber;
+          lodash.isNumber = isNumber2;
           lodash.isObject = isObject;
           lodash.isObjectLike = isObjectLike;
           lodash.isPlainObject = isPlainObject;
@@ -5524,72 +5524,81 @@ var NetlessAppPresentation = (function (exports) {
     }
   });
 
-  // node_modules/.pnpm/@wopjs+disposable@0.1.5/node_modules/@wopjs/disposable/dist/index.mjs
-  var isAbortable = (disposable) => disposable && disposable.abortable;
-  var dispose = (disposable) => {
+  // node_modules/.pnpm/@wopjs+disposable@0.1.19/node_modules/@wopjs/disposable/dist/index.mjs
+  var isFn = (value) => !!(value && value.constructor && value.call && value.apply);
+  var isDisposable = (value) => isFn(value) || isFn(value == null ? void 0 : value.dispose);
+  function dispose(disposable) {
     try {
       if (disposable) {
-        if (disposable.dispose) {
+        if (isFn(disposable.dispose)) {
           disposable.dispose();
-        } else if (disposable.constructor && disposable.call && disposable.apply) {
+        } else if (isFn(disposable)) {
           disposable();
         }
       }
     } catch (e) {
       console.error(e);
     }
-  };
-  var methods = {
-    size() {
-      return this._d.size;
-    },
-    has(disposable) {
-      return this._d.has(disposable);
-    },
-    add(disposable) {
-      const disposables = Array.isArray(disposable) ? disposable : [disposable];
-      for (const disposable2 of disposables) {
-        if (!this._d.has(disposable2)) {
-          this._d.add(disposable2);
-          if (isAbortable(disposable2)) {
-            disposable2.abortable(() => this.remove(disposable2));
-          }
-        }
-      }
-      return disposable;
-    },
-    make(executor) {
-      const disposable = executor();
-      if (disposable) {
-        return this.add(disposable);
-      }
-    },
-    remove(disposable) {
-      return this._d.delete(disposable);
-    },
-    flush(disposable) {
-      if (disposable) {
-        if (this.remove(disposable)) {
-          dispose(disposable);
-        }
-      } else {
-        this.dispose();
-      }
+  }
+  var isAbortable = (disposable) => isDisposable(disposable) && isFn(disposable.abortable);
+  function disposableStore(disposables) {
+    function disposableStore2() {
+      var _a, _b;
+      if (disposableStore2._i)
+        return;
+      disposableStore2._i = 1;
+      (_a = disposableStore2._d) == null ? void 0 : _a.forEach(dispose);
+      (_b = disposableStore2._d) == null ? void 0 : _b.clear();
+      disposableStore2._i = 0;
     }
-  };
-  var disposableStore = (disposables) => {
-    const disposableStore2 = () => {
-      disposableStore2._d.forEach(dispose);
-      disposableStore2._d.clear();
-    };
-    disposableStore2._d = /* @__PURE__ */ new Set();
+    disposableStore2._i = 0;
     disposableStore2.dispose = disposableStore2;
-    const store = Object.assign(disposableStore2, methods);
-    if (disposables) {
-      store.add(disposables);
+    disposableStore2.size = size2;
+    disposableStore2.has = has2;
+    disposableStore2.add = add;
+    disposableStore2.make = make3;
+    disposableStore2.remove = remove3;
+    disposableStore2.flush = flush2;
+    return disposableStore2;
+  }
+  function _addOne(disposable) {
+    var _a, _b;
+    if (!((_a = this._d) == null ? void 0 : _a.has(disposable))) {
+      ((_b = this._d) != null ? _b : this._d = /* @__PURE__ */ new Set()).add(disposable);
+      if (isAbortable(disposable)) {
+        disposable.abortable(() => this.remove(disposable));
+      }
     }
-    return store;
-  };
+  }
+  function add(disposables) {
+    Array.isArray(disposables) ? disposables.forEach(_addOne, this) : _addOne.call(this, disposables);
+    return disposables;
+  }
+  function flush2(disposable) {
+    if (disposable) {
+      if (this.remove(disposable)) {
+        dispose(disposable);
+      }
+    } else {
+      this.dispose();
+    }
+  }
+  function has2(disposable) {
+    var _a;
+    return ((_a = this._d) == null ? void 0 : _a.has(disposable)) || false;
+  }
+  function make3(executor) {
+    const disposable = executor();
+    return disposable && this.add(disposable);
+  }
+  function remove3(disposable) {
+    var _a;
+    return ((_a = this._d) == null ? void 0 : _a.delete(disposable)) || false;
+  }
+  function size2() {
+    var _a;
+    return ((_a = this._d) == null ? void 0 : _a.size) || 0;
+  }
 
   // node_modules/.pnpm/@wopjs+dom@0.1.3/node_modules/@wopjs/dom/dist/index.js
   function addEventListener(target, type, listener, options) {
@@ -6456,9 +6465,6 @@ var NetlessAppPresentation = (function (exports) {
       this.contentDOM.className = this.c("content");
       this.previewDOM = document.createElement("div");
       this.previewDOM.className = this.c("preview");
-      this.imageDOM = document.createElement("div");
-      this.imageDOM.className = this.c("image");
-      this.image = document.createElement("img");
       this.whiteboardDOM = document.createElement("div");
       this.whiteboardDOM.className = this.c("wb-view");
       this.footerDOM = document.createElement("div");
@@ -6528,8 +6534,6 @@ var NetlessAppPresentation = (function (exports) {
           this.togglePreview(false);
         }
       }));
-      this.imageDOM.appendChild(this.image);
-      this.contentDOM.appendChild(this.imageDOM);
       this.updateImage();
       this.contentDOM.appendChild(this.whiteboardDOM);
       this.footerDOM.classList.toggle(this.c("readonly"), this.readonly);
@@ -6838,17 +6842,22 @@ var NetlessAppPresentation = (function (exports) {
           return;
         const { scale, centerX, centerY } = this.view.camera;
         const originScale = this.option.getOriginScale();
-        const ratio = Math.round(originScale / scale * 1e3) / 1e3;
-        const scrollX = Math.round(centerX * originScale);
-        const scrollY = Math.round(centerY * originScale);
+        const { width: pageWidth, height: pageHeight } = this.option.getPageSize();
+        const { width: viewWidth, height: viewHeight } = this.view.size;
+        const originScaleX = viewWidth / pageWidth;
+        const originScaleY = viewHeight / pageHeight;
+        const ratioX = Math.min(Math.round(originScaleX / scale * 100) / 100, 1);
+        const ratioY = Math.min(Math.round(originScaleY / scale * 100) / 100, 1);
+        const scrollX = Math.round(centerX * originScaleX);
+        const scrollY = Math.round(centerY * originScaleY);
         if (this.scrollbarX) {
-          this.scrollbarX.style.width = `${ratio * 100}%`;
-          this.scrollbarX.style.display = ratio === 1 ? "none" : "block";
+          this.scrollbarX.style.width = `${ratioX * 100}%`;
+          this.scrollbarX.style.display = ratioX === 1 ? "none" : "block";
           this.scrollbarX.style.transform = `translateX(${scrollX}px)`;
         }
         if (this.scrollbarY) {
-          this.scrollbarY.style.height = `${ratio * 100}%`;
-          this.scrollbarY.style.display = ratio === 1 ? "none" : "block";
+          this.scrollbarY.style.height = `${ratioY * 100}%`;
+          this.scrollbarY.style.display = ratioY === 1 ? "none" : "block";
           this.scrollbarY.style.transform = `translateY(${scrollY}px)`;
         }
         (_b = (_a = this.option.scrollbarEventCallback) == null ? void 0 : _a.onScrollCameraUpdated) == null ? void 0 : _b.call(_a, this.appId, originScale, scale);
@@ -6867,9 +6876,11 @@ var NetlessAppPresentation = (function (exports) {
         var _a, _b;
         if (this.cameraCache) {
           const { x } = transformedDrag;
-          const originScale = this.option.getOriginScale();
+          const { width: pageWidth } = this.option.getPageSize();
+          const { width: viewWidth } = this.view.size;
+          const originScaleX = viewWidth / pageWidth;
           const { minX, maxX } = this.getScrollXRange(this.cameraCache);
-          const scrollX = Math.round(x / originScale);
+          const scrollX = Math.round(x / originScaleX);
           let centerX = scrollX + this.cameraCache.centerX;
           if (centerX < minX) {
             centerX = minX;
@@ -6887,9 +6898,11 @@ var NetlessAppPresentation = (function (exports) {
         var _a, _b;
         if (this.cameraCache) {
           const { y } = transformedDrag;
-          const originScale = this.option.getOriginScale();
+          const { height: pageHeight } = this.option.getPageSize();
+          const { height: viewHeight } = this.view.size;
+          const originScaleY = viewHeight / pageHeight;
           const { minY, maxY } = this.getScrollYRange(this.cameraCache);
-          const scrollY = Math.round(y / originScale);
+          const scrollY = Math.round(y / originScaleY);
           let centerY = scrollY + this.cameraCache.centerY;
           if (centerY < minY) {
             centerY = minY;
@@ -6909,6 +6922,35 @@ var NetlessAppPresentation = (function (exports) {
         this.option.syncView();
         (_b = (_a = this.option.scrollbarEventCallback) == null ? void 0 : _a.onScrollbarDragEnd) == null ? void 0 : _b.call(_a);
       };
+      this.moveCamera = (camera) => {
+        const { centerX, centerY } = camera;
+        const cacheCamera = this.view.camera;
+        const _camera = {};
+        if ((0, import_lodash.isNumber)(centerX)) {
+          const { minX, maxX } = this.getScrollXRange(cacheCamera);
+          let newCenterX = centerX;
+          if (centerX < minX) {
+            newCenterX = minX;
+          } else if (centerX > maxX) {
+            newCenterX = maxX;
+          }
+          _camera.centerX = newCenterX;
+        }
+        if ((0, import_lodash.isNumber)(centerY)) {
+          const { minY, maxY } = this.getScrollYRange(cacheCamera);
+          let newCenterY = centerY;
+          if (centerY < minY) {
+            newCenterY = minY;
+          } else if (centerY > maxY) {
+            newCenterY = maxY;
+          }
+          _camera.centerY = newCenterY;
+        }
+        this.view.moveCamera(__spreadProps(__spreadValues({}, _camera), {
+          animationMode: "immediately"
+        }));
+        this.option.syncView();
+      };
       this.scrollContainer.className = this.c("scrollbar-container");
       this.container = container;
       this.option = option;
@@ -6928,21 +6970,23 @@ var NetlessAppPresentation = (function (exports) {
       }
     }
     getScrollXRange(camera) {
-      const { width } = this.option.getPageSize();
-      const originScale = this.option.getOriginScale();
+      const { width: pageWidth } = this.option.getPageSize();
+      const { width: viewWidth } = this.view.size;
+      const originScaleX = viewWidth / pageWidth;
       const scale = camera.scale;
-      const ratio = Math.round(originScale / scale * 1e3) / 1e3;
-      const scrollWidth = width * (1 - ratio);
+      const ratio = Math.min(Math.round(originScaleX / scale * 100) / 100, 1);
+      const scrollWidth = pageWidth * (1 - ratio);
       const minX = -scrollWidth / 2;
       const maxX = scrollWidth / 2;
       return { minX, maxX };
     }
     getScrollYRange(camera) {
-      const { height } = this.option.getPageSize();
-      const originScale = this.option.getOriginScale();
+      const { height: pageHeight } = this.option.getPageSize();
+      const { height: viewHeight } = this.view.size;
+      const originScaleY = viewHeight / pageHeight;
       const scale = camera.scale;
-      const ratio = Math.round(originScale / scale * 1e3) / 1e3;
-      const scrollHeight = height * (1 - ratio);
+      const ratio = Math.min(Math.round(originScaleY / scale * 100) / 100, 1);
+      const scrollHeight = pageHeight * (1 - ratio);
       const minY = -scrollHeight / 2;
       const maxY = scrollHeight / 2;
       return { minY, maxY };
@@ -7013,6 +7057,7 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/app-presentation.ts
+  var import_lodash2 = __toESM(require_lodash());
   var emptySceneName = "$$empty$$";
   var ppt2page = (ppt, name) => ppt ? { width: ppt.width, height: ppt.height, src: ppt.src, thumbnail: ppt.previewURL, name } : null;
   var createLogger = (room) => {
@@ -7094,9 +7139,9 @@ var NetlessAppPresentation = (function (exports) {
         if (pages.length > 100)
           console.warn(`[Presentation]: too many pages (${pages.length}), may cause performance issues`);
         let redirectResolve = void 0;
-        const room = context.getRoom();
-        if (room && room.isWritable) {
-          const scenes = room.entireScenes()[scenePath];
+        const room2 = context.getRoom();
+        if (room2 && room2.isWritable) {
+          const scenes = room2.entireScenes()[scenePath];
           if (pageIndex$.value < 0 || pageIndex$.value >= pages.length) {
             throw new Error(`[Presentation] Invalid page index: ${pageIndex$.value}, scenes length: ${pages.length}`);
           }
@@ -7111,8 +7156,8 @@ var NetlessAppPresentation = (function (exports) {
               };
             });
             if (!scenesEqual(scenes, _scenes)) {
-              room.removeScenes(scenePath);
-              room.putScenes(scenePath, _scenes);
+              room2.removeScenes(scenePath);
+              room2.putScenes(scenePath, _scenes);
             }
             if (name === _scenes[pageIndex$.value].name && !ppt) {
               context.addPage({ scene: { name: emptySceneName } }).then(() => {
@@ -7125,10 +7170,10 @@ var NetlessAppPresentation = (function (exports) {
               redirectResolve && redirectResolve(false);
             }
           }).then(async (bol) => {
-            await syncPage(pageIndex$.value, room.logger);
+            await syncPage(pageIndex$.value, room2.logger);
             if (bol) {
               log(`[Presentation] setup removeScenes ${scenePath}/${emptySceneName}`);
-              room.removeScenes(`${scenePath}/${emptySceneName}`);
+              room2.removeScenes(`${scenePath}/${emptySceneName}`);
             }
           });
         }
@@ -7243,14 +7288,32 @@ var NetlessAppPresentation = (function (exports) {
         }
       };
       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$, options.thumbnail));
-      app.contentDOM.dataset.appPresentationVersion = "0.1.9-beta.5";
+      const app = dispose2.add(createPresentation(box, pages, jumpPage, pageIndex$, view, options.thumbnail, options.useClipView));
+      app.contentDOM.dataset.appPresentationVersion = "0.1.9-beta.7";
       app.scaleDocsToFit = scaleDocsToFit;
       app.log = log;
       if (options.justDocsViewReadonly) {
         app.setDocsViewReadonly(true);
       }
+      const room = context.getRoom();
+      const goToPageByClick = () => {
+        var _a2, _b2, _c2, _d;
+        const currentApplianceName = (_d = (_c2 = (_b2 = (_a2 = context.getRoom()) == null ? void 0 : _a2.state) == null ? void 0 : _b2.memberState) == null ? void 0 : _c2.currentApplianceName) != null ? _d : "";
+        if (!app.readonly && currentApplianceName === "clicker") {
+          nextPage();
+        }
+      };
+      if (room && options.goToPageByClick && app.whiteboardDOM) {
+        dispose2.make(() => {
+          app.whiteboardDOM.addEventListener("click", goToPageByClick);
+          return () => app.whiteboardDOM.removeEventListener("click", goToPageByClick);
+        });
+      }
       context.mountView(app.whiteboardDOM);
       if (options.disableCameraTransform) {
         view.disableCameraTransform = true;
@@ -7280,10 +7343,6 @@ var NetlessAppPresentation = (function (exports) {
       dispose2.add(context.emitter.on("writableChange", (isWritable) => {
         app.setReadonly(!isWritable);
       }));
-      const getPageSize = () => {
-        const { width, height } = app.page() || {};
-        return { width: width || 0, height: height || 0 };
-      };
       const getOriginScale = () => {
         const { size } = view;
         const { width, height } = getPageSize();
@@ -7292,13 +7351,41 @@ var NetlessAppPresentation = (function (exports) {
       const getScale = () => {
         return view.camera.scale;
       };
-      const moveCamera = (camera) => {
-        if (context.getIsWritable()) {
-          view.moveCamera(__spreadProps(__spreadValues({}, camera), { animationMode: "immediately" }));
-          syncView();
-          return;
+      const screenshotCurrentPageAsync = async (_context, _width, _height) => {
+        var _a2, _b2;
+        (_b2 = (_a2 = room == null ? void 0 : room.calibrationTimestamp) == null ? void 0 : _a2.toString()) != null ? _b2 : Date.now().toString();
+        const currentPage = pages[pageIndex$.value];
+        if (!currentPage) {
+          throw new Error("[Presentation]: current page not found");
+        }
+        const { width, height, src } = currentPage;
+        const img = document.createElement("img");
+        img.width = width;
+        img.height = height;
+        img.crossOrigin = "Anonymous";
+        await new Promise((resolve) => {
+          img.onload = resolve;
+          img.src = src;
+        });
+        _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
+          });
+        } else {
+          await view.screenshotToCanvasAsync(_context, currentScenePath, _width || width, _height || height, {
+            centerX: 0,
+            centerY: 0,
+            scale: _width && _height ? Math.min(_width / width, _height / height) : 1
+          });
         }
-        throw new Error("[Presentation]: moveCamera must be called in writable room");
       };
       let scrollbar;
       if (options.useScrollbar) {
@@ -7314,6 +7401,16 @@ var NetlessAppPresentation = (function (exports) {
           return () => scrollbar == null ? void 0 : scrollbar.destroy();
         });
       }
+      const moveCamera = (camera) => {
+        if (context.getIsWritable() && scrollbar) {
+          if (!scrollbar) {
+            throw new Error("[Presentation]: moveCamera must be called when appOptions: useScrollbar is true");
+          }
+          scrollbar.moveCamera(camera);
+          return;
+        }
+        throw new Error("[Presentation]: moveCamera must be called in writable room");
+      };
       context.emitter.on("destroy", () => dispose2());
       const reportProgress = (progress, result) => {
         window.postMessage({ type: "@netless/_result_save_pdf_", appId: context.appId, progress, result }, "*");
@@ -7382,12 +7479,12 @@ var NetlessAppPresentation = (function (exports) {
           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 sPath = `${scenePath}/${index + 1}`;
-            const windowManger = context.manager.windowManger;
+            const sPath = `${scenePath}/${name}`;
+            const windowManger = context.getWindowManager();
             if (windowManger._appliancePlugin) {
               await windowManger._appliancePlugin.screenshotToCanvasAsync(wb, sPath, wb_canvas.width, wb_canvas.height, camera);
             } else {
-              view.screenshotToCanvas(
+              await view.screenshotToCanvasAsync(
                 wb,
                 sPath,
                 wb_canvas.width,
@@ -7433,11 +7530,12 @@ var NetlessAppPresentation = (function (exports) {
       };
       const setReadonly = (bol) => {
         app.setReadonly(bol);
+        if (options.goToPageByClick) ;
         if (scrollbar) {
           scrollbar.setReadonly(bol);
         }
       };
-      const controller = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log, setDocsViewReadonly, setReadonly, moveCamera, getOriginScale, getScale };
+      const controller = { app, view, context, jumpPage, prevPage, nextPage, 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")
@@ -7456,7 +7554,6 @@ var NetlessAppPresentation = (function (exports) {
     constructor(config) {
       super(config);
       this.jumpPage = config.jumpPage;
-      this.image.style.display = "none";
     }
     updateImage() {
       super.updateImage();
@@ -7473,7 +7570,7 @@ var NetlessAppPresentation = (function (exports) {
       }
     }
   };
-  function createPresentation(box, pages, jumpPage, pageIndex$, thumbnail) {
+  function createPresentation(box, pages, jumpPage, pageIndex$, view, thumbnail, useClipView) {
     box.mountStyles(style_default);
     const app = new AppPresentation({ pages, readonly: box.readonly, jumpPage, thumbnail });
     app.box = box;
@@ -7482,6 +7579,29 @@ var NetlessAppPresentation = (function (exports) {
     app.dispose.add(pageIndex$.subscribe((pageIndex) => {
       app.setPageIndex(pageIndex);
     }));
+    if (useClipView && view) {
+      const onCameraUpdatedEffectForMaskView = (0, import_lodash2.debounce)(() => {
+        const { width: pageWidth, height: pageHeight } = app.page() || {};
+        if (!pageWidth || !pageHeight) {
+          return;
+        }
+        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);
+        app.whiteboardDOM.style.clipPath = `inset(${pageRatioY}% ${pageRatioX}%)`;
+      }, 50);
+      onCameraUpdatedEffectForMaskView();
+      const onCameraUpdatedEffect = () => {
+        view.callbacks.on("onSizeUpdated", onCameraUpdatedEffectForMaskView);
+        view.callbacks.on("onCameraUpdated", onCameraUpdatedEffectForMaskView);
+        return () => {
+          view.callbacks.off("onCameraUpdated", onCameraUpdatedEffectForMaskView);
+          view.callbacks.off("onSizeUpdated", onCameraUpdatedEffectForMaskView);
+        };
+      };
+      app.dispose.make(onCameraUpdatedEffect);
+    }
     return app;
   }
   var install = (register, options = {}) => {
@@ -7493,7 +7613,7 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/index.ts
-  var version = "0.1.9-beta.5";
+  var version = "0.1.9-beta.7";
   /*! Bundled license information:
 
   lodash/lodash.js:
@@ -7509,9 +7629,9 @@ var NetlessAppPresentation = (function (exports) {
 
   exports.NetlessAppPresentation = NetlessAppPresentation;
   exports.Presentation = Presentation;
+  exports.Scrollbar = Scrollbar;
   exports.default = NetlessAppPresentation;
   exports.install = install;
-  exports.styles = style_default;
   exports.version = version;
 
   Object.defineProperty(exports, '__esModule', { value: true });