@netless/app-slide 0.2.39 → 0.2.40

package/src/utils/bgcolor.ts

@@ -1,45 +1,45 @@
-import ColorString from "color-string";
-import { log } from "./logger";
-
-export function guessBgColor(el: HTMLElement): string {
-  try {
-    const bg = window.getComputedStyle(el).backgroundColor;
-    if (bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
-      return bg;
-    }
-    if (el.parentElement) {
-      return guessBgColor(el.parentElement);
-    }
-  } catch {
-    // ignore any error
-  }
-  return "#ffffff";
-}
-
-export function toHex(color: string): string {
-  const result = ColorString.get(color);
-  if (result && result.model === "rgb") {
-    const args = result.value;
-
-    // https://github.com/Qix-/color-convert/blob/8dfdbbc6b46fa6a305bf394d942cc1b08e23fca5/conversions.js#L616
-    const integer =
-      ((Math.round(args[0]) & 0xff) << 16) +
-      ((Math.round(args[1]) & 0xff) << 8) +
-      (Math.round(args[2]) & 0xff);
-
-    const string = integer.toString(16);
-    return "#" + "000000".substring(string.length) + string;
-  } else {
-    return color;
-  }
-}
-
-let cachedBgColor = "";
-
-export function cachedGetBgColor(el: HTMLElement): string {
-  if (!cachedBgColor) {
-    cachedBgColor = toHex(guessBgColor(el));
-    log("[Slide] guess bg color", cachedBgColor);
-  }
-  return cachedBgColor;
-}
+import ColorString from "color-string";
+import { log } from "./logger";
+
+export function guessBgColor(el: HTMLElement): string {
+  try {
+    const bg = window.getComputedStyle(el).backgroundColor;
+    if (bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+      return bg;
+    }
+    if (el.parentElement) {
+      return guessBgColor(el.parentElement);
+    }
+  } catch {
+    // ignore any error
+  }
+  return "#ffffff";
+}
+
+export function toHex(color: string): string {
+  const result = ColorString.get(color);
+  if (result && result.model === "rgb") {
+    const args = result.value;
+
+    // https://github.com/Qix-/color-convert/blob/8dfdbbc6b46fa6a305bf394d942cc1b08e23fca5/conversions.js#L616
+    const integer =
+      ((Math.round(args[0]) & 0xff) << 16) +
+      ((Math.round(args[1]) & 0xff) << 8) +
+      (Math.round(args[2]) & 0xff);
+
+    const string = integer.toString(16);
+    return "#" + "000000".substring(string.length) + string;
+  } else {
+    return color;
+  }
+}
+
+let cachedBgColor = "";
+
+export function cachedGetBgColor(el: HTMLElement): string {
+  if (!cachedBgColor) {
+    cachedBgColor = toHex(guessBgColor(el));
+    log("[Slide] guess bg color", cachedBgColor);
+  }
+  return cachedBgColor;
+}

package/src/utils/freezer.ts

@@ -1,116 +1,116 @@
-import type { ReadonlyTeleBox, RegisterParams } from "@netless/window-manager";
-import { log } from "./logger";
-
-export interface FreezableSlide {
-  freeze: () => void;
-  unfreeze: () => void;
-}
-
-export let useFreezer = false;
-export let FreezerLength = 2;
-
-export function getFreezerLength() {
-  return FreezerLength;
-}
-
-/** @param length - must be >= 1, default is 2 */
-export function setFreezerLength(length: number) {
-  FreezerLength = length < 1 ? Infinity : length;
-}
-
-const inspect = (arr: string[]) => {
-  return "[" + arr + "]";
-};
-
-export const apps = {
-  map: new Map<string, FreezableSlide>(),
-  boxes: new Map<string, ReadonlyTeleBox>(),
-  queue: [] as string[],
-  validateQueue() {
-    // queue = [5, 4, 3, 2, 1]
-    this.queue.sort((a, b) => {
-      const za = this.boxes.get(a)?.zIndex ?? 0;
-      const zb = this.boxes.get(b)?.zIndex ?? 0;
-      return -(za - zb);
-    });
-    log("[Slide] freezer: validate", inspect(this.queue));
-    while (this.queue.length > FreezerLength) {
-      const appId = this.queue.pop() as string;
-      const slide = this.map.get(appId);
-      if (slide) {
-        log("[Slide] freezer: validate-freeze", appId, inspect(this.queue));
-        slide.freeze();
-      }
-    }
-  },
-  set(appId: string, slide: FreezableSlide, box: ReadonlyTeleBox) {
-    log("[Slide] freezer: add", appId, inspect(this.queue));
-    this.map.set(appId, slide);
-    this.boxes.set(appId, box);
-    if (!this.queue.includes(appId)) {
-      this.queue.unshift(appId);
-    }
-    this.validateQueue();
-  },
-  delete(appId: string) {
-    this.map.delete(appId);
-    this.boxes.delete(appId);
-    this.queue = this.queue.filter(id => id !== appId);
-    log("[Slide] freezer: delete", appId, inspect(this.queue));
-  },
-  focus(appId: string) {
-    const slide = this.map.get(appId);
-    const index = this.queue.indexOf(appId);
-    if (index > -1) {
-      this.queue.splice(index, 1);
-    }
-    this.queue.unshift(appId);
-    this.validateQueue();
-    log("[Slide] freezer: focus", appId, inspect(this.queue));
-    if (slide) {
-      slide.unfreeze();
-    }
-  },
-};
-
-if (import.meta.env.DEV) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (window as any).freezer = apps;
-}
-
-const on_created_callbacks = new Set<(appId: string) => void>();
-
-export function onCreated(callback: (appId: string) => void) {
-  on_created_callbacks.add(callback);
-  return () => on_created_callbacks.delete(callback);
-}
-
-const on_destroyed_callbacks = new Set<(appId: string) => void>();
-
-export function onDestroyed(callback: (appId: string) => void) {
-  on_destroyed_callbacks.add(callback);
-  return () => on_destroyed_callbacks.delete(callback);
-}
-
-export type AddHooks = NonNullable<RegisterParams["addHooks"]>;
-
-/**
- * Put this function in your register code:
- * `WindowManager.register({ kind: 'Slide', src: SlideApp, addHooks })`
- * So that it will automatically freeze the app when it is not in focus.
- */
-export const addHooks: AddHooks = emitter => {
-  useFreezer = true;
-
-  emitter.on("focus", ({ appId }) => {
-    apps.focus(appId);
-  });
-
-  emitter.on("created", ({ appId }) => {
-    on_created_callbacks.forEach(callback => callback(appId));
-  });
-
-  emitter.on("destroy", ({ appId }) => {
-    on_destroyed_callbacks.forEach(callback => callback(appId));
-  });
-};
+import type { ReadonlyTeleBox, RegisterParams } from "@netless/window-manager";
+import { log } from "./logger";
+
+export interface FreezableSlide {
+  freeze: () => void;
+  unfreeze: () => void;
+}
+
+export let useFreezer = false;
+export let FreezerLength = 2;
+
+export function getFreezerLength() {
+  return FreezerLength;
+}
+
+/** @param length - must be >= 1, default is 2 */
+export function setFreezerLength(length: number) {
+  FreezerLength = length < 1 ? Infinity : length;
+}
+
+const inspect = (arr: string[]) => {
+  return "[" + arr + "]";
+};
+
+export const apps = {
+  map: new Map<string, FreezableSlide>(),
+  boxes: new Map<string, ReadonlyTeleBox>(),
+  queue: [] as string[],
+  validateQueue() {
+    // queue = [5, 4, 3, 2, 1]
+    this.queue.sort((a, b) => {
+      const za = this.boxes.get(a)?.zIndex ?? 0;
+      const zb = this.boxes.get(b)?.zIndex ?? 0;
+      return -(za - zb);
+    });
+    log("[Slide] freezer: validate", inspect(this.queue));
+    while (this.queue.length > FreezerLength) {
+      const appId = this.queue.pop() as string;
+      const slide = this.map.get(appId);
+      if (slide) {
+        log("[Slide] freezer: validate-freeze", appId, inspect(this.queue));
+        slide.freeze();
+      }
+    }
+  },
+  set(appId: string, slide: FreezableSlide, box: ReadonlyTeleBox) {
+    log("[Slide] freezer: add", appId, inspect(this.queue));
+    this.map.set(appId, slide);
+    this.boxes.set(appId, box);
+    if (!this.queue.includes(appId)) {
+      this.queue.unshift(appId);
+    }
+    this.validateQueue();
+  },
+  delete(appId: string) {
+    this.map.delete(appId);
+    this.boxes.delete(appId);
+    this.queue = this.queue.filter(id => id !== appId);
+    log("[Slide] freezer: delete", appId, inspect(this.queue));
+  },
+  focus(appId: string) {
+    const slide = this.map.get(appId);
+    const index = this.queue.indexOf(appId);
+    if (index > -1) {
+      this.queue.splice(index, 1);
+    }
+    this.queue.unshift(appId);
+    this.validateQueue();
+    log("[Slide] freezer: focus", appId, inspect(this.queue));
+    if (slide) {
+      slide.unfreeze();
+    }
+  },
+};
+
+if (import.meta.env.DEV) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (window as any).freezer = apps;
+}
+
+const on_created_callbacks = new Set<(appId: string) => void>();
+
+export function onCreated(callback: (appId: string) => void) {
+  on_created_callbacks.add(callback);
+  return () => on_created_callbacks.delete(callback);
+}
+
+const on_destroyed_callbacks = new Set<(appId: string) => void>();
+
+export function onDestroyed(callback: (appId: string) => void) {
+  on_destroyed_callbacks.add(callback);
+  return () => on_destroyed_callbacks.delete(callback);
+}
+
+export type AddHooks = NonNullable<RegisterParams["addHooks"]>;
+
+/**
+ * Put this function in your register code:
+ * `WindowManager.register({ kind: 'Slide', src: SlideApp, addHooks })`
+ * So that it will automatically freeze the app when it is not in focus.
+ */
+export const addHooks: AddHooks = emitter => {
+  useFreezer = true;
+
+  emitter.on("focus", ({ appId }) => {
+    apps.focus(appId);
+  });
+
+  emitter.on("created", ({ appId }) => {
+    on_created_callbacks.forEach(callback => callback(appId));
+  });
+
+  emitter.on("destroy", ({ appId }) => {
+    on_destroyed_callbacks.forEach(callback => callback(appId));
+  });
+};

package/src/utils/helpers.ts

@@ -1,32 +1,32 @@
-export function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
-
-export function flattenEvent(ev: MouseEvent | TouchEvent): MouseEvent | Touch {
-  return (ev as TouchEvent).touches ? (ev as TouchEvent).touches[0] : (ev as MouseEvent);
-}
-
-export function preventEvent(ev: Event): void {
-  ev.stopPropagation();
-  if (ev.cancelable) {
-    ev.preventDefault();
-  }
-}
-
-export function isObj(obj: unknown) {
-  return typeof obj === "object" && obj !== null;
-}
-
-export function wait(ms: number) {
-  return new Promise<void>(resolve => setTimeout(resolve, ms));
-}
-
-export function deepClone<T>(obj: T): T {
-  return JSON.parse(JSON.stringify(obj));
-}
-
-export function isEditable(el: EventTarget | null) {
-  if (!el) return false;
-  const tagName = (el as HTMLElement).tagName;
-  return tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT";
-}
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function flattenEvent(ev: MouseEvent | TouchEvent): MouseEvent | Touch {
+  return (ev as TouchEvent).touches ? (ev as TouchEvent).touches[0] : (ev as MouseEvent);
+}
+
+export function preventEvent(ev: Event): void {
+  ev.stopPropagation();
+  if (ev.cancelable) {
+    ev.preventDefault();
+  }
+}
+
+export function isObj(obj: unknown) {
+  return typeof obj === "object" && obj !== null;
+}
+
+export function wait(ms: number) {
+  return new Promise<void>(resolve => setTimeout(resolve, ms));
+}
+
+export function deepClone<T>(obj: T): T {
+  return JSON.parse(JSON.stringify(obj));
+}
+
+export function isEditable(el: EventTarget | null) {
+  if (!el) return false;
+  const tagName = (el as HTMLElement).tagName;
+  return tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT";
+}

package/src/utils/logger.ts

@@ -1,106 +1,106 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { AppContext, Displayer } from "@netless/window-manager";
-import type { SlideController } from "../SlideController";
-import { isObj } from "./helpers";
-
-type DebugMessage = { slide: boolean | "__instance" | "__debug" };
-
-type RoomLogger = {
-  debug: (...args: any) => void;
-  info: (...args: any) => void;
-  warn: (...args: any) => void;
-};
-
-class Logger {
-  public apps: Record<
-    string,
-    { context?: AppContext | null; controller?: SlideController | null }
-  > = {};
-
-  setAppContext(appId: string, context: AppContext | null) {
-    (this.apps[appId] ||= {}).context = context;
-    this.log(`[Slide] new ${appId}`);
-  }
-
-  setAppController(appId: string, controller: SlideController | null) {
-    (this.apps[appId] ||= {}).controller = controller;
-  }
-
-  deleteApp(appId: string) {
-    delete this.apps[appId];
-    this.log(`[Slide] delete ${appId}`);
-  }
-
-  public level: "debug" | "verbose" = import.meta.env.DEV ? "verbose" : "debug";
-
-  public roomLogger: RoomLogger | null = null;
-
-  constructor(public enable: boolean) {
-    this.initialize();
-  }
-
-  initialize() {
-    window.addEventListener("message", this._onMessage);
-  }
-
-  dispose() {
-    window.removeEventListener("message", this._onMessage);
-  }
-
-  log(...args: any[]) {
-    if (this.roomLogger) {
-      this.roomLogger.info(...args);
-    } else if (this.enable) {
-      console.log(...args);
-    }
-  }
-
-  verbose(...args: any[]) {
-    if (this.roomLogger) {
-      this.roomLogger.debug(...args);
-    } else if (this.enable && this.level === "verbose") {
-      console.log(...args);
-    }
-  }
-
-  warn(...args: any[]) {
-    if (this.roomLogger) {
-      this.roomLogger.warn(...args);
-    } else {
-      console.warn(...args);
-    }
-  }
-
-  /**
-   * @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();
-        });
-      }
-    }
-  };
-}
-
-export const logger = /** @__PURE__ */ new Logger(import.meta.env.DEV);
-export const log = /** @__PURE__ */ logger.log.bind(logger);
-export const verbose = /** @__PURE__ */ logger.verbose.bind(logger);
-export const setRoomLogger = (displayer: Displayer) => {
-  logger.roomLogger = (displayer as any).logger;
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { AppContext, Displayer } from "@netless/window-manager";
+import type { SlideController } from "../SlideController";
+import { isObj } from "./helpers";
+
+type DebugMessage = { slide: boolean | "__instance" | "__debug" };
+
+type RoomLogger = {
+  debug: (...args: any) => void;
+  info: (...args: any) => void;
+  warn: (...args: any) => void;
+};
+
+class Logger {
+  public apps: Record<
+    string,
+    { context?: AppContext | null; controller?: SlideController | null }
+  > = {};
+
+  setAppContext(appId: string, context: AppContext | null) {
+    (this.apps[appId] ||= {}).context = context;
+    this.log(`[Slide] new ${appId}`);
+  }
+
+  setAppController(appId: string, controller: SlideController | null) {
+    (this.apps[appId] ||= {}).controller = controller;
+  }
+
+  deleteApp(appId: string) {
+    delete this.apps[appId];
+    this.log(`[Slide] delete ${appId}`);
+  }
+
+  public level: "debug" | "verbose" = import.meta.env.DEV ? "verbose" : "debug";
+
+  public roomLogger: RoomLogger | null = null;
+
+  constructor(public enable: boolean) {
+    this.initialize();
+  }
+
+  initialize() {
+    window.addEventListener("message", this._onMessage);
+  }
+
+  dispose() {
+    window.removeEventListener("message", this._onMessage);
+  }
+
+  log(...args: any[]) {
+    if (this.roomLogger) {
+      this.roomLogger.info(...args);
+    } else if (this.enable) {
+      console.log(...args);
+    }
+  }
+
+  verbose(...args: any[]) {
+    if (this.roomLogger) {
+      this.roomLogger.debug(...args);
+    } else if (this.enable && this.level === "verbose") {
+      console.log(...args);
+    }
+  }
+
+  warn(...args: any[]) {
+    if (this.roomLogger) {
+      this.roomLogger.warn(...args);
+    } else {
+      console.warn(...args);
+    }
+  }
+
+  /**
+   * @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();
+        });
+      }
+    }
+  };
+}
+
+export const logger = /** @__PURE__ */ new Logger(import.meta.env.DEV);
+export const log = /** @__PURE__ */ logger.log.bind(logger);
+export const verbose = /** @__PURE__ */ logger.verbose.bind(logger);
+export const setRoomLogger = (displayer: Displayer) => {
+  logger.roomLogger = (displayer as any).logger;
+};