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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.103",
+  "version": "0.2.105-beta.0",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -8,7 +8,8 @@
     "types": "node scripts/build-types.mjs",
     "build": "vite build && npm run types",
     "build:dev": "vite build --mode development && npm run types",
-    "cleanup": "rimraf ./dist"
+    "cleanup": "rimraf ./dist",
+    "test": "rimraf test/.cache && esbuild test/ResizableContainer.test.ts --bundle --platform=node --format=cjs --outfile=test/.cache/ResizableContainer.test.cjs && node test/.cache/ResizableContainer.test.cjs"
   },
   "files": [
     "src",

package/src/DocsViewer/ResizableContainer.ts

@@ -1,4 +1,4 @@
-import { Slide } from "@netless/slide";
+import type { Slide } from "@netless/slide";
 import { ScrollBar } from "./ScrollBar";
 import type { AppContext, ReadonlyTeleBox } from "@netless/window-manager";
 import type { Attributes, MagixEvents } from "../typings";
@@ -8,8 +8,10 @@ export class ResizableContainer {
   private root: HTMLDivElement;
   public container: HTMLDivElement;
   private scrollContainer: HTMLDivElement;
+  /** @deprecated Use addScaleChangedListener() for multiple observers. */
   public onScaleChanged: ((scale: number) => void) | null = null;
   public onLayoutUpdated: (() => void) | null = null;
+  private scaleChangedListeners = new Set<(scale: number) => void>();
 
   private parent: HTMLElement;
   private whiteboardContainer: HTMLDivElement | null = null;
@@ -18,6 +20,7 @@ export class ResizableContainer {
   private slideWidth = 1;
   private slideHeight = 1;
   private scrollBar: ScrollBar | null = null;
+  private layoutFrameId: number | undefined;
   private context: AppContext<Attributes, MagixEvents, AppOptions>;
 
   // 每次 scale 后, 重置为居中
@@ -30,7 +33,7 @@ export class ResizableContainer {
     parent: HTMLElement,
     context: AppContext<Attributes, MagixEvents, AppOptions>,
     enableResize: boolean,
-    _box?: ReadonlyTeleBox,
+    _box?: ReadonlyTeleBox
   ) {
     this.enableResize = enableResize;
     this.parent = parent;
@@ -56,7 +59,7 @@ export class ResizableContainer {
       // 初始化滚动条
       this.scrollBar = new ScrollBar(this.root, this);
     }
-  };
+  }
 
   public getTranslate(): { x: number; y: number } {
     return { x: this.translateX, y: this.translateY };
@@ -66,6 +69,13 @@ export class ResizableContainer {
     return this.scale;
   }
 
+  public addScaleChangedListener(listener: (scale: number) => void): () => void {
+    this.scaleChangedListeners.add(listener);
+    return () => {
+      this.scaleChangedListeners.delete(listener);
+    };
+  }
+
   private renderScrollBar(
     width: number,
     overflowWidth: number,
@@ -97,6 +107,7 @@ export class ResizableContainer {
   };
 
   public updateResizableContainer() {
+    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`;
@@ -183,13 +194,26 @@ export 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) {
+      this.onScaleChanged?.(this.scale);
+      for (const listener of this.scaleChangedListeners) {
+        listener(this.scale);
+      }
+    }
+    if (this.layoutFrameId === undefined) {
+      this.layoutFrameId = requestAnimationFrame(() => {
+        this.layoutFrameId = undefined;
+        this.updateResizableContainer();
+      });
+    }
+  }
+
+  private cancelScheduledLayoutUpdate(): void {
+    if (this.layoutFrameId !== undefined) {
+      cancelAnimationFrame(this.layoutFrameId);
+      this.layoutFrameId = undefined;
+    }
   }
 
   public addSlideContainer(slideContainer: HTMLDivElement) {
@@ -206,7 +230,9 @@ export class ResizableContainer {
   }
 
   public destroy(_box?: ReadonlyTeleBox): void {
+    this.cancelScheduledLayoutUpdate();
     this.onLayoutUpdated = null;
+    this.scaleChangedListeners.clear();
     this.scrollBar?.destroy();
   }
 }

package/src/SlideController/index.ts

@@ -33,6 +33,7 @@ export const EmptyAttributes: Attributes = {
   slideScale: 1,
   translateX: 0.5,
   translateY: 0.5,
+  originSize: null,
 };
 
 export interface SlideControllerOptions {

package/src/SlideDocsViewer/index.ts

@@ -486,24 +486,32 @@ export class SlideDocsViewer {
 
   protected 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" as 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" as 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");

package/src/index.ts

@@ -107,13 +107,15 @@ export interface AppResult {
   jumpToPage: (page: number) => boolean;
   setSildeReadonly: (bol: boolean) => void;
   setSyncEventQueuePolicy: (policy: NonNullable<ISlideConfig["syncEventQueuePolicy"]>) => void;
-  onScaleChanged: (cb: (scale: number) => void) => void;
+  onScaleChanged: (cb: (scale: number) => void) => () => void;
   scaleView: (to: number) => void;
   getViewScale: () => number | undefined;
   translateView: (offsetX: number, offsetY: number) => void;
 }
 
-const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
+const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> & {
+  teardown(context: import("@netless/window-manager").AppContext): void;
+} = {
   kind: "Slide",
   setup(context) {
     console.log("[Slide] setup @ " + version);
@@ -247,7 +249,14 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
       });
     }
 
-    context.emitter.on("destroy", () => {
+    let disposed = false;
+    let offDestroy: (() => void) | undefined;
+    const teardown = () => {
+      if (disposed) return;
+      disposed = true;
+      const removeDestroy = offDestroy;
+      offDestroy = undefined;
+      removeDestroy?.();
       log("[Slide] destroy", context.appId);
       if (useFreezer) apps.delete(context.appId);
       sideEffect.flushAll();
@@ -255,32 +264,33 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
         docsViewer.destroy();
         docsViewer = null;
       }
-    });
+    };
+    offDestroy = context.emitter.on("destroy", teardown);
 
     docsViewer.mount();
 
+    (SlideApp as any).__teardownByContext ||= new WeakMap<object, () => void>();
+    (SlideApp as any).__teardownByContext.set(context, teardown);
+
     return {
       onScaleChanged: (cb: (scale: number) => void) => {
         if (!docsViewer) {
-          return;
+          return () => void 0;
         }
-        docsViewer.resizableContainer.onScaleChanged = cb;
+        return docsViewer.resizableContainer.addScaleChangedListener(cb);
       },
       scaleView: (to: number) => {
-        let applyScale = Number(to);
-        if (Number.isNaN(applyScale)) {
-          applyScale = 1;
-        }
-        if (applyScale < 1.0) {
-          applyScale = 1.0;
-        }
-        if (applyScale > 4.0) {
-          applyScale = 4.0;
-        }
-
-        context.storage.setState({ slideScale: applyScale });
-        context.storage.setState({ translateX: 0.5, translateY: 0.5 });
-        docsViewer?.resizableContainer.scaleContainer(applyScale);
+        const applyScale = Number(to);
+        if (!Number.isFinite(applyScale) || applyScale <= 0) return;
+        const container = docsViewer?.resizableContainer;
+        if (!container || Math.abs(container.getScale() - applyScale) < 0.001) return;
+
+        context.storage.setState({
+          slideScale: applyScale,
+          translateX: 0.5,
+          translateY: 0.5,
+        });
+        container.scaleContainer(applyScale);
       },
       getViewScale: () => {
         return docsViewer?.resizableContainer.getScale();
@@ -387,6 +397,10 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
       },
     };
   },
+  teardown(context) {
+    (SlideApp as any).__teardownByContext?.get(context)?.();
+    (SlideApp as any).__teardownByContext?.delete(context);
+  },
 };
 
 export default SlideApp;

package/src/typings.ts

@@ -15,6 +15,10 @@ export interface Attributes {
   slideScale: number;
   translateX: number;
   translateY: number;
+  originSize: {
+    width: number;
+    height: number;
+  } | null;
 }
 
 export type MagixPayload = {