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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-presentation",
-  "version": "0.1.9-beta.2",
+  "version": "0.1.9-beta.4",
   "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 {
@@ -71,6 +72,8 @@ export interface PresentationController {
   moveCamera: (camera: { centerX: number, centerY: number, scale: number }) => void;
   /** get the origin scale */
   getOriginScale: () => number;
+  /** get the view scale */
+  getScale: () =>number;
 }
 
 export { styles }
@@ -390,6 +393,10 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
       return Math.min(size.height / height, size.width / width);
     }
 
+    const getScale =() => {
+      return view.camera.scale
+    }
+
     const moveCamera = (camera: { centerX: number, centerY: number, scale: number }) => {
       if (context.getIsWritable()) {
         view.moveCamera({...camera, animationMode: 'immediately' as AnimationMode});
@@ -403,10 +410,12 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
     if (options.useScrollbar) {
       dispose.make(() => {
         scrollbar = new Scrollbar(app.contentDOM, { 
+          appId: context.appId,
           getPageSize,
           getOriginScale,
           syncView,
           getWritable: () => context.getIsWritable(),
+          scrollbarEventCallback: options.scrollbarEventCallback
         }, view)
         return () => scrollbar?.destroy()
       })
@@ -538,7 +547,7 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
       }
     }
 
-    const controller: PresentationController = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log, setDocsViewReadonly, setReadonly, moveCamera, getOriginScale }
+    const controller: PresentationController = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log, setDocsViewReadonly, setReadonly, moveCamera, getOriginScale, getScale }
 
     dispose.add(listen(window, 'message', (ev: MessageEvent<"@netless/_presentation_">) => {
       if (ev.data === "@netless/_presentation_") {

package/src/scrollbar/index.ts

@@ -1,8 +1,10 @@
 import './style.scss?inline';
 import type { View, AnimationMode } from "@netless/window-manager";
 import { makeDraggable } from "./Draggable";
+import { debounce } from 'lodash';
 
 export interface ScrollbarOption {
+    appId: string;
     readonly?: boolean;
     getPageSize: () => {
         width: number;
@@ -11,13 +13,24 @@ 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?: (appid: string, originScale: number, scale: number) => void;
 }
 
 export class Scrollbar {
     readonly namespace = "netless-app-presentation"
+    readonly appId: string;
     private container: HTMLElement;
     private scrollContainer: HTMLDivElement = document.createElement('div');
     private option: ScrollbarOption = {
+        appId: '',
         getPageSize: () => {
             return {
                 width: 0,
@@ -45,6 +58,7 @@ export class Scrollbar {
         this.scrollContainer.className = this.c('scrollbar-container');
         this.container = container;
         this.option = option;
+        this.appId = option.appId;
         this.readonly = option.readonly || false;
         this.view = view;
         this.init();
@@ -62,7 +76,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 +93,8 @@ export class Scrollbar {
             this.scrollbarY.style.display = ratio === 1 ? 'none' : 'block';
             this.scrollbarY.style.transform = `translateY(${scrollY}px)`;
         }
-    }
+        this.option.scrollbarEventCallback?.onScrollCameraUpdated?.(this.appId, originScale, scale);
+    }, 50)
 
     onDragStart = () => {
         const camera = this.view.camera;
@@ -88,6 +103,7 @@ export class Scrollbar {
             centerY: camera.centerY,
             scale: camera.scale,
         }
+        this.option.scrollbarEventCallback?.onScrollbarDragStart?.();
     }
 
     getScrollXRange(camera: {scale: number}) {
@@ -128,6 +144,7 @@ export class Scrollbar {
                 centerX,
                 animationMode: 'immediately' as AnimationMode
             })
+            this.option.scrollbarEventCallback?.onScrollbarDragY?.(centerX);
         }
     }
 
@@ -146,13 +163,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 +214,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() {