@netless/app-slide 0.2.85 → 0.2.86

package/dist/main.es.js

@@ -37914,7 +37914,10 @@ const EmptyAttributes = {
   state: null,
   resourceList: [],
   previewList: [],
-  customLinks: []
+  customLinks: [],
+  slideScale: 1,
+  translateX: 0.5,
+  translateY: 0.5
 };
 const noop$1 = function noop2() {
 };
@@ -38147,7 +38150,7 @@ class SlideControllerBase {
       anchor,
       interactive: true,
       mode: "interactive",
-      controller: logger.enable,
+      controller: false,
       enableGlobalClick: (_a = options.enableGlobalClick) != null ? _a : true,
       renderOptions: {
         minFPS: options.minFPS || 25,
@@ -39233,6 +39236,362 @@ class DocsViewer {
     return `${this.namespace}-${className}`;
   }
 }
+class ScrollBar {
+  constructor(container, resizableContainer) {
+    this.horizontalScrollBar = null;
+    this.verticalScrollBar = null;
+    this.isDraggingHorizontal = false;
+    this.isDraggingVertical = false;
+    this.eventListeners = [];
+    this.container = container;
+    this.resizableContainer = resizableContainer;
+  }
+  addTrackedListener(element, type, listener) {
+    element.addEventListener(type, listener);
+    this.eventListeners.push({ element, type, listener });
+  }
+  removeAllListeners() {
+    this.eventListeners.forEach(({ element, type, listener }) => {
+      element.removeEventListener(type, listener);
+    });
+    this.eventListeners = [];
+  }
+  render(containerWidth, containerHeight, contentWidth, contentHeight) {
+    this.clearScrollBars();
+    if (contentWidth > containerWidth) {
+      this.createHorizontalScrollBar(containerWidth, contentWidth);
+    }
+    if (contentHeight > containerHeight) {
+      this.createVerticalScrollBar(containerHeight, contentHeight);
+    }
+  }
+  handleNormalizeTranslate(x, y) {
+    const clampedX = Math.max(0, Math.min(1, x));
+    const clampedY = Math.max(0, Math.min(1, y));
+    if (this.horizontalScrollBar) {
+      const thumb = this.horizontalScrollBar.querySelector(".horizontal-thumb");
+      if (thumb) {
+        const trackWidth = this.horizontalScrollBar.offsetWidth;
+        const thumbWidth = thumb.offsetWidth;
+        const maxPosition = trackWidth - thumbWidth - 2;
+        if (maxPosition > 0) {
+          const newPosition = 1 + clampedX * maxPosition;
+          thumb.style.left = `${newPosition}px`;
+        }
+      }
+    }
+    if (this.verticalScrollBar) {
+      const thumb = this.verticalScrollBar.querySelector(".vertical-thumb");
+      if (thumb) {
+        const trackHeight = this.verticalScrollBar.offsetHeight;
+        const thumbHeight = thumb.offsetHeight;
+        const maxPosition = trackHeight - thumbHeight - 2;
+        if (maxPosition > 0) {
+          const newPosition = 1 + clampedY * maxPosition;
+          thumb.style.top = `${newPosition}px`;
+        }
+      }
+    }
+  }
+  clearScrollBars() {
+    this.removeAllListeners();
+    if (this.horizontalScrollBar) {
+      this.horizontalScrollBar.remove();
+      this.horizontalScrollBar = null;
+    }
+    if (this.verticalScrollBar) {
+      this.verticalScrollBar.remove();
+      this.verticalScrollBar = null;
+    }
+  }
+  createHorizontalScrollBar(containerWidth, contentWidth) {
+    const scrollBar = document.createElement("div");
+    scrollBar.className = "scroll-bar horizontal";
+    const availableWidth = containerWidth;
+    const trackWidth = availableWidth;
+    const thumbWidth = Math.max(30, Math.min(trackWidth, trackWidth * availableWidth / contentWidth));
+    scrollBar.style.cssText = `
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: ${trackWidth}px;
+      height: 6px;
+      z-index: 1000;
+      cursor: pointer;
+      opacity: 1;
+      transition: opacity 0.2s ease;
+    `;
+    const thumb = document.createElement("div");
+    thumb.className = "scroll-bar-thumb horizontal-thumb";
+    thumb.style.cssText = `
+      position: absolute;
+      bottom: 0px;
+      left: 0px;
+      width: ${thumbWidth}px;
+      height: 6px;
+      background: #9E9E9E;
+      border-radius: 4px;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+      cursor: grab;
+    `;
+    this.addThumbDragListener(thumb, "horizontal", thumbWidth, trackWidth);
+    scrollBar.appendChild(thumb);
+    this.container.appendChild(scrollBar);
+    this.horizontalScrollBar = scrollBar;
+  }
+  createVerticalScrollBar(containerHeight, contentHeight) {
+    const scrollBar = document.createElement("div");
+    scrollBar.className = "scroll-bar vertical";
+    const availableHeight = containerHeight;
+    const trackHeight = availableHeight;
+    const thumbHeight = Math.max(30, Math.min(trackHeight, trackHeight * availableHeight / contentHeight));
+    scrollBar.style.cssText = `
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 6px;
+      height: ${trackHeight}px;
+      z-index: 1000;
+      cursor: pointer;
+      opacity: 1;
+      transition: opacity 0.2s ease;
+    `;
+    const thumb = document.createElement("div");
+    thumb.className = "scroll-bar-thumb vertical-thumb";
+    thumb.style.cssText = `
+      position: absolute;
+      top: 1px;
+      left: 0px;
+      width: 6px;
+      height: ${thumbHeight}px;
+      background: #9E9E9E;
+      border-radius: 4px;
+      box-shadow: 1px 0 2px rgba(0, 0, 0, 0.2);
+      cursor: grab;
+    `;
+    this.addThumbDragListener(thumb, "vertical", thumbHeight, trackHeight);
+    scrollBar.appendChild(thumb);
+    this.container.appendChild(scrollBar);
+    this.verticalScrollBar = scrollBar;
+  }
+  addThumbDragListener(thumb, orientation, thumbSize, trackSize) {
+    let startPos = 0;
+    let startThumbPos = 0;
+    const handleStart = (clientX, clientY) => {
+      if (orientation === "horizontal") {
+        this.isDraggingHorizontal = true;
+      } else {
+        this.isDraggingVertical = true;
+      }
+      startPos = orientation === "horizontal" ? clientX : clientY;
+      startThumbPos = orientation === "horizontal" ? parseFloat(thumb.style.left) || 0 : parseFloat(thumb.style.top) || 0;
+      thumb.style.cursor = "grabbing";
+    };
+    const handleMove = (clientX, clientY) => {
+      var _a, _b;
+      const isDragging = orientation === "horizontal" ? this.isDraggingHorizontal : this.isDraggingVertical;
+      if (!isDragging)
+        return;
+      const currentPos = orientation === "horizontal" ? clientX : clientY;
+      const delta = currentPos - startPos;
+      let newThumbPos = startThumbPos + delta;
+      newThumbPos = Math.max(1, Math.min(trackSize - thumbSize - 1, newThumbPos));
+      if (orientation === "horizontal") {
+        thumb.style.left = `${newThumbPos}px`;
+      } else {
+        thumb.style.top = `${newThumbPos}px`;
+      }
+      const maxScroll = trackSize - thumbSize - 2;
+      let scrollRatio = 0;
+      if (maxScroll > 0) {
+        scrollRatio = (newThumbPos - 1) / maxScroll;
+        scrollRatio = Math.max(0, Math.min(1, scrollRatio));
+      }
+      if (orientation === "horizontal") {
+        this.resizableContainer.handleNormalizeTranslate(scrollRatio, (_a = this.resizableContainer["translateY"]) != null ? _a : 0.5, {
+          triggerScrollBar: false,
+          triggerSync: true
+        });
+      } else {
+        this.resizableContainer.handleNormalizeTranslate((_b = this.resizableContainer["translateX"]) != null ? _b : 0.5, scrollRatio, {
+          triggerScrollBar: false,
+          triggerSync: true
+        });
+      }
+    };
+    const handleEnd = () => {
+      if (orientation === "horizontal") {
+        this.isDraggingHorizontal = false;
+      } else {
+        this.isDraggingVertical = false;
+      }
+      thumb.style.cursor = "grab";
+    };
+    const handleMouseDown = (e) => {
+      handleStart(e.clientX, e.clientY);
+      e.preventDefault();
+    };
+    const handleMouseMove = (e) => {
+      handleMove(e.clientX, e.clientY);
+    };
+    const handleMouseUp = () => {
+      handleEnd();
+    };
+    this.addTrackedListener(thumb, "mousedown", handleMouseDown);
+    this.addTrackedListener(document, "mousemove", handleMouseMove);
+    this.addTrackedListener(document, "mouseup", handleMouseUp);
+  }
+  destroy() {
+    this.clearScrollBars();
+  }
+}
+class ResizableContainer {
+  constructor(parent, context, enableResize) {
+    this.onScaleChanged = null;
+    this.whiteboardContainer = null;
+    this.slide = null;
+    this.scale = 1;
+    this.resizeObserver = null;
+    this.slideWidth = 1;
+    this.slideHeight = 1;
+    this.translateX = 0.5;
+    this.translateY = 0.5;
+    this.lastTriggerTime = 0;
+    this.updateSlideSize = () => {
+      if (this.slide) {
+        let updateContainer = false;
+        if (this.slideWidth !== this.slide.width || this.slideHeight !== this.slide.height) {
+          this.slideWidth = this.slide.width;
+          this.slideHeight = this.slide.height;
+          updateContainer = true;
+        }
+        if (updateContainer) {
+          this.updateResizableContainer();
+        }
+      }
+    };
+    this.enableResize = enableResize || true;
+    this.parent = parent;
+    this.context = context;
+    this.root = document.createElement("div");
+    this.root.style.width = "100%";
+    this.root.style.height = "100%";
+    this.root.style.overflow = "hidden";
+    this.parent.appendChild(this.root);
+    this.scrollContainer = document.createElement("div");
+    this.scrollContainer.setAttribute("data-resizable-scroll", "true");
+    this.scrollContainer.style.width = "100%";
+    this.scrollContainer.style.height = "100%";
+    this.scrollContainer.style.position = "relative";
+    this.scrollContainer.style.overflow = "hidden";
+    this.container = document.createElement("div");
+    this.container.style.position = "relative";
+    this.container.setAttribute("data-resizable-container", "true");
+    this.scrollContainer.appendChild(this.container);
+    this.root.appendChild(this.scrollContainer);
+    this.scrollBar = new ScrollBar(this.root, this);
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateResizableContainer();
+    });
+    this.resizeObserver.observe(this.scrollContainer);
+  }
+  getTranslate() {
+    return { x: this.translateX, y: this.translateY };
+  }
+  getScale() {
+    return this.scale;
+  }
+  renderScrollBar(width, overflowWidth, height, overflowHeight) {
+    if (this.scrollBar) {
+      this.scrollBar.render(width, height, overflowWidth, overflowHeight);
+    }
+  }
+  setSlideObject(slide) {
+    this.slide = slide;
+    this.slide.on("renderEnd", this.updateSlideSize);
+  }
+  updateResizableContainer() {
+    if (Date.now() - this.lastTriggerTime < 50) {
+      return;
+    }
+    this.lastTriggerTime = Date.now();
+    const parentBounds = this.scrollContainer.getBoundingClientRect();
+    this.container.style.width = `${parentBounds.width * this.scale}px`;
+    this.container.style.height = `${parentBounds.height * this.scale}px`;
+    if (this.whiteboardContainer) {
+      const whiteboardBounds = this.whiteboardContainer.getBoundingClientRect();
+      if (whiteboardBounds.width / whiteboardBounds.height > this.slideWidth / this.slideHeight) {
+        const renderWidth = whiteboardBounds.height * this.slideWidth / this.slideHeight;
+        const padding = (whiteboardBounds.width - renderWidth) / 2;
+        this.whiteboardContainer.style.clipPath = `inset(0px ${padding}px 0px ${padding}px)`;
+      } else if (whiteboardBounds.width / whiteboardBounds.height < this.slideWidth / this.slideHeight) {
+        const renderHeight = whiteboardBounds.width * this.slideHeight / this.slideWidth;
+        const padding = (whiteboardBounds.height - renderHeight) / 2;
+        this.whiteboardContainer.style.clipPath = `inset(${padding}px 0px ${padding}px 0px)`;
+      }
+    }
+    this.translateX = 0.5;
+    this.translateY = 0.5;
+    this.renderScrollBar(parentBounds.width, parentBounds.width * this.scale, parentBounds.height, parentBounds.height * this.scale);
+    this.handleNormalizeTranslate(this.translateX, this.translateY, {
+      triggerScrollBar: true,
+      triggerSync: true
+    });
+  }
+  handleNormalizeTranslate(x, y, options) {
+    if (Math.abs(x - this.translateX) < 1e-3 && Math.abs(y - this.translateY) < 1e-3 && !options.triggerSync) {
+      return;
+    }
+    const parentBounds = this.scrollContainer.getBoundingClientRect();
+    const selfBounds = this.container.getBoundingClientRect();
+    const translateX = -x * (selfBounds.width - parentBounds.width);
+    const translateY = -y * (selfBounds.height - parentBounds.height);
+    this.translateX = x;
+    this.translateY = y;
+    this.container.style.transform = `translate(${translateX}px, ${translateY}px)`;
+    if (options.triggerScrollBar) {
+      this.scrollBar.handleNormalizeTranslate(x, y);
+    }
+    if (options.triggerSync) {
+      this.context.storage.setState({ translateX: this.translateX, translateY: this.translateY });
+    }
+  }
+  scaleContainer(applyScale) {
+    if (Math.abs(this.scale - applyScale) < 1e-3) {
+      return;
+    }
+    if (applyScale > 1) {
+      this.scrollContainer.style.width = "calc(100% - 6px)";
+      this.scrollContainer.style.height = "calc(100% - 6px)";
+    } else {
+      this.scrollContainer.style.width = "100%";
+      this.scrollContainer.style.height = "100%";
+    }
+    applyScale = this.enableResize ? applyScale : 1;
+    if (this.onScaleChanged && this.enableResize) {
+      this.onScaleChanged(applyScale);
+    }
+    this.scale = applyScale;
+    setTimeout(() => {
+      this.updateResizableContainer();
+    });
+  }
+  addSlideContainer(slideContainer) {
+    this.container.appendChild(slideContainer);
+  }
+  addWhiteboardContainer(whiteboardContainer) {
+    this.container.appendChild(whiteboardContainer);
+    this.whiteboardContainer = whiteboardContainer;
+  }
+  getCurrentScale() {
+    return this.scale;
+  }
+  destroy() {
+    var _a, _b;
+    (_a = this.resizeObserver) == null ? void 0 : _a.disconnect();
+    (_b = this.scrollBar) == null ? void 0 : _b.destroy();
+  }
+}
 const ClickThroughAppliances = /* @__PURE__ */ new Set(["clicker"]);
 const noop = function noop22() {
 };
@@ -39246,6 +39605,7 @@ class SlideDocsViewer {
     baseScenePath,
     appId,
     urlInterrupter,
+    enableScale,
     onPagesReady,
     onNavigate
   }) {
@@ -39410,6 +39770,7 @@ class SlideDocsViewer {
     this.mountWhiteboard = mountWhiteboard;
     this.onNavigate = onNavigate || noop;
     this.baseScenePath = baseScenePath;
+    this.enableScale = enableScale != null ? enableScale : false;
     this.appId = appId;
     this.viewer = new DocsViewer({
       readonly: box.readonly,
@@ -39437,6 +39798,45 @@ class SlideDocsViewer {
       };
     });
     this.render();
+    this.sideEffect.add(() => {
+      const applyScale = (scale) => {
+        if (this.resizableContainer) {
+          this.resizableContainer.scaleContainer(scale);
+        }
+      };
+      console.log("[SlideDocsViewer] Initial storage state:", this.context.storage.state);
+      console.log("[SlideDocsViewer] Initial slideScale:", this.context.storage.state.slideScale);
+      if (this.context.storage.state.slideScale !== void 0) {
+        console.log("[SlideDocsViewer] Applying initial slideScale:", this.context.storage.state.slideScale);
+        applyScale(this.context.storage.state.slideScale);
+      } else {
+        console.log("[SlideDocsViewer] No initial slideScale found");
+      }
+      const handler = (diff) => {
+        var _a, _b;
+        if (diff.slideScale !== void 0) {
+          const newScale = diff.slideScale.newValue;
+          applyScale(newScale != null ? newScale : 1);
+        }
+        if (diff.translateX !== void 0 || diff.translateY !== void 0) {
+          const currentTranslate = this.resizableContainer.getTranslate();
+          const translateX = diff.translateX ? (_a = diff.translateX.newValue) != null ? _a : 0.5 : currentTranslate.x;
+          const translateY = diff.translateY ? (_b = diff.translateY.newValue) != null ? _b : 0.5 : currentTranslate.y;
+          if (this.resizableContainer) {
+            this.resizableContainer.handleNormalizeTranslate(translateX, translateY, {
+              triggerScrollBar: true,
+              triggerSync: false
+            });
+          }
+        }
+      };
+      console.log("[SlideDocsViewer] Adding storage state listener");
+      this.context.storage.onStateChanged.addListener(handler);
+      return () => {
+        console.log("[SlideDocsViewer] Removing storage state listener");
+        this.context.storage.onStateChanged.removeListener(handler);
+      };
+    });
   }
   setJustSildeReadonly(justSildeReadonly) {
     var _a;
@@ -39444,9 +39844,15 @@ class SlideDocsViewer {
     (_a = this.slideController) == null ? void 0 : _a.slide.setInteractive(!this.justSildeReadonly);
   }
   render() {
-    this.viewer.$content.appendChild(this.renderSlideContainer());
-    this.viewer.$content.appendChild(this.renderWhiteboardView());
-    this.viewer.$content.appendChild(this.renderOverlay());
+    if (!this.resizableContainer) {
+      this.resizableContainer = new ResizableContainer(this.viewer.$content, this.context, this.enableScale);
+    }
+    this.renderSlideContainer();
+    this.renderWhiteboardView();
+    this.renderOverlay();
+    this.resizableContainer.addSlideContainer(this.$slide);
+    this.resizableContainer.addWhiteboardContainer(this.$whiteboardView);
+    this.viewer.$content.appendChild(this.$overlay);
     this.sideEffect.addEventListener(window, "keydown", (ev) => {
       if (this.justSildeReadonly) {
         return;
@@ -39506,6 +39912,7 @@ class SlideDocsViewer {
       onNavigate: this.onNavigate,
       onError: this.onError
     });
+    this.resizableContainer.setSlideObject(this.slideController.slide);
     this.scaleDocsToFit();
     this.sideEffect.add(() => {
       this.whiteboardView.callbacks.on("onSizeUpdated", this.scaleDocsToFit);
@@ -39522,6 +39929,7 @@ class SlideDocsViewer {
       this.slideController = null;
     }
     this.viewer.unmount();
+    this.resizableContainer.destroy();
     return this;
   }
   setReadonly(readonly) {
@@ -39819,11 +40227,11 @@ class SlidePreviewer {
   }
 }
 const usePlugin = /* @__PURE__ */ Slide.Slide.usePlugin.bind(Slide.Slide);
-const version = "0.2.85";
+const version = "0.2.86";
 const SlideApp = {
   kind: "Slide",
   setup(context) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     console.log("[Slide] setup @ " + version);
     if (context.getIsWritable()) {
       context.storage.ensureState(EmptyAttributes);
@@ -39898,6 +40306,7 @@ const SlideApp = {
       baseScenePath,
       appId: context.appId,
       urlInterrupter: (_a = context.getAppOptions()) == null ? void 0 : _a.urlInterrupter,
+      enableScale: (_c = (_b = context.getAppOptions()) == null ? void 0 : _b.enableScale) != null ? _c : false,
       onPagesReady: ({ length }) => {
         const index = (docsViewer == null ? void 0 : docsViewer.viewer.pageIndex) || 0;
         context.dispatchAppEvent("pageStateChange", { index, length });
@@ -39906,7 +40315,7 @@ const SlideApp = {
         log("[Slide] user navigate to", page, origin ? `(${origin})` : "");
       }
     });
-    if ((_b = context.getAppOptions()) == null ? void 0 : _b.justSildeReadonly) {
+    if ((_d = context.getAppOptions()) == null ? void 0 : _d.justSildeReadonly) {
       docsViewer == null ? void 0 : docsViewer.setJustSildeReadonly(true);
     }
     const room = context.getRoom();
@@ -39942,6 +40351,53 @@ const SlideApp = {
     });
     docsViewer.mount();
     return {
+      onScaleChanged: (cb) => {
+        if (!docsViewer) {
+          return;
+        }
+        docsViewer.resizableContainer.onScaleChanged = cb;
+      },
+      scaleView: (to) => {
+        let applyScale = Number(to);
+        if (Number.isNaN(applyScale)) {
+          applyScale = 1;
+        }
+        if (applyScale < 1) {
+          applyScale = 1;
+        }
+        if (applyScale > 4) {
+          applyScale = 4;
+        }
+        context.storage.setState({ slideScale: applyScale });
+        context.storage.setState({ translateX: 0.5, translateY: 0.5 });
+        docsViewer == null ? void 0 : docsViewer.resizableContainer.scaleContainer(applyScale);
+      },
+      getViewScale: () => {
+        return docsViewer == null ? void 0 : docsViewer.resizableContainer.getScale();
+      },
+      translateView: (offsetX, offsetY) => {
+        var _a2, _b2;
+        if (docsViewer == null ? void 0 : docsViewer.resizableContainer) {
+          const container = docsViewer.resizableContainer;
+          const parentBounds = context.getBox().$content.getBoundingClientRect();
+          const containerBounds = container.container.getBoundingClientRect();
+          const maxScrollX = containerBounds.width - parentBounds.width;
+          const maxScrollY = containerBounds.height - parentBounds.height;
+          if (maxScrollX > 0 || maxScrollY > 0) {
+            const currentX = (_a2 = container["translateX"]) != null ? _a2 : 0.5;
+            const currentY = (_b2 = container["translateY"]) != null ? _b2 : 0.5;
+            const normalizedDeltaX = maxScrollX > 0 ? offsetX / maxScrollX : 0;
+            const normalizedDeltaY = maxScrollY > 0 ? offsetY / maxScrollY : 0;
+            const newX = Math.max(0, Math.min(1, currentX + normalizedDeltaX));
+            const newY = Math.max(0, Math.min(1, currentY + normalizedDeltaY));
+            context.storage.setState({ translateX: newX, translateY: newY });
+            container.handleNormalizeTranslate(newX, newY, {
+              triggerScrollBar: true,
+              triggerSync: false
+            });
+          }
+        }
+      },
       setSildeReadonly: (bol) => {
         docsViewer == null ? void 0 : docsViewer.setJustSildeReadonly(bol);
       },