@netless/app-slide 0.0.24 → 0.0.28

package/dist/utils/bgcolor.d.ts

@@ -0,0 +1,3 @@
+export declare function guessBgColor(el: HTMLElement): string;
+export declare function toHex(color: string): string;
+export declare function cachedGetBgColor(el: HTMLElement): string;

package/dist/utils/freezer.d.ts

@@ -0,0 +1,21 @@
+import type { RegisterParams } from "@netless/window-manager";
+export interface FreezableSlide {
+    freeze: () => void;
+    unfreeze: () => void;
+}
+export declare const FreezerLength = 2;
+export declare const apps: {
+    map: Map<string, FreezableSlide>;
+    queue: string[];
+    validateQueue(): void;
+    set(appId: string, slide: FreezableSlide): void;
+    delete(appId: string): void;
+    focus(appId: string): void;
+};
+export declare type AddHooks = NonNullable<RegisterParams["addHooks"]>;
+/**
+ * Put this function in your register code:
+ * `WindowManager.register({ addHooks })`
+ * So that it will automatically freeze the app when it is not in focus.
+ */
+export declare const addHooks: AddHooks;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.0.24",
+  "version": "0.0.28",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -11,7 +11,9 @@
   ],
   "devDependencies": {
     "@netless/app-shared": "^0.1.1",
-    "@netless/slide": "^0.1.29",
+    "@netless/slide": "^0.1.33",
+    "@types/color-string": "^1.5.0",
+    "color-string": "^1.6.0",
     "side-effect-manager": "^0.1.5",
     "vanilla-lazyload": "^17.5.0"
   },

package/src/SlideController/helpers.ts

@@ -35,7 +35,14 @@ export function syncSceneWithSlide(
     room.putScenes(baseScenePath, scenes);
   }
 
-  if (context.getView()?.focusScenePath !== scenePath) {
+  let currentScenePath: string;
+  if (context.getBox().focus) {
+    currentScenePath = room.state.sceneState.scenePath;
+  } else {
+    currentScenePath = context.getView()?.focusScenePath || "";
+  }
+
+  if (currentScenePath !== scenePath) {
     context.setScenePath(scenePath);
   }
 }

package/src/SlideController/index.ts

@@ -16,6 +16,7 @@ import type { Attributes, MagixPayload, SlideState } from "../typings";
 import { SideEffectManager } from "side-effect-manager";
 import { Slide, SLIDE_EVENTS } from "@netless/slide";
 import { clamp, deepClone, isObj } from "../utils/helpers";
+import { cachedGetBgColor } from "../utils/bgcolor";
 export { syncSceneWithSlide, createDocsViewerPages } from "./helpers";
 
 export const DefaultUrl = "https://convertcdn.netless.link/dynamicConvert";
@@ -75,6 +76,16 @@ export class SlideController {
     this.initialize();
   }
 
+  public ready = false;
+  private resolveReady!: () => void;
+  public readonly readyPromise = new Promise<void>(resolve => {
+    this.resolveReady = () =>
+      setTimeout(() => {
+        this.ready = true;
+        resolve();
+      }, 1000);
+  });
+
   public jumpToPage(page: number) {
     if (this.ready) {
       page = clamp(page, 1, this.pageCount);
@@ -96,6 +107,7 @@ export class SlideController {
       if (this.debug) {
         console.log("[Slide] init with state", deepClone(state));
       }
+      this.syncStateOnceFlag = false;
       slide.setSlideState(deepClone(state));
     } else if (context.isAddApp) {
       // otherwise, maybe this slide is just added, let the adder kick start first render
@@ -148,6 +160,8 @@ export class SlideController {
     slide.on(SLIDE_EVENTS.renderError, this.onError);
     slide.on(SLIDE_EVENTS.stateChange, this.onStateChange);
     slide.on(SLIDE_EVENTS.syncDispatch, this.onSyncDispatch);
+
+    slide.on(SLIDE_EVENTS.renderEnd, this.resolveReady);
   }
 
   private onSyncDispatch = (event: SyncEvent) => {
@@ -195,19 +209,21 @@ export class SlideController {
 
   private onStateChange = (state: SlideState) => {
     if (this.context.getIsWritable()) {
+      if (import.meta.env.DEV) {
+        console.log("[Slide] state change", JSON.stringify(state, null, 2));
+      }
       this.context.updateAttributes(["state"], state);
     }
   };
 
-  private resolveReady!: () => void;
-  public readonly readyPromise = new Promise<void>(resolve => {
-    this.resolveReady = resolve;
-  });
-
   private pollCount = 0;
   private pollReadyState = () => {
     if (this.ready) {
-      this.resolveReady();
+      if (this._toFreeze === 1) {
+        this.freeze();
+      } else if (this._toFreeze === -1) {
+        this.unfreeze();
+      }
     } else if (this.pollCount < MaxPollCount) {
       this.pollCount++;
       setTimeout(this.pollReadyState, 500);
@@ -220,12 +236,13 @@ export class SlideController {
     }
   };
 
-  public get ready() {
-    return this.slide.slideCount > 0;
-  }
-
+  // cache `slideCount`, because once the slide is frozen,
+  // the `slideCount` will be 0
+  private _pageCount = 0;
   public get pageCount() {
-    return this.slide.slideCount;
+    if (this._pageCount > 0) return this._pageCount;
+    this._pageCount = this.slide.slideCount;
+    return this._pageCount;
   }
 
   public get page() {
@@ -245,7 +262,7 @@ export class SlideController {
         autoFPS: true,
         autoResolution: true,
         resolution: this.context.getAppOptions()?.resolution,
-        transactionBgColor: "#f9f9fc",
+        transactionBgColor: this.context.getAppOptions()?.bgColor || cachedGetBgColor(anchor),
       },
       timestamp: this.timestamp,
     });
@@ -278,4 +295,56 @@ export class SlideController {
       return Date.now();
     }
   };
+
+  public isFrozen = false;
+  private _toFreeze: -1 | 0 | 1 = 0; // -1: unfreeze, 0: no change, 1: freeze
+  private freezePromise: Promise<void> | null = null;
+
+  private afterFreeze(from: -1 | 1) {
+    if (from === 1) {
+      this.isFrozen = true;
+      this.freezePromise = null;
+      if (this._toFreeze === -1) {
+        this.unfreeze();
+      }
+    } else if (from === -1) {
+      this.isFrozen = false;
+      this.freezePromise = null;
+      if (this._toFreeze === 1) {
+        this.freeze();
+      }
+    }
+  }
+
+  public freeze = () => {
+    if (this.ready) {
+      if (this.debug) {
+        console.log("[Slide] freeze", this.context.appId);
+      }
+      if (this.freezePromise) {
+        this._toFreeze = 1;
+      } else if (!this.isFrozen) {
+        this._toFreeze = 0;
+        this.freezePromise = this.slide.frozen().then(this.afterFreeze.bind(this, 1));
+      }
+    } else {
+      this._toFreeze = 1;
+    }
+  };
+
+  public unfreeze = async () => {
+    if (this.ready) {
+      if (this.debug) {
+        console.log("[Slide] unfreeze", this.context.appId);
+      }
+      if (this.freezePromise) {
+        this._toFreeze = -1;
+      } else if (this.isFrozen) {
+        this._toFreeze = 0;
+        this.freezePromise = this.slide.release().then(this.afterFreeze.bind(this, -1));
+      }
+    } else {
+      this._toFreeze = -1;
+    }
+  };
 }

package/src/SlideDocsViewer/index.ts

@@ -26,6 +26,7 @@ export class SlideDocsViewer {
   protected readonly whiteboardView: SlideDocsViewerConfig["view"];
   protected readonly mountSlideController: SlideDocsViewerConfig["mountSlideController"];
   protected readonly mountWhiteboard: SlideDocsViewerConfig["mountWhiteboard"];
+  private isViewMounted = false;
 
   public constructor({ box, view, mountSlideController, mountWhiteboard }: SlideDocsViewerConfig) {
     this.box = box;
@@ -92,7 +93,6 @@ export class SlideDocsViewer {
     if (!this.$whiteboardView) {
       this.$whiteboardView = document.createElement("div");
       this.$whiteboardView.className = this.wrapClassName("wb-view");
-      this.mountWhiteboard(this.$whiteboardView);
     }
     return this.$whiteboardView;
   }
@@ -161,13 +161,20 @@ export class SlideDocsViewer {
   protected scaleDocsToFit = () => {
     if (this.slideController) {
       const { width, height } = this.slideController.slide;
-      this.whiteboardView.moveCameraToContain({
-        originX: -width / 2,
-        originY: -height / 2,
-        width,
-        height,
-        animationMode: "immediately" as AnimationMode.Immediately,
-      });
+      if (width && height) {
+        this.whiteboardView.moveCameraToContain({
+          originX: -width / 2,
+          originY: -height / 2,
+          width,
+          height,
+          animationMode: "immediately" as AnimationMode.Immediately,
+        });
+        if (!this.isViewMounted) {
+          this.isViewMounted = true;
+          console.log("[Slide] mount whiteboard view");
+          this.mountWhiteboard(this.$whiteboardView);
+        }
+      }
     }
   };
 

package/src/SlideDocsViewer/style.scss

@@ -6,6 +6,6 @@ $namespace: "netless-app-slide";
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 100;
+  z-index: 1001;
   overflow: hidden;
 }

package/src/index.ts

@@ -2,6 +2,7 @@ import type { NetlessApp } from "@netless/window-manager";
 import type { RoomState } from "white-web-sdk";
 import type { MountSlideOptions } from "./SlideDocsViewer";
 import type { Attributes } from "./typings";
+import type { AddHooks, FreezableSlide } from "./utils/freezer";
 
 import { SideEffectManager } from "side-effect-manager";
 import { ensureAttributes } from "@netless/app-shared";
@@ -12,11 +13,12 @@ import {
   SlideController,
 } from "./SlideController";
 import { SlideDocsViewer } from "./SlideDocsViewer";
+import { apps, FreezerLength, addHooks } from "./utils/freezer";
 import styles from "./style.scss?inline";
 
-export type { Attributes };
+export type { Attributes, AddHooks, FreezableSlide };
 
-export { DefaultUrl };
+export { DefaultUrl, apps, FreezerLength, addHooks };
 
 const SlideApp: NetlessApp<Attributes> = {
   kind: "Slide",
@@ -48,6 +50,9 @@ const SlideApp: NetlessApp<Attributes> = {
       const room = context.getRoom();
       if (docsViewer && docsViewer.slideController && room && context.getIsWritable()) {
         syncSceneWithSlide(room, context, docsViewer.slideController.slide, baseScenePath);
+        if (context.getAppOptions()?.debug || import.meta.env.DEV) {
+          console.log("[Slide] page to", page);
+        }
         docsViewer.viewer.setPageIndex(page - 1);
       }
     };
@@ -58,6 +63,7 @@ const SlideApp: NetlessApp<Attributes> = {
         ...options,
         onPageChanged,
       });
+      apps.set(context.appId, slideController);
       if (import.meta.env.DEV) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (window as any).slideController = slideController;
@@ -95,6 +101,7 @@ const SlideApp: NetlessApp<Attributes> = {
 
     context.emitter.on("destroy", () => {
       console.log("[Slide]: destroy");
+      apps.delete(context.appId);
       sideEffect.flushAll();
       if (docsViewer) {
         docsViewer.destroy();

package/src/utils/bgcolor.ts

@@ -0,0 +1,46 @@
+import ColorString from "color-string";
+
+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));
+    if (import.meta.env.DEV) {
+      console.log("[Slide] guess bg color", cachedBgColor);
+    }
+  }
+  return cachedBgColor;
+}

package/src/utils/freezer.ts

@@ -0,0 +1,78 @@
+import type { RegisterParams } from "@netless/window-manager";
+
+export interface FreezableSlide {
+  freeze: () => void;
+  unfreeze: () => void;
+}
+
+export const FreezerLength = 2;
+
+export const apps = {
+  map: new Map<string, FreezableSlide>(),
+  queue: [] as string[],
+  validateQueue() {
+    if (import.meta.env.DEV) {
+      console.log("[Slide] freezer: validate", this.queue);
+    }
+    while (this.queue.length > FreezerLength) {
+      const appId = this.queue.pop() as string;
+      const slide = this.map.get(appId);
+      if (slide) {
+        if (import.meta.env.DEV) {
+          console.log("[Slide] freezer: validate-freeze", appId, this.queue);
+        }
+        slide.freeze();
+      }
+    }
+  },
+  set(appId: string, slide: FreezableSlide) {
+    if (import.meta.env.DEV) {
+      console.log("[Slide] freezer: add", appId, this.queue);
+    }
+    this.map.set(appId, slide);
+    if (!this.queue.includes(appId)) {
+      this.queue.unshift(appId);
+    }
+    this.validateQueue();
+  },
+  delete(appId: string) {
+    if (import.meta.env.DEV) {
+      console.log("[Slide] freezer: delete", appId, this.queue);
+    }
+    this.map.delete(appId);
+    this.queue = this.queue.filter(id => id !== appId);
+  },
+  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();
+    if (import.meta.env.DEV) {
+      console.log("[Slide] freezer: focus", appId, 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;
+}
+
+export type AddHooks = NonNullable<RegisterParams["addHooks"]>;
+
+/**
+ * Put this function in your register code:
+ * `WindowManager.register({ addHooks })`
+ * So that it will automatically freeze the app when it is not in focus.
+ */
+export const addHooks: AddHooks = emitter => {
+  emitter.on("focus", ({ appId }) => {
+    apps.focus(appId);
+  });
+};