@netless/app-presentation 0.1.9-beta.0 → 0.1.9-beta.2

package/dist/index.d.ts

@@ -361,6 +361,16 @@ interface PresentationController {
     log: Logger;
     /** set the docs view readonly */
     setDocsViewReadonly: (bol: boolean) => void;
+    /** set the presentation readonly */
+    setReadonly: (bol: boolean) => void;
+    /** move the camera */
+    moveCamera: (camera: {
+        centerX: number;
+        centerY: number;
+        scale: number;
+    }) => void;
+    /** get the origin scale */
+    getOriginScale: () => number;
 }
 
 declare const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions, PresentationController>;

package/dist/index.global.js

@@ -1,6 +1,26 @@
 var NetlessAppPresentation = (function (exports) {
   'use strict';
 
+  var __defProp = Object.defineProperty;
+  var __defProps = Object.defineProperties;
+  var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __propIsEnum = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    if (__getOwnPropSymbols)
+      for (var prop of __getOwnPropSymbols(b)) {
+        if (__propIsEnum.call(b, prop))
+          __defNormalProp(a, prop, b[prop]);
+      }
+    return a;
+  };
+  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
   // node_modules/.pnpm/@wopjs+disposable@0.1.5/node_modules/@wopjs/disposable/dist/index.mjs
   var isAbortable = (disposable) => disposable && disposable.abortable;
   var dispose = (disposable) => {
@@ -1264,6 +1284,7 @@ var NetlessAppPresentation = (function (exports) {
       originalMouseY = e.pageY;
       element.addEventListener("pointermove", drag);
       document.body.addEventListener("pointerup", stopDrag);
+      document.body.addEventListener("pointercancel", stopDrag);
       element.setPointerCapture(e.pointerId);
       onDragStart == null ? void 0 : onDragStart();
     }
@@ -1271,6 +1292,7 @@ var NetlessAppPresentation = (function (exports) {
       currentDragger = null;
       element.removeEventListener("pointermove", drag);
       document.body.removeEventListener("pointerup", stopDrag);
+      document.body.removeEventListener("pointercancel", stopDrag);
     }
     function stopDrag(e) {
       if (!currentDragger)
@@ -1302,11 +1324,14 @@ var NetlessAppPresentation = (function (exports) {
           };
         },
         getWritable: () => false,
+        getOriginScale: () => 1,
         syncView: () => void 0
       };
       this.onCameraUpdated = () => {
+        if (this.readonly)
+          return;
         const { scale, centerX, centerY } = this.view.camera;
-        const originScale = this.getOriginScale();
+        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);
@@ -1332,7 +1357,7 @@ var NetlessAppPresentation = (function (exports) {
       this.onDragX = (transformedDrag) => {
         if (this.cameraCache) {
           const { x } = transformedDrag;
-          const originScale = this.getOriginScale();
+          const originScale = this.option.getOriginScale();
           const { minX, maxX } = this.getScrollXRange(this.cameraCache);
           const scrollX = Math.round(x / originScale);
           let centerX = scrollX + this.cameraCache.centerX;
@@ -1350,7 +1375,7 @@ var NetlessAppPresentation = (function (exports) {
       this.onDragY = (transformedDrag) => {
         if (this.cameraCache) {
           const { y } = transformedDrag;
-          const originScale = this.getOriginScale();
+          const originScale = this.option.getOriginScale();
           const { minY, maxY } = this.getScrollYRange(this.cameraCache);
           const scrollY = Math.round(y / originScale);
           let centerY = scrollY + this.cameraCache.centerY;
@@ -1372,21 +1397,24 @@ var NetlessAppPresentation = (function (exports) {
       this.scrollContainer.className = this.c("scrollbar-container");
       this.container = container;
       this.option = option;
+      this.readonly = option.readonly || false;
       this.view = view;
       this.init();
-      this.view.callbacks.on("onCameraUpdated", this.onCameraUpdated);
     }
     c(className) {
       return `${this.namespace}-${className}`;
     }
-    getOriginScale() {
-      const { size } = this.view;
-      const { width, height } = this.option.getPageSize();
-      return Math.min(size.height / height, size.width / width);
+    setReadonly(bol) {
+      this.readonly = bol;
+      if (this.readonly) {
+        this.destroy();
+      } else {
+        this.init();
+      }
     }
     getScrollXRange(camera) {
       const { width } = this.option.getPageSize();
-      const originScale = this.getOriginScale();
+      const originScale = this.option.getOriginScale();
       const scale = camera.scale;
       const ratio = Math.round(originScale / scale * 1e3) / 1e3;
       const scrollWidth = width * (1 - ratio);
@@ -1396,7 +1424,7 @@ var NetlessAppPresentation = (function (exports) {
     }
     getScrollYRange(camera) {
       const { height } = this.option.getPageSize();
-      const originScale = this.getOriginScale();
+      const originScale = this.option.getOriginScale();
       const scale = camera.scale;
       const ratio = Math.round(originScale / scale * 1e3) / 1e3;
       const scrollHeight = height * (1 - ratio);
@@ -1441,6 +1469,8 @@ var NetlessAppPresentation = (function (exports) {
       this.scrollbarContainerY.appendChild(this.scrollbarY);
       this.scrollContainer.append(this.scrollbarContainerX, this.scrollbarContainerY);
       this.container.appendChild(this.scrollContainer);
+      this.view.callbacks.on("onCameraUpdated", this.onCameraUpdated);
+      this.onCameraUpdated();
     }
     destroy() {
       var _a, _b, _c, _d;
@@ -1689,7 +1719,7 @@ var NetlessAppPresentation = (function (exports) {
       dispose2.add(view$$.addStateChangedListener(() => syncViewFromRemote(false, true)));
       const box = context.getBox();
       const app = dispose2.add(createPresentation(box, pages, jumpPage, pageIndex$, options.thumbnail));
-      app.contentDOM.dataset.appPresentationVersion = "0.1.9-beta.0";
+      app.contentDOM.dataset.appPresentationVersion = "0.1.9-beta.2";
       app.scaleDocsToFit = scaleDocsToFit;
       app.log = log;
       if (options.justDocsViewReadonly) {
@@ -1724,17 +1754,33 @@ 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();
+        return Math.min(size.height / height, size.width / width);
+      };
+      const moveCamera = (camera) => {
+        if (context.getIsWritable()) {
+          view.moveCamera(__spreadProps(__spreadValues({}, camera), { animationMode: "immediately" }));
+          syncView();
+          return;
+        }
+        throw new Error("[Presentation]: moveCamera must be called in writable room");
+      };
+      let scrollbar;
       if (options.useScrollbar) {
         dispose2.make(() => {
-          const scrollbar = new Scrollbar(app.contentDOM, {
-            getPageSize: () => {
-              const { width, height } = app.page() || {};
-              return { width: width || 0, height: height || 0 };
-            },
-            getWritable: () => context.getIsWritable(),
-            syncView: () => syncView()
+          scrollbar = new Scrollbar(app.contentDOM, {
+            getPageSize,
+            getOriginScale,
+            syncView,
+            getWritable: () => context.getIsWritable()
           }, view);
-          return () => scrollbar.destroy();
+          return () => scrollbar == null ? void 0 : scrollbar.destroy();
         });
       }
       context.emitter.on("destroy", () => dispose2());
@@ -1854,7 +1900,13 @@ var NetlessAppPresentation = (function (exports) {
       const setDocsViewReadonly = (bol) => {
         app.setDocsViewReadonly(bol);
       };
-      const controller = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log, setDocsViewReadonly };
+      const setReadonly = (bol) => {
+        app.setReadonly(bol);
+        if (scrollbar) {
+          scrollbar.setReadonly(bol);
+        }
+      };
+      const controller = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log, setDocsViewReadonly, setReadonly, moveCamera, getOriginScale };
       dispose2.add(listen(window, "message", (ev) => {
         if (ev.data === "@netless/_presentation_") {
           if (typeof window !== "undefined")
@@ -1910,7 +1962,7 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/index.ts
-  var version = "0.1.9-beta.0";
+  var version = "0.1.9-beta.2";
 
   exports.NetlessAppPresentation = NetlessAppPresentation;
   exports.Presentation = Presentation;

package/dist/index.js

@@ -2,6 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
 // node_modules/.pnpm/@wopjs+disposable@0.1.5/node_modules/@wopjs/disposable/dist/index.mjs
 var isAbortable = (disposable) => disposable && disposable.abortable;
 var dispose = (disposable) => {
@@ -1265,6 +1285,7 @@ function makeDraggable(element, options) {
     originalMouseY = e.pageY;
     element.addEventListener("pointermove", drag);
     document.body.addEventListener("pointerup", stopDrag);
+    document.body.addEventListener("pointercancel", stopDrag);
     element.setPointerCapture(e.pointerId);
     onDragStart == null ? void 0 : onDragStart();
   }
@@ -1272,6 +1293,7 @@ function makeDraggable(element, options) {
     currentDragger = null;
     element.removeEventListener("pointermove", drag);
     document.body.removeEventListener("pointerup", stopDrag);
+    document.body.removeEventListener("pointercancel", stopDrag);
   }
   function stopDrag(e) {
     if (!currentDragger)
@@ -1303,11 +1325,14 @@ var Scrollbar = class {
         };
       },
       getWritable: () => false,
+      getOriginScale: () => 1,
       syncView: () => void 0
     };
     this.onCameraUpdated = () => {
+      if (this.readonly)
+        return;
       const { scale, centerX, centerY } = this.view.camera;
-      const originScale = this.getOriginScale();
+      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);
@@ -1333,7 +1358,7 @@ var Scrollbar = class {
     this.onDragX = (transformedDrag) => {
       if (this.cameraCache) {
         const { x } = transformedDrag;
-        const originScale = this.getOriginScale();
+        const originScale = this.option.getOriginScale();
         const { minX, maxX } = this.getScrollXRange(this.cameraCache);
         const scrollX = Math.round(x / originScale);
         let centerX = scrollX + this.cameraCache.centerX;
@@ -1351,7 +1376,7 @@ var Scrollbar = class {
     this.onDragY = (transformedDrag) => {
       if (this.cameraCache) {
         const { y } = transformedDrag;
-        const originScale = this.getOriginScale();
+        const originScale = this.option.getOriginScale();
         const { minY, maxY } = this.getScrollYRange(this.cameraCache);
         const scrollY = Math.round(y / originScale);
         let centerY = scrollY + this.cameraCache.centerY;
@@ -1373,21 +1398,24 @@ var Scrollbar = class {
     this.scrollContainer.className = this.c("scrollbar-container");
     this.container = container;
     this.option = option;
+    this.readonly = option.readonly || false;
     this.view = view;
     this.init();
-    this.view.callbacks.on("onCameraUpdated", this.onCameraUpdated);
   }
   c(className) {
     return `${this.namespace}-${className}`;
   }
-  getOriginScale() {
-    const { size } = this.view;
-    const { width, height } = this.option.getPageSize();
-    return Math.min(size.height / height, size.width / width);
+  setReadonly(bol) {
+    this.readonly = bol;
+    if (this.readonly) {
+      this.destroy();
+    } else {
+      this.init();
+    }
   }
   getScrollXRange(camera) {
     const { width } = this.option.getPageSize();
-    const originScale = this.getOriginScale();
+    const originScale = this.option.getOriginScale();
     const scale = camera.scale;
     const ratio = Math.round(originScale / scale * 1e3) / 1e3;
     const scrollWidth = width * (1 - ratio);
@@ -1397,7 +1425,7 @@ var Scrollbar = class {
   }
   getScrollYRange(camera) {
     const { height } = this.option.getPageSize();
-    const originScale = this.getOriginScale();
+    const originScale = this.option.getOriginScale();
     const scale = camera.scale;
     const ratio = Math.round(originScale / scale * 1e3) / 1e3;
     const scrollHeight = height * (1 - ratio);
@@ -1442,6 +1470,8 @@ var Scrollbar = class {
     this.scrollbarContainerY.appendChild(this.scrollbarY);
     this.scrollContainer.append(this.scrollbarContainerX, this.scrollbarContainerY);
     this.container.appendChild(this.scrollContainer);
+    this.view.callbacks.on("onCameraUpdated", this.onCameraUpdated);
+    this.onCameraUpdated();
   }
   destroy() {
     var _a, _b, _c, _d;
@@ -1690,7 +1720,7 @@ var NetlessAppPresentation = {
     dispose2.add(view$$.addStateChangedListener(() => syncViewFromRemote(false, true)));
     const box = context.getBox();
     const app = dispose2.add(createPresentation(box, pages, jumpPage, pageIndex$, options.thumbnail));
-    app.contentDOM.dataset.appPresentationVersion = "0.1.9-beta.0";
+    app.contentDOM.dataset.appPresentationVersion = "0.1.9-beta.2";
     app.scaleDocsToFit = scaleDocsToFit;
     app.log = log;
     if (options.justDocsViewReadonly) {
@@ -1725,17 +1755,33 @@ 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();
+      return Math.min(size.height / height, size.width / width);
+    };
+    const moveCamera = (camera) => {
+      if (context.getIsWritable()) {
+        view.moveCamera(__spreadProps(__spreadValues({}, camera), { animationMode: "immediately" }));
+        syncView();
+        return;
+      }
+      throw new Error("[Presentation]: moveCamera must be called in writable room");
+    };
+    let scrollbar;
     if (options.useScrollbar) {
       dispose2.make(() => {
-        const scrollbar = new Scrollbar(app.contentDOM, {
-          getPageSize: () => {
-            const { width, height } = app.page() || {};
-            return { width: width || 0, height: height || 0 };
-          },
-          getWritable: () => context.getIsWritable(),
-          syncView: () => syncView()
+        scrollbar = new Scrollbar(app.contentDOM, {
+          getPageSize,
+          getOriginScale,
+          syncView,
+          getWritable: () => context.getIsWritable()
         }, view);
-        return () => scrollbar.destroy();
+        return () => scrollbar == null ? void 0 : scrollbar.destroy();
       });
     }
     context.emitter.on("destroy", () => dispose2());
@@ -1855,7 +1901,13 @@ var NetlessAppPresentation = {
     const setDocsViewReadonly = (bol) => {
       app.setDocsViewReadonly(bol);
     };
-    const controller = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log, setDocsViewReadonly };
+    const setReadonly = (bol) => {
+      app.setReadonly(bol);
+      if (scrollbar) {
+        scrollbar.setReadonly(bol);
+      }
+    };
+    const controller = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log, setDocsViewReadonly, setReadonly, moveCamera, getOriginScale };
     dispose2.add(listen(window, "message", (ev) => {
       if (ev.data === "@netless/_presentation_") {
         if (typeof window !== "undefined")
@@ -1911,7 +1963,7 @@ var install = (register, options = {}) => {
 };
 
 // src/index.ts
-var version = "0.1.9-beta.0";
+var version = "0.1.9-beta.2";
 
 exports.NetlessAppPresentation = NetlessAppPresentation;
 exports.Presentation = Presentation;