@netless/window-manager 0.3.22 → 0.3.23-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.3.22",
+  "version": "0.3.23-canary.0",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -56,6 +56,6 @@
     "typescript": "^4.3.5",
     "video.js": "^7.14.3",
     "vite": "^2.5.3",
-    "white-web-sdk": "2.15.15"
+    "white-web-sdk": "^2.15.16"
   }
 }

package/src/BoxManager.ts

@@ -2,7 +2,6 @@ import { callbacks, emitter, WindowManager } from "./index";
 import { debounce, maxBy } from "lodash";
 import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import {
-    TELE_BOX_MANAGER_EVENT,
     TELE_BOX_STATE,
     TeleBoxCollector,
     TeleBoxManager,
@@ -58,12 +57,21 @@ export class BoxManager {
         createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ) {
         this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
-        this.teleBoxManager.events.on(TELE_BOX_MANAGER_EVENT.State, state => {
-            if (state) {
-                callbacks.emit("boxStateChange", state);
-                emitter.emit("boxStateChange", state);
-            }
+
+        // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
+        this.teleBoxManager._state$.reaction(state => {
+            callbacks.emit("boxStateChange", state);
+            emitter.emit("boxStateChange", state);
+        });
+
+        this.teleBoxManager._darkMode$.reaction(darkMode => {
+            callbacks.emit("darkModeChange", darkMode);
+        });
+        this.teleBoxManager._prefersColorScheme$.reaction(colorScheme => {
+            callbacks.emit("prefersColorSchemeChange", colorScheme);
         });
+
+        // events.on 的值则会根据 skipUpdate 来决定是否触发回调
         this.teleBoxManager.events.on("minimized", minimized => {
             this.manager.safeSetAttributes({ minimized });
             if (minimized) {
@@ -109,12 +117,6 @@ export class BoxManager {
                 }
             }
         });
-        this.teleBoxManager.events.on("dark_mode", darkMode => {
-            callbacks.emit("darkModeChange", darkMode);
-        });
-        this.teleBoxManager.events.on("prefers_color_scheme", colorScheme => {
-            callbacks.emit("prefersColorSchemeChange", colorScheme);
-        });
         this.teleBoxManager.events.on("z_index", box => {
             this.manager.store.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
         });
@@ -252,7 +254,7 @@ export class BoxManager {
             );
             setTimeout(() => {
                 if (state.focus) {
-                    this.teleBoxManager.focusBox(box.id, true)
+                    this.teleBoxManager.focusBox(box.id, true);
                 }
                 if (state.maximized != null) {
                     this.teleBoxManager.setMaximized(Boolean(state.maximized), true);