@netless/app-slide 0.2.99 → 0.2.100-alpha.0

package/package.json

@@ -1,19 +1,27 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.99",
+  "version": "0.2.100-alpha.0",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "node __tests__/recovery.test.js",
+    "types": "node scripts/build-types.mjs",
+    "build": "vite build && npm run types",
+    "build:dev": "vite build --mode development && npm run types",
+    "cleanup": "rimraf ./dist"
+  },
   "files": [
     "src",
     "dist",
     "README-zh.md"
   ],
   "devDependencies": {
-    "@netless/slide": "1.4.54",
+    "@netless/slide": "1.4.55-alpha.3",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
     "jspdf": "2.5.1",
+    "@juggle/resize-observer": "^3.3.1",
     "side-effect-manager": "^1.2.1",
     "vanilla-lazyload": "^17.8.3"
   },
@@ -24,11 +32,5 @@
     "jspdf": {
       "optional": true
     }
-  },
-  "scripts": {
-    "types": "node scripts/build-types.mjs",
-    "build": "vite build && npm run types",
-    "build:dev": "vite build --mode development && npm run types",
-    "cleanup": "rimraf ./dist"
   }
-}
+}

package/src/DocsViewer/ResizableContainer.ts

@@ -1,6 +1,6 @@
 import { Slide } from "@netless/slide";
 import { ScrollBar } from "./ScrollBar";
-import type { AppContext } from "@netless/window-manager";
+import type { AppContext, ReadonlyTeleBox } from "@netless/window-manager";
 import type { Attributes, MagixEvents } from "../typings";
 import type { AppOptions } from "../index";
 
@@ -14,7 +14,6 @@ export class ResizableContainer {
   private whiteboardContainer: HTMLDivElement | null = null;
   private slide: Slide | null = null;
   private scale = 1;
-  private resizeObserver: ResizeObserver | null = null;
   private slideWidth = 1;
   private slideHeight = 1;
   private scrollBar: ScrollBar | null = null;
@@ -29,7 +28,8 @@ export class ResizableContainer {
   constructor(
     parent: HTMLElement,
     context: AppContext<Attributes, MagixEvents, AppOptions>,
-    enableResize: boolean
+    enableResize: boolean,
+    _box?: ReadonlyTeleBox,
   ) {
     this.enableResize = enableResize;
     this.parent = parent;
@@ -55,13 +55,7 @@ export class ResizableContainer {
       // 初始化滚动条
       this.scrollBar = new ScrollBar(this.root, this);
     }
-
-    this.resizeObserver = new ResizeObserver(() => {
-      this.updateResizableContainer();
-    });
-    this.resizeObserver.observe(this.scrollContainer);
-
-  }
+  };
 
   public getTranslate(): { x: number; y: number } {
     return { x: this.translateX, y: this.translateY };
@@ -204,8 +198,7 @@ export class ResizableContainer {
     return this.scale;
   }
 
-  public destroy(): void {
-    this.resizeObserver?.disconnect();
+  public destroy(_box?: ReadonlyTeleBox): void {
     this.scrollBar?.destroy();
   }
 }

package/src/SlideController/index.ts

@@ -19,6 +19,7 @@ import { clamp } from "../utils/helpers";
 import { cachedGetBgColor } from "../utils/bgcolor";
 import { log, verbose, setRoomLogger } from "../utils/logger";
 import { getRoomTracker } from "../utils/tracker";
+import { releaseAndRestoreSlide } from "./recovery";
 export { syncSceneWithSlide, createDocsViewerPages } from "./helpers";
 
 export const DefaultUrl = "https://convertcdn.netless.link/dynamicConvert";
@@ -315,6 +316,7 @@ export class SlideControllerBase {
       anchor,
       interactive: true,
       mode: "interactive",
+      syncEventQueuePolicy: options.syncEventQueuePolicy ?? "fifo",
       controller: false,
       enableGlobalClick: options.enableGlobalClick ?? true,
       renderOptions: {
@@ -342,6 +344,8 @@ export class SlideControllerBase {
       skipActionWhenFrozen: options.skipActionWhenFrozen ?? true,
       resourceMaxRetries: options.resourceMaxRetries,
       onResourceMaxRetries: options.onResourceMaxRetries,
+      // Slide 内部 ResizeObserver 关掉，改由 app-slide 的 observer + boxSizeChange 一起驱动
+      disableFrameResizeObserver: true,
     });
     if (import.meta.env.DEV) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -392,20 +396,20 @@ export class SlideControllerBase {
     if (!this.visible) return;
     this.isFrozen = false;
     if (this.ready) {
-      let isNeedSyncState = false;
       log("[Slide] unfreeze", this.context.appId);
-      if (this.invisibleBehavior === "frozen") {
-        this.slide.release();
-        isNeedSyncState = true;
-      } else {
-        this.slide.resume();
-      }
-      if (isNeedSyncState) {
-        const state = this.context.storage.state.state;
-        if (state) {
-          log("[Slide] sync storage", JSON.stringify(state));
-          this.slide.setSlideState(state);
+      try {
+        if (this.invisibleBehavior !== "frozen") {
+          this.slide.resume();
+          return;
         }
+
+        await releaseAndRestoreSlide(
+          this.slide,
+          () => this.context.storage.state.state,
+          state => log("[Slide] sync storage", JSON.stringify(state))
+        );
+      } catch (error) {
+        log("[Slide] unfreeze failed", error);
       }
     } else {
       this._toFreeze = -1;

package/src/SlideController/recovery.ts

@@ -0,0 +1,17 @@
+export interface RecoverableSlide<State> {
+  release: (callback: () => void) => void;
+  setSlideState: (state: State) => Promise<void>;
+}
+
+export async function releaseAndRestoreSlide<State>(
+  slide: RecoverableSlide<State>,
+  getLatestState: () => State | null | undefined,
+  onRestore?: (state: State) => void
+): Promise<void> {
+  await new Promise<void>(resolve => slide.release(resolve));
+  const state = getLatestState();
+  if (state) {
+    onRestore?.(state);
+    await slide.setSlideState(state);
+  }
+}

package/src/SlideDocsViewer/index.ts

@@ -16,6 +16,24 @@ import { logger } from "../utils/logger";
 import { isEditable } from "../utils/helpers";
 import type { Attributes, MagixEvents } from "../typings";
 import type { AppOptions } from "..";
+import type { SyncEventQueuePolicy } from "@netless/slide";
+import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
+
+type BoxSize = { width: number; height: number };
+
+const ResizeObserverImpl = window.ResizeObserver || ResizeObserverPolyfill;
+const BOX_SIZE_EPSILON = 0.5;
+
+const formatBoxSize = ({ width, height }: BoxSize): string =>
+  `${width.toFixed(1)} x ${height.toFixed(1)} px`;
+
+const sizesEqual = (left?: BoxSize, right?: BoxSize): boolean =>
+  Boolean(
+    left &&
+      right &&
+      Math.abs(left.width - right.width) <= BOX_SIZE_EPSILON &&
+      Math.abs(left.height - right.height) <= BOX_SIZE_EPSILON
+  );
 
 export const ClickThroughAppliances = new Set(["clicker"]);
 
@@ -60,7 +78,15 @@ export class SlideDocsViewer {
   protected readonly appId: string;
   protected isViewMounted = false;
   protected justSildeReadonly = false;
+  protected syncEventQueuePolicy: SyncEventQueuePolicy = "fifo";
   private enableScale: boolean;
+  private boxSizeEventCount = 0;
+  private latestBoxSize: BoxSize | undefined;
+  private lastObserverSize: BoxSize | undefined;
+  private lastAppliedSize: BoxSize | undefined;
+  private lastAppliedSource: "observer" | "event" | undefined;
+  private offBoxSizeChange: (() => void) | undefined;
+  private contentResizeObserver: ResizeObserver | undefined;
 
   public constructor({
     context,
@@ -112,6 +138,7 @@ export class SlideDocsViewer {
     });
 
     this.render();
+    this._registerBoxSizeChange();
 
     // 在 render() 之后设置监听器，确保 ResizableContainer 已经创建
     this.sideEffect.add(() => {
@@ -172,7 +199,19 @@ export class SlideDocsViewer {
 
   public setJustSildeReadonly(justSildeReadonly: boolean) {
     this.justSildeReadonly = justSildeReadonly;
-    this.slideController?.slide.setInteractive(!this.justSildeReadonly);
+    this.applyInteractionState();
+  }
+
+  public setSyncEventQueuePolicy(policy: SyncEventQueuePolicy) {
+    this.syncEventQueuePolicy = policy;
+    this.applyInteractionState();
+  }
+
+  protected applyInteractionState() {
+    const slide = this.slideController?.slide;
+    if (!slide) return;
+    slide.setInteractive(!this.justSildeReadonly);
+    slide.setSyncEventQueuePolicy(this.syncEventQueuePolicy);
   }
 
   public render() {
@@ -181,7 +220,8 @@ export class SlideDocsViewer {
       this.resizableContainer = new ResizableContainer(
         this.viewer.$content,
         this.context,
-        this.enableScale
+        this.enableScale,
+        this.box,
       );
     }
 
@@ -261,6 +301,7 @@ export class SlideDocsViewer {
       onNavigate: this.onNavigate,
       onError: this.onError,
     });
+    this.applyInteractionState();
 
     this.resizableContainer.setSlideObject(this.slideController.slide);
     this.scaleDocsToFit();
@@ -269,9 +310,99 @@ export class SlideDocsViewer {
       return () => this.whiteboardView.callbacks.off("onSizeUpdated", this.scaleDocsToFit);
     });
 
+    this._observeContentSize();
+    this._applyCurrentBoxSize();
+    this.context.getAppProxy?.()?.scheduleBoxSizeSync?.();
+
     return this;
   }
 
+  private _getContentSize(): BoxSize {
+    const rect = (this.viewer.$content || this.box.$content).getBoundingClientRect();
+    return { width: rect.width, height: rect.height };
+  }
+
+  private _applyResize = (size: BoxSize, source: "observer" | "event"): void => {
+    if (size.width <= 0 || size.height <= 0) return;
+    if (sizesEqual(this.lastAppliedSize, size)) return;
+
+    this.lastAppliedSize = size;
+    this.lastAppliedSource = source;
+    this.resizableContainer?.updateResizableContainer();
+    this.slideController?.slide?.notifyFrameResize();
+    this.scaleDocsToFit();
+
+    const domSize = this._getContentSize();
+    console.log("[app-slide] resize", {
+      appId: this.appId,
+      source,
+      eventCount: this.boxSizeEventCount,
+      event: formatBoxSize(size),
+      dom: formatBoxSize(domSize),
+    });
+  };
+
+  private _applyCurrentBoxSize = (eventSize?: BoxSize): void => {
+    const size = eventSize ?? this._getContentSize();
+    this._applyResize(size, eventSize ? "event" : "observer");
+  };
+
+  private _onObserverSize = (size: BoxSize): void => {
+    if (size.width <= 0 || size.height <= 0) return;
+    this.lastObserverSize = size;
+    // observer 先到：立刻 resize，不等 650ms 的 boxSizeChange
+    this._applyResize(size, "observer");
+  };
+
+  private _reconnectContentObserver(): void {
+    const target = this.viewer.$content;
+    if (!target || !this.contentResizeObserver) return;
+    this.contentResizeObserver.disconnect();
+    this.contentResizeObserver.observe(target);
+  }
+
+  private _observeContentSize(): void {
+    if (!this.contentResizeObserver) {
+      this.contentResizeObserver = new ResizeObserverImpl(entries => {
+        const entry = entries[entries.length - 1];
+        const size = entry?.contentRect
+          ? { width: entry.contentRect.width, height: entry.contentRect.height }
+          : this._getContentSize();
+        this._onObserverSize(size);
+      });
+    }
+    this._reconnectContentObserver();
+  }
+
+  private _onContextBoxSizeChange = (payload: { appId: string; width: number; height: number }) => {
+    if (payload.appId !== this.context.appId) return;
+
+    this.boxSizeEventCount += 1;
+    this.latestBoxSize = { width: payload.width, height: payload.height };
+
+    // observer 已经先处理过同一尺寸时，忽略晚到的 event
+    if (sizesEqual(this.lastObserverSize, this.latestBoxSize) || sizesEqual(this.lastAppliedSize, this.latestBoxSize)) {
+      console.log("[app-slide] boxSizeChange skipped, observer already applied", {
+        appId: this.appId,
+        eventCount: this.boxSizeEventCount,
+        source: this.lastAppliedSource,
+        size: formatBoxSize(this.latestBoxSize),
+      });
+      return;
+    }
+
+    // observer 比 event 晚到或漏了：用 event 补一次，并重新挂 observer
+    this._applyResize(this.latestBoxSize, "event");
+    this._reconnectContentObserver();
+  };
+
+  private _registerBoxSizeChange(): void {
+    this.offBoxSizeChange = this.context.emitter.on("boxSizeChange", this._onContextBoxSizeChange);
+    this._observeContentSize();
+    this._applyCurrentBoxSize();
+    this.context.getAppProxy?.()?.scheduleBoxSizeSync?.();
+  }
+
   protected onError = ({ error, index }: { error: Error; index: number }) => {
     this.viewer.setPaused();
     if (this.slideController?.showRenderError) {
@@ -322,12 +453,16 @@ export class SlideDocsViewer {
   }
 
   public unmount() {
+    this.offBoxSizeChange?.();
+    this.offBoxSizeChange = undefined;
+    this.contentResizeObserver?.disconnect();
+    this.contentResizeObserver = undefined;
     if (this.slideController) {
       this.slideController.destroy();
       this.slideController = null;
     }
     this.viewer.unmount();
-    this.resizableContainer.destroy();
+    this.resizableContainer.destroy(this.box);
     return this;
   }
 

package/src/index.ts

@@ -54,6 +54,7 @@ export interface AppOptions
     | "logger"
     | "enableGlobalClick"
     | "skipActionWhenFrozen"
+    | "syncEventQueuePolicy"
   > {
   /** show debug controller */
   debug?: boolean;
@@ -105,6 +106,7 @@ export interface AppResult {
   prevPage: () => boolean;
   jumpToPage: (page: number) => boolean;
   setSildeReadonly: (bol: boolean) => void;
+  setSyncEventQueuePolicy: (policy: NonNullable<ISlideConfig["syncEventQueuePolicy"]>) => void;
   onScaleChanged: (cb: (scale: number) => void) => void;
   scaleView: (to: number) => void;
   getViewScale: () => number | undefined;
@@ -213,9 +215,9 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
       },
     });
 
-    if (context.getAppOptions()?.justSildeReadonly) {
-      docsViewer?.setJustSildeReadonly(true);
-    }
+    const appOptions = context.getAppOptions();
+    docsViewer.setSyncEventQueuePolicy(appOptions?.syncEventQueuePolicy ?? "fifo");
+    docsViewer.setJustSildeReadonly(appOptions?.justSildeReadonly ?? false);
 
     if (import.meta.env.DEV) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -318,6 +320,9 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
       setSildeReadonly: (bol: boolean) => {
         docsViewer?.setJustSildeReadonly(bol);
       },
+      setSyncEventQueuePolicy: policy => {
+        docsViewer?.setSyncEventQueuePolicy(policy);
+      },
       viewer: () => {
         return docsViewer;
       },

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020 netless
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.