@netless/app-slide 0.2.93 → 0.2.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.93",
+  "version": "0.2.95",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,7 @@
     "README-zh.md"
   ],
   "devDependencies": {
-    "@netless/slide": "1.4.49",
+    "@netless/slide": "1.4.50",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
     "jspdf": "2.5.1",

package/src/DocsViewer/ResizableContainer.ts

@@ -1,11 +1,10 @@
-import {Slide} from "@netless/slide";
-import {ScrollBar} from "./ScrollBar";
-import type {AppContext} from "@netless/window-manager";
-import type {Attributes, MagixEvents} from "../typings";
-import type {AppOptions} from "../index";
+import { Slide } from "@netless/slide";
+import { ScrollBar } from "./ScrollBar";
+import type { AppContext } from "@netless/window-manager";
+import type { Attributes, MagixEvents } from "../typings";
+import type { AppOptions } from "../index";
 
 export class ResizableContainer {
-
   private root: HTMLDivElement;
   public container: HTMLDivElement;
   private scrollContainer: HTMLDivElement;
@@ -35,19 +34,19 @@ export class ResizableContainer {
     this.enableResize = enableResize;
     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.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 = 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.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);
@@ -63,7 +62,7 @@ export class ResizableContainer {
     this.resizeObserver.observe(this.scrollContainer);
   }
 
-  public getTranslate(): {x: number, y: number} {
+  public getTranslate(): { x: number; y: number } {
     return { x: this.translateX, y: this.translateY };
   }
 
@@ -71,7 +70,12 @@ export class ResizableContainer {
     return this.scale;
   }
 
-  private renderScrollBar(width: number, overflowWidth: number, height: number, overflowHeight: number): void {
+  private renderScrollBar(
+    width: number,
+    overflowWidth: number,
+    height: number,
+    overflowHeight: number
+  ): void {
     if (this.scrollBar) {
       this.scrollBar.render(width, height, overflowWidth, overflowHeight);
     }
@@ -105,12 +109,15 @@ export class ResizableContainer {
       const whiteboardBounds = this.whiteboardContainer.getBoundingClientRect();
       if (whiteboardBounds.width / whiteboardBounds.height > this.slideWidth / this.slideHeight) {
         // 裁剪两边
-        const renderWidth = (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) {
+      } else if (
+        whiteboardBounds.width / whiteboardBounds.height <
+        this.slideWidth / this.slideHeight
+      ) {
         // 裁剪上下
-        const renderHeight = (whiteboardBounds.width * this.slideHeight / this.slideWidth);
+        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)`;
       }
@@ -119,7 +126,12 @@ export class ResizableContainer {
     this.translateX = 0.5;
     this.translateY = 0.5;
 
-    this.renderScrollBar(parentBounds.width, parentBounds.width * this.scale, parentBounds.height, parentBounds.height * this.scale);
+    this.renderScrollBar(
+      parentBounds.width,
+      parentBounds.width * this.scale,
+      parentBounds.height,
+      parentBounds.height * this.scale
+    );
     this.handleNormalizeTranslate(this.translateX, this.translateY, {
       triggerScrollBar: true,
       triggerSync: true,
@@ -127,11 +139,19 @@ export class ResizableContainer {
   }
 
   // x, y 范围 0 ~ 1
-  public handleNormalizeTranslate(x: number, y: number, options: {
-    triggerScrollBar: boolean,
-    triggerSync: boolean,
-  }) {
-    if (Math.abs(x - this.translateX) < 0.001 && Math.abs(y - this.translateY) < 0.001 && !options.triggerSync) {
+  public handleNormalizeTranslate(
+    x: number,
+    y: number,
+    options: {
+      triggerScrollBar: boolean;
+      triggerSync: boolean;
+    }
+  ) {
+    if (
+      Math.abs(x - this.translateX) < 0.001 &&
+      Math.abs(y - this.translateY) < 0.001 &&
+      !options.triggerSync
+    ) {
       return;
     }
     const parentBounds = this.scrollContainer.getBoundingClientRect();
@@ -154,11 +174,11 @@ export class ResizableContainer {
       return;
     }
     if (applyScale > 1.0) {
-      this.scrollContainer.style.width = 'calc(100% - 6px)';
-      this.scrollContainer.style.height = 'calc(100% - 6px)';
+      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%';
+      this.scrollContainer.style.width = "100%";
+      this.scrollContainer.style.height = "100%";
     }
     applyScale = this.enableResize ? applyScale : 1;
     if (this.onScaleChanged && this.enableResize) {

package/src/DocsViewer/ScrollBar.ts

@@ -1,4 +1,4 @@
-import {ResizableContainer} from "./ResizableContainer";
+import { ResizableContainer } from "./ResizableContainer";
 
 export class ScrollBar {
   private container: HTMLElement;
@@ -44,8 +44,6 @@ export class ScrollBar {
     this.eventListeners = [];
   }
 
-
-
   /**
    * 渲染滚动条
    * @param containerWidth 容器宽度
@@ -79,7 +77,7 @@ export class ScrollBar {
 
     // 更新水平滚动条 thumb 位置
     if (this.horizontalScrollBar) {
-      const thumb = this.horizontalScrollBar.querySelector('.horizontal-thumb') as HTMLElement;
+      const thumb = this.horizontalScrollBar.querySelector(".horizontal-thumb") as HTMLElement;
       if (thumb) {
         const trackWidth = this.horizontalScrollBar.offsetWidth;
         const thumbWidth = thumb.offsetWidth;
@@ -93,7 +91,7 @@ export class ScrollBar {
 
     // 更新垂直滚动条 thumb 位置
     if (this.verticalScrollBar) {
-      const thumb = this.verticalScrollBar.querySelector('.vertical-thumb') as HTMLElement;
+      const thumb = this.verticalScrollBar.querySelector(".vertical-thumb") as HTMLElement;
       if (thumb) {
         const trackHeight = this.verticalScrollBar.offsetHeight;
         const thumbHeight = thumb.offsetHeight;
@@ -106,7 +104,6 @@ export class ScrollBar {
     }
   }
 
-
   private clearScrollBars(): void {
     // 清理所有事件监听器
     this.removeAllListeners();
@@ -121,17 +118,17 @@ export class ScrollBar {
     }
   }
 
-  private createHorizontalScrollBar(
-    containerWidth: number,
-    contentWidth: number
-  ): void {
-    const scrollBar = document.createElement('div');
-    scrollBar.className = 'scroll-bar horizontal';
+  private createHorizontalScrollBar(containerWidth: number, contentWidth: number): void {
+    const scrollBar = document.createElement("div");
+    scrollBar.className = "scroll-bar horizontal";
 
     // 计算滚动条thumb宽度
     const availableWidth = containerWidth;
     const trackWidth = availableWidth;
-    const thumbWidth = Math.max(30, Math.min(trackWidth, (trackWidth * availableWidth) / contentWidth));
+    const thumbWidth = Math.max(
+      30,
+      Math.min(trackWidth, (trackWidth * availableWidth) / contentWidth)
+    );
 
     // 滚动条轨道
     scrollBar.style.cssText = `
@@ -149,8 +146,8 @@ export class ScrollBar {
     // 滚动条始终显示，无需 hover 效果
 
     // 滚动条thumb
-    const thumb = document.createElement('div');
-    thumb.className = 'scroll-bar-thumb horizontal-thumb';
+    const thumb = document.createElement("div");
+    thumb.className = "scroll-bar-thumb horizontal-thumb";
     thumb.style.cssText = `
       position: absolute;
       bottom: 0px;
@@ -164,24 +161,24 @@ export class ScrollBar {
     `;
 
     // 添加拖动事件
-    this.addThumbDragListener(thumb, 'horizontal', thumbWidth, trackWidth);
+    this.addThumbDragListener(thumb, "horizontal", thumbWidth, trackWidth);
 
     scrollBar.appendChild(thumb);
     this.container.appendChild(scrollBar);
     this.horizontalScrollBar = scrollBar;
   }
 
-  private createVerticalScrollBar(
-    containerHeight: number,
-    contentHeight: number
-  ): void {
-    const scrollBar = document.createElement('div');
-    scrollBar.className = 'scroll-bar vertical';
+  private createVerticalScrollBar(containerHeight: number, contentHeight: number): void {
+    const scrollBar = document.createElement("div");
+    scrollBar.className = "scroll-bar vertical";
 
     // 计算滚动条thumb高度
     const availableHeight = containerHeight;
     const trackHeight = availableHeight;
-    const thumbHeight = Math.max(30, Math.min(trackHeight, (trackHeight * availableHeight) / contentHeight));
+    const thumbHeight = Math.max(
+      30,
+      Math.min(trackHeight, (trackHeight * availableHeight) / contentHeight)
+    );
 
     // 滚动条轨道
     scrollBar.style.cssText = `
@@ -199,8 +196,8 @@ export class ScrollBar {
     // 滚动条始终显示，无需 hover 效果
 
     // 滚动条thumb
-    const thumb = document.createElement('div');
-    thumb.className = 'scroll-bar-thumb vertical-thumb';
+    const thumb = document.createElement("div");
+    thumb.className = "scroll-bar-thumb vertical-thumb";
     thumb.style.cssText = `
       position: absolute;
       top: 1px;
@@ -214,7 +211,7 @@ export class ScrollBar {
     `;
 
     // 添加拖动事件
-    this.addThumbDragListener(thumb, 'vertical', thumbHeight, trackHeight);
+    this.addThumbDragListener(thumb, "vertical", thumbHeight, trackHeight);
 
     scrollBar.appendChild(thumb);
     this.container.appendChild(scrollBar);
@@ -226,7 +223,7 @@ export class ScrollBar {
    */
   private addThumbDragListener(
     thumb: HTMLElement,
-    orientation: 'horizontal' | 'vertical',
+    orientation: "horizontal" | "vertical",
     thumbSize: number,
     trackSize: number
   ): void {
@@ -234,24 +231,26 @@ export class ScrollBar {
     let startThumbPos = 0;
 
     const handleStart = (clientX: number, clientY: number) => {
-      if (orientation === 'horizontal') {
+      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;
+      startPos = orientation === "horizontal" ? clientX : clientY;
+      startThumbPos =
+        orientation === "horizontal"
+          ? parseFloat(thumb.style.left) || 0
+          : parseFloat(thumb.style.top) || 0;
 
-      thumb.style.cursor = 'grabbing';
+      thumb.style.cursor = "grabbing";
     };
 
     const handleMove = (clientX: number, clientY: number) => {
-      const isDragging = orientation === 'horizontal' ? this.isDraggingHorizontal : this.isDraggingVertical;
+      const isDragging =
+        orientation === "horizontal" ? this.isDraggingHorizontal : this.isDraggingVertical;
       if (!isDragging) return;
 
-      const currentPos = orientation === 'horizontal' ? clientX : clientY;
+      const currentPos = orientation === "horizontal" ? clientX : clientY;
       const delta = currentPos - startPos;
 
       // 计算新的thumb位置
@@ -259,7 +258,7 @@ export class ScrollBar {
       newThumbPos = Math.max(1, Math.min(trackSize - thumbSize - 1, newThumbPos));
 
       // 更新thumb位置
-      if (orientation === 'horizontal') {
+      if (orientation === "horizontal") {
         thumb.style.left = `${newThumbPos}px`;
       } else {
         thumb.style.top = `${newThumbPos}px`;
@@ -274,26 +273,34 @@ export class ScrollBar {
       }
 
       // 调用ResizableContainer的handleNormalizeTranslate方法，传入 false 避免循环调用
-      if (orientation === 'horizontal') {
-        this.resizableContainer.handleNormalizeTranslate(scrollRatio, this.resizableContainer['translateY'] ?? 0.5, {
-          triggerScrollBar: false,
-          triggerSync: true,
-        });
+      if (orientation === "horizontal") {
+        this.resizableContainer.handleNormalizeTranslate(
+          scrollRatio,
+          this.resizableContainer["translateY"] ?? 0.5,
+          {
+            triggerScrollBar: false,
+            triggerSync: true,
+          }
+        );
       } else {
-        this.resizableContainer.handleNormalizeTranslate(this.resizableContainer['translateX'] ?? 0.5, scrollRatio, {
-          triggerScrollBar: false,
-          triggerSync: true,
-        });
+        this.resizableContainer.handleNormalizeTranslate(
+          this.resizableContainer["translateX"] ?? 0.5,
+          scrollRatio,
+          {
+            triggerScrollBar: false,
+            triggerSync: true,
+          }
+        );
       }
     };
 
     const handleEnd = () => {
-      if (orientation === 'horizontal') {
+      if (orientation === "horizontal") {
         this.isDraggingHorizontal = false;
       } else {
         this.isDraggingVertical = false;
       }
-      thumb.style.cursor = 'grab';
+      thumb.style.cursor = "grab";
     };
 
     // 鼠标事件
@@ -312,9 +319,9 @@ export class ScrollBar {
     };
 
     // 添加事件监听器
-    this.addTrackedListener(thumb, 'mousedown', handleMouseDown);
-    this.addTrackedListener(document, 'mousemove', handleMouseMove);
-    this.addTrackedListener(document, 'mouseup', handleMouseUp);
+    this.addTrackedListener(thumb, "mousedown", handleMouseDown);
+    this.addTrackedListener(document, "mousemove", handleMouseMove);
+    this.addTrackedListener(document, "mouseup", handleMouseUp);
   }
 
   /**
@@ -324,4 +331,3 @@ export class ScrollBar {
     this.clearScrollBars();
   }
 }
-

package/src/SlideController/index.ts

@@ -58,7 +58,6 @@ type MagixEventListener = Parameters<
   AppContext<Attributes, MagixEvents>["addMagixEventListener"]
 >[1];
 
-
 export class SlideControllerBase {
   public readonly context: SlideControllerOptions["context"];
   public slide!: Slide;
@@ -87,7 +86,18 @@ export class SlideControllerBase {
   public previewList: string[] = [];
 
   public constructor(props: SlideControllerOptions) {
-    const { context, onRenderStart, onPageChanged, onTransitionStart, onTransitionEnd, onNavigate, onError, onRenderError, showRenderError, invisibleBehavior } = props;
+    const {
+      context,
+      onRenderStart,
+      onPageChanged,
+      onTransitionStart,
+      onTransitionEnd,
+      onNavigate,
+      onError,
+      onRenderError,
+      showRenderError,
+      invisibleBehavior,
+    } = props;
     this.invisibleBehavior = invisibleBehavior ?? "frozen";
     this.onRenderStart = onRenderStart;
     this.onPageChanged = onPageChanged;
@@ -209,7 +219,20 @@ export class SlideControllerBase {
 
     this.sideEffect.add(() => {
       document.addEventListener("visibilitychange", this.onVisibilityChange);
-      return () => document.removeEventListener("visibilitychange", this.onVisibilityChange);
+      this.bindAppStateChangeEvent();
+      return () => {
+        document.removeEventListener("visibilitychange", this.onVisibilityChange);
+        try {
+          this.context.emitter.off("boxStatusChange", this.onAppStatusChangeHandler);
+          this.context
+            .getWindowManager()
+            .emitter.off("boxStateChange", this.onAppStateChangeHandler);
+        } catch (error) {
+          log(
+            "[Slide] unbind app state change event failed, because should update window manager to latest version"
+          );
+        }
+      };
     });
   }
 
@@ -387,14 +410,74 @@ export class SlideControllerBase {
     }
   };
 
+  protected bindAppStateChangeEvent = () => {
+    try {
+      const boxStatus = this.context.getBoxStatus();
+      if (boxStatus) {
+        const appProxy = this.context.getAppProxy();
+        if (appProxy) {
+          this.context.emitter.on("boxStatusChange", this.onAppStatusChangeHandler);
+        }
+      } else {
+        const windowManager = this.context.getWindowManager();
+        if (windowManager) {
+          windowManager.emitter.on("boxStateChange", this.onAppStateChangeHandler);
+        }
+      }
+    } catch (error) {
+      log(
+        "[Slide] bind app state change event failed, because should update window manager to latest version"
+      );
+    }
+  };
+
+  protected onAppStateChangeHandler = (state: "normal" | "minimized" | "maximized") => {
+    if (state === "minimized") {
+      log("[Slide] freeze because app state is minimized");
+      this.freeze();
+    }
+  };
+
+  protected onAppStatusChangeHandler = (payload: {
+    appId: string;
+    status: "normal" | "minimized" | "maximized";
+  }) => {
+    const { appId, status } = payload;
+    if (appId === this.context.appId && status === "minimized") {
+      log("[Slide] freeze because app status is minimized");
+      this.freeze();
+    }
+  };
+
+  protected getAppStatus = (): "normal" | "minimized" | "maximized" | undefined => {
+    try {
+      const boxStatus = this.context.getBoxStatus();
+      // 如果boxStatus存在, 则使用boxStatus(单独窗口状态)
+      if (boxStatus) {
+        return boxStatus;
+      }
+      // 如果boxStatus不存在，则检查boxState是否存在(所有窗口统一状态)
+      const windowManager = this.context.getWindowManager();
+      const boxstate = windowManager.boxState;
+      return boxstate;
+    } catch (error) {
+      return undefined;
+    }
+  };
+
   protected onVisibilityChange = async () => {
+    const appStatus = this.getAppStatus();
+    if (appStatus === "minimized") {
+      log("[Slide] do nothing because app state is minimized");
+      return;
+    }
     if (!(this.visible = document.visibilityState === "visible")) {
       this.savedIsFrozen = this.isFrozen;
       log("[Slide] freeze because tab becomes invisible");
       this.freeze();
     } else {
-      log("[Slide] unfreeze because tab becomes visible", { savedIsFrozen: this.savedIsFrozen });
       if (!this.savedIsFrozen) {
+        log("[Slide] unfreeze because tab becomes visible", { savedIsFrozen: this.savedIsFrozen });
         this.unfreeze();
       }
     }
@@ -403,7 +486,7 @@ export class SlideControllerBase {
 
 export class SlideController extends SlideControllerBase {
   public constructor(props: SlideControllerOptions) {
-    super(props)
+    super(props);
     this.slide = this.createSlide(props.anchor, {
       whiteTracker: getRoomTracker(props.context.getDisplayer()),
     });

package/src/SlideDocsViewer/index.ts

@@ -1,5 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { ReadonlyTeleBox, AnimationMode, View, AppContext, StorageStateChangedListener } from "@netless/window-manager";
+import type {
+  ReadonlyTeleBox,
+  AnimationMode,
+  View,
+  AppContext,
+  StorageStateChangedListener,
+} from "@netless/window-manager";
 import type { SlideController, SlideControllerOptions } from "../SlideController";
 
 import { SideEffectManager } from "side-effect-manager";
@@ -116,18 +122,21 @@ export class SlideDocsViewer {
       };
 
       // 记录初始状态
-      console.log('[SlideDocsViewer] Initial storage state:', this.context.storage.state);
-      console.log('[SlideDocsViewer] Initial slideScale:', this.context.storage.state.slideScale);
+      console.log("[SlideDocsViewer] Initial storage state:", this.context.storage.state);
+      console.log("[SlideDocsViewer] Initial slideScale:", this.context.storage.state.slideScale);
 
       // 应用初始的 slideScale 值（现在 ResizableContainer 应该已经创建）
       if (this.context.storage.state.slideScale !== undefined) {
-        console.log('[SlideDocsViewer] Applying initial slideScale:', this.context.storage.state.slideScale);
+        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');
+        console.log("[SlideDocsViewer] No initial slideScale found");
       }
 
-      const handler: StorageStateChangedListener<Attributes> = (diff) => {
+      const handler: StorageStateChangedListener<Attributes> = diff => {
         if (diff.slideScale !== undefined) {
           // slideScale 是一个包含 newValue 和 oldValue 的对象
           const newScale = diff.slideScale.newValue;
@@ -135,8 +144,8 @@ export class SlideDocsViewer {
         }
         if (diff.translateX !== undefined || diff.translateY !== undefined) {
           const currentTranslate = this.resizableContainer.getTranslate();
-          const translateX = diff.translateX ? (diff.translateX.newValue ?? 0.5) : currentTranslate.x;
-          const translateY = diff.translateY ? (diff.translateY.newValue ?? 0.5) : currentTranslate.y;
+          const translateX = diff.translateX ? diff.translateX.newValue ?? 0.5 : currentTranslate.x;
+          const translateY = diff.translateY ? diff.translateY.newValue ?? 0.5 : currentTranslate.y;
           if (this.resizableContainer) {
             this.resizableContainer.handleNormalizeTranslate(translateX, translateY, {
               triggerScrollBar: true,
@@ -146,11 +155,11 @@ export class SlideDocsViewer {
         }
       };
 
-      console.log('[SlideDocsViewer] Adding storage state listener');
+      console.log("[SlideDocsViewer] Adding storage state listener");
       this.context.storage.onStateChanged.addListener(handler);
 
       return () => {
-        console.log('[SlideDocsViewer] Removing storage state listener');
+        console.log("[SlideDocsViewer] Removing storage state listener");
         this.context.storage.onStateChanged.removeListener(handler);
       };
     });
@@ -169,7 +178,11 @@ export class SlideDocsViewer {
   public render() {
     // 创建 ResizableContainer 来管理 slide 和 whiteboardView
     if (!this.resizableContainer) {
-      this.resizableContainer = new ResizableContainer(this.viewer.$content, this.context, this.enableScale);
+      this.resizableContainer = new ResizableContainer(
+        this.viewer.$content,
+        this.context,
+        this.enableScale
+      );
     }
 
     // 创建元素

package/src/index.ts

@@ -12,7 +12,7 @@ import {
   EmptyAttributes,
   syncSceneWithSlide,
   SlideController,
-  SlideControllerBase
+  SlideControllerBase,
 } from "./SlideController";
 import { SlideDocsViewer } from "./SlideDocsViewer";
 import { apps, FreezerLength, addHooks, useFreezer } from "./utils/freezer";
@@ -24,13 +24,20 @@ export { SlidePreviewer, default as previewSlide } from "./SlidePreviewer";
 export { DocsViewer } from "./DocsViewer";
 
 export type { Attributes, AddHooks, FreezableSlide };
-export { Slide, SlideController, SlideDocsViewer, syncSceneWithSlide, SideEffectManager, SlideControllerBase };
+export {
+  Slide,
+  SlideController,
+  SlideDocsViewer,
+  syncSceneWithSlide,
+  SideEffectManager,
+  SlideControllerBase,
+};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const usePlugin: (plugin: any) => any = /* @__PURE__ */ Slide.usePlugin.bind(Slide);
 
 export const version = __APP_VERSION__;
 
-export { DefaultUrl, apps, FreezerLength, addHooks, useFreezer, log, logger  };
+export { DefaultUrl, apps, FreezerLength, addHooks, useFreezer, log, logger };
 
 export { setFreezerLength, getFreezerLength, onCreated, onDestroyed } from "./utils/freezer";
 
@@ -286,8 +293,8 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
 
           if (maxScrollX > 0 || maxScrollY > 0) {
             // 获取当前标准化位置 (0 ~ 1)
-            const currentX = container['translateX'] ?? 0.5;
-            const currentY = container['translateY'] ?? 0.5;
+            const currentX = container["translateX"] ?? 0.5;
+            const currentY = container["translateY"] ?? 0.5;
 
             // 将像素偏移转换为标准化偏移
             const normalizedDeltaX = maxScrollX > 0 ? offsetX / maxScrollX : 0;