@netless/app-presentation 0.1.9-beta.2 → 0.1.9-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-presentation",
-  "version": "0.1.9-beta.2",
+  "version": "0.1.9-beta.3",
   "description": "Netless App for presentation slides (images)",
   "author": "netless",
   "license": "MIT",
@@ -33,6 +33,7 @@
     "@hyrious/esbuild-dev": "^0.10.5",
     "@netless/fastboard": "^1.0.6",
     "@netless/window-manager": "^1.0.4",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^20.11.30",
     "@wopjs/disposable": "^0.1.5",
     "@wopjs/dom": "^0.1.3",
@@ -42,5 +43,8 @@
     "sass": "^1.72.0",
     "vanilla-lazyload": "^18.0.0",
     "vite": "^5.2.6"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
   }
 }

package/src/app-presentation.ts

@@ -6,7 +6,7 @@ import { listen } from '@wopjs/dom'
 import styles from './style.scss?inline'
 import { Presentation, type PresentationConfig, type PresentationPage } from "./presentation";
 import { readable, type Readable } from "./store";
-import { Scrollbar } from "./scrollbar";
+import { Scrollbar, type ScrollbarEventCallback } from "./scrollbar";
 
 export type Logger = (...data: any[]) => void
 
@@ -45,6 +45,7 @@ export interface PresentationAppOptions {
   useScrollbar?: boolean;
   /** debounceSync is used to set the presentation debounce sync, it will be used in the presentation, and the presentation will be debounce sync when the app is initialized */
   debounceSync?: boolean;
+  scrollbarEventCallback?: ScrollbarEventCallback
 }
 
 export interface PresentationController {
@@ -407,6 +408,7 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
           getOriginScale,
           syncView,
           getWritable: () => context.getIsWritable(),
+          scrollbarEventCallback: options.scrollbarEventCallback
         }, view)
         return () => scrollbar?.destroy()
       })

package/src/scrollbar/index.ts

@@ -1,6 +1,7 @@
 import './style.scss?inline';
 import type { View, AnimationMode } from "@netless/window-manager";
 import { makeDraggable } from "./Draggable";
+import { debounce } from 'lodash';
 
 export interface ScrollbarOption {
     readonly?: boolean;
@@ -11,8 +12,17 @@ export interface ScrollbarOption {
     getWritable: () => boolean;
     getOriginScale: () => number;
     syncView: () => void;
+    scrollbarEventCallback?: ScrollbarEventCallback;
 }
 
+export interface ScrollbarEventCallback {
+    onScrollbarDragStart?: () => void;
+    onScrollbarDragEnd?: () => void;
+    onScrollbarDragX?: (x: number) => void;
+    onScrollbarDragY?: (y: number) => void;
+    onScrollCameraUpdated?: (originScale: number, scale: number) => void;
+  }
+
 export class Scrollbar {
     readonly namespace = "netless-app-presentation"
     private container: HTMLElement;
@@ -62,7 +72,7 @@ export class Scrollbar {
         }
     }
 
-    onCameraUpdated = () => {
+    onCameraUpdated = debounce(() => {
         if (this.readonly) return;
         const { scale, centerX, centerY } = this.view.camera;
         const originScale = this.option.getOriginScale();
@@ -79,7 +89,8 @@ export class Scrollbar {
             this.scrollbarY.style.display = ratio === 1 ? 'none' : 'block';
             this.scrollbarY.style.transform = `translateY(${scrollY}px)`;
         }
-    }
+        this.option.scrollbarEventCallback?.onScrollCameraUpdated?.(originScale, scale);
+    }, 50)
 
     onDragStart = () => {
         const camera = this.view.camera;
@@ -88,6 +99,7 @@ export class Scrollbar {
             centerY: camera.centerY,
             scale: camera.scale,
         }
+        this.option.scrollbarEventCallback?.onScrollbarDragStart?.();
     }
 
     getScrollXRange(camera: {scale: number}) {
@@ -128,6 +140,7 @@ export class Scrollbar {
                 centerX,
                 animationMode: 'immediately' as AnimationMode
             })
+            this.option.scrollbarEventCallback?.onScrollbarDragY?.(centerX);
         }
     }
 
@@ -146,13 +159,15 @@ export class Scrollbar {
             this.view.moveCamera({
                 centerY,
                 animationMode: 'immediately' as AnimationMode
-            }) 
+            })
+            this.option.scrollbarEventCallback?.onScrollbarDragY?.(centerY);
         }
     }
 
     onDragEnd = () => {
         this.cameraCache = undefined
         this.option.syncView();
+        this.option.scrollbarEventCallback?.onScrollbarDragEnd?.();
     }
 
     private init() {
@@ -195,7 +210,7 @@ export class Scrollbar {
         this.scrollContainer.append(this.scrollbarContainerX, this.scrollbarContainerY);
         this.container.appendChild(this.scrollContainer);
         this.view.callbacks.on('onCameraUpdated', this.onCameraUpdated);
-        this.onCameraUpdated()
+        this.onCameraUpdated();
     }
 
     destroy() {