@netless/app-slide 0.2.103 → 0.2.105-beta.0

package/dist/main.es.js

@@ -39791,7 +39791,8 @@ const EmptyAttributes = {
   customLinks: [],
   slideScale: 1,
   translateX: 0.5,
-  translateY: 0.5
+  translateY: 0.5,
+  originSize: null
 };
 const noop$1 = function noop2() {
 };
@@ -41417,6 +41418,7 @@ class ResizableContainer {
   constructor(parent, context, enableResize, _box) {
     this.onScaleChanged = null;
     this.onLayoutUpdated = null;
+    this.scaleChangedListeners = /* @__PURE__ */ new Set();
     this.whiteboardContainer = null;
     this.slide = null;
     this.scale = 1;
@@ -41467,6 +41469,12 @@ class ResizableContainer {
   getScale() {
     return this.scale;
   }
+  addScaleChangedListener(listener) {
+    this.scaleChangedListeners.add(listener);
+    return () => {
+      this.scaleChangedListeners.delete(listener);
+    };
+  }
   renderScrollBar(width, overflowWidth, height, overflowHeight) {
     if (this.scrollBar) {
       this.scrollBar.render(width, height, overflowWidth, overflowHeight);
@@ -41478,6 +41486,7 @@ class ResizableContainer {
   }
   updateResizableContainer() {
     var _a, _b;
+    this.cancelScheduledLayoutUpdate();
     const parentBounds = this.scrollContainer.getBoundingClientRect();
     this.container.style.width = `${parentBounds.width * this.scale}px`;
     this.container.style.height = `${parentBounds.height * this.scale}px`;
@@ -41528,6 +41537,7 @@ class ResizableContainer {
     }
   }
   scaleContainer(applyScale) {
+    var _a;
     if (Math.abs(this.scale - applyScale) < 1e-3 || !this.enableResize) {
       return;
     }
@@ -41539,13 +41549,25 @@ class ResizableContainer {
       this.scrollContainer.style.height = "100%";
     }
     applyScale = this.enableResize ? applyScale : 1;
-    if (this.onScaleChanged && this.enableResize) {
-      this.onScaleChanged(applyScale);
-    }
     this.scale = applyScale;
-    setTimeout(() => {
-      this.updateResizableContainer();
-    });
+    if (this.enableResize) {
+      (_a = this.onScaleChanged) == null ? void 0 : _a.call(this, this.scale);
+      for (const listener of this.scaleChangedListeners) {
+        listener(this.scale);
+      }
+    }
+    if (this.layoutFrameId === void 0) {
+      this.layoutFrameId = requestAnimationFrame(() => {
+        this.layoutFrameId = void 0;
+        this.updateResizableContainer();
+      });
+    }
+  }
+  cancelScheduledLayoutUpdate() {
+    if (this.layoutFrameId !== void 0) {
+      cancelAnimationFrame(this.layoutFrameId);
+      this.layoutFrameId = void 0;
+    }
   }
   addSlideContainer(slideContainer) {
     this.container.appendChild(slideContainer);
@@ -41559,7 +41581,9 @@ class ResizableContainer {
   }
   destroy(_box) {
     var _a;
+    this.cancelScheduledLayoutUpdate();
     this.onLayoutUpdated = null;
+    this.scaleChangedListeners.clear();
     (_a = this.scrollBar) == null ? void 0 : _a.destroy();
   }
 }
@@ -42187,24 +42211,29 @@ class SlideDocsViewer {
     };
     this.scaleDocsToFit = () => {
       if (this.slideController) {
-        const { width, height } = this.slideController.slide;
-        if (width && height) {
-          this.whiteboardView.moveCameraToContain({
-            originX: -width / 2,
-            originY: -height / 2,
-            width,
-            height,
-            animationMode: "immediately"
-          });
-          this.whiteboardView.setCameraBound({
-            damping: 1,
-            maxContentMode: () => this.whiteboardView.camera.scale,
-            minContentMode: () => this.whiteboardView.camera.scale,
-            centerX: 0,
-            centerY: 0,
-            width,
-            height
-          });
+        const { width: slideWidth, height: slideHeight } = this.slideController.slide;
+        if (slideWidth && slideHeight) {
+          const originSize = this.context.storage.state.originSize;
+          const { width, height } = originSize && originSize.width > 0 && originSize.height > 0 ? originSize : { width: slideWidth, height: slideHeight };
+          if (width > 0 && height > 0) {
+            this.whiteboardView.moveCameraToContain({
+              originX: -width / 2,
+              originY: -height / 2,
+              width,
+              height,
+              animationMode: "immediately"
+            });
+            const scale = this.whiteboardView.camera.scale;
+            this.whiteboardView.setCameraBound({
+              damping: 1,
+              maxContentMode: () => scale,
+              minContentMode: () => scale,
+              centerX: 0,
+              centerY: 0,
+              width: slideWidth,
+              height: slideHeight
+            });
+          }
           if (!this.isViewMounted) {
             this.isViewMounted = true;
             console.log("[Slide] mount whiteboard view");
@@ -42824,7 +42853,7 @@ class SlidePreviewer {
   }
 }
 const usePlugin = /* @__PURE__ */ Slide.Slide.usePlugin.bind(Slide.Slide);
-const version = "0.2.103";
+const version = "0.2.105-beta.0";
 const SlideApp = {
   kind: "Slide",
   setup(context) {
@@ -42936,7 +42965,15 @@ const SlideApp = {
         return () => room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
       });
     }
-    context.emitter.on("destroy", () => {
+    let disposed = false;
+    let offDestroy;
+    const teardown = () => {
+      if (disposed)
+        return;
+      disposed = true;
+      const removeDestroy = offDestroy;
+      offDestroy = void 0;
+      removeDestroy == null ? void 0 : removeDestroy();
       log("[Slide] destroy", context.appId);
       if (useFreezer)
         apps.delete(context.appId);
@@ -42945,29 +42982,31 @@ const SlideApp = {
         docsViewer.destroy();
         docsViewer = null;
       }
-    });
+    };
+    offDestroy = context.emitter.on("destroy", teardown);
     docsViewer.mount();
+    SlideApp.__teardownByContext || (SlideApp.__teardownByContext = /* @__PURE__ */ new WeakMap());
+    SlideApp.__teardownByContext.set(context, teardown);
     return {
       onScaleChanged: (cb) => {
         if (!docsViewer) {
-          return;
+          return () => void 0;
         }
-        docsViewer.resizableContainer.onScaleChanged = cb;
+        return docsViewer.resizableContainer.addScaleChangedListener(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);
+        const applyScale = Number(to);
+        if (!Number.isFinite(applyScale) || applyScale <= 0)
+          return;
+        const container = docsViewer == null ? void 0 : docsViewer.resizableContainer;
+        if (!container || Math.abs(container.getScale() - applyScale) < 1e-3)
+          return;
+        context.storage.setState({
+          slideScale: applyScale,
+          translateX: 0.5,
+          translateY: 0.5
+        });
+        container.scaleContainer(applyScale);
       },
       getViewScale: () => {
         return docsViewer == null ? void 0 : docsViewer.resizableContainer.getScale();
@@ -43067,6 +43106,11 @@ const SlideApp = {
         return false;
       }
     };
+  },
+  teardown(context) {
+    var _a, _b, _c;
+    (_b = (_a = SlideApp.__teardownByContext) == null ? void 0 : _a.get(context)) == null ? void 0 : _b();
+    (_c = SlideApp.__teardownByContext) == null ? void 0 : _c.delete(context);
   }
 };
 var Slide$1 = Slide.Slide;