@netless/app-slide 0.0.54 → 0.0.57

package/dist/typings.d.ts

@@ -12,3 +12,8 @@ export declare type MagixPayload = {
     type: typeof SLIDE_EVENTS.syncDispatch;
     payload: SyncEvent;
 };
+export declare type MagixEvents = {
+    [SLIDE_EVENTS.syncDispatch]: MagixPayload;
+};
+export interface A {
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.0.54",
+  "version": "0.0.57",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -11,7 +11,7 @@
   ],
   "devDependencies": {
     "@netless/app-shared": "^0.1.1",
-    "@netless/slide": "^0.2.1",
+    "@netless/slide": "^0.2.7",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.0",
     "side-effect-manager": "^0.1.5",

package/src/DocsViewer/index.ts

@@ -298,6 +298,9 @@ export class DocsViewer {
         $pageNumberInput.disabled = true;
       }
       this.$pageNumberInput = $pageNumberInput;
+      this.sideEffect.addEventListener($pageNumberInput, "focus", () => {
+        $pageNumberInput.select();
+      });
       this.sideEffect.addEventListener($pageNumberInput, "change", () => {
         if (this.readonly) {
           return;

package/src/DocsViewer/style.scss

@@ -176,7 +176,7 @@ $namespace: $slide-namespace;
 .#{$namespace}-page-number-input {
   border: none;
   outline: none;
-  width: 1.5em;
+  width: 3em;
   margin: 0;
   padding: 0 2px;
   text-align: right;

package/src/SlideController/index.ts

@@ -8,10 +8,9 @@
 // 4. automatically re-create scenes to sync strokes, a view must be existing
 // 5. pages information are loaded dynamically by the slide package
 
-import type { Event as MagixEvent } from "white-web-sdk";
 import type { AppContext, Player, Room } from "@netless/window-manager";
 import type { SyncEvent } from "@netless/slide";
-import type { Attributes, MagixPayload, SlideState } from "../typings";
+import type { Attributes, MagixEvents, MagixPayload, SlideState } from "../typings";
 
 import { SideEffectManager } from "side-effect-manager";
 import { Slide, SLIDE_EVENTS } from "@netless/slide";
@@ -29,7 +28,7 @@ export const EmptyAttributes: Attributes = {
 };
 
 export interface SlideControllerOptions {
-  context: AppContext<Attributes>;
+  context: AppContext<Attributes, MagixEvents>;
   anchor: HTMLDivElement;
   onPageChanged: (page: number) => void;
   onTransitionStart: () => void;
@@ -37,11 +36,14 @@ export interface SlideControllerOptions {
   onError: (args: { error: Error }) => void;
 }
 
+type MagixEventListener = Parameters<
+  AppContext<Attributes, MagixEvents>["addMagixEventListener"]
+>[1];
+
 export class SlideController {
   public readonly context: SlideControllerOptions["context"];
   public readonly slide: Slide;
 
-  private readonly channel: string;
   private readonly room?: Room;
   private readonly player?: Player;
   private readonly sideEffect = new SideEffectManager();
@@ -66,7 +68,6 @@ export class SlideController {
     this.onTransitionEnd = onTransitionEnd;
     this.onError = onError;
     this.context = context;
-    this.channel = `channel-${context.appId}`;
     this.room = context.getRoom();
     this.player = this.room ? undefined : (context.getDisplayer() as Player);
     this.slide = this.createSlide(anchor);
@@ -137,20 +138,11 @@ export class SlideController {
       return disposer;
     });
 
-    this.sideEffect.add(() => {
-      context.emitter.on("seek", this.onSeeked);
-      return () => context.emitter.off("seek", this.onSeeked);
-    });
-
-    this.sideEffect.add(() => {
-      const displayer = context.getDisplayer();
-      displayer.addMagixEventListener(this.channel, this.magixEventListener, {
+    this.sideEffect.add(() =>
+      context.addMagixEventListener(SLIDE_EVENTS.syncDispatch, this.magixEventListener, {
         fireSelfEventAfterCommit: true,
-      });
-      // here we do not pass second param -- the listener
-      // because channel name is already unique, just make it simpler
-      return () => displayer.removeMagixEventListener(this.channel);
-    });
+      })
+    );
 
     slide.on(SLIDE_EVENTS.slideChange, this.onPageChanged);
     slide.on(SLIDE_EVENTS.renderStart, this.onTransitionStart);
@@ -171,12 +163,12 @@ export class SlideController {
         payload: event,
       };
       log("[Slide] dispatch", event);
-      this.room.dispatchMagixEvent(this.channel, payload);
+      this.context.dispatchMagixEvent(SLIDE_EVENTS.syncDispatch, payload);
     }
   };
 
-  private magixEventListener = (ev: MagixEvent) => {
-    if (ev.event === this.channel && isObj(ev.payload)) {
+  private magixEventListener: MagixEventListener = ev => {
+    if (ev.event === SLIDE_EVENTS.syncDispatch && isObj(ev.payload)) {
       const { type, payload } = ev.payload as MagixPayload;
       if (type === SLIDE_EVENTS.syncDispatch) {
         this.syncStateOnce();
@@ -189,7 +181,7 @@ export class SlideController {
   private syncStateOnce() {
     // sync state before the first event, so that they can be in the correct order
     if (this.syncStateOnceFlag) {
-      const { state } = { ...EmptyAttributes, ...this.context.getAttributes() };
+      const { state } = { ...EmptyAttributes, ...this.context.storage.state };
       if (state) {
         log("[Slide] sync with state (once)", deepClone(state));
         this.slide.setSlideState(deepClone(state));
@@ -201,15 +193,7 @@ export class SlideController {
   private onStateChange = (state: SlideState) => {
     if (this.context.getIsWritable()) {
       verbose("[Slide] state change", JSON.stringify(state, null, 2));
-      this.context.updateAttributes(["state"], state);
-    }
-  };
-
-  private onSeeked = () => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const state = this.context.getAttributes()!.state;
-    if (state) {
-      this.slide.setSlideState(deepClone(state));
+      this.context.storage.setState({ state });
     }
   };
 
@@ -251,6 +235,7 @@ export class SlideController {
       mode: "interactive",
       resize: true,
       controller: logger.enable,
+      enableGlobalClick: true,
       renderOptions: {
         minFPS: 25,
         maxFPS: 30,

package/src/SlidePreviewer/index.ts

@@ -122,6 +122,7 @@ export class SlidePreviewer {
       mode: "local",
       resize: true,
       controller: this.debug,
+      enableGlobalClick: true,
       renderOptions: {
         minFPS: 25,
         maxFPS: 30,

package/src/index.ts

@@ -1,12 +1,11 @@
 import type { NetlessApp } from "@netless/window-manager";
 import type { RoomState } from "white-web-sdk";
+import type { Slide } from "@netless/slide";
 import type { MountSlideOptions } from "./SlideDocsViewer";
-import type { Attributes } from "./typings";
+import type { Attributes, MagixEvents } from "./typings";
 import type { AddHooks, FreezableSlide } from "./utils/freezer";
-import { useFreezer } from "./utils/freezer";
 
 import { SideEffectManager } from "side-effect-manager";
-import { ensureAttributes } from "@netless/app-shared";
 import {
   DefaultUrl,
   EmptyAttributes,
@@ -14,7 +13,7 @@ import {
   SlideController,
 } from "./SlideController";
 import { SlideDocsViewer } from "./SlideDocsViewer";
-import { apps, FreezerLength, addHooks } from "./utils/freezer";
+import { apps, FreezerLength, addHooks, useFreezer } from "./utils/freezer";
 import { log, logger } from "./utils/logger";
 import styles from "./style.scss?inline";
 
@@ -27,17 +26,31 @@ export const version = __APP_VERSION__;
 
 export { DefaultUrl, apps, FreezerLength, addHooks };
 
-const SlideApp: NetlessApp<Attributes> = {
+export interface AppOptions {
+  debug?: boolean;
+  resolution?: number;
+  bgColor?: string;
+}
+
+export interface Controller {
+  slide: () => Slide | undefined;
+  position: () => [page: number, pageCount: number] | undefined;
+  nextStep: () => boolean;
+  prevStep: () => boolean;
+  nextPage: () => boolean;
+  prevPage: () => boolean;
+}
+
+const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, Controller> = {
   kind: "Slide",
   setup(context) {
     console.log("[Slide] setup @ " + version);
 
     if (context.getIsWritable()) {
-      ensureAttributes(context, EmptyAttributes);
+      context.storage.ensureState(EmptyAttributes);
     }
 
-    const attributes = context.getAttributes();
-    if (!attributes?.taskId) {
+    if (!context.storage.state.taskId) {
       throw new Error("[Slide] no taskId");
     }
 
@@ -85,7 +98,15 @@ const SlideApp: NetlessApp<Attributes> = {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (window as any).slideController = slideController;
       }
-      slideController.readyPromise.then(options.onReady);
+      slideController.readyPromise.then(options.onReady).then(() => {
+        const room = context.getRoom();
+        let synced = false;
+        if (room && context.getIsWritable()) {
+          syncSceneWithSlide(room, context, slideController.slide, baseScenePath);
+          synced = true;
+        }
+        log("[Slide] page to", slideController.slide.slideState.currentSlideIndex, synced);
+      });
       return slideController;
     };
 
@@ -135,6 +156,54 @@ const SlideApp: NetlessApp<Attributes> = {
     });
 
     docsViewer.mount();
+
+    return {
+      slide: () => {
+        return docsViewer?.slideController?.slide;
+      },
+      nextStep: () => {
+        if (docsViewer && docsViewer.slideController) {
+          docsViewer?.slideController?.slide.nextStep();
+          return true;
+        }
+        return false;
+      },
+      prevStep: () => {
+        if (docsViewer && docsViewer.slideController) {
+          docsViewer?.slideController?.slide.prevStep();
+          return true;
+        }
+        return false;
+      },
+      position: () => {
+        const controller = docsViewer?.slideController;
+        if (controller) {
+          return [controller.page, controller.pageCount] as [page: number, pageCount: number];
+        }
+      },
+      nextPage: () => {
+        const controller = docsViewer?.slideController;
+        if (controller) {
+          const { page, pageCount } = controller;
+          if (pageCount > 0 && page < pageCount) {
+            controller.jumpToPage(page + 1);
+            return true;
+          }
+        }
+        return false;
+      },
+      prevPage: () => {
+        const controller = docsViewer?.slideController;
+        if (controller) {
+          const { page, pageCount } = controller;
+          if (pageCount > 0 && page > 1) {
+            controller.jumpToPage(page - 1);
+            return true;
+          }
+        }
+        return false;
+      },
+    };
   },
 };
 

package/src/typings.ts

@@ -15,3 +15,9 @@ export type MagixPayload = {
   type: typeof SLIDE_EVENTS.syncDispatch;
   payload: SyncEvent;
 };
+
+export type MagixEvents = {
+  [SLIDE_EVENTS.syncDispatch]: MagixPayload;
+};
+
+export interface A {}