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

package/dist/index.mjs

@@ -37,7 +37,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   // 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
 ));
 
@@ -1023,9 +1023,9 @@ var require_lodash = __commonJS({
           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;
@@ -2482,7 +2482,7 @@ var require_lodash = __commonJS({
           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,
@@ -2538,7 +2538,7 @@ var require_lodash = __commonJS({
           }
           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);
@@ -2571,7 +2571,7 @@ var require_lodash = __commonJS({
           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);
@@ -2839,19 +2839,19 @@ var require_lodash = __commonJS({
         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;
             }
           }
@@ -3111,15 +3111,15 @@ var require_lodash = __commonJS({
             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) {
@@ -3171,19 +3171,19 @@ var require_lodash = __commonJS({
           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;
         }
@@ -3859,7 +3859,7 @@ var require_lodash = __commonJS({
           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);
@@ -4039,7 +4039,7 @@ var require_lodash = __commonJS({
             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
@@ -4991,7 +4991,7 @@ var require_lodash = __commonJS({
           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");
@@ -5053,7 +5053,7 @@ var require_lodash = __commonJS({
         lodash.create = create;
         lodash.curry = curry;
         lodash.curryRight = curryRight;
-        lodash.debounce = debounce2;
+        lodash.debounce = debounce3;
         lodash.defaults = defaults;
         lodash.defaultsDeep = defaultsDeep;
         lodash.defer = defer;
@@ -5184,7 +5184,7 @@ var require_lodash = __commonJS({
         lodash.extend = assignIn;
         lodash.extendWith = assignInWith;
         mixin(lodash, lodash);
-        lodash.add = add;
+        lodash.add = add2;
         lodash.attempt = attempt;
         lodash.camelCase = camelCase;
         lodash.capitalize = capitalize;
@@ -5521,72 +5521,81 @@ var require_lodash = __commonJS({
   }
 });
 
-// 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) {
@@ -6453,9 +6462,6 @@ var Presentation = class {
     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");
@@ -6525,8 +6531,6 @@ var Presentation = class {
         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);
@@ -6835,17 +6839,22 @@ var Scrollbar = class {
         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);
@@ -6864,9 +6873,11 @@ var Scrollbar = class {
       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;
@@ -6884,9 +6895,11 @@ var Scrollbar = class {
       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;
@@ -6925,21 +6938,23 @@ var Scrollbar = class {
     }
   }
   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 };
@@ -7010,6 +7025,7 @@ var Scrollbar = class {
 };
 
 // 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) => {
@@ -7091,9 +7107,9 @@ var NetlessAppPresentation = {
       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}`);
         }
@@ -7108,8 +7124,8 @@ var NetlessAppPresentation = {
             };
           });
           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(() => {
@@ -7122,10 +7138,10 @@ var NetlessAppPresentation = {
             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}`);
           }
         });
       }
@@ -7240,14 +7256,32 @@ var NetlessAppPresentation = {
       }
     };
     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.6";
     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;
@@ -7277,10 +7311,6 @@ var NetlessAppPresentation = {
     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();
@@ -7289,6 +7319,42 @@ var NetlessAppPresentation = {
     const getScale = () => {
       return view.camera.scale;
     };
+    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
+        });
+      }
+    };
     const moveCamera = (camera) => {
       if (context.getIsWritable()) {
         view.moveCamera(__spreadProps(__spreadValues({}, camera), { animationMode: "immediately" }));
@@ -7379,12 +7445,12 @@ var NetlessAppPresentation = {
         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,
@@ -7430,11 +7496,12 @@ var NetlessAppPresentation = {
     };
     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")
@@ -7453,7 +7520,6 @@ var AppPresentation = class extends Presentation {
   constructor(config) {
     super(config);
     this.jumpPage = config.jumpPage;
-    this.image.style.display = "none";
   }
   updateImage() {
     super.updateImage();
@@ -7470,7 +7536,7 @@ var AppPresentation = class extends Presentation {
     }
   }
 };
-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;
@@ -7479,6 +7545,29 @@ function createPresentation(box, pages, jumpPage, pageIndex$, thumbnail) {
   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 = {}) => {
@@ -7490,7 +7579,7 @@ var install = (register, options = {}) => {
 };
 
 // src/index.ts
-var version = "0.1.9-beta.5";
+var version = "0.1.9-beta.6";
 /*! Bundled license information:
 
 lodash/lodash.js:
@@ -7504,5 +7593,5 @@ lodash/lodash.js:
    *)
 */
 
-export { NetlessAppPresentation, Presentation, NetlessAppPresentation as default, install, style_default as styles, version };
+export { NetlessAppPresentation, Presentation, NetlessAppPresentation as default, install, version };
 //# sourceMappingURL=index.mjs.map