@netless/app-slide 0.3.0-canary.1 → 0.3.0-canary.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.3.0-canary.1",
+  "version": "0.3.0-canary.2",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",

package/src/SlideViewer.ts

@@ -371,7 +371,10 @@ function on_visibility_change(callback: (visible: boolean) => void) {
   return noop;
 }
 
-export type SlideViewerOptions = Omit<ISlideConfig, "anchor"> & SlideAttributes;
+export type SlideViewerOptions = Omit<ISlideConfig, "anchor" | "mode" | "interactive"> & {
+  mode?: ISlideConfig["mode"];
+  interactive?: ISlideConfig["interactive"];
+} & SlideAttributes;
 
 export interface SlideViewerInfoResponse {
   width: number;
@@ -443,6 +446,8 @@ export class SlideViewer {
     this.slide = new Slide({
       anchor: this.$slide,
       resize: true,
+      mode: "local",
+      interactive: true,
       enableGlobalClick: true,
       ...options,
     });
@@ -453,6 +458,11 @@ export class SlideViewer {
       resolveFetching = resolve;
     });
 
+    this.slide.on("slideChange", page => {
+      if (this._destroyed) return;
+      this.setPage(page);
+    });
+
     this.slide.on("renderEnd", () => {
       if (!this._ready)
         setTimeout(() => {

package/src/index.ts

@@ -8,7 +8,6 @@ import ColorString from "color-string";
 import { SideEffectManager } from "side-effect-manager";
 import { SlideViewer } from "./SlideViewer";
 import { refrigerator, addHooks } from "./Refrigerator";
-import { noop } from "./utils";
 
 export { SlideViewer, refrigerator, addHooks };
 
@@ -25,10 +24,12 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
 
     const options = context.getAppOptions() || {};
     const debug = Boolean(options.debug);
+    const logger = make_logger(context);
+    logger.info("[Slide] setup @ " + __APP_VERSION__);
 
     const sideEffect = new SideEffectManager();
 
-    // create ui
+    // Create UI
     const viewer = new SlideViewer({
       interactive: true,
       mode: "interactive",
@@ -36,7 +37,7 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
       enableGlobalClick: true,
       controller: debug,
       timestamp: make_timestamp(context),
-      logger: make_logger(context),
+      logger,
       renderOptions: {
         minFPS: options.minFPS || 25,
         maxFPS: options.maxFPS || 30,
@@ -61,18 +62,18 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
       (window as any).slideViewer = viewer;
     }
 
-    // mount ui
+    // Mount UI
     context.box.mountStyles(SlideViewer.styles);
     context.box.mountStage(viewer.$slide);
     context.box.mountFooter(viewer.$footer);
     context.box.mountContent(viewer.$content);
     sideEffect.addDisposer(() => viewer.destroy());
 
-    // connect ui with netless app
-    connect({ context, viewer, sideEffect, debug });
+    // Connect UI with Netless App
+    connect({ context, viewer, sideEffect, logger });
 
     onUnmount(context, () => {
-      console.log("[Slide] destroy");
+      logger.info("[Slide] destroy");
       sideEffect.flushAll();
     });
   },
@@ -88,7 +89,6 @@ export function previewSlide(options: SlideViewerOptions & { container: HTMLElem
   container.appendChild(viewer.$content);
   container.appendChild(viewer.$footer);
   viewer.prepare(() => viewer.slide.renderSlide(1));
-  viewer.slide.on("slideChange", page => viewer.setPage(page));
   return viewer;
 }
 
@@ -104,7 +104,7 @@ function make_timestamp(context: AppContext): () => number {
   }
 }
 
-function make_logger(context: AppContext) {
+function make_logger(context: AppContext): { info: (msg: string) => void } {
   if (import.meta.env.DEV) {
     return { info: console.debug.bind(console) };
   }
@@ -155,11 +155,11 @@ interface ConnectParams {
   context: AppContext;
   viewer: SlideViewer;
   sideEffect: SideEffectManager;
-  debug: boolean;
+  logger: { info: (msg: string) => void };
 }
 
-function connect({ context, viewer, sideEffect, debug }: ConnectParams) {
-  const log = debug ? console.log.bind(console) : noop;
+function connect({ context, viewer, sideEffect, logger }: ConnectParams) {
+  const log = import.meta.env.DEV ? console.log.bind(console) : logger.info.bind(logger);
 
   let whiteboard: WhiteBoardView | null = null;
 
@@ -229,9 +229,10 @@ function connect({ context, viewer, sideEffect, debug }: ConnectParams) {
 
   // save state
   slide.on("slideChange", page => {
-    log("[Slide] page to", page);
-    whiteboard && whiteboard.jumpPage(page - 1);
-    viewer.setPage(page);
+    if (context.isWritable && whiteboard) {
+      log("[Slide] page to", page);
+      whiteboard.jumpPage(page - 1);
+    }
   });
 
   // handle ui events