@netless/app-slide 0.2.22 → 0.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.22",
+  "version": "0.2.24",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -10,12 +10,21 @@
     "README-zh.md"
   ],
   "devDependencies": {
-    "@netless/slide": "^0.8.4",
+    "jspdf": "2.5.1",
+    "@netless/slide": "^0.8.5",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
     "side-effect-manager": "^1.2.1",
     "vanilla-lazyload": "^17.8.3"
   },
+  "peerDependencies": {
+    "jspdf": "2.5.1"
+  },
+  "peerDependenciesMeta": {
+    "jspdf": {
+      "optional": true
+    }
+  },
   "scripts": {
     "types": "cross-env NODE_ENV=production tsc --declaration --emitDeclarationOnly --outDir dist",
     "build": "vite build && npm run types",

package/src/SlideDocsViewer/index.ts

@@ -17,6 +17,13 @@ export interface SlideDocsViewerConfig {
   view: View;
   mountSlideController: (options: MountSlideOptions) => SlideController;
   mountWhiteboard: (dom: HTMLDivElement) => void;
+  baseScenePath: string;
+  appId: string;
+}
+
+export interface SavePdfConfig {
+  appId: string;
+  type: "@netless/_request_save_pdf_";
 }
 
 export class SlideDocsViewer {
@@ -27,14 +34,24 @@ export class SlideDocsViewer {
   protected readonly whiteboardView: SlideDocsViewerConfig["view"];
   protected readonly mountSlideController: SlideDocsViewerConfig["mountSlideController"];
   protected readonly mountWhiteboard: SlideDocsViewerConfig["mountWhiteboard"];
+  private readonly baseScenePath: string;
+  private readonly appId: string;
   private isViewMounted = false;
 
-  public constructor({ box, view, mountSlideController, mountWhiteboard }: SlideDocsViewerConfig) {
+  public constructor({
+    box,
+    view,
+    mountSlideController,
+    mountWhiteboard,
+    baseScenePath,
+    appId,
+  }: SlideDocsViewerConfig) {
     this.box = box;
     this.whiteboardView = view;
     this.mountSlideController = mountSlideController;
     this.mountWhiteboard = mountWhiteboard;
-
+    this.baseScenePath = baseScenePath;
+    this.appId = appId;
     this.viewer = new DocsViewer({
       readonly: box.readonly,
       onNewPageIndex: this.onNewPageIndex,
@@ -48,6 +65,17 @@ export class SlideDocsViewer {
       box.events.on("readonly", handler);
       return () => box.events.off("readonly", handler);
     });
+    this.sideEffect.add(() => {
+      const handleDownloadPdf = (evt: MessageEvent<SavePdfConfig>) => {
+        if (evt.data.type === "@netless/_request_save_pdf_" && evt.data.appId === this.appId) {
+          this.toPdf().catch(() => this.reportProgress(100, null));
+        }
+      };
+      window.addEventListener("message", handleDownloadPdf);
+      return () => {
+        window.removeEventListener("message", handleDownloadPdf);
+      };
+    });
 
     this.render();
   }
@@ -230,4 +258,116 @@ export class SlideDocsViewer {
   }
 
   protected namespace = "netless-app-slide";
+
+  private getWhiteSnapshot(
+    pageIndex: number,
+    canvas: HTMLCanvasElement,
+    ctx: CanvasRenderingContext2D
+  ) {
+    const { width, height } = this.whiteboardView.size;
+    canvas.width = width;
+    canvas.height = height;
+    this.whiteboardView.screenshotToCanvas(
+      ctx,
+      `${this.baseScenePath}/${pageIndex}`,
+      width,
+      height,
+      {
+        centerX: 0,
+        centerY: 0,
+        scale: this.whiteboardView.camera.scale,
+      }
+    );
+  }
+
+  private reportProgress(progress: number, result: { pdf: ArrayBuffer; title: string } | null) {
+    window.postMessage({
+      type: "@netless/_result_save_pdf_",
+      appId: this.appId,
+      progress,
+      result,
+    });
+  }
+
+  private toPdf = async () => {
+    if (!this.slideController) {
+      this.reportProgress(100, null);
+      return;
+    }
+    const { slide } = this.slideController;
+    const MAX = 1920;
+    const resizeCanvas = document.createElement("canvas");
+    const resizeCtx = resizeCanvas.getContext("2d");
+    const { slideCount, width, height } = slide;
+    let pdfWidth = Math.floor(width);
+    let pdfHeight = Math.floor(height);
+    if (pdfWidth > MAX) {
+      pdfWidth = MAX;
+      pdfHeight = Math.floor((height * pdfWidth) / width);
+    }
+    if (pdfHeight > MAX) {
+      pdfHeight = MAX;
+      pdfWidth = Math.floor((width * pdfHeight) / height);
+    }
+    resizeCanvas.width = pdfWidth;
+    resizeCanvas.height = pdfHeight;
+
+    const whiteSnapshotCanvas = document.createElement("canvas");
+    whiteSnapshotCanvas.width = width;
+    whiteSnapshotCanvas.height = height;
+    const whiteCtx = whiteSnapshotCanvas.getContext("2d");
+    if (!whiteCtx || !this.getWhiteSnapshot || !resizeCtx) {
+      this.reportProgress(100, null);
+      return null;
+    }
+
+    const orientation = pdfWidth > pdfHeight ? "l" : "p";
+    const { jsPDF } = await import("jspdf");
+    const pdf = new jsPDF({
+      format: [pdfWidth, pdfHeight],
+      orientation,
+      compress: true,
+    });
+
+    for (let i = 1; i <= slideCount; i++) {
+      let slideSnapshot = null;
+      try {
+        slideSnapshot = await this.slideController.slide.snapshotWithTimingEnd(i);
+      } catch {
+        // ignore
+      }
+
+      if (slideSnapshot) {
+        const img = document.createElement("img");
+        img.src = slideSnapshot;
+        await new Promise(resolve => (img.onload = resolve));
+        resizeCtx.drawImage(img, 0, 0, pdfWidth, pdfHeight);
+      }
+      whiteCtx.clearRect(0, 0, width, height);
+      this.getWhiteSnapshot(i, whiteSnapshotCanvas, whiteCtx);
+      try {
+        const whiteSnapshot = whiteSnapshotCanvas.toDataURL("image/png");
+        const whiteImg = document.createElement("img");
+        whiteImg.src = whiteSnapshot;
+        await new Promise(resolve => (whiteImg.onload = resolve));
+        resizeCtx.drawImage(whiteImg, 0, 0, pdfWidth, pdfHeight);
+      } catch (e) {
+        // ignore
+      }
+
+      const outputDataUrl = resizeCanvas.toDataURL("image/jpeg", 0.6);
+      if (i > 1) {
+        pdf.addPage();
+      }
+      pdf.addImage(outputDataUrl, "JPEG", 0, 0, pdfWidth, pdfHeight, "", "FAST");
+      resizeCtx.clearRect(0, 0, pdfWidth, pdfHeight);
+      const progress = Math.ceil((i / slideCount) * 100);
+      if (progress < 100) {
+        this.reportProgress(Math.ceil((i / slideCount) * 100), null);
+      }
+    }
+    const dataUrl = pdf.output("arraybuffer");
+    const title = this.box.title;
+    this.reportProgress(100, { pdf: dataUrl, title });
+  };
 }

package/src/index.ts

@@ -167,6 +167,8 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
       view,
       mountSlideController,
       mountWhiteboard: context.mountView.bind(context),
+      baseScenePath,
+      appId: context.appId,
     });
 
     if (import.meta.env.DEV) {