@netless/app-presentation 0.1.9-beta.7 → 0.1.9

package/README-zh.md

@@ -0,0 +1,173 @@
+# @netless/app-presentation
+
+一个 [Netless App](https://github.com/netless-io/netless-app)，用于将多张图片作为演示文稿幻灯片展示。
+
+## 安装
+
+<pre>npm add <strong>@netless/app-presentation</strong></pre>
+
+## 使用方法
+
+```js
+import { register } from "@netless/fastboard"
+import { install } from "@netless/app-presentation"
+
+install(register, { 
+  as: 'DocsViewer',
+  appOptions: {
+    // 启用滚动条功能
+    useScrollbar: true,
+    // 启用裁剪视图功能，只显示页面内容区域
+    useClipView: true,
+    // 滚动条事件回调
+    scrollbarEventCallback: {
+      onScrollCameraUpdated: (appid, originScale, scale) => {
+        console.log('相机缩放已更新', appid, scale)
+      },
+      onScrollbarDragEnd: () => {
+        console.log('滚动条拖拽已结束')
+      }
+    }
+  }
+})
+```
+
+### 将应用插入房间
+
+如果你以 `{ as: 'DocsViewer' }` 的方式安装了这个应用，请调用 [`fastboard.insertDocs()`](https://github.com/netless-io/fastboard#insert-pdf-ppt-and-pptx)。
+
+<details><summary>否则&hellip;</summary>
+
+```js
+// 假设你已经获得了演示文稿页面的数据结构
+const data = [
+  // [preview] 字段是可选的
+  { width: 1024, height: 768, url: 'url/to/1.png', preview: 'url/to/1.small.png' },
+]
+
+// 现在调用 addApp()
+fastboard.manager.addApp({
+  kind: 'Presentation',
+  options: {
+    // 挂载白板场景的文件夹名称
+    // 相同的文件夹名称将防止你再次插入
+    scenePath: `/presentation/foo`,
+    // 应用窗口标题
+    title: 'a.pdf',
+    // 白板场景规范
+    scenes: data.map((e, i) => ({
+      name: String(i + 1),
+      ppt: {
+        src: e.url,
+        width: e.width,
+        height: e.height,
+        previewURL: e.preview
+      }
+    }))
+  }
+})
+```
+
+请注意，如果你没有使用 `{ as: 'DocsViewer' }` 替换 DocsViewer 应用，
+[`dispatchDocsEvent()`](https://github.com/netless-io/fastboard#control-the-pdfpptx-apps)
+函数将无法在 Presentation 应用上工作。这是因为该函数只处理类型为 `DocsViewer` 或 `Slide` 的应用。
+
+</details>
+
+### 应用选项
+
+#### `useScrollbar`
+启用滚动条功能，提供水平和垂直滚动条用于导航和查看演示文稿。
+
+```js
+install(register, {
+  as: 'DocsViewer',
+  appOptions: {
+    useScrollbar: true,
+    scrollbarEventCallback: {
+      onScrollCameraUpdated: (appid, originScale, scale) => {
+        // 当相机缩放更新时触发
+      },
+      onScrollbarDragEnd: () => {
+        // 当滚动条拖拽结束时触发
+      }
+    }
+  }
+})
+```
+
+#### `useClipView`
+启用裁剪视图功能，只显示页面内容区域，隐藏白板区域外的内容。
+
+```js
+install(register, {
+  as: 'DocsViewer',
+  appOptions: {
+    useClipView: true
+  }
+})
+```
+
+### 应用结果 API
+
+#### `screenshotCurrentPageAsync(context, width?, height?)`
+异步截图当前页面到 Canvas 上下文。支持自定义宽度和高度。
+
+```js
+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)
+    // 使用 canvas 进行后续操作，如导出图片
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        alert("context.toBlob() 失败！")
+        return
+      }
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = 'screenshot.png'
+      a.click()
+    })
+  }
+}
+```
+
+#### `getPageSize()`
+获取当前页面的尺寸（宽度和高度）。
+
+```js
+const app = fastboard.manager.queryOne(appId)
+if (app && app.kind === 'DocsViewer') {
+  const controller = app.appResult
+  const { width, height } = controller.getPageSize()
+  console.log(`当前页面尺寸: ${width}x${height}`)
+}
+```
+
+## 开发
+
+参见 [编写 Netless App](https://github.com/netless-io/fastboard/blob/main/docs/en/app.md)。
+
+如果只想开发 UI 部分，运行：
+
+```bash
+$ pnpm build
+$ pnpm dev
+```
+
+然后访问 http://localhost:5173/ 在本地查看应用。
+
+要在真实的白板房间中开发，请添加一个包含房间 uuid 和 token 的 .env.local 文件，
+然后访问 http://localhost:5173/e2e/。
+
+## 许可证
+
+MIT @ [netless](https://github.com/netless-io)

package/README.md

@@ -1,5 +1,7 @@
 # @netless/app-presentation
 
+[中文](https://github.com/netless-io/netless-app-presentation/blob/main/README-zh.md) 
+
 A [Netless App](https://github.com/netless-io/netless-app) that display multiple images as presentation slides.
 
 ## Install
@@ -12,7 +14,24 @@ A [Netless App](https://github.com/netless-io/netless-app) that display multiple
 import { register } from "@netless/fastboard"
 import { install } from "@netless/app-presentation"
 
-install(register, { as: 'DocsViewer' })
+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
@@ -59,6 +78,80 @@ handles app whose kind is `DocsViewer` or `Slide`.
 
 </details>
 
+### App Options
+
+#### `useScrollbar`
+Enable scrollbar feature, providing horizontal and vertical scrollbars for navigation and viewing presentations.
+
+```js
+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.
+
+```js
+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.
+
+```js
+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.
+
+```js
+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](https://github.com/netless-io/fastboard/blob/main/docs/en/app.md).

package/dist/index.global.js

@@ -6923,7 +6923,7 @@ var NetlessAppPresentation = (function (exports) {
         (_b = (_a = this.option.scrollbarEventCallback) == null ? void 0 : _a.onScrollbarDragEnd) == null ? void 0 : _b.call(_a);
       };
       this.moveCamera = (camera) => {
-        const { centerX, centerY } = camera;
+        const { centerX, centerY, scale } = camera;
         const cacheCamera = this.view.camera;
         const _camera = {};
         if ((0, import_lodash.isNumber)(centerX)) {
@@ -6946,6 +6946,14 @@ var NetlessAppPresentation = (function (exports) {
           }
           _camera.centerY = newCenterY;
         }
+        if ((0, import_lodash.isNumber)(scale)) {
+          let newScale = scale;
+          const originScale = this.option.getOriginScale();
+          if (scale < originScale) {
+            newScale = originScale;
+          }
+          _camera.scale = newScale;
+        }
         this.view.moveCamera(__spreadProps(__spreadValues({}, _camera), {
           animationMode: "immediately"
         }));
@@ -7294,7 +7302,7 @@ var NetlessAppPresentation = (function (exports) {
       };
       const box = context.getBox();
       const app = dispose2.add(createPresentation(box, pages, jumpPage, pageIndex$, view, options.thumbnail, options.useClipView));
-      app.contentDOM.dataset.appPresentationVersion = "0.1.9-beta.7";
+      app.contentDOM.dataset.appPresentationVersion = "0.1.9";
       app.scaleDocsToFit = scaleDocsToFit;
       app.log = log;
       if (options.justDocsViewReadonly) {
@@ -7613,7 +7621,7 @@ var NetlessAppPresentation = (function (exports) {
   };
 
   // src/index.ts
-  var version = "0.1.9-beta.7";
+  var version = "0.1.9";
   /*! Bundled license information:
 
   lodash/lodash.js:

package/dist/index.js

@@ -6924,7 +6924,7 @@ var Scrollbar = class {
       (_b = (_a = this.option.scrollbarEventCallback) == null ? void 0 : _a.onScrollbarDragEnd) == null ? void 0 : _b.call(_a);
     };
     this.moveCamera = (camera) => {
-      const { centerX, centerY } = camera;
+      const { centerX, centerY, scale } = camera;
       const cacheCamera = this.view.camera;
       const _camera = {};
       if ((0, import_lodash.isNumber)(centerX)) {
@@ -6947,6 +6947,14 @@ var Scrollbar = class {
         }
         _camera.centerY = newCenterY;
       }
+      if ((0, import_lodash.isNumber)(scale)) {
+        let newScale = scale;
+        const originScale = this.option.getOriginScale();
+        if (scale < originScale) {
+          newScale = originScale;
+        }
+        _camera.scale = newScale;
+      }
       this.view.moveCamera(__spreadProps(__spreadValues({}, _camera), {
         animationMode: "immediately"
       }));
@@ -7295,7 +7303,7 @@ var NetlessAppPresentation = {
     };
     const box = context.getBox();
     const app = dispose2.add(createPresentation(box, pages, jumpPage, pageIndex$, view, options.thumbnail, options.useClipView));
-    app.contentDOM.dataset.appPresentationVersion = "0.1.9-beta.7";
+    app.contentDOM.dataset.appPresentationVersion = "0.1.9";
     app.scaleDocsToFit = scaleDocsToFit;
     app.log = log;
     if (options.justDocsViewReadonly) {
@@ -7614,7 +7622,7 @@ var install = (register, options = {}) => {
 };
 
 // src/index.ts
-var version = "0.1.9-beta.7";
+var version = "0.1.9";
 /*! Bundled license information:
 
 lodash/lodash.js: