@netless/app-presentation 0.1.9-beta.5 → 0.1.9-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-presentation",
-  "version": "0.1.9-beta.5",
+  "version": "0.1.9-beta.6",
   "description": "Netless App for presentation slides (images)",
   "author": "netless",
   "license": "MIT",
@@ -31,8 +31,8 @@
     "@hyrious/configs": "^0.1.1",
     "@hyrious/dts": "^0.2.1",
     "@hyrious/esbuild-dev": "^0.10.5",
-    "@netless/fastboard": "^1.0.6",
-    "@netless/window-manager": "^1.0.4",
+    "@netless/fastboard": "1.1.1-beta.0",
+    "@netless/window-manager": "^1.0.7-beta.9",
     "@types/lodash": "^4.17.20",
     "@types/node": "^20.11.30",
     "@wopjs/disposable": "^0.1.5",
@@ -42,7 +42,9 @@
     "rollup": "^4.13.1",
     "sass": "^1.72.0",
     "vanilla-lazyload": "^18.0.0",
-    "vite": "^5.2.6"
+    "vite": "^5.2.6",
+    "white-web-sdk": "^2.16.53",
+    "@netless/appliance-plugin": "1.1.22-beta.11"
   },
   "dependencies": {
     "lodash": "^4.17.21"

package/src/app-presentation.ts

@@ -3,10 +3,11 @@ import type { AnimationMode, AppContext, AppPayload, NetlessApp, PublicEvent, Re
 import { disposableStore } from '@wopjs/disposable'
 import { listen } from '@wopjs/dom'
 
-import styles from './style.scss?inline'
+import styles from './style.scss?inline';
 import { Presentation, type PresentationConfig, type PresentationPage } from "./presentation";
 import { readable, type Readable } from "./store";
 import { Scrollbar, type ScrollbarEventCallback } from "./scrollbar";
+import { debounce } from "lodash";
 
 export type Logger = (...data: any[]) => void
 
@@ -46,6 +47,10 @@ export interface PresentationAppOptions {
   /** 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
+  /** goToPageByClick is used to set the presentation go to page by click, it will be used in the presentation, and the presentation will be go to page by click when the app is initialized */
+  goToPageByClick?: boolean;
+  /** useClipView is used to set the presentation use clip view, it will be used in the presentation, and the presentation will be use clip view when the app is initialized */
+  useClipView?: boolean;
 }
 
 export interface PresentationController {
@@ -74,10 +79,12 @@ export interface PresentationController {
   getOriginScale: () => number;
   /** get the view scale */
   getScale: () =>number;
+  /** get the page size */
+  getPageSize: () => { width: number, height: number };
+  /** screenshot the current page */
+  screenshotCurrentPageAsync: (context: CanvasRenderingContext2D, width?: number, height?: number) => Promise<void>;
 }
 
-export { styles }
-
 const ppt2page = (ppt: SceneDefinition["ppt"], name?: string): PresentationPage | null =>
   ppt ? { width: ppt.width, height: ppt.height, src: ppt.src, thumbnail: ppt.previewURL, name } : null
 
@@ -88,7 +95,6 @@ const createLogger = (room: Room | undefined): Logger => {
     return (...args) => console.log(...args)
   }
 }
-``
 const scenesEqual = (scenes1?: SceneDefinition[], scenes2?: SceneDefinition[]): boolean => {
   if (!scenes1 || !scenes2) {return false}
   if (scenes1.length !== scenes2.length) return false;
@@ -338,8 +344,13 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
 
     dispose.add(view$$.addStateChangedListener(() => syncViewFromRemote(false, true)))
 
+    const getPageSize = () => {
+      const { width, height } = app.page() || {}
+      return { width: width || 0, height: height || 0 }
+    }
+
     const box = context.getBox()
-    const app = dispose.add(createPresentation(box, pages, jumpPage, pageIndex$, options.thumbnail))
+    const app = dispose.add(createPresentation(box, pages, jumpPage, pageIndex$, view, options.thumbnail, options.useClipView))
     app.contentDOM.dataset.appPresentationVersion = __VERSION__
     app.scaleDocsToFit = scaleDocsToFit
     app.log = log
@@ -348,6 +359,21 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
       app.setDocsViewReadonly(true)
     }
 
+    const room = context.getRoom();
+    const goToPageByClick = () => {
+      const currentApplianceName = context.getRoom()?.state?.memberState?.currentApplianceName ?? '';
+      if (!app.readonly && currentApplianceName === 'clicker') {
+        nextPage();
+      }
+    }
+
+    if(room && options.goToPageByClick && app.whiteboardDOM) {
+      dispose.make(() => {
+        app.whiteboardDOM.addEventListener('click', goToPageByClick);
+        return () => app.whiteboardDOM.removeEventListener('click', goToPageByClick);
+      })
+    }
+
     context.mountView(app.whiteboardDOM)
     if (options.disableCameraTransform) {
       view.disableCameraTransform = true
@@ -376,17 +402,13 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
       view.callbacks.on('onCameraUpdatedByDevice', syncView)
       return () => view.callbacks.off('onCameraUpdatedByDevice', syncView)
     })
+
     syncViewFromRemote(true)
 
     dispose.add(context.emitter.on("writableChange", (isWritable: boolean): void => {
       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();
@@ -397,6 +419,41 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
       return view.camera.scale
     }
 
+    const screenshotCurrentPageAsync = async (_context: CanvasRenderingContext2D, _width?: number, _height?: number) => {
+      const uuid = room?.calibrationTimestamp?.toString() ?? Date.now().toString();
+
+      const currentPage = pages[pageIndex$.value];
+      if (!currentPage) {
+        throw new Error('[Presentation]: current page not found')
+      }
+      const { width, height, src } = currentPage;
+
+      const img = document.createElement('img')
+      img.width = width;
+      img.height = height;
+      img.crossOrigin = 'Anonymous';
+      await new Promise(resolve => { img.onload = resolve; img.src = src })
+      _context.drawImage(img, 0, 0, width, height, 0, 0, _width || width, _height || height);
+      const currentScenePath = view.focusScenePath;
+      if (!currentScenePath) {
+        throw new Error('[Presentation]: current scene path not found')
+      }
+      const windowManger = context.getWindowManager() as any;
+      if (windowManger._appliancePlugin) {
+        await windowManger._appliancePlugin.screenshotToCanvasAsync(_context, currentScenePath, _width || width, _height || height, {
+          centerX: 0,
+          centerY: 0,
+          scale: _width && _height ? Math.min(_width / width, _height / height) : 1,
+        });
+      } else {
+        await view.screenshotToCanvasAsync(_context, currentScenePath, _width || width, _height || height, {
+          centerX: 0,
+          centerY: 0,
+          scale: _width && _height ? Math.min(_width / width, _height / height) : 1,
+        });
+      }
+    }
+
     const moveCamera = (camera: { centerX: number, centerY: number, scale: number }) => {
       if (context.getIsWritable()) {
         view.moveCamera({...camera, animationMode: 'immediately' as AnimationMode});
@@ -493,13 +550,13 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
         const name = p.name ?? String(index + 1)
         if (scenes.some(scene => scene.name == name)) {
           const camera = { centerX: 0, centerY: 0, scale: Math.min(wb_canvas.width / width, wb_canvas.height / height) };
-          const sPath = `${scenePath}/${index + 1}`;
+          const sPath = `${scenePath}/${name}`;
           // appliancePlugin is a performance optimization for whiteboard;
-          const windowManger = (context as any).manager.windowManger as any
+          const windowManger = context.getWindowManager() as any;
           if (windowManger._appliancePlugin) {
-            await windowManger._appliancePlugin.screenshotToCanvasAsync(wb, sPath, wb_canvas.width, wb_canvas.height, camera);
+            await (windowManger as any)._appliancePlugin.screenshotToCanvasAsync(wb, sPath, wb_canvas.width, wb_canvas.height, camera);
           } else {
-            view.screenshotToCanvas(
+            await view.screenshotToCanvasAsync(
               wb, sPath,
               wb_canvas.width, wb_canvas.height,
               camera,
@@ -542,12 +599,15 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
 
     const setReadonly = (bol: boolean) => {
       app.setReadonly(bol)
+      if (options.goToPageByClick) {
+
+      }
       if(scrollbar) {
         scrollbar.setReadonly(bol)
       }
     }
 
-    const controller: PresentationController = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log, setDocsViewReadonly, setReadonly, moveCamera, getOriginScale, getScale }
+    const controller: PresentationController = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log, setDocsViewReadonly, setReadonly, moveCamera, getOriginScale, getScale, getPageSize, screenshotCurrentPageAsync }
 
     dispose.add(listen(window, 'message', (ev: MessageEvent<"@netless/_presentation_">) => {
       if (ev.data === "@netless/_presentation_") {
@@ -576,7 +636,7 @@ class AppPresentation extends Presentation {
   constructor(config: PresentationConfig & { jumpPage: (index: number) => void }) {
     super(config)
     this.jumpPage = config.jumpPage
-    this.image.style.display = 'none'
+    // this.image.style.display = 'none'
   }
 
   override updateImage() {
@@ -604,17 +664,44 @@ function createPresentation(
   pages: PresentationPage[],
   jumpPage: (index: number) => void,
   pageIndex$: Readable<number>,
+  view: View,
   thumbnail?: (src: string) => string,
+  useClipView?: boolean,
 ): AppPresentation {
   box.mountStyles(styles)
 
-  const app = new AppPresentation({ pages, readonly: box.readonly, jumpPage, thumbnail })
+  const app = new AppPresentation({ pages, readonly: box.readonly, jumpPage, thumbnail})
   app.box = box
   box.mountContent(app.contentDOM)
   box.mountFooter(app.footerDOM)
 
   app.dispose.add(pageIndex$.subscribe(pageIndex => { app.setPageIndex(pageIndex) }))
 
+  if(useClipView && view){
+    const onCameraUpdatedEffectForMaskView = debounce(() => {
+      const { width: pageWidth, height: pageHeight } = app.page() || {};
+      if(!pageWidth || !pageHeight) {
+        return;
+      }
+      const { scale } = view.camera;
+      const { width, height } = view.size;
+      const pageRatioX = Math.round((1 - (pageWidth * scale / width)) / 2 * 100);
+      const pageRatioY = Math.round((1 - (pageHeight * scale / height)) / 2 * 100);
+      app.whiteboardDOM.style.clipPath = `inset(${pageRatioY}% ${pageRatioX}%)`;
+    }, 50)
+    onCameraUpdatedEffectForMaskView();
+    const onCameraUpdatedEffect = () => {
+      view.callbacks.on("onSizeUpdated", onCameraUpdatedEffectForMaskView)
+      view.callbacks.on("onCameraUpdated", onCameraUpdatedEffectForMaskView)
+      return () => {
+        view.callbacks.off("onCameraUpdated", onCameraUpdatedEffectForMaskView);
+        view.callbacks.off("onSizeUpdated", onCameraUpdatedEffectForMaskView);
+      }
+    }
+    app.dispose.make(onCameraUpdatedEffect)
+  }
+  
+
   return app
 }
 

package/src/presentation.ts

@@ -90,9 +90,9 @@ export class Presentation implements IDisposable<void> {
     this.contentDOM.className = this.c('content')
     this.previewDOM = document.createElement('div')
     this.previewDOM.className = this.c('preview')
-    this.imageDOM = document.createElement('div')
-    this.imageDOM.className = this.c('image')
-    this.image = document.createElement('img')
+    // this.imageDOM = document.createElement('div')
+    // this.imageDOM.className = this.c('image')
+    // this.image = document.createElement('img')
     this.whiteboardDOM = document.createElement('div')
     this.whiteboardDOM.className = this.c('wb-view')
     this.footerDOM = document.createElement('div')
@@ -166,8 +166,8 @@ export class Presentation implements IDisposable<void> {
       }
     }))
 
-    this.imageDOM.appendChild(this.image)
-    this.contentDOM.appendChild(this.imageDOM)
+    // this.imageDOM.appendChild(this.image)
+    // this.contentDOM.appendChild(this.imageDOM)
     this.updateImage()
 
     this.contentDOM.appendChild(this.whiteboardDOM)

package/src/scrollbar/index.ts

@@ -79,17 +79,22 @@ export class Scrollbar {
         if (this.readonly) return;
         const { scale, centerX, centerY } = this.view.camera;
         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);
+        const { width: pageWidth, height: pageHeight } = this.option.getPageSize();
+        const { width: viewWidth, height: viewHeight } = this.view.size;
+        const originScaleX = viewWidth / pageWidth;
+        const originScaleY = viewHeight / pageHeight;
+        const ratioX = Math.min(Math.round(originScaleX / scale * 100) / 100, 1);
+        const ratioY = Math.min(Math.round(originScaleY / scale * 100) / 100, 1);
+        const scrollX = Math.round(centerX * originScaleX);
+        const scrollY = Math.round(centerY * originScaleY);
         if (this.scrollbarX) {
-            this.scrollbarX.style.width = `${ratio * 100}%`;
-            this.scrollbarX.style.display = ratio === 1 ? 'none' : 'block';
+            this.scrollbarX.style.width = `${ratioX * 100}%`;
+            this.scrollbarX.style.display = ratioX === 1 ? 'none' : 'block';
             this.scrollbarX.style.transform = `translateX(${scrollX}px)`;
         }
         if (this.scrollbarY) {
-            this.scrollbarY.style.height = `${ratio * 100}%`;
-            this.scrollbarY.style.display = ratio === 1 ? 'none' : 'block';
+            this.scrollbarY.style.height = `${ratioY * 100}%`;
+            this.scrollbarY.style.display = ratioY === 1 ? 'none' : 'block';
             this.scrollbarY.style.transform = `translateY(${scrollY}px)`;
         }
         this.option.scrollbarEventCallback?.onScrollCameraUpdated?.(this.appId, originScale, scale);
@@ -106,22 +111,26 @@ export class Scrollbar {
     }
 
     getScrollXRange(camera: {scale: number}) {
-        const { width } = this.option.getPageSize();
-        const originScale = this.option.getOriginScale();
+        const { width: pageWidth } = this.option.getPageSize();
+        const { width: viewWidth } = this.view.size;
+        const originScaleX = viewWidth / pageWidth;
+        // const originScale = this.option.getOriginScale();
         const scale = camera.scale;
-        const ratio = Math.round(originScale / scale * 1000) / 1000;
-        const scrollWidth = width * (1-ratio);
+        const ratio = Math.min(Math.round(originScaleX / scale * 100) / 100, 1);
+        const scrollWidth = pageWidth * (1-ratio);
         const minX = -scrollWidth / 2;
         const maxX = scrollWidth / 2;
         return { minX, maxX };
     }
 
     getScrollYRange(camera: {scale: number}) {
-        const { height } = this.option.getPageSize();
-        const originScale = this.option.getOriginScale();
+        const { height: pageHeight } = this.option.getPageSize();
+        const { height: viewHeight } = this.view.size;
+        const originScaleY = viewHeight / pageHeight;
+        // const originScale = this.option.getOriginScale();
         const scale = camera.scale;
-        const ratio = Math.round(originScale / scale * 1000) / 1000;
-        const scrollHeight = height * (1-ratio);
+        const ratio = Math.min(Math.round(originScaleY / scale * 100) / 100, 1);
+        const scrollHeight = pageHeight * (1-ratio);
         const minY = -scrollHeight / 2;
         const maxY = scrollHeight / 2;
         return { minY, maxY };
@@ -130,9 +139,12 @@ export class Scrollbar {
     onDragX = (transformedDrag: {x: number, y: number}) => {
         if (this.cameraCache) {
             const {x} = transformedDrag;
-            const originScale = this.option.getOriginScale();
+            // const originScale = this.option.getOriginScale();
+            const { width: pageWidth } = this.option.getPageSize();
+            const { width: viewWidth } = this.view.size;
+            const originScaleX = viewWidth / pageWidth;
             const { minX, maxX } = this.getScrollXRange(this.cameraCache);
-            const scrollX = Math.round(x / originScale);
+            const scrollX =Math.round(x / originScaleX);
             let centerX = scrollX + this.cameraCache.centerX;
             if (centerX < minX) {
                 centerX = minX;
@@ -150,9 +162,12 @@ export class Scrollbar {
     onDragY = (transformedDrag: {x: number, y: number}) => {
         if(this.cameraCache){
             const {y} = transformedDrag;
-            const originScale = this.option.getOriginScale();
+            // const originScale = this.option.getOriginScale();
+            const { height: pageHeight } = this.option.getPageSize();
+            const { height: viewHeight } = this.view.size;
+            const originScaleY = viewHeight / pageHeight;
             const { minY, maxY } = this.getScrollYRange(this.cameraCache);
-            const scrollY = Math.round(y / originScale);
+            const scrollY = Math.round(y / originScaleY);
             let centerY = scrollY + this.cameraCache.centerY;
             if (centerY < minY) {
                 centerY = minY;