@netless/app-slide 0.2.106-beta.1 → 0.2.106-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.106-beta.1",
+  "version": "0.2.106-beta.2",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -9,7 +9,7 @@
     "build": "vite build && npm run types",
     "build:dev": "vite build --mode development && npm run types",
     "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"
+    "test": "rimraf test/.cache && esbuild test/ResizableContainer.test.ts test/NavigationButtonMode.test.ts test/DocsViewerNavigation.integration.test.ts --bundle --platform=node --format=cjs --outdir=test/.cache && node test/.cache/ResizableContainer.test.js && node test/.cache/NavigationButtonMode.test.js && node test/.cache/DocsViewerNavigation.integration.test.js"
   },
   "files": [
     "src",
@@ -18,7 +18,7 @@
   ],
   "devDependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/slide": "1.4.61-beta.0",
+    "@netless/slide": "1.4.61",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
     "jspdf": "2.5.1",

package/src/SlideDocsViewer/index.ts

@@ -12,10 +12,11 @@ import { SideEffectManager } from "side-effect-manager";
 import { createDocsViewerPages } from "../SlideController";
 import { DocsViewer, type DocsViewerPage } from "../DocsViewer";
 import { ResizableContainer } from "../DocsViewer/ResizableContainer";
+import { navigateWithNavigationButton, resolveNavigationButtonMode } from "./navigation";
 import { logger } from "../utils/logger";
 import { isEditable } from "../utils/helpers";
 import type { Attributes, MagixEvents } from "../typings";
-import type { AppOptions } from "..";
+import type { AppOptions, NavigationButtonMode } from "..";
 import type { SyncEventQueuePolicy } from "@netless/slide";
 import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
 
@@ -55,6 +56,7 @@ export interface SlideDocsViewerConfig {
   appId: string;
   urlInterrupter?: (url: string) => Promise<string>;
   enableScale?: boolean;
+  navigationButtonMode?: NavigationButtonMode;
   onPagesReady?: (pages: DocsViewerPage[]) => void;
   onNavigate?: (index: number, origin?: string) => void;
 }
@@ -79,6 +81,7 @@ export class SlideDocsViewer {
   protected isViewMounted = false;
   protected justSildeReadonly = false;
   protected syncEventQueuePolicy: SyncEventQueuePolicy = "fifo";
+  private readonly navigationButtonMode: NavigationButtonMode;
   private enableScale: boolean;
   private boxSizeEventCount = 0;
   private latestBoxSize: BoxSize | undefined;
@@ -98,6 +101,7 @@ export class SlideDocsViewer {
     appId,
     urlInterrupter,
     enableScale,
+    navigationButtonMode,
     onPagesReady,
     onNavigate,
   }: SlideDocsViewerConfig) {
@@ -109,6 +113,7 @@ export class SlideDocsViewer {
     this.onNavigate = onNavigate || noop;
     this.baseScenePath = baseScenePath;
     this.enableScale = enableScale ?? false;
+    this.navigationButtonMode = resolveNavigationButtonMode(navigationButtonMode);
     this.appId = appId;
     this.viewer = new DocsViewer({
       readonly: box.readonly,
@@ -298,6 +303,7 @@ export class SlideDocsViewer {
   }
 
   public mount() {
+    this.unmountPromise = undefined;
     this.box.mountContent(this.viewer.$content);
     this.box.mountFooter(this.viewer.$footer);
 
@@ -465,29 +471,42 @@ export class SlideDocsViewer {
     return (page > 0 ? page : 1) - 1;
   }
 
-  public async unmount(): Promise<this> {
-    this.offBoxSizeChange?.();
-    this.offBoxSizeChange = undefined;
-    this.contentResizeObserver?.disconnect();
-    this.contentResizeObserver = undefined;
-    if (this.slideController) {
-      const controller = this.slideController;
-      this.slideController = null;
-      await controller.destroy();
+  protected unmountPromise?: Promise<this>;
+  protected destroyPromise?: Promise<void>;
+
+  public unmount(): Promise<this> {
+    if (!this.unmountPromise) {
+      this.unmountPromise = Promise.resolve().then(async () => {
+        this.offBoxSizeChange?.();
+        this.offBoxSizeChange = undefined;
+        this.contentResizeObserver?.disconnect();
+        this.contentResizeObserver = undefined;
+        if (this.slideController) {
+          const controller = this.slideController;
+          this.slideController = null;
+          await controller.destroy();
+        }
+        this.viewer.unmount();
+        this.resizableContainer.destroy(this.box);
+        return this;
+      });
     }
-    this.viewer.unmount();
-    this.resizableContainer.destroy(this.box);
-    return this;
+    return this.unmountPromise;
   }
 
   public setReadonly(readonly: boolean) {
     this.viewer.setReadonly(readonly);
   }
 
-  public async destroy(): Promise<void> {
-    this.sideEffect.flushAll();
-    await this.unmount();
-    this.viewer.destroy();
+  public destroy(): Promise<void> {
+    if (!this.destroyPromise) {
+      this.destroyPromise = Promise.resolve().then(async () => {
+        this.sideEffect.flushAll();
+        await this.unmount();
+        this.viewer.destroy();
+      });
+    }
+    return this.destroyPromise;
   }
 
   public toggleClickThrough(tool?: string) {
@@ -541,7 +560,14 @@ export class SlideDocsViewer {
 
   protected onNewPageIndex = (index: number, origin?: string) => {
     if (this.slideController) {
-      this.slideController.jumpToPage(index + 1, origin);
+      navigateWithNavigationButton(
+        this.navigationButtonMode,
+        origin,
+        this.viewer.pageIndex,
+        index,
+        this.slideController,
+        this.onNavigate
+      );
     }
   };
 

package/src/SlideDocsViewer/navigation.ts

@@ -0,0 +1,33 @@
+import type { NavigationButtonMode } from "..";
+
+export type NavigationButtonAction = "prevStep" | "nextStep";
+
+export function resolveNavigationButtonMode(
+  mode: NavigationButtonMode | undefined
+): NavigationButtonMode {
+  return mode ?? "page";
+}
+
+interface NavigationController {
+  readonly page: number;
+  readonly slide: Record<NavigationButtonAction, () => void>;
+  jumpToPage(page: number, origin?: string): void;
+}
+
+export function navigateWithNavigationButton(
+  mode: NavigationButtonMode,
+  origin: string | undefined,
+  currentPageIndex: number,
+  targetPageIndex: number,
+  controller: NavigationController,
+  onNavigate: (page: number, origin?: string) => void
+): void {
+  if (mode === "step" && origin === "navigation") {
+    const action: NavigationButtonAction =
+      targetPageIndex < currentPageIndex ? "prevStep" : "nextStep";
+    controller.slide[action]();
+    onNavigate(controller.page, origin);
+    return;
+  }
+  controller.jumpToPage(targetPageIndex + 1, origin);
+}

package/src/index.ts

@@ -43,6 +43,8 @@ export { DefaultUrl, apps, FreezerLength, addHooks, useFreezer, log, logger };
 
 export { setFreezerLength, getFreezerLength, onCreated, onDestroyed } from "./utils/freezer";
 
+export type NavigationButtonMode = "page" | "step";
+
 export interface AppOptions
   extends Pick<
     ISlideConfig,
@@ -86,6 +88,8 @@ export interface AppOptions
   invisibleBehavior?: "frozen" | "pause";
   /** just readonly, no operate silder */
   justSildeReadonly?: true;
+  /** footer navigation button behavior @default 'page' */
+  navigationButtonMode?: NavigationButtonMode;
   enableScale?: boolean;
   resourceMaxRetries?: number;
   onResourceMaxRetries: (url: string, error: Error) => void;
@@ -235,6 +239,7 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> & {
       appId: context.appId,
       urlInterrupter: context.getAppOptions()?.urlInterrupter,
       enableScale: context.getAppOptions()?.enableScale ?? false,
+      navigationButtonMode: context.getAppOptions()?.navigationButtonMode,
       onPagesReady: ({ length }) => {
         const index = docsViewer?.viewer.pageIndex || 0;
         context.dispatchAppEvent("pageStateChange", { index, length });
@@ -313,20 +318,25 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> & {
 
     let disposed = false;
     let offDestroy: (() => void) | undefined;
-    const teardown = async (): Promise<void> => {
-      if (disposed) return;
+    let teardownPromise: Promise<void> | undefined;
+    const teardown = (): Promise<void> => {
+      if (teardownPromise) return teardownPromise;
       disposed = true;
-      const removeDestroy = offDestroy;
-      offDestroy = undefined;
-      removeDestroy?.();
-      log("[Slide] destroy", context.appId);
-      if (useFreezer) apps.delete(context.appId);
-      sideEffect.flushAll();
-      if (docsViewer) {
-        const viewer = docsViewer;
-        docsViewer = null;
-        await viewer.destroy();
-      }
+      // Store the promise before cleanup can synchronously trigger another teardown.
+      teardownPromise = Promise.resolve().then(async () => {
+        const removeDestroy = offDestroy;
+        offDestroy = undefined;
+        removeDestroy?.();
+        log("[Slide] destroy", context.appId);
+        if (useFreezer) apps.delete(context.appId);
+        sideEffect.flushAll();
+        if (docsViewer) {
+          const viewer = docsViewer;
+          docsViewer = null;
+          await viewer.destroy();
+        }
+      });
+      return teardownPromise;
     };
     offDestroy = context.emitter.on("destroy", teardown);