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

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import { NetlessApp, View, AppContext, WindowManager } from '@netless/window-manager';
+import { View, NetlessApp, AppContext, WindowManager } from '@netless/window-manager';
+import * as lodash from 'lodash';
 
 /**
  * A combination of {@link Disposer} and {@link IDisposable}.
@@ -308,6 +309,18 @@ declare class Presentation implements IDisposable<void> {
     private isEditable;
 }
 
+interface ScrollbarOption {
+    appId: string;
+    readonly?: boolean;
+    getPageSize: () => {
+        width: number;
+        height: number;
+    };
+    getWritable: () => boolean;
+    getOriginScale: () => number;
+    syncView: () => void;
+    scrollbarEventCallback?: ScrollbarEventCallback;
+}
 interface ScrollbarEventCallback {
     onScrollbarDragStart?: () => void;
     onScrollbarDragEnd?: () => void;
@@ -315,6 +328,55 @@ interface ScrollbarEventCallback {
     onScrollbarDragY?: (y: number) => void;
     onScrollCameraUpdated?: (appid: string, originScale: number, scale: number) => void;
 }
+declare class Scrollbar {
+    readonly namespace = "netless-app-presentation";
+    readonly appId: string;
+    private container;
+    private scrollContainer;
+    private option;
+    private view;
+    private scrollbarContainerX?;
+    private scrollbarContainerY?;
+    private scrollbarX?;
+    private scrollbarY?;
+    private draggableX?;
+    private draggableY?;
+    private cameraCache?;
+    private readonly;
+    constructor(container: HTMLElement, option: ScrollbarOption, view: View);
+    private c;
+    setReadonly(bol: boolean): void;
+    onCameraUpdated: lodash.DebouncedFunc<() => void>;
+    onDragStart: () => void;
+    getScrollXRange(camera: {
+        scale: number;
+    }): {
+        minX: number;
+        maxX: number;
+    };
+    getScrollYRange(camera: {
+        scale: number;
+    }): {
+        minY: number;
+        maxY: number;
+    };
+    onDragX: (transformedDrag: {
+        x: number;
+        y: number;
+    }) => void;
+    onDragY: (transformedDrag: {
+        x: number;
+        y: number;
+    }) => void;
+    onDragEnd: () => void;
+    private init;
+    destroy(): void;
+    moveCamera: (camera: {
+        centerX: number;
+        centerY: number;
+        scale: number;
+    }) => void;
+}
 
 type Logger = (...data: any[]) => void;
 interface Viewport {
@@ -421,5 +483,5 @@ declare const install: (register: RegisterFn, options?: InstallOptions) => Promi
 
 declare const version: string;
 
-export { NetlessAppPresentation, Presentation, NetlessAppPresentation as default, install, version };
-export type { InstallOptions, Logger, PresentationAppOptions, PresentationConfig, PresentationController, PresentationPage, RegisterFn };
+export { NetlessAppPresentation, Presentation, Scrollbar, NetlessAppPresentation as default, install, version };
+export type { InstallOptions, Logger, PresentationAppOptions, PresentationConfig, PresentationController, PresentationPage, RegisterFn, ScrollbarEventCallback, ScrollbarOption };

package/dist/index.global.js

@@ -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) {
@@ -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;
@@ -6922,6 +6922,43 @@ 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, scale } = 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;
+        }
+        if ((0, import_lodash.isNumber)(scale)) {
+          let newScale = scale;
+          const originScale = this.option.getOriginScale();
+          if (scale < originScale) {
+            newScale = originScale;
+          }
+          _camera.scale = newScale;
+        }
+        this.view.moveCamera(__spreadProps(__spreadValues({}, _camera), {
+          animationMode: "immediately"
+        }));
+        this.option.syncView();
+      };
       this.scrollContainer.className = this.c("scrollbar-container");
       this.container = container;
       this.option = option;
@@ -7265,7 +7302,7 @@ var NetlessAppPresentation = (function (exports) {
       };
       const box = context.getBox();
       const app = dispose2.add(createPresentation(box, pages, jumpPage, pageIndex$, view, options.thumbnail, options.useClipView));
-      app.contentDOM.dataset.appPresentationVersion = "0.1.9-beta.6";
+      app.contentDOM.dataset.appPresentationVersion = "0.1.9-beta.8";
       app.scaleDocsToFit = scaleDocsToFit;
       app.log = log;
       if (options.justDocsViewReadonly) {
@@ -7358,14 +7395,6 @@ var NetlessAppPresentation = (function (exports) {
           });
         }
       };
-      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(() => {
@@ -7380,6 +7409,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 }, "*");
@@ -7582,7 +7621,7 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/index.ts
-  var version = "0.1.9-beta.6";
+  var version = "0.1.9-beta.8";
   /*! Bundled license information:
 
   lodash/lodash.js:
@@ -7598,6 +7637,7 @@ var NetlessAppPresentation = (function (exports) {
 
   exports.NetlessAppPresentation = NetlessAppPresentation;
   exports.Presentation = Presentation;
+  exports.Scrollbar = Scrollbar;
   exports.default = NetlessAppPresentation;
   exports.install = install;
   exports.version = version;

package/dist/index.js

@@ -4175,7 +4175,7 @@ var require_lodash = __commonJS({
           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)) {
@@ -4189,7 +4189,7 @@ var require_lodash = __commonJS({
         function isNil(value) {
           return value == null;
         }
-        function isNumber(value) {
+        function isNumber2(value) {
           return typeof value == "number" || isObjectLike(value) && baseGetTag(value) == numberTag;
         }
         function isPlainObject(value) {
@@ -5255,7 +5255,7 @@ var require_lodash = __commonJS({
         lodash.isNative = isNative;
         lodash.isNil = isNil;
         lodash.isNull = isNull;
-        lodash.isNumber = isNumber;
+        lodash.isNumber = isNumber2;
         lodash.isObject = isObject;
         lodash.isObjectLike = isObjectLike;
         lodash.isPlainObject = isPlainObject;
@@ -6923,6 +6923,43 @@ var Scrollbar = class {
       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, scale } = 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;
+      }
+      if ((0, import_lodash.isNumber)(scale)) {
+        let newScale = scale;
+        const originScale = this.option.getOriginScale();
+        if (scale < originScale) {
+          newScale = originScale;
+        }
+        _camera.scale = newScale;
+      }
+      this.view.moveCamera(__spreadProps(__spreadValues({}, _camera), {
+        animationMode: "immediately"
+      }));
+      this.option.syncView();
+    };
     this.scrollContainer.className = this.c("scrollbar-container");
     this.container = container;
     this.option = option;
@@ -7266,7 +7303,7 @@ var NetlessAppPresentation = {
     };
     const box = context.getBox();
     const app = dispose2.add(createPresentation(box, pages, jumpPage, pageIndex$, view, options.thumbnail, options.useClipView));
-    app.contentDOM.dataset.appPresentationVersion = "0.1.9-beta.6";
+    app.contentDOM.dataset.appPresentationVersion = "0.1.9-beta.8";
     app.scaleDocsToFit = scaleDocsToFit;
     app.log = log;
     if (options.justDocsViewReadonly) {
@@ -7359,14 +7396,6 @@ var NetlessAppPresentation = {
         });
       }
     };
-    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(() => {
@@ -7381,6 +7410,16 @@ var NetlessAppPresentation = {
         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 }, "*");
@@ -7583,7 +7622,7 @@ var install = (register, options = {}) => {
 };
 
 // src/index.ts
-var version = "0.1.9-beta.6";
+var version = "0.1.9-beta.8";
 /*! Bundled license information:
 
 lodash/lodash.js:
@@ -7599,6 +7638,7 @@ lodash/lodash.js:
 
 exports.NetlessAppPresentation = NetlessAppPresentation;
 exports.Presentation = Presentation;
+exports.Scrollbar = Scrollbar;
 exports.default = NetlessAppPresentation;
 exports.install = install;
 exports.version = version;