@netless/app-slide 0.2.102 → 0.2.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.102",
+  "version": "0.2.104",
   "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",
@@ -16,7 +17,7 @@
     "README-zh.md"
   ],
   "devDependencies": {
-    "@netless/slide": "1.4.56",
+    "@netless/slide": "1.4.57",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
     "jspdf": "2.5.1",

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,7 +107,7 @@ 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;
@@ -262,25 +262,22 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
     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();

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 = {