@netless/window-manager 1.0.7-beta.3 → 1.0.7-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.7-beta.3",
+  "version": "1.0.7-beta.5",
   "description": "Multi-window mode for Netless Whiteboard",
   "author": "l1shen <lishen1635@gmail.com> (https://github.com/l1shen)",
   "license": "MIT",

package/src/App/AppContext.ts

@@ -16,7 +16,7 @@ import type {
     View,
     EventListener as WhiteEventListener,
 } from "white-web-sdk";
-import type { ReadonlyTeleBox } from "@netless/telebox-insider";
+import type { NotMinimizedBoxState, ReadonlyTeleBox, TeleBoxState } from "@netless/telebox-insider";
 import type Emittery from "emittery";
 import type { BoxManager } from "../BoxManager";
 import type { AppEmitterEvent, WindowManager } from "../index";
@@ -74,6 +74,14 @@ export class AppContext<TAttributes extends {} = any, TMagixEventPayloads = any,
         return this.manager.windowManger;
     };
 
+    public getBoxStatus = (): TeleBoxState | undefined => {
+        return this.manager.store.getBoxStatus(this.appId);
+    };
+
+    public getLastNotMinimizedBoxStatus = (): NotMinimizedBoxState | undefined => {
+        return this.manager.store.getLastNotMinimizedBoxStatus(this.appId);
+    };
+
     public getDisplayer = () => {
         return this.manager.displayer;
     };

package/src/App/AppProxy.ts

@@ -27,7 +27,8 @@ import { WindowManager } from "../index";
 import type { SceneState, View, SceneDefinition } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 import type { NetlessApp } from "../typings";
-import { TELE_BOX_STATE, type ReadonlyTeleBox, type TeleBoxState } from "@netless/telebox-insider";
+import { TELE_BOX_STATE } from "@netless/telebox-insider";
+import type { ReadonlyTeleBox, TeleBoxState } from "@netless/telebox-insider";
 import type { PageRemoveService, PageState } from "../Page";
 import { calculateNextIndex } from "../Page";
 import { boxEmitter } from "../BoxEmitter";
@@ -217,7 +218,7 @@ export class AppProxy implements PageRemoveService {
                 options,
                 canOperate: this.manager.canOperate,
                 smartPosition: this.isAddApp,
-                boxStatus
+                boxStatus,
             });
             if (this.isAddApp && this.box) {
                 if (boxStatus) {
@@ -309,8 +310,7 @@ export class AppProxy implements PageRemoveService {
         const maximized = this.attributes?.["maximized"];
         const minimized = this.attributes?.["minimized"];
         const boxStatus = this.store.getBoxStatus(id) ?? undefined;
-        const lastNotMinimizedBoxStatus =
-            this.store.getLastNotMinimizedBoxStatus(id) ?? undefined;
+        const lastNotMinimizedBoxStatus = this.store.getLastNotMinimizedBoxStatus(id) ?? undefined;
         const zIndex = attrs?.zIndex;
         let payload = { maximized, minimized, zIndex } as AppInitState;
         if (position) {
@@ -450,6 +450,10 @@ export class AppProxy implements PageRemoveService {
         this.appEmitter.emit("pageStateChange", this.pageState);
     }, 50);
 
+    public notifyBoxStatusChange = (status: TeleBoxState) => {
+        this.appEmitter.emit("boxStatusChange", { appId: this.id, status });
+    };
+
     public get pageState(): PageState {
         return this._pageState.toObject();
     }

package/src/AppManager.ts

@@ -7,9 +7,10 @@ import { autorun, isPlayer, isRoom, ScenePathType, UpdateEventKind } from "white
 import { boxEmitter } from "./BoxEmitter";
 import { calculateNextIndex } from "./Page";
 import { callbacks } from "./callback";
-import { debounce, get, isEqual, isInteger, orderBy } from "lodash";
+import { debounce, get, isInteger, orderBy } from "lodash";
 import { internalEmitter } from "./InternalEmitter";
-import { AttributesDelegate, createAttributesDelegate, Fields } from "./AttributesDelegate";
+import { createAttributesDelegate, Fields } from "./AttributesDelegate";
+import type { AttributesDelegate } from "./AttributesDelegate";
 import { log } from "./Utils/log";
 import { MainViewProxy } from "./View/MainView";
 import { safeListenPropsUpdated } from "./Utils/Reactive";
@@ -49,6 +50,7 @@ import type {
     BoxStateChangePayload,
 } from "./BoxEmitter";
 import { getExtendClass } from "./Utils/extendClass";
+import type { TeleBoxState } from "@netless/telebox-insider";
 
 export class AppManager {
     public displayer: Displayer;
@@ -434,7 +436,7 @@ export class AppManager {
 
     private onBoxBlurred = (payload: BoxBlurredPayload) => {
         const focus = this.attributes.focus;
-        if (focus === payload.appId) { 
+        if (focus === payload.appId) {
             this.windowManger.safeSetAttributes({ focus: undefined });
             callbacks.emit("onBoxBlurred", payload);
         }
@@ -453,12 +455,25 @@ export class AppManager {
         callbacks.emit("onBoxStateChange", payload);
     };
 
+    private notifyBoxesStatusChange = debounce(() => {
+        const entries = Object.entries(this.attributes.boxesStatus);
+        if (entries.length > 0) {
+            entries.forEach(([appId, status]) => {
+                const appProxy = this.appProxies.get(appId);
+                if (appProxy) {
+                    appProxy.notifyBoxStatusChange(status as TeleBoxState);
+                }
+            });
+        }
+    }, 50);
+
     public addBoxesStatusChangeListener = () => {
         this.refresher.add("boxesStatus", () => {
             return safeListenPropsUpdated(
                 () => this.attributes.boxesStatus,
                 () => {
                     this.boxManager?.setBoxesStatus(this.attributes.boxesStatus);
+                    this.notifyBoxesStatusChange();
                 }
             );
         });
@@ -466,12 +481,13 @@ export class AppManager {
             return safeListenPropsUpdated(
                 () => this.attributes.lastNotMinimizedBoxesStatus,
                 () => {
-                    this.boxManager?.setLastNotMinimizedBoxesStatus(this.attributes.lastNotMinimizedBoxesStatus);
+                    this.boxManager?.setLastNotMinimizedBoxesStatus(
+                        this.attributes.lastNotMinimizedBoxesStatus
+                    );
                 }
             );
         });
     };
-
     public addAppsChangeListener = () => {
         this.refresher.add("apps", () => {
             return safeListenPropsUpdated(

package/src/AttributesDelegate.ts

@@ -4,8 +4,9 @@ import { setViewFocusScenePath } from "./Utils/Common";
 import type { AddAppParams, AppSyncAttributes } from "./index";
 import type { Camera, Size, View } from "white-web-sdk";
 import type { Cursor } from "./Cursor/Cursor";
-import { ExtendClass, getExtendClass } from "./Utils/extendClass";
-import { NotMinimizedBoxState, TELE_BOX_STATE, TeleBoxState } from "@netless/telebox-insider";
+import { getExtendClass } from "./Utils/extendClass";
+import type { ExtendClass } from "./Utils/extendClass";
+import type { NotMinimizedBoxState, TeleBoxState } from "@netless/telebox-insider";
 
 export enum Fields {
     Apps = "apps",
@@ -86,11 +87,11 @@ export class AttributesDelegate {
         return get(this.attributes, ["minimized"]);
     }
 
-    public getBoxesStatus(): Record<string, TELE_BOX_STATE> | undefined {
+    public getBoxesStatus(): Record<string, TeleBoxState> | undefined {
         return get(this.attributes, [Fields.BoxesStatus]);
     }
 
-    public getBoxStatus(id: string): TELE_BOX_STATE | undefined {
+    public getBoxStatus(id: string): TeleBoxState | undefined {
         return get(this.attributes, [Fields.BoxesStatus, id]);
     }
 

package/src/BoxManager.ts

@@ -1,6 +1,6 @@
 import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce } from "lodash";
-import { TELE_BOX_STATE, TeleBoxCollector, TeleBoxManager } from "@netless/telebox-insider";
+import { TELE_BOX_STATE } from "@netless/telebox-insider";
 import { WindowManager } from "./index";
 import type { BoxEmitterType } from "./BoxEmitter";
 import type { AddAppOptions, AppInitState } from "./index";
@@ -20,7 +20,7 @@ import type { NetlessApp } from "./typings";
 import type { View } from "white-web-sdk";
 import type { CallbacksType } from "./callback";
 import type { EmitterType } from "./InternalEmitter";
-import { getExtendClass } from "./Utils/extendClass";
+import { getExtendClass, TeleBoxManager, TeleBoxCollector } from "./Utils/extendClass";
 
 export { TELE_BOX_STATE };
 
@@ -290,7 +290,10 @@ export class BoxManager {
         }
     }
     public setBoxesStatus(status?: Record<string, TeleBoxState>): void {
-        this.teleBoxManager.setBoxesStatus(new Map(Object.entries(status ?? {})), true);
+        const map = new Map(Object.entries(status ?? {}));
+        this.teleBoxManager.setBoxesStatus(map, true);
+        this.context.callbacks.emit("onBoxesStatusChange", map);
+        this.context.emitter.emit("boxesStatusChange", map);
     }
 
     public setBoxStatus(appId: string, status?: TeleBoxState): void {
@@ -298,7 +301,10 @@ export class BoxManager {
     }
 
     public setLastNotMinimizedBoxesStatus(status?: Record<string, NotMinimizedBoxState>): void {
-        this.teleBoxManager.setLastNotMinimizedBoxesStatus(new Map(Object.entries(status ?? {})), true);
+        const map = new Map(Object.entries(status ?? {}));
+        this.teleBoxManager.setLastNotMinimizedBoxesStatus(map, true);
+        this.context.callbacks.emit("onLastNotMinimizedBoxesStatusChange", map);
+        this.context.emitter.emit("lastNotMinimizedBoxesStatusChange", map);
     }
 
     public setLastNotMinimizedBoxStatus(appId: string, status?: NotMinimizedBoxState): void {
@@ -323,7 +329,8 @@ export class BoxManager {
             useBoxesStatus: createTeleBoxManagerConfig?.useBoxesStatus || false,
         };
 
-        const manager = new TeleBoxManager(initManagerState);
+        const TeleBoxManagerClass = getExtendClass(TeleBoxManager, WindowManager.extendClass);
+        const manager = new TeleBoxManagerClass(initManagerState);
         if (this.teleBoxManager) {
             this.teleBoxManager.destroy();
         }
@@ -336,7 +343,8 @@ export class BoxManager {
     }
 
     public setCollectorContainer(container: HTMLElement) {
-        const collector = new TeleBoxCollector({
+        const TeleBoxCollectorClass = getExtendClass(TeleBoxCollector, WindowManager.extendClass);
+        const collector = new TeleBoxCollectorClass({
             styles: this.createTeleBoxManagerConfig?.collectorStyles,
         }).mount(container);
         this.teleBoxManager.setCollector(collector);

package/src/InternalEmitter.ts

@@ -1,5 +1,6 @@
 import Emittery from "emittery";
 import type { AppInitState, CursorMovePayload } from "./index";
+import type { NotMinimizedBoxState, TeleBoxState } from "@netless/telebox-insider";
 
 export type RemoveSceneParams = {
     scenePath: string;
@@ -28,6 +29,8 @@ export type EmitterEvent = {
     changePageState: undefined;
     writableChange: boolean;
     containerSizeRatioUpdate: number;
+    boxesStatusChange: Map<string, TeleBoxState>;
+    lastNotMinimizedBoxesStatusChange: Map<string, NotMinimizedBoxState>;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;

package/src/Utils/extendClass.ts

@@ -3,12 +3,14 @@ import { AppManager } from "../AppManager";
 import { AttributesDelegate } from "../AttributesDelegate";
 import { BoxManager } from "../BoxManager";
 import { CursorManager } from "../Cursor";
+import { TeleBoxManager, TeleBoxCollector } from "@netless/telebox-insider";
 
 export { AppManager } from "../AppManager";
 export { AppContext, AppProxy } from "../App";
 export { BoxManager } from "../BoxManager";
 export { AttributesDelegate } from "../AttributesDelegate";
 export { CursorManager } from "../Cursor";
+export { TeleBoxManager, TeleBoxCollector } from "@netless/telebox-insider";
 
 export type ExtendClassAble =
     | typeof AppManager
@@ -17,6 +19,8 @@ export type ExtendClassAble =
     | typeof BoxManager
     | typeof AttributesDelegate
     | typeof CursorManager
+    | typeof TeleBoxManager
+    | typeof TeleBoxCollector;
 
 export type ExtendClass = {
     AppManager?: typeof AppManager;
@@ -25,6 +29,8 @@ export type ExtendClass = {
     CursorManager?: typeof CursorManager;
     AppProxy?: typeof AppProxy;
     AppContext?: typeof AppContext;
+    TeleBoxManager?: typeof TeleBoxManager;
+    TeleBoxCollector?: typeof TeleBoxCollector;
 };
 export function getExtendClass<T extends ExtendClassAble>(
     baseClass: T,
@@ -43,6 +49,10 @@ export function getExtendClass<T extends ExtendClassAble>(
             return (extendClass?.AppProxy || AppProxy) as T;
         case "AppContext":
             return (extendClass?.AppContext || AppContext) as T;
+        case "TeleBoxManager":
+            return (extendClass?.TeleBoxManager || TeleBoxManager) as T;
+        case "TeleBoxCollector":
+            return (extendClass?.TeleBoxCollector || TeleBoxCollector) as T;
         default:
             return baseClass;
     }

package/src/callback.ts

@@ -1,5 +1,10 @@
 import Emittery from "emittery";
-import type { TeleBoxColorScheme, TELE_BOX_STATE } from "@netless/telebox-insider";
+import type {
+    TeleBoxColorScheme,
+    TELE_BOX_STATE,
+    TeleBoxState,
+    NotMinimizedBoxState,
+} from "@netless/telebox-insider";
 import type { CameraState, SceneState, View, ViewVisionMode } from "white-web-sdk";
 import type { LoadAppEvent } from "./Register";
 import type { PageState } from "./Page";
@@ -42,6 +47,8 @@ export type PublicEvent = {
     onAppViewMounted: AppPayload;
     onAppSetup: string;
     onAppScenePathChange: AppPayload;
+    onBoxesStatusChange: Map<string, TeleBoxState>;
+    onLastNotMinimizedBoxesStatusChange: Map<string, NotMinimizedBoxState>;
 };
 
 export type CallbacksType = Emittery<PublicEvent>;

package/src/index.ts

@@ -28,9 +28,10 @@ import {
     putScenes,
     wait,
 } from "./Utils/Common";
-import { TELE_BOX_STATE, BoxManager } from "./BoxManager";
+import type { BoxManager } from "./BoxManager";
+import type { TELE_BOX_STATE } from "./BoxManager";
 import * as Errors from "./Utils/error";
-import { Apps, Position } from "./AttributesDelegate";
+import type { Apps, Position } from "./AttributesDelegate";
 import type {
     Displayer,
     SceneDefinition,
@@ -54,7 +55,7 @@ import type {
     TeleBoxColorScheme,
     TeleBoxState,
 } from "@netless/telebox-insider";
-import { AppProxy } from "./App";
+import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
 import type { PageController, AddPageParams, PageState } from "./Page";
@@ -63,7 +64,8 @@ import { IframeBridge } from "./View/IframeBridge";
 import { setOptions } from "@netless/app-media-player";
 import type { ExtendPluginInstance } from "./ExtendPluginManager";
 import { ExtendPluginManager } from "./ExtendPluginManager";
-import { ExtendClass, getExtendClass } from "./Utils/extendClass";
+import { getExtendClass } from "./Utils/extendClass";
+import type { ExtendClass } from "./Utils/extendClass";
 
 export * from "./utils/extendClass";
 
@@ -395,7 +397,6 @@ export class WindowManager
                 if (this.appManager) {
                     this.appManager.useBoxesStatus = params.useBoxesStatus || false;
                     this.appManager.setBoxManager(boxManager);
-    
                 }
                 this.bindMainView(mainViewElement, params.disableCameraTransform);
                 if (WindowManager.wrapper) {
@@ -801,7 +802,7 @@ export class WindowManager
         }
     }
 
-    public get boxStatus(): Record<string, TELE_BOX_STATE> | undefined {
+    public get boxStatus(): Record<string, TeleBoxState> | undefined {
         if (this.appManager) {
             return this.appManager.store.getBoxesStatus();
         } else {

package/src/typings.ts

@@ -11,7 +11,7 @@ import type {
     View,
 } from "white-web-sdk";
 import type { AppContext } from "./App";
-import type { ReadonlyTeleBox, TeleBoxRect } from "@netless/telebox-insider";
+import type { ReadonlyTeleBox, TeleBoxRect, TeleBoxState } from "@netless/telebox-insider";
 import type { PageState } from "./Page";
 
 export interface NetlessApp<
@@ -58,6 +58,7 @@ export type AppEmitterEvent<T = any> = {
     reconnected: void;
     seek: number;
     pageStateChange: PageState;
+    boxStatusChange: { appId: string; status: TeleBoxState };
 };
 
 export type RegisterEventData = {