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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-presentation",
-  "version": "0.1.9-beta.1",
+  "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 {
@@ -67,6 +68,10 @@ export interface PresentationController {
   setDocsViewReadonly: (bol: boolean) => void;
   /** set the presentation readonly */
   setReadonly: (bol: boolean) => void;
+  /** move the camera */
+  moveCamera: (camera: { centerX: number, centerY: number, scale: number }) => void;
+  /** get the origin scale */
+  getOriginScale: () => number;
 }
 
 export { styles }
@@ -375,16 +380,35 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
       app.setReadonly(!isWritable)
     }))
 
+    const getPageSize = () => {
+      const { width, height } = app.page() || {}
+      return { width: width || 0, height: height || 0 }
+    }
+
+    const getOriginScale = () => {
+      const { size } = view;
+      const { width, height } = getPageSize();
+      return Math.min(size.height / height, size.width / width);
+    }
+
+    const moveCamera = (camera: { centerX: number, centerY: number, scale: number }) => {
+      if (context.getIsWritable()) {
+        view.moveCamera({...camera, animationMode: 'immediately' as AnimationMode});
+        syncView();
+        return;
+      }
+      throw new Error('[Presentation]: moveCamera must be called in writable room')
+    }
+
     let scrollbar:Scrollbar | undefined;
     if (options.useScrollbar) {
       dispose.make(() => {
         scrollbar = new Scrollbar(app.contentDOM, { 
-          getPageSize: () => {
-            const { width, height } = app.page() || {}
-            return { width: width || 0, height: height || 0 }
-          },
+          getPageSize,
+          getOriginScale,
+          syncView,
           getWritable: () => context.getIsWritable(),
-          syncView: () => syncView()
+          scrollbarEventCallback: options.scrollbarEventCallback
         }, view)
         return () => scrollbar?.destroy()
       })
@@ -516,7 +540,7 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
       }
     }
 
-    const controller: PresentationController = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log, setDocsViewReadonly, setReadonly }
+    const controller: PresentationController = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log, setDocsViewReadonly, setReadonly, moveCamera, getOriginScale }
 
     dispose.add(listen(window, 'message', (ev: MessageEvent<"@netless/_presentation_">) => {
       if (ev.data === "@netless/_presentation_") {

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;
@@ -9,9 +10,19 @@ export interface ScrollbarOption {
         height: number;
     };
     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;
@@ -24,6 +35,7 @@ export class Scrollbar {
             }
         },      
         getWritable: () => false,
+        getOriginScale: () => 1,
         syncView: () => void 0
     };
     private view: View;
@@ -51,12 +63,6 @@ export class Scrollbar {
         return `${this.namespace}-${className}`
     }
 
-    private getOriginScale() {
-        const { size } = this.view;
-        const { width, height } = this.option.getPageSize();
-        return Math.min(size.height / height, size.width / width);
-    }
-
     setReadonly(bol: boolean){
         this.readonly = bol;
         if (this.readonly) {
@@ -66,10 +72,10 @@ export class Scrollbar {
         }
     }
 
-    onCameraUpdated = () => {
+    onCameraUpdated = debounce(() => {
         if (this.readonly) return;
         const { scale, centerX, centerY } = this.view.camera;
-        const originScale = this.getOriginScale();
+        const originScale = this.option.getOriginScale();
         const ratio = Math.round(originScale / scale * 1000) / 1000;
         const scrollX = Math.round(centerX * originScale);
         const scrollY = Math.round(centerY * originScale);
@@ -83,8 +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;
@@ -93,11 +99,12 @@ export class Scrollbar {
             centerY: camera.centerY,
             scale: camera.scale,
         }
+        this.option.scrollbarEventCallback?.onScrollbarDragStart?.();
     }
 
     getScrollXRange(camera: {scale: number}) {
         const { width } = this.option.getPageSize();
-        const originScale = this.getOriginScale();
+        const originScale = this.option.getOriginScale();
         const scale = camera.scale;
         const ratio = Math.round(originScale / scale * 1000) / 1000;
         const scrollWidth = width * (1-ratio);
@@ -108,7 +115,7 @@ export class Scrollbar {
 
     getScrollYRange(camera: {scale: number}) {
         const { height } = this.option.getPageSize();
-        const originScale = this.getOriginScale();
+        const originScale = this.option.getOriginScale();
         const scale = camera.scale;
         const ratio = Math.round(originScale / scale * 1000) / 1000;
         const scrollHeight = height * (1-ratio);
@@ -120,7 +127,7 @@ export class Scrollbar {
     onDragX = (transformedDrag: {x: number, y: number}) => {
         if (this.cameraCache) {
             const {x} = transformedDrag;
-            const originScale = this.getOriginScale();
+            const originScale = this.option.getOriginScale();
             const { minX, maxX } = this.getScrollXRange(this.cameraCache);
             const scrollX = Math.round(x / originScale);
             let centerX = scrollX + this.cameraCache.centerX;
@@ -133,13 +140,14 @@ export class Scrollbar {
                 centerX,
                 animationMode: 'immediately' as AnimationMode
             })
+            this.option.scrollbarEventCallback?.onScrollbarDragY?.(centerX);
         }
     }
 
     onDragY = (transformedDrag: {x: number, y: number}) => {
         if(this.cameraCache){
             const {y} = transformedDrag;
-            const originScale = this.getOriginScale();
+            const originScale = this.option.getOriginScale();
             const { minY, maxY } = this.getScrollYRange(this.cameraCache);
             const scrollY = Math.round(y / originScale);
             let centerY = scrollY + this.cameraCache.centerY;
@@ -151,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() {
@@ -200,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() {