@netless/app-presentation

中文

A Netless App that display multiple images as presentation slides.

Install

npm add @netless/app-presentation

Usage

import { register } from "@netless/fastboard"
import { install } from "@netless/app-presentation"

install(register, { 
  as: 'DocsViewer',
  appOptions: {
    // Enable scrollbar feature
    useScrollbar: true,
    // Enable clip view feature, only show page content area
    useClipView: true,
    // Scrollbar event callbacks
    scrollbarEventCallback: {
      onScrollCameraUpdated: (appid, originScale, scale) => {
        console.log('Camera scale updated', appid, scale)
      },
      onScrollbarDragEnd: () => {
        console.log('Scrollbar drag ended')
      }
    }
  }
})

Insert This App Into Room

Call fastboard.insertDocs() if you installed this app { as: 'DocsViewer' }.

Otherwise…

// Assume you have got the presentation pages as such data structure
const data = [
  // The [preview] field is optional
  { width: 1024, height: 768, url: 'url/to/1.png', preview: 'url/to/1.small.png' },
]

// Now call addApp()
fastboard.manager.addApp({
  kind: 'Presentation',
  options: {
    // folder name to mount whiteboard scenes
    // the same folder name will prevent you from insterting it again
    scenePath: `/presentation/foo`,
    // app window title
    title: 'a.pdf',
    // whiteboard scenes specification
    scenes: data.map((e, i) => ({
      name: String(i + 1),
      ppt: {
        src: e.url,
        width: e.width,
        height: e.height,
        previewURL: e.preview
      }
    }))
  }
})

Note that if you do not replace the DocsViewer app with { as: 'DocsViewer' }, the dispatchDocsEvent() function won't work on the Presentation app. This is because that function only handles app whose kind is DocsViewer or Slide.

App Options

useScrollbar

Enable scrollbar feature, providing horizontal and vertical scrollbars for navigation and viewing presentations.

install(register, {
  as: 'DocsViewer',
  appOptions: {
    useScrollbar: true,
    scrollbarEventCallback: {
      onScrollCameraUpdated: (appid, originScale, scale) => {
        // Triggered when camera scale is updated
      },
      onScrollbarDragEnd: () => {
        // Triggered when scrollbar drag ends
      }
    }
  }
})

useClipView

Enable clip view feature, only show page content area, hide content outside the whiteboard area.

install(register, {
  as: 'DocsViewer',
  appOptions: {
    useClipView: true
  }
})

App Result API

screenshotCurrentPageAsync(context, width?, height?)

Asynchronously screenshot the current page to Canvas context. Supports custom width and height.

const app = fastboard.manager.queryOne(appId)
if (app && app.kind === 'DocsViewer') {
  const controller = app.appResult
  const canvas = document.createElement('canvas')
  const { width, height } = controller.getPageSize()
  canvas.width = width
  canvas.height = height
  const ctx = canvas.getContext('2d')
  if (ctx) {
    await controller.screenshotCurrentPageAsync(ctx, width, height)
    // Use canvas for subsequent operations, such as exporting images
    canvas.toBlob((blob) => {
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = 'screenshot.png'
      a.click()
    })
  }
}

getPageSize()

Get the size (width and height) of the current page.

const app = fastboard.manager.queryOne(appId)
if (app && app.kind === 'DocsViewer') {
  const controller = app.appResult
  const { width, height } = controller.getPageSize()
  console.log(`Current page size: ${width}x${height}`)
}

Develop

See Write you a Netless App.

To only develop the UI part, run:

$ pnpm build
$ pnpm dev

Then goto http://localhost:5173/ to see the app locally.

To develop it in a real whiteboard room, add a file .env.local containing the room's uuid and token, then goto http://localhost:5173/e2e/.

License

MIT @ netless