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

package/dist/index.d.ts

@@ -334,6 +334,10 @@ interface PresentationAppOptions {
     viewport?: Viewport | ((page: PresentationPage) => Viewport);
     /** justDocsViewReadonly is used to set the presentation readonly, it will be used in the presentation, and the presentation will be readonly when the app is initialized */
     justDocsViewReadonly?: true;
+    /** useScrollbar is used to set the presentation use scrollbar, it will be used in the presentation, and the presentation will be use scrollbar when the app is initialized */
+    useScrollbar?: boolean;
+    /** debounceSync is used to set the presentation debounce sync, it will be used in the presentation, and the presentation will be debounce sync when the app is initialized */
+    debounceSync?: boolean;
 }
 interface PresentationController {
     readonly app: Presentation;

package/dist/index.global.js

@@ -1156,7 +1156,7 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/style.scss?inline
-  var style_default = ".netless-app-presentation{height:100%;display:flex;flex-flow:column nowrap}.netless-app-presentation-content{position:relative;height:100%;overflow:hidden}.netless-app-presentation-preview-mask{display:none;position:absolute;z-index:200;top:0;left:0;width:100%;height:100%}.netless-app-presentation-preview{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:300;top:0;left:0;width:33%;max-width:200px;height:100%;padding-top:10px;transform:translate(-100%);background:#ededf0e6;box-shadow:inset -1px 0 #0000001c;transition:transform .4s;overflow:auto;overflow-y:scroll}.netless-app-presentation-preview-active .netless-app-presentation-preview-mask{display:block}.netless-app-presentation-preview-active .netless-app-presentation-preview{transform:translate(0)}.netless-app-presentation-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:#0000;outline:none;border:7px solid rgba(0,0,0,0);border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-presentation-preview-page:hover,.netless-app-presentation-preview-page.netless-app-presentation-preview-page-active{border-color:#444e601a}.netless-app-presentation-preview-page>img{width:100%;height:auto;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);border-radius:1px;background-color:#fff;box-shadow:0 2px 8px #0000004d}.netless-app-presentation-preview-page-name{position:absolute;top:1px;left:-10px;transform:translate(-100%);text-align:right;font-size:12px;color:#5f5f5f;user-select:none}.netless-app-presentation-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7;color:#191919}.netless-app-presentation-float-footer{width:100%;min-height:26px;position:absolute;left:0;bottom:0;z-index:2000;background:#f9f9fce6;transition:opacity .4s}.netless-app-presentation-footer-btn{box-sizing:border-box;width:26px;height:26px;font-size:0;margin:0;padding:3px;border:none;border-radius:1px;outline:none;color:currentColor;background:#0000;transition:background .4s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-presentation-footer-btn:hover{background:#ededf0e6}@media (hover: none){.netless-app-presentation-footer-btn:hover{background:#0000!important}}.netless-app-presentation-footer-btn>svg{width:100%;height:100%}.netless-app-presentation-footer-btn>svg:nth-of-type(2){display:none}.netless-app-presentation-footer-btn.netless-app-presentation-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-presentation-footer-btn.netless-app-presentation-footer-btn-playing>svg:nth-of-type(2){display:initial}.netless-app-presentation-footer-btn~.netless-app-presentation-footer-btn{margin-left:15px}.netless-app-presentation-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-presentation-page-number{margin-left:auto;font-size:13px;user-select:none;white-space:nowrap;word-break:keep-all}.netless-app-presentation-page-number-input{border:none;outline:none;width:3em;margin:0;padding:0 2px;text-align:right;font-size:13px;line-height:1;font-weight:400;font-family:inherit;border-radius:2px;color:currentColor;background:#0000;transition:background .4s;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-presentation-page-number-input:hover,.netless-app-presentation-page-number-input:focus,.netless-app-presentation-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-presentation-readonly.netless-app-presentation-footer{display:none}.netless-app-presentation-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden;transition:opacity .2s}.netless-app-presentation-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.netless-app-presentation-image>img{max-width:100%;max-height:100%;object-fit:contain}.telebox-color-scheme-dark .netless-app-presentation-page-number-input{color:#a6a6a8}.telebox-color-scheme-dark .netless-app-presentation-page-number-input:active,.telebox-color-scheme-dark .netless-app-presentation-page-number-input:focus,.telebox-color-scheme-dark .netless-app-presentation-page-number-input:hover{color:#222}.telebox-color-scheme-dark .netless-app-presentation-footer{color:#a6a6a8;background:#2d2d33;border-top:none}.telebox-color-scheme-dark .netless-app-presentation-footer-btn:hover{background:#212126}.telebox-color-scheme-dark .netless-app-presentation-preview{background:#323232e6}";
+  var style_default = ".netless-app-presentation{height:100%;display:flex;flex-flow:column nowrap}.netless-app-presentation-content{position:relative;height:100%;overflow:hidden}.netless-app-presentation-preview-mask{display:none;position:absolute;z-index:200;top:0;left:0;width:100%;height:100%}.netless-app-presentation-preview{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:300;top:0;left:0;width:33%;max-width:200px;height:100%;padding-top:10px;transform:translate(-100%);background:#ededf0e6;box-shadow:inset -1px 0 #0000001c;transition:transform .4s;overflow:auto;overflow-y:scroll}.netless-app-presentation-preview-active .netless-app-presentation-preview-mask{display:block}.netless-app-presentation-preview-active .netless-app-presentation-preview{transform:translate(0)}.netless-app-presentation-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:#0000;outline:none;border:7px solid rgba(0,0,0,0);border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-presentation-preview-page:hover,.netless-app-presentation-preview-page.netless-app-presentation-preview-page-active{border-color:#444e601a}.netless-app-presentation-preview-page>img{width:100%;height:auto;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);border-radius:1px;background-color:#fff;box-shadow:0 2px 8px #0000004d}.netless-app-presentation-preview-page-name{position:absolute;top:1px;left:-10px;transform:translate(-100%);text-align:right;font-size:12px;color:#5f5f5f;user-select:none}.netless-app-presentation-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7;color:#191919}.netless-app-presentation-float-footer{width:100%;min-height:26px;position:absolute;left:0;bottom:0;z-index:2000;background:#f9f9fce6;transition:opacity .4s}.netless-app-presentation-footer-btn{box-sizing:border-box;width:26px;height:26px;font-size:0;margin:0;padding:3px;border:none;border-radius:1px;outline:none;color:currentColor;background:#0000;transition:background .4s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-presentation-footer-btn:hover{background:#ededf0e6}@media (hover: none){.netless-app-presentation-footer-btn:hover{background:#0000!important}}.netless-app-presentation-footer-btn>svg{width:100%;height:100%}.netless-app-presentation-footer-btn>svg:nth-of-type(2){display:none}.netless-app-presentation-footer-btn.netless-app-presentation-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-presentation-footer-btn.netless-app-presentation-footer-btn-playing>svg:nth-of-type(2){display:initial}.netless-app-presentation-footer-btn~.netless-app-presentation-footer-btn{margin-left:15px}.netless-app-presentation-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-presentation-page-number{margin-left:auto;font-size:13px;user-select:none;white-space:nowrap;word-break:keep-all}.netless-app-presentation-page-number-input{border:none;outline:none;width:3em;margin:0;padding:0 2px;text-align:right;font-size:13px;line-height:1;font-weight:400;font-family:inherit;border-radius:2px;color:currentColor;background:#0000;transition:background .4s;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-presentation-page-number-input:hover,.netless-app-presentation-page-number-input:focus,.netless-app-presentation-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-presentation-readonly.netless-app-presentation-footer{display:none}.netless-app-presentation-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden;transition:opacity .2s}.netless-app-presentation-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.netless-app-presentation-image>img{max-width:100%;max-height:100%;object-fit:contain}.telebox-color-scheme-dark .netless-app-presentation-page-number-input{color:#a6a6a8}.telebox-color-scheme-dark .netless-app-presentation-page-number-input:active,.telebox-color-scheme-dark .netless-app-presentation-page-number-input:focus,.telebox-color-scheme-dark .netless-app-presentation-page-number-input:hover{color:#222}.telebox-color-scheme-dark .netless-app-presentation-footer{color:#a6a6a8;background:#2d2d33;border-top:none}.telebox-color-scheme-dark .netless-app-presentation-footer-btn:hover{background:#212126}.telebox-color-scheme-dark .netless-app-presentation-preview{background:#323232e6}.netless-app-presentation-scrollbar-container{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:101}.netless-app-presentation-scrollbar-container-x,.netless-app-presentation-scrollbar-container-y{position:absolute;pointer-events:none;display:flex;justify-content:center;box-sizing:border-box;padding:0}.netless-app-presentation-scrollbar-container-x{bottom:0;left:0;height:6px;width:100%;padding-right:6px}.netless-app-presentation-scrollbar-container-y{top:0;right:0;width:6px;height:100%;flex-direction:column;padding-bottom:6px}.netless-app-presentation-scrollbar-x,.netless-app-presentation-scrollbar-y{border-radius:2px;background-color:#1b1f4d4d;pointer-events:auto;cursor:default}.netless-app-presentation-scrollbar-x{height:6px}.netless-app-presentation-scrollbar-y{width:6px}";
 
   // src/store.ts
   function noop() {
@@ -1227,6 +1227,235 @@ var NetlessAppPresentation = (function (exports) {
     };
   }
 
+  // src/scrollbar/Draggable.ts
+  function makeDraggable(element, options) {
+    let currentDragger = null;
+    let originalMouseX = 0;
+    let originalMouseY = 0;
+    const { onDragEnd, onDrag, onDragStart, direction = "xy" } = options;
+    const drag = (e, state) => {
+      e.stopPropagation();
+      if (!currentDragger)
+        return;
+      let transformedDragX = 0;
+      let transformedDragY = 0;
+      if (direction === "x") {
+        transformedDragX = Math.round(e.pageX - originalMouseX);
+      } else if (direction === "y") {
+        transformedDragY = Math.round(e.pageY - originalMouseY);
+      } else {
+        transformedDragX = Math.round(e.pageX - originalMouseX);
+        transformedDragY = Math.round(e.pageY - originalMouseY);
+      }
+      if (state === 3 /* END */) {
+        onDragEnd == null ? void 0 : onDragEnd({ x: transformedDragX, y: transformedDragY });
+      } else {
+        onDrag == null ? void 0 : onDrag({ x: transformedDragX, y: transformedDragY });
+      }
+    };
+    element.addEventListener("pointerdown", bindDrag);
+    function bindDrag(e) {
+      currentDragger = e.target;
+      e.stopPropagation();
+      if (currentDragger !== element) {
+        return;
+      }
+      originalMouseX = e.pageX;
+      originalMouseY = e.pageY;
+      element.addEventListener("pointermove", drag);
+      document.body.addEventListener("pointerup", stopDrag);
+      element.setPointerCapture(e.pointerId);
+      onDragStart == null ? void 0 : onDragStart();
+    }
+    function removeEventListener2() {
+      currentDragger = null;
+      element.removeEventListener("pointermove", drag);
+      document.body.removeEventListener("pointerup", stopDrag);
+    }
+    function stopDrag(e) {
+      if (!currentDragger)
+        return;
+      e.stopPropagation();
+      drag(e, 3 /* END */);
+      removeEventListener2();
+    }
+    function destroy() {
+      stop();
+      element.removeEventListener("pointerdown", bindDrag);
+    }
+    function stop() {
+      removeEventListener2();
+    }
+    return { destroy };
+  }
+
+  // src/scrollbar/index.ts
+  var Scrollbar = class {
+    constructor(container, option, view) {
+      this.namespace = "netless-app-presentation";
+      this.scrollContainer = document.createElement("div");
+      this.option = {
+        getPageSize: () => {
+          return {
+            width: 0,
+            height: 0
+          };
+        },
+        getWritable: () => false,
+        syncView: () => void 0
+      };
+      this.onCameraUpdated = () => {
+        const { scale, centerX, centerY } = this.view.camera;
+        const originScale = this.getOriginScale();
+        const ratio = Math.round(originScale / scale * 1e3) / 1e3;
+        const scrollX = Math.round(centerX * originScale);
+        const scrollY = Math.round(centerY * originScale);
+        if (this.scrollbarX) {
+          this.scrollbarX.style.width = `${ratio * 100}%`;
+          this.scrollbarX.style.display = ratio === 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.transform = `translateY(${scrollY}px)`;
+        }
+      };
+      this.onDragStart = () => {
+        const camera = this.view.camera;
+        this.cameraCache = {
+          centerX: camera.centerX,
+          centerY: camera.centerY,
+          scale: camera.scale
+        };
+      };
+      this.onDragX = (transformedDrag) => {
+        if (this.cameraCache) {
+          const { x } = transformedDrag;
+          const originScale = this.getOriginScale();
+          const { minX, maxX } = this.getScrollXRange(this.cameraCache);
+          const scrollX = Math.round(x / originScale);
+          let centerX = scrollX + this.cameraCache.centerX;
+          if (centerX < minX) {
+            centerX = minX;
+          } else if (centerX > maxX) {
+            centerX = maxX;
+          }
+          this.view.moveCamera({
+            centerX,
+            animationMode: "immediately"
+          });
+        }
+      };
+      this.onDragY = (transformedDrag) => {
+        if (this.cameraCache) {
+          const { y } = transformedDrag;
+          const originScale = this.getOriginScale();
+          const { minY, maxY } = this.getScrollYRange(this.cameraCache);
+          const scrollY = Math.round(y / originScale);
+          let centerY = scrollY + this.cameraCache.centerY;
+          if (centerY < minY) {
+            centerY = minY;
+          } else if (centerY > maxY) {
+            centerY = maxY;
+          }
+          this.view.moveCamera({
+            centerY,
+            animationMode: "immediately"
+          });
+        }
+      };
+      this.onDragEnd = () => {
+        this.cameraCache = void 0;
+        this.option.syncView();
+      };
+      this.scrollContainer.className = this.c("scrollbar-container");
+      this.container = container;
+      this.option = option;
+      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);
+    }
+    getScrollXRange(camera) {
+      const { width } = this.option.getPageSize();
+      const originScale = this.getOriginScale();
+      const scale = camera.scale;
+      const ratio = Math.round(originScale / scale * 1e3) / 1e3;
+      const scrollWidth = width * (1 - ratio);
+      const minX = -scrollWidth / 2;
+      const maxX = scrollWidth / 2;
+      return { minX, maxX };
+    }
+    getScrollYRange(camera) {
+      const { height } = this.option.getPageSize();
+      const originScale = this.getOriginScale();
+      const scale = camera.scale;
+      const ratio = Math.round(originScale / scale * 1e3) / 1e3;
+      const scrollHeight = height * (1 - ratio);
+      const minY = -scrollHeight / 2;
+      const maxY = scrollHeight / 2;
+      return { minY, maxY };
+    }
+    init() {
+      this.scrollbarX = document.createElement("div");
+      this.scrollbarX.classList.add(this.c("scrollbar-x"));
+      if (this.option.getWritable()) {
+        this.draggableX = makeDraggable(this.scrollbarX, {
+          direction: "x",
+          onDrag: this.onDragX,
+          onDragEnd: this.onDragEnd,
+          onDragStart: this.onDragStart
+        });
+      }
+      Object.assign(this.scrollbarX.style, {
+        width: "100%",
+        display: "none"
+      });
+      this.scrollbarContainerX = document.createElement("div");
+      this.scrollbarContainerX.classList.add(this.c("scrollbar-container-x"));
+      this.scrollbarContainerX.appendChild(this.scrollbarX);
+      this.scrollbarY = document.createElement("div");
+      this.scrollbarY.classList.add(this.c("scrollbar-y"));
+      if (this.option.getWritable()) {
+        this.draggableY = makeDraggable(this.scrollbarY, {
+          direction: "y",
+          onDrag: this.onDragY,
+          onDragEnd: this.onDragEnd,
+          onDragStart: this.onDragStart
+        });
+      }
+      Object.assign(this.scrollbarY.style, {
+        height: "100%",
+        display: "none"
+      });
+      this.scrollbarContainerY = document.createElement("div");
+      this.scrollbarContainerY.classList.add(this.c("scrollbar-container-y"));
+      this.scrollbarContainerY.appendChild(this.scrollbarY);
+      this.scrollContainer.append(this.scrollbarContainerX, this.scrollbarContainerY);
+      this.container.appendChild(this.scrollContainer);
+    }
+    destroy() {
+      var _a, _b, _c, _d;
+      this.view.callbacks.off("onCameraUpdated", this.onCameraUpdated);
+      (_a = this.scrollbarX) == null ? void 0 : _a.remove();
+      (_b = this.scrollbarY) == null ? void 0 : _b.remove();
+      this.scrollbarX = void 0;
+      this.scrollbarY = void 0;
+      (_c = this.draggableX) == null ? void 0 : _c.destroy();
+      (_d = this.draggableY) == null ? void 0 : _d.destroy();
+      this.draggableX = void 0;
+      this.draggableY = void 0;
+    }
+  };
+
   // src/app-presentation.ts
   var emptySceneName = "$$empty$$";
   var ppt2page = (ppt, name) => ppt ? { width: ppt.width, height: ppt.height, src: ppt.src, thumbnail: ppt.previewURL, name } : null;
@@ -1418,21 +1647,27 @@ var NetlessAppPresentation = (function (exports) {
         }
       };
       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(() => {
+        if (context.getIsWritable()) {
+          if (options.debounceSync) {
+            clearTimeout(throttleSyncView);
             throttleSyncView = 0;
-            view$$.setState({ uid: me, originX: x, originY: y, width: w, height: h });
-          }, 50);
+          }
+          if (throttleSyncView > 0)
+            return;
+          const { width, height } = app.page() || {};
+          if (width && height) {
+            throttleSyncView = setTimeout(() => {
+              throttleSyncView = 0;
+              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;
+              view$$.setState({ uid: me, originX: x, originY: y, width: w, height: h });
+            }, 50);
+          }
         }
       };
       dispose2.add(() => {
@@ -1454,7 +1689,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.8";
+      app.contentDOM.dataset.appPresentationVersion = "0.1.9-beta.0";
       app.scaleDocsToFit = scaleDocsToFit;
       app.log = log;
       if (options.justDocsViewReadonly) {
@@ -1489,6 +1724,19 @@ var NetlessAppPresentation = (function (exports) {
       dispose2.add(context.emitter.on("writableChange", (isWritable) => {
         app.setReadonly(!isWritable);
       }));
+      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()
+          }, view);
+          return () => scrollbar.destroy();
+        });
+      }
       context.emitter.on("destroy", () => dispose2());
       const reportProgress = (progress, result) => {
         window.postMessage({ type: "@netless/_result_save_pdf_", appId: context.appId, progress, result }, "*");
@@ -1662,7 +1910,7 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/index.ts
-  var version = "0.1.8";
+  var version = "0.1.9-beta.0";
 
   exports.NetlessAppPresentation = NetlessAppPresentation;
   exports.Presentation = Presentation;