@netless/app-slide 0.0.23 → 0.0.27

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.0.23",
+  "version": "0.0.27",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -11,8 +11,10 @@
   ],
   "devDependencies": {
     "@netless/app-shared": "^0.1.1",
-    "@netless/slide": "^0.1.28",
-    "side-effect-manager": "^0.1.4",
+    "@netless/slide": "^0.1.32",
+    "@types/color-string": "^1.5.0",
+    "color-string": "^1.6.0",
+    "side-effect-manager": "^0.1.5",
     "vanilla-lazyload": "^17.5.0"
   },
   "scripts": {

package/src/SlideController/helpers.ts

@@ -35,5 +35,14 @@ export function syncSceneWithSlide(
     room.putScenes(baseScenePath, scenes);
   }
 
-  context.setScenePath(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";
@@ -96,6 +97,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
@@ -195,6 +197,9 @@ 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);
     }
   };
@@ -245,7 +250,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,
     });
@@ -262,7 +267,7 @@ export class SlideController {
     this.sideEffect.flushAll();
     if (!this.destroyed) {
       if (this.debug) {
-        console.log("[Slide] destroy (once)");
+        console.log("[Slide] destroy slide (once)");
       }
       this.slide.destroy();
       this.destroyed = true;

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;
   }
@@ -168,6 +168,11 @@ export class SlideDocsViewer {
         height,
         animationMode: "immediately" as AnimationMode.Immediately,
       });
+      if (!this.isViewMounted && width && height) {
+        this.isViewMounted = true;
+        console.log("[Slide] mount whiteboard view");
+        this.mountWhiteboard(this.$whiteboardView);
+      }
     }
   };
 

package/src/index.ts

@@ -70,7 +70,7 @@ const SlideApp: NetlessApp<Attributes> = {
       box,
       view,
       mountSlideController,
-      mountWhiteboard: dom => context.mountView(dom),
+      mountWhiteboard: context.mountView.bind(context),
     });
 
     if (import.meta.env.DEV) {

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;
+}