@netless/app-presentation 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-presentation",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Netless App for presentation slides (images)",
   "author": "netless",
   "license": "MIT",
@@ -27,17 +27,17 @@
     "@hyrious/configs": "^0.1.1",
     "@hyrious/dts": "^0.2.1",
     "@hyrious/esbuild-dev": "^0.10.5",
-    "@netless/fastboard": "^0.3.10",
-    "@netless/window-manager": "^0.4.67",
-    "@types/node": "^20.11.10",
-    "@wopjs/disposable": "^0.1.4",
+    "@netless/fastboard": "^0.3.14",
+    "@netless/window-manager": "^0.4.70",
+    "@types/node": "^20.11.30",
+    "@wopjs/disposable": "^0.1.5",
     "@wopjs/dom": "^0.1.3",
-    "esbuild": "^0.19.12",
+    "esbuild": "^0.20.2",
     "jspdf": "^2.5.1",
-    "rollup": "^4.9.6",
-    "sass": "^1.70.0",
-    "vanilla-lazyload": "^17.8.5",
-    "vite": "^5.0.12"
+    "rollup": "^4.13.1",
+    "sass": "^1.72.0",
+    "vanilla-lazyload": "^18.0.0",
+    "vite": "^5.2.6"
   },
   "scripts": {
     "dev": "vite",

package/src/app-presentation.ts

@@ -8,13 +8,32 @@ import { Presentation, type PresentationConfig, type PresentationPage } from "./
 
 export type Logger = (...data: any[]) => void
 
+interface Viewport {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+}
+
 export interface PresentationAppOptions {
   /** Disables user move / scale the image and whiteboard. */
   disableCameraTransform?: boolean;
   /** Max scale = `maxCameraScale` * default scale. Not working when `disableCameraTransform` is true. Default: 3 */
   maxCameraScale?: number;
-  /** Custom logger. Default: `console.log` */
+  /** Custom logger. Default: a logger that reports to the whiteboard server. */
   log?: Logger;
+  /** Custom thumbnail generator. Default is appending `"?x-oss-process=image/resize,l_50"` to `src`. */
+  thumbnail?: (src: string) => string;
+  /**
+   * Custom viewport to set on the first time the presentation was added. Default is full page.
+   * Numbers range in 0 to 1 is considered a ratio to multiply the real page size.
+   * Example settings:
+   *
+   * - Full page: `{ x: 0, y: 0, width: 1, height: 1 }`
+   * - Half page: `{ x: 0, y: 0, width: 1, height: 0.5 }`
+   * - Absolute top-left area of the page: `{ x: 0, y: 0, width: 100, height: 100 }`
+   */
+  viewport?: Viewport | ((page: PresentationPage) => Viewport);
 }
 
 export interface PresentationController {
@@ -48,7 +67,7 @@ const createLogger = (room: Room | undefined): Logger => {
   }
 }
 
-export const NetlessAppPresentation: NetlessApp<{}, unknown, PresentationAppOptions, PresentationController> = {
+export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions, PresentationController> = {
   kind: "Presentation",
   setup(context) {
     const view = context.getView()
@@ -66,8 +85,10 @@ export const NetlessAppPresentation: NetlessApp<{}, unknown, PresentationAppOpti
     const scenePath = context.getInitScenePath()!
 
     const options = context.getAppOptions() || {}
-    if (!(Number.isFinite(options.maxCameraScale) && options.maxCameraScale! > 0)) {
+    let maxCameraScale = options.maxCameraScale ?? 3
+    if (!(Number.isFinite(maxCameraScale) && maxCameraScale! > 0)) {
       console.warn(`[Presentation] maxCameraScale should be a positive number, got ${options.maxCameraScale}`)
+      maxCameraScale = 3
     }
 
     const log = options.log || createLogger(context.getRoom())
@@ -96,6 +117,7 @@ export const NetlessAppPresentation: NetlessApp<{}, unknown, PresentationAppOpti
     dispose.add(() => log(`[Presentation] dispose ${context.appId}`))
 
     const page$$ = context.createStorage('page', { index: 0 })
+    const view$$ = context.createStorage('view', { uid: "", originX: 0, originY: 0, width: 0, height: 0 })
 
     let lastIndex = -1
     const syncPage = async (index: number) => {
@@ -159,7 +181,7 @@ export const NetlessAppPresentation: NetlessApp<{}, unknown, PresentationAppOpti
           originX: -width / 2, originY: -height / 2, width, height,
           animationMode: 'immediately' as AnimationMode.Immediately
         })
-        const maxScale = view.camera.scale * (options.disableCameraTransform ? 1 : (options.maxCameraScale || 3))
+        const maxScale = view.camera.scale * (options.disableCameraTransform ? 1 : maxCameraScale)
         const minScale = view.camera.scale
         view.setCameraBound({
           damping: 1,
@@ -167,32 +189,51 @@ export const NetlessAppPresentation: NetlessApp<{}, unknown, PresentationAppOpti
           minContentMode: () => minScale,
           centerX: 0, centerY: 0, width, height
         })
+        syncViewFromRemote(true)
       }
     }
 
-    syncPage(page$$.state.index)
-    dispose.add(page$$.addStateChangedListener(() => syncPage(page$$.state.index)))
+    const me = context.getRoom()?.uid || context.getDisplayer().observerId + ''
 
-    // Workaround for window-manager also listens to room state and change scene.
-    // https://github.com/netless-io/window-manager/blob/5e6b79f/src/AppManager.ts#L666
-    //
-    // When we close some app with a whiteboard view, the related scenes will be deleted.
-    // Then whiteboard's room.state.sceneState will automatically navigate to an existing scene.
-    // Then it goes to "/pdf/123456", which is a folder, so it will open the first scene "/pdf/123456/0".
-    //
-    // But we actually does not use that scene, our scenes' names are ["1", "2", ...].
-    // So if we found this situation, force sync page once.
-    dispose.add(context.emitter.on('roomStateChange', (state) => {
-      if (state.sceneState?.scenePath.endsWith('/0')) {
-        // About timing things:
-        // window-manager's listener runs in sync, but context.emitter is based on Emittery
-        // which runs callbacks in the next micro task, so this code will run after the "/0" task.
-        syncPage(page$$.state.index)
+    let throttleSyncView = 0
+    const syncView = () => {
+      if (throttleSyncView > 0) return
+      const { width, height } = app.page() || {}
+      if (width && height && context.getIsWritable()) {
+        const { camera, size } = view
+        const fixedW = Math.min(size.width, size.height * width / height)
+        const fixedH = Math.min(size.height, size.width * height / width)
+        const w = fixedW / camera.scale
+        const h = fixedH / camera.scale
+        const x = camera.centerX - w / 2
+        const y = camera.centerY - h / 2
+        throttleSyncView = setTimeout(() => {
+          throttleSyncView = 0
+          view$$.setState({ uid: me, originX: x, originY: y, width: w, height: h })
+        }, 50)
       }
-    }))
+    }
+    dispose.add(() => {
+      clearTimeout(throttleSyncView)
+      throttleSyncView = 0
+    })
+
+    const syncViewFromRemote = (force = false, animate = false) => {
+      const { uid, originX, originY, width, height } = view$$.state
+      if ((force || uid !== me) && width > 0 && height > 0) {
+        view.moveCameraToContain({
+          originX, originY, width, height,
+          animationMode: (animate ? 'continuous' : 'immediately') as AnimationMode
+        })
+      }
+    }
+
+    syncPage(page$$.state.index)
+    dispose.add(page$$.addStateChangedListener(() => syncPage(page$$.state.index)))
+    dispose.add(view$$.addStateChangedListener(() => syncViewFromRemote(false, true)))
 
     const box = context.getBox()
-    const app = dispose.add(createPresentation(box, pages, jumpPage, page$$))
+    const app = dispose.add(createPresentation(box, pages, jumpPage, page$$, options.thumbnail))
     app.contentDOM.dataset.appPresentationVersion = __VERSION__
     app.scaleDocsToFit = scaleDocsToFit
     app.log = log
@@ -207,6 +248,26 @@ export const NetlessAppPresentation: NetlessApp<{}, unknown, PresentationAppOpti
       return () => view.callbacks.off('onSizeUpdated', scaleDocsToFit)
     })
 
+    // Init viewport if provided `viewport`.
+    if (options.viewport && context.isAddApp && app.page()) {
+      const page = app.page()!
+      const viewport = typeof options.viewport === 'function' ? options.viewport(page) : options.viewport
+      const fix = (i: number, x: number) => i == 0 ? i : i <= 1 ? i * x : i
+      view$$.setState({
+        uid: me,
+        originX: fix(viewport.x, page.width) - page.width / 2,
+        originY: fix(viewport.y, page.height) - page.height / 2,
+        width: fix(viewport.width, page.width),
+        height: fix(viewport.height, page.height),
+      })
+    }
+
+    dispose.make(() => {
+      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)
     }))
@@ -366,15 +427,16 @@ class AppPresentation extends Presentation {
   }
 }
 
-const createPresentation = (
+function createPresentation(
   box: ReadonlyTeleBox,
   pages: PresentationPage[],
   jumpPage: (index: number) => void,
   page$$: Storage<{ index: number }>,
-) => {
+  thumbnail?: (src: string) => string,
+): AppPresentation {
   box.mountStyles(styles)
 
-  const app = new AppPresentation({ pages, readonly: box.readonly, jumpPage })
+  const app = new AppPresentation({ pages, readonly: box.readonly, jumpPage, thumbnail })
   app.box = box
   box.mountContent(app.contentDOM)
   box.mountFooter(app.footerDOM)
@@ -397,6 +459,10 @@ export interface InstallOptions {
    * @example "DocsViewer"
    */
   as?: string
+  /**
+   * Options to customize the local app (not synced to others).
+   */
+  appOptions?: PresentationAppOptions
 }
 
 /**
@@ -410,5 +476,5 @@ export const install = (register: RegisterFn, options: InstallOptions = {}): Pro
   if (options.as) {
     app = Object.assign({}, app, { kind: options.as })
   }
-  return register({ kind: app.kind, src: app })
+  return register({ kind: app.kind, src: app, appOptions: options.appOptions })
 }

package/src/presentation.ts

@@ -16,6 +16,7 @@ export interface PresentationPage {
 export interface PresentationConfig {
   readonly pages: PresentationPage[]
   readonly readonly?: boolean
+  readonly thumbnail?: (src: string) => string
 }
 
 /**
@@ -76,6 +77,7 @@ export class Presentation implements IDisposable<void> {
   constructor(config: PresentationConfig) {
     this.pages = config.pages
     this.preload = new Preload(this.pages)
+    if (config.thumbnail) this.thumbnail = config.thumbnail
     this.dispose.add(this.preload)
     this.readonly = config.readonly ?? false
     this.dom = document.createElement('div')
@@ -120,7 +122,7 @@ export class Presentation implements IDisposable<void> {
     const c_previewPageName = this.c('preview-page-name')
     for (let index = 0; index < this.pages.length; ++index) {
       const page = this.pages[index]
-      const previewSRC = page.thumbnail || this.x_oss_process(page.src)
+      const previewSRC = page.thumbnail || this.thumbnail(page.src)
 
       const previewPage = document.createElement('a')
       previewPage.className = `${c_previewPage} ${this.c(`preview-page-${index}`)}`
@@ -294,17 +296,8 @@ export class Presentation implements IDisposable<void> {
     this.preload.touch(this.pageIndex)
   }
 
-  private c(className: string): string {
-    return `${this.namespace}-${className}`
-  }
-
-  private isEditable(el: EventTarget | null): boolean {
-    if (!el) return false
-    const { tagName } = el as HTMLElement
-    return tagName == 'INPUT' || tagName == 'TEXTAREA' || tagName == 'SELECT'
-  }
-
-  private x_oss_process(src: string): string {
+  /** Returns a modified URL that points to the thumbnail image. */
+  thumbnail(src: string): string {
     try {
       const url = new URL(src)
       url.searchParams.set('x-oss-process', 'image/resize,l_50')
@@ -314,4 +307,14 @@ export class Presentation implements IDisposable<void> {
       return src
     }
   }
+
+  private c(className: string): string {
+    return `${this.namespace}-${className}`
+  }
+
+  private isEditable(el: EventTarget | null): boolean {
+    if (!el) return false
+    const { tagName } = el as HTMLElement
+    return tagName == 'INPUT' || tagName == 'TEXTAREA' || tagName == 'SELECT'
+  }
 }