@netless/app-slide 0.2.101 → 0.2.103

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.101",
+  "version": "0.2.103",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -16,7 +16,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

@@ -9,6 +9,7 @@ export class ResizableContainer {
   public container: HTMLDivElement;
   private scrollContainer: HTMLDivElement;
   public onScaleChanged: ((scale: number) => void) | null = null;
+  public onLayoutUpdated: (() => void) | null = null;
 
   private parent: HTMLElement;
   private whiteboardContainer: HTMLDivElement | null = null;
@@ -131,6 +132,12 @@ export class ResizableContainer {
       triggerScrollBar: true,
       triggerSync: true,
     });
+
+    // enableScale / scaleView 只改变内部 container 的像素尺寸，box 本身不变。
+    // Slide 内部 ResizeObserver 已关闭，box 上的 observer / boxSizeChange 都不会触发，
+    // 必须在这里主动通知 canvas 按新的 frame 尺寸重绘。
+    this.slide?.notifyFrameResize();
+    this.onLayoutUpdated?.();
   }
 
   // x, y 范围 0 ~ 1
@@ -199,6 +206,7 @@ export class ResizableContainer {
   }
 
   public destroy(_box?: ReadonlyTeleBox): void {
+    this.onLayoutUpdated = null;
     this.scrollBar?.destroy();
   }
 }

package/src/SlideController/index.ts

@@ -398,10 +398,14 @@ export class SlideControllerBase {
       let isNeedSyncState = false;
       log("[Slide] unfreeze", this.context.appId);
       if (this.invisibleBehavior === "frozen") {
-        this.slide.release();
+        this.slide.release(() => {
+          // release 会重建 player，内部 observer 已关闭，需要按当前 frame 尺寸重绘
+          this.slide.notifyFrameResize();
+        });
         isNeedSyncState = true;
       } else {
         this.slide.resume();
+        this.slide.notifyFrameResize();
       }
       if (isNeedSyncState) {
         const state = this.context.storage.state.state;

package/src/SlideDocsViewer/index.ts

@@ -223,6 +223,9 @@ export class SlideDocsViewer {
         this.enableScale,
         this.box,
       );
+      this.resizableContainer.onLayoutUpdated = () => {
+        this.scaleDocsToFit();
+      };
     }
 
     // 创建元素