@netless/app-slide 0.0.33 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.0.33",
+  "version": "0.0.38",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -11,9 +11,9 @@
   ],
   "devDependencies": {
     "@netless/app-shared": "^0.1.1",
-    "@netless/slide": "^0.1.37",
+    "@netless/slide": "^0.1.40",
     "@types/color-string": "^1.5.2",
-    "color-string": "^1.8.2",
+    "color-string": "^1.9.0",
     "side-effect-manager": "^0.1.5",
     "vanilla-lazyload": "^17.5.0"
   },

package/src/SlidePreviewer/index.ts

@@ -1,9 +1,11 @@
+import { SideEffectManager } from "side-effect-manager";
 import { Slide, SLIDE_EVENTS } from "@netless/slide";
 import { DocsViewer } from "../DocsViewer";
 import { createDocsViewerPages, DefaultUrl } from "../SlideController";
 import { cachedGetBgColor } from "../utils/bgcolor";
 import { clamp } from "../utils/helpers";
 import { log } from "../utils/logger";
+import style from "../style.scss?inline";
 
 export interface PreviewParams {
   container: HTMLElement;
@@ -44,9 +46,12 @@ export class SlidePreviewer {
   public debug = import.meta.env.DEV;
 
   public $slide!: HTMLDivElement;
+
+  private readonly sideEffect = new SideEffectManager();
+
   public ready = false;
   private resolveReady!: () => void;
-  public readonly readyPromise = new Promise<void>((resolve) => {
+  public readonly readyPromise = new Promise<void>(resolve => {
     this.resolveReady = () => {
       this.ready = true;
       resolve();
@@ -66,9 +71,29 @@ export class SlidePreviewer {
 
   public render() {
     this.viewer.$content.appendChild(this.renderSlideContainer());
+    this.sideEffect.addEventListener(window, "keydown", ev => {
+      if (this.slide) {
+        switch (ev.key) {
+          case "ArrowUp":
+          case "ArrowLeft": {
+            this.slide.prevStep();
+            break;
+          }
+          case "ArrowRight":
+          case "ArrowDown": {
+            this.slide.nextStep();
+            break;
+          }
+          default: {
+            break;
+          }
+        }
+      }
+    });
   }
 
   public mount(taskId: string, url: string) {
+    this.target.appendChild(this.renderStyle());
     this.target.appendChild(this.viewer.$content);
     this.target.appendChild(this.viewer.$footer);
 
@@ -93,6 +118,12 @@ export class SlidePreviewer {
     this.slide.renderSlide(1);
   }
 
+  protected renderStyle(): HTMLElement {
+    const element = document.createElement("style");
+    element.appendChild(document.createTextNode(style));
+    return element;
+  }
+
   protected registerEventListeners() {
     if (!this.slide) return;
     const { slide } = this;
@@ -127,6 +158,7 @@ export class SlidePreviewer {
 
   private destroyed = false;
   public destroy() {
+    this.sideEffect.flushAll();
     if (this.slide && !this.destroyed) {
       log("[Slide] destroy slide (once)");
       this.slide.destroy();
@@ -138,7 +170,7 @@ export class SlidePreviewer {
   protected refreshPages = () => {
     if (this.slide) {
       this.viewer.pages = createDocsViewerPages(this.slide);
-      this.viewer.setPageIndex(this.getPageIndex(this.slide.slideCount));
+      this.viewer.setPageIndex(this.getPageIndex(this.slide.slideState.currentSlideIndex));
     }
   };
 

package/src/index.ts

@@ -22,11 +22,15 @@ export { SlidePreviewer, default as previewSlide } from "./SlidePreviewer";
 
 export type { Attributes, AddHooks, FreezableSlide };
 
+export const version = "0.0.37";
+
 export { DefaultUrl, apps, FreezerLength, addHooks };
 
 const SlideApp: NetlessApp<Attributes> = {
   kind: "Slide",
   setup(context) {
+    console.log("[Slide] setup @ " + version);
+
     if (context.getIsWritable()) {
       ensureAttributes(context, EmptyAttributes);
     }
@@ -44,6 +48,11 @@ const SlideApp: NetlessApp<Attributes> = {
 
     const box = context.getBox();
     box.mountStyles(styles);
+    try {
+      box.$content.dataset.appSlideVersion = version;
+    } catch {
+      // ignore
+    }
 
     // must exist because of view
     const baseScenePath = context.getInitScenePath() as string;