@netless/app-slide 0.3.0-canary.13 → 0.3.0-canary.14

package/dist/typings.d.ts

@@ -1,7 +1,7 @@
 import type { ISlideConfig, Slide, SLIDE_EVENTS, SyncEvent } from "@netless/slide";
 import type { RegisterParams } from "@netless/window-manager";
-export declare type SlideState = Slide["slideState"];
-export declare type AddHooks = NonNullable<RegisterParams["addHooks"]>;
+export type SlideState = Slide["slideState"];
+export type AddHooks = NonNullable<RegisterParams["addHooks"]>;
 export interface Attributes {
     /** convert task id */
     taskId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.3.0-canary.13",
+  "version": "0.3.0-canary.14",
   "main": "dist/main.js",
   "module": "dist/main.mjs",
   "types": "dist/index.d.ts",
@@ -10,7 +10,8 @@
     "README-zh.md"
   ],
   "dependencies": {
-    "@netless/slide": "^0.7.4"
+    "@netless/slide": "^0.9.2",
+    "jspdf": "2.5.1"
   },
   "devDependencies": {
     "@types/color-string": "^1.5.2",

package/src/Refrigerator.ts

@@ -1,3 +1,4 @@
+import type { ReadonlyTeleBox } from "@netless/window-manager";
 import type { SlideViewer } from "./SlideViewer";
 import type { AddHooks } from "./typings";
 
@@ -5,10 +6,12 @@ export class Refrigerator {
   threshold = 2;
 
   private _map = new Map<string, SlideViewer>();
+  private _box = new Map<string, ReadonlyTeleBox>();
   private _queue: string[] = [];
 
-  set(appId: string, viewer: SlideViewer) {
+  set(appId: string, viewer: SlideViewer, box: ReadonlyTeleBox) {
     this._map.set(appId, viewer);
+    this._box.set(appId, box);
     if (!this._queue.includes(appId)) {
       this._queue.unshift(appId);
     }
@@ -20,6 +23,7 @@ export class Refrigerator {
 
   delete(appId: string) {
     this._map.delete(appId);
+    this._box.delete(appId);
     this._queue = this._queue.filter(id => id !== appId);
     this._refresh();
   }
@@ -35,6 +39,12 @@ export class Refrigerator {
 
   private _refresh() {
     let viewer: SlideViewer | undefined;
+    // queue = [5, 4, 3, 2, 1]
+    this._queue.sort((a, b) => {
+      const za = this._box.get(a)?.zIndex ?? 0;
+      const zb = this._box.get(b)?.zIndex ?? 0;
+      return -(za - zb);
+    });
     this._queue.forEach((appId, i) => {
       if (!(viewer = this._map.get(appId))) return;
       if (i < this.threshold) {

package/src/SlideViewer/footer.ts

@@ -1,6 +1,8 @@
 import { class_name } from "../constants";
 import { arrowLeftSVG, arrowRightSVG, pauseSVG, playSVG, sidebarSVG } from "../icons";
-import { h, noop, set_class, wrap_class } from "../utils";
+import { hc, noop, wrap_class } from "../utils";
+import { saveSVG } from "../icons/save";
+import { spinnerSVG } from "../icons/spinner";
 
 export function create_footer() {
   type NewPageIndexCallback = (newPageIndex: number) => void;
@@ -24,11 +26,9 @@ export function create_footer() {
   let page_index = 0;
   let page_count = 0;
 
-  const $footer = h("div");
-  set_class($footer, "footer");
+  const $footer = hc("div", "footer");
 
-  const $btnSidebar = h("button");
-  set_class($btnSidebar, "btn-sidebar");
+  const $btnSidebar = hc("button", "btn-sidebar");
   $btnSidebar.classList.add(wrap_class("footer-btn"));
   $btnSidebar.appendChild(sidebarSVG(class_name));
   $btnSidebar.onclick = function on_click_btn_sidebar() {
@@ -38,11 +38,9 @@ export function create_footer() {
   $btnSidebar.style.display = "none";
   $footer.appendChild($btnSidebar);
 
-  const $pageJumps = h("div");
-  set_class($pageJumps, "page-jumps");
+  const $pageJumps = hc("div", "page-jumps");
 
-  const $btnPageBack = h("button");
-  set_class($btnPageBack, "btn-page-back");
+  const $btnPageBack = hc("button", "btn-page-back");
   $btnPageBack.classList.add(wrap_class("footer-btn"));
   $btnPageBack.appendChild(arrowLeftSVG(class_name));
   $btnPageBack.onclick = function on_click_btn_page_back() {
@@ -51,8 +49,7 @@ export function create_footer() {
   };
   $pageJumps.appendChild($btnPageBack);
 
-  const $btnPlay = h("button");
-  set_class($btnPlay, "btn-page-play");
+  const $btnPlay = hc("button", "btn-page-play");
   $btnPlay.classList.add(wrap_class("footer-btn"));
   $btnPlay.appendChild(playSVG(class_name));
   $btnPlay.appendChild(pauseSVG(class_name));
@@ -68,8 +65,7 @@ export function create_footer() {
   };
   $pageJumps.appendChild($btnPlay);
 
-  const $btnPageNext = h("button");
-  set_class($btnPageNext, "btn-page-next");
+  const $btnPageNext = hc("button", "btn-page-next");
   $btnPageNext.classList.add(wrap_class("footer-btn"));
   $btnPageNext.appendChild(arrowRightSVG(class_name));
   $btnPageNext.onclick = function on_click_btn_page_next() {
@@ -78,11 +74,9 @@ export function create_footer() {
   };
   $pageJumps.appendChild($btnPageNext);
 
-  const $pageNumber = h("div");
-  set_class($pageNumber, "page-number");
+  const $pageNumber = hc("div", "page-number");
 
-  const $pageNumberInput = h("input");
-  set_class($pageNumberInput, "page-number-input");
+  const $pageNumberInput = hc("input", "page-number-input");
   $pageNumberInput.value = String(page_index + 1);
   $pageNumberInput.onchange = function on_change_page_number_input() {
     if (readonly) return;
@@ -91,8 +85,7 @@ export function create_footer() {
     }
   };
 
-  const $totalPage = h("span");
-  set_class($totalPage, "total-page");
+  const $totalPage = hc("span", "total-page");
   $totalPage.textContent = " / ";
 
   $pageNumber.appendChild($pageNumberInput);
@@ -103,6 +96,35 @@ export function create_footer() {
 
   const class_readonly = wrap_class("readonly");
 
+  let saveToPdf: (progressCallback: (p: number) => void) => void = noop;
+  const on_save_to_pdf = (callback: (progressCallback: (p: number) => void) => void) => {
+    saveToPdf = callback;
+  };
+  const progressCallback = (p: number) => {
+    if (p < 99) {
+      spinnerIcon.style.display = "block";
+      saveIcon.style.display = "none";
+      const progress = spinnerIcon.querySelector("[data-id]");
+      if (progress) {
+        progress.textContent = p.toString().padStart(2, "0");
+      }
+    } else {
+      spinnerIcon.style.display = "none";
+      saveIcon.style.display = "block";
+    }
+  };
+  const saveIcon = saveSVG(class_name);
+  const spinnerIcon = spinnerSVG(class_name);
+  spinnerIcon.style.display = "none";
+  const $saveBtn = hc("button", "footer-btn");
+  $saveBtn.appendChild(saveIcon);
+  $saveBtn.onclick = function () {
+    saveToPdf(progressCallback);
+  };
+  $saveBtn.appendChild(spinnerIcon);
+
+  $footer.appendChild($saveBtn);
+
   function set_readonly(readonly_: boolean) {
     if (readonly !== readonly_) {
       readonly = readonly_;
@@ -142,5 +164,6 @@ export function create_footer() {
     on_new_page_index,
     on_toggle_preview,
     on_play,
+    on_save_to_pdf,
   };
 }

package/src/SlideViewer/index.ts

@@ -1,6 +1,7 @@
 import type { ISlideConfig } from "@netless/slide";
 import type { SlideAttributes } from "./typings";
 
+import { jsPDF } from "jspdf";
 import { Slide } from "@netless/slide";
 import { SideEffectManager } from "side-effect-manager";
 import { Remitter } from "remitter";
@@ -49,6 +50,10 @@ export class SlideViewer {
 
   readonly slide: Slide;
 
+  private _getWhiteSnapshot:
+    | ((index: number, canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => void)
+    | null = null;
+  private _slideTitle = "";
   private readonly _readyPromise: Promise<void>;
   private readonly _infoPromise: Promise<SlideViewerInfoResponse>;
   private _ready = false;
@@ -69,6 +74,7 @@ export class SlideViewer {
     this.footer.on_new_page_index(this.onNewPageIndex);
     this.footer.on_toggle_preview(this.onTogglePreview);
     this.footer.on_play(this.onPlay);
+    this.footer.on_save_to_pdf(this.toPdf);
 
     // remove dom on cleanup
     this.sideEffect.push(this.sidebar.destroy);
@@ -181,6 +187,16 @@ export class SlideViewer {
     return this._infoPromise.then(callback);
   }
 
+  attachWhiteSnapshot(
+    snapshot: (index: number, canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => void
+  ) {
+    this._getWhiteSnapshot = snapshot;
+  }
+
+  setSlideTitle(title: string) {
+    this._slideTitle = title;
+  }
+
   ready(callback: () => void) {
     return this._readyPromise.then(callback);
   }
@@ -232,4 +248,79 @@ export class SlideViewer {
     this.slide.release();
     this.events.emit("unfreeze");
   }
+
+  toPdf = async (progressCallback: (progress: number) => void) => {
+    const MAX = 1920;
+    const resizeCanvas = document.createElement("canvas");
+    const resizeCtx = resizeCanvas.getContext("2d");
+    const { slideCount, width, height } = this.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) {
+      return null;
+    }
+
+    const orientation = pdfWidth > pdfHeight ? "l" : "p";
+    const pdf = new jsPDF({
+      format: [pdfWidth, pdfHeight],
+      orientation,
+      compress: true,
+    });
+
+    for (let i = 1; i <= slideCount; i++) {
+      const slideSnapshot = await this.slide.snapshotWithTimingEnd(i);
+
+      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);
+      progressCallback(Math.ceil((i / slideCount) * 100));
+    }
+    const dataUrl = pdf.output("arraybuffer");
+    const blob = new Blob([dataUrl]);
+    const downloadUrl = URL.createObjectURL(blob);
+    const element = document.createElement("a");
+    element.setAttribute("href", downloadUrl);
+    element.setAttribute("download", `${this._slideTitle || "snapshot"}.pdf`);
+    element.style.display = "none";
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+    window.postMessage({ type: "@app-slide/_download_pdf_", buf: dataUrl });
+  };
 }

package/src/SlideViewer/sidebar.ts

@@ -1,7 +1,8 @@
+import type { ILazyLoadInstance } from "vanilla-lazyload";
 import type { PreviewPage } from "./typings";
 
 import LazyLoad from "vanilla-lazyload";
-import { append, h, noop, set_class, wrap_class } from "../utils";
+import { append, h, hc, noop, wrap_class } from "../utils";
 
 export function create_sidebar() {
   type NewPageIndexCallback = (newPageIndex: number) => void;
@@ -19,11 +20,9 @@ export function create_sidebar() {
   const class_readonly = wrap_class("readonly");
   const class_preview_active = wrap_class("preview-active");
 
-  const $content = h("div");
-  set_class($content, "content");
+  const $content = hc("div", "content");
 
-  const $previewMask = h("div");
-  set_class($previewMask, "preview-mask");
+  const $previewMask = hc("div", "preview-mask");
   $previewMask.onclick = function on_click_preview_mask(ev) {
     if (readonly) return;
     if (ev.target !== $previewMask) return;
@@ -31,8 +30,7 @@ export function create_sidebar() {
   };
   append($content, $previewMask);
 
-  const $preview = h("div");
-  set_class($preview, "preview");
+  const $preview = hc("div", "preview");
   $preview.classList.add(wrap_class("tele-fancy-scrollbar"));
   $preview.onclick = function on_click_preview(ev) {
     if (readonly) return;
@@ -47,10 +45,7 @@ export function create_sidebar() {
   };
   append($content, $preview);
 
-  const lazyload = new LazyLoad({
-    container: $preview,
-    elements_selector: `.${wrap_class("preview-page>img")}`,
-  });
+  let lazyload: ILazyLoadInstance | undefined;
 
   function set_readonly(readonly_: boolean) {
     if (readonly !== readonly_) {
@@ -63,6 +58,12 @@ export function create_sidebar() {
     if (active !== active_) {
       active = active_;
       $content.classList.toggle(class_preview_active, active);
+      if (active && !lazyload) {
+        lazyload = new LazyLoad({
+          container: $preview,
+          elements_selector: `.${wrap_class("preview-page>img")}`,
+        });
+      }
     }
   }
 
@@ -89,8 +90,8 @@ export function create_sidebar() {
         const $img = h("img");
         $img.width = page.width;
         $img.height = page.height;
-        $img.src = page.thumbnail;
         $img.alt = `page-${i}`;
+        $img.dataset.src = page.thumbnail;
         $img.dataset.pageIndex = pageIndex;
 
         append($page, $img);
@@ -99,7 +100,7 @@ export function create_sidebar() {
       });
 
       if (!destroyed) {
-        lazyload.update();
+        lazyload?.update();
       }
     }
   }
@@ -118,7 +119,7 @@ export function create_sidebar() {
 
   function destroy() {
     destroyed = true;
-    lazyload.destroy();
+    lazyload?.destroy();
   }
 
   function get_active() {

package/src/connect.ts

@@ -23,6 +23,30 @@ export function connect({ context, storage, viewer, sideEffect, logger }: Connec
     width && context.box.setStageRatio(height / width);
     whiteboard = context.createWhiteBoardView({ size: slideCount });
     whiteboard.setBaseRect({ width, height });
+
+    viewer.setSlideTitle(context.box.title);
+    viewer.attachWhiteSnapshot(
+      (index: number, canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => {
+        if (!whiteboard) {
+          return null;
+        }
+        const scenePath = whiteboard.pageState.pages[index - 1];
+        canvas.width = whiteboard.view.size.width;
+        canvas.height = whiteboard.view.size.height;
+        whiteboard.view.screenshotToCanvas(
+          ctx,
+          scenePath,
+          whiteboard.view.size.width,
+          whiteboard.view.size.height,
+          {
+            centerX: 0,
+            centerY: 0,
+            scale: whiteboard.view.camera.scale,
+          }
+        );
+      }
+    );
+
     kick_start();
   });
 

package/src/icons/save.ts

@@ -0,0 +1,18 @@
+export function saveSVG(namespace: string): SVGElement {
+  const NS = "http://www.w3.org/2000/svg";
+
+  const $svg = document.createElementNS(NS, "svg");
+  $svg.setAttribute("class", `${namespace}-footer-icon-save`);
+  $svg.setAttribute("viewBox", "0 0 448 512");
+
+  const $path = document.createElementNS(NS, "path");
+  $path.setAttribute("fill", "currentColor");
+  $path.setAttribute(
+    "d",
+    "M224 256c-35.2 0-64 28.8-64 64c0 35.2 28.8 64 64 64c35.2 0 64-28.8 64-64C288 284.8 259.2 256 224 256zM433.1 129.1l-83.9-83.9C341.1 37.06 328.8 32 316.1 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V163.9C448 151.2 442.9 138.9 433.1 129.1zM128 80h144V160H128V80zM400 416c0 8.836-7.164 16-16 16H64c-8.836 0-16-7.164-16-16V96c0-8.838 7.164-16 16-16h16v104c0 13.25 10.75 24 24 24h192C309.3 208 320 197.3 320 184V83.88l78.25 78.25C399.4 163.2 400 164.8 400 166.3V416z"
+  );
+
+  $svg.appendChild($path);
+
+  return $svg;
+}

package/src/icons/spinner.ts

@@ -0,0 +1,37 @@
+export function spinnerSVG(namespace: string): SVGElement {
+  const NS = "http://www.w3.org/2000/svg";
+
+  const $svg = document.createElementNS(NS, "svg");
+  $svg.setAttribute("class", `${namespace}-footer-icon-spinner`);
+  $svg.setAttribute("viewBox", "0 0 512 512");
+
+  const $path = document.createElementNS(NS, "path");
+  $path.setAttribute("fill", "currentColor");
+  $path.setAttribute(
+    "d",
+    "M304 48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zm0 416c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM48 304c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm464-48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM142.9 437c18.7-18.7 18.7-49.1 0-67.9s-49.1-18.7-67.9 0s-18.7 49.1 0 67.9s49.1 18.7 67.9 0zm0-294.2c18.7-18.7 18.7-49.1 0-67.9S93.7 56.2 75 75s-18.7 49.1 0 67.9s49.1 18.7 67.9 0zM369.1 437c18.7 18.7 49.1 18.7 67.9 0s18.7-49.1 0-67.9s-49.1-18.7-67.9 0s-18.7 49.1 0 67.9z"
+  );
+
+  const $animate = document.createElementNS(NS, "animateTransform");
+  $animate.setAttribute("attributeName", "transform");
+  $animate.setAttribute("attributeType", "xml");
+  $animate.setAttribute("type", "rotate");
+  $animate.setAttribute("from", "0 256 256");
+  $animate.setAttribute("to", "360 256 256");
+  $animate.setAttribute("begin", "0s");
+  $animate.setAttribute("dur", "2s");
+  $animate.setAttribute("fill", "freeze");
+  $animate.setAttribute("repeatCount", "indefinite");
+  $path.appendChild($animate);
+
+  const $progress = document.createElementNS(NS, "text");
+  $progress.setAttribute("x", "125");
+  $progress.setAttribute("y", "345");
+  $progress.setAttribute("data-id", "progress");
+  $progress.style.fontSize = "246px";
+  $progress.textContent = "20";
+  $svg.appendChild($progress);
+  $svg.appendChild($path);
+
+  return $svg;
+}

package/src/index.ts

@@ -70,7 +70,7 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
     // For debugging.
     Object.assign(viewer, { context, logger });
 
-    sideEffect.push(refrigerator.set(context.appId, viewer));
+    sideEffect.push(refrigerator.set(context.appId, viewer, context.box));
 
     if (import.meta.env.DEV) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/preview.ts

@@ -1,11 +1,11 @@
 import type { SlideViewerOptions } from "./SlideViewer";
 
 import { SlideViewer } from "./SlideViewer";
+import { hc } from "./utils";
 
 export function previewSlide(options: SlideViewerOptions & { container: HTMLElement }) {
   const { container, ...slideOptions } = options;
-  const wrapper = document.createElement("div");
-  wrapper.className = "netless-app-slide-preview-wrapper";
+  const wrapper = hc("div", "preview-wrapper");
   const viewer = new SlideViewer(slideOptions);
   wrapper.appendChild(document.createElement("style")).textContent = SlideViewer.styles;
   wrapper.appendChild(viewer.$content);