@netless/app-slide 0.1.2 → 0.1.5

package/dist/utils/logger.d.ts

@@ -1,4 +1,7 @@
 import type { SlideController } from "../SlideController";
+declare type DebugMessage = {
+    slide: boolean | "__instance" | "__debug";
+};
 declare class Logger {
     enable: boolean;
     apps: Record<string, {
@@ -10,9 +13,12 @@ declare class Logger {
     log(...args: Parameters<Console["log"]>): void;
     verbose(...args: Parameters<Console["log"]>): void;
     dispose(appId: string): void;
-    _onMessage: (ev: MessageEvent<{
-        slide: boolean | "__instance";
-    }>) => void;
+    /**
+     * @example
+     * window.postMessage({ slide: '__debug' })
+     * window.dispatchEvent(new MessageEvent('message', { data: { slide: '__debug' } }))
+     */
+    _onMessage: (ev: MessageEvent<DebugMessage> | CustomEvent<DebugMessage>) => void;
 }
 export declare const logger: Logger;
 export declare const log: (...args: Parameters<Console["log"]>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "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.9",
+    "@netless/slide": "^0.2.10",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.0",
     "side-effect-manager": "^0.1.5",

package/src/SlideController/index.ts

@@ -11,6 +11,7 @@
 import type { AppContext, Player, Room } from "@netless/window-manager";
 import type { SyncEvent } from "@netless/slide";
 import type { Attributes, MagixEvents, MagixPayload, SlideState } from "../typings";
+import type { AppOptions } from "..";
 
 import { SideEffectManager } from "side-effect-manager";
 import { Slide, SLIDE_EVENTS } from "@netless/slide";
@@ -28,7 +29,7 @@ export const EmptyAttributes: Attributes = {
 };
 
 export interface SlideControllerOptions {
-  context: AppContext<Attributes, MagixEvents>;
+  context: AppContext<Attributes, MagixEvents, AppOptions>;
   anchor: HTMLDivElement;
   onPageChanged: (page: number) => void;
   onTransitionStart: () => void;
@@ -246,10 +247,10 @@ export class SlideController {
       controller: logger.enable,
       enableGlobalClick: true,
       renderOptions: {
-        minFPS: 25,
-        maxFPS: 30,
-        autoFPS: true,
-        autoResolution: true,
+        minFPS: this.context.getAppOptions()?.minFPS || 25,
+        maxFPS: this.context.getAppOptions()?.maxFPS || 30,
+        autoFPS: this.context.getAppOptions()?.autoFPS ?? true,
+        autoResolution: this.context.getAppOptions()?.autoResolution ?? true,
         resolution: this.context.getAppOptions()?.resolution,
         transactionBgColor: this.context.getAppOptions()?.bgColor || cachedGetBgColor(anchor),
       },

package/src/index.ts

@@ -27,9 +27,20 @@ export const version = __APP_VERSION__;
 export { DefaultUrl, apps, FreezerLength, addHooks };
 
 export interface AppOptions {
+  /** show debug controller */
   debug?: boolean;
+  /** scale */
   resolution?: number;
+  /** background color for slide animations */
   bgColor?: string;
+  /** minimal fps @default 25 */
+  minFPS?: number;
+  /** maximal fps @default 30 */
+  maxFPS?: number;
+  /** automatically decrease fps @default true */
+  autoFPS?: boolean;
+  /** whether to re-scale automatically @default true */
+  autoResolution?: boolean;
 }
 
 export interface Controller {

package/src/utils/logger.ts

@@ -1,6 +1,8 @@
 import type { SlideController } from "../SlideController";
 import { isObj } from "./helpers";
 
+type DebugMessage = { slide: boolean | "__instance" | "__debug" };
+
 class Logger {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public apps: Record<string, { context?: any; controller?: SlideController }> = {};
@@ -23,12 +25,28 @@ class Logger {
     delete this.apps[appId];
     window.removeEventListener("message", this._onMessage);
   }
-  _onMessage = (ev: MessageEvent<{ slide: boolean | "__instance" }>) => {
-    if (isObj(ev.data)) {
-      if (typeof ev.data.slide === "boolean") {
-        this.enable = ev.data.slide;
-      } else if (ev.data.slide === "__instance") {
+  /**
+   * @example
+   * window.postMessage({ slide: '__debug' })
+   * window.dispatchEvent(new MessageEvent('message', { data: { slide: '__debug' } }))
+   */
+  _onMessage = (ev: MessageEvent<DebugMessage> | CustomEvent<DebugMessage>) => {
+    let data: DebugMessage | undefined;
+    if (ev instanceof CustomEvent) {
+      data = ev.detail;
+    } else if (isObj(ev.data)) {
+      data = ev.data;
+    }
+    if (data) {
+      if (typeof data.slide === "boolean") {
+        this.enable = data.slide;
+      } else if (data.slide === "__instance") {
         console.log(this);
+      } else if (data.slide === "__debug") {
+        Object.values(this.apps).forEach(app => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (app.controller?.slide as any)?.createController();
+        });
       }
     }
   };