@netless/window-manager 1.0.7-beta.0 → 1.0.7-beta.10

package/src/AppManager.ts

@@ -9,7 +9,8 @@ import { calculateNextIndex } from "./Page";
 import { callbacks } from "./callback";
 import { debounce, get, isInteger, orderBy } from "lodash";
 import { internalEmitter } from "./InternalEmitter";
-import { Fields, store } 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";
@@ -41,19 +42,23 @@ import type {
 } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
 import type {
+    BoxBlurredPayload,
     BoxClosePayload,
     BoxFocusPayload,
     BoxMovePayload,
     BoxResizePayload,
     BoxStateChangePayload,
 } from "./BoxEmitter";
+import { getExtendClass } from "./Utils/extendClass";
+import type { TeleBoxState } from "@netless/telebox-insider";
 
 export class AppManager {
+    static readonly kind = "AppManager";
     public displayer: Displayer;
     public viewManager: ViewManager;
     public appProxies: Map<string, AppProxy> = new Map();
     public appStatus: Map<string, AppStatus> = new Map();
-    public store = store;
+    public store!: AttributesDelegate;
     public mainViewProxy: MainViewProxy;
     public refresher: ReconnectRefresher;
     public isReplay = this.windowManger.isReplay;
@@ -67,7 +72,9 @@ export class AppManager {
     private callbacksNode: ScenesCallbacksNode | null = null;
     private appCreateQueue = new AppCreateQueue();
 
-    private _focusAppCreatedResolve?: (appProxy: AppProxy) => void;
+    private _focusAppCreatedResolve?: (appProxy?: AppProxy) => void;
+    private _focusAppId: string | undefined;
+    private _resolveTimer: number | undefined;
 
     private sideEffectManager = new SideEffectManager();
 
@@ -75,9 +82,24 @@ export class AppManager {
 
     public rootDirRemoving = false;
 
+    private _useBoxesStatus = false;
+
+    public get useBoxesStatus() {
+        return this._useBoxesStatus;
+    }
+
+    public set useBoxesStatus(value: boolean) {
+        this._useBoxesStatus = value;
+    }
+
     constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
-        this.store.setContext({
+        // this.store.setContext({
+        //     getAttributes: () => this.attributes,
+        //     safeSetAttributes: attributes => this.safeSetAttributes(attributes),
+        //     safeUpdateAttributes: (keys, val) => this.safeUpdateAttributes(keys, val),
+        // });
+        this.store = createAttributesDelegate(WindowManager.extendClass, {
             getAttributes: () => this.attributes,
             safeSetAttributes: attributes => this.safeSetAttributes(attributes),
             safeUpdateAttributes: (keys, val) => this.safeUpdateAttributes(keys, val),
@@ -322,8 +344,12 @@ export class AppManager {
 
     private async onCreated() {
         if (Object.keys(this.attributes.apps).length && this.store.focus) {
-            await new Promise<AppProxy>(resolve => {
+            this._focusAppId = this.store.focus;
+            await new Promise<AppProxy | undefined>(resolve => {
                 this._focusAppCreatedResolve = resolve;
+                this._resolveTimer = setTimeout(() => {
+                    resolve(this.appProxies.get(this._focusAppId || ''));
+                }, 500);
             }).then(() => {
                 this.focusByAttributes(this.attributes.apps);
             });
@@ -336,9 +362,11 @@ export class AppManager {
         boxEmitter.on("focus", this.onBoxFocus);
         boxEmitter.on("close", this.onBoxClose);
         boxEmitter.on("boxStateChange", this.onBoxStateChange);
+        boxEmitter.on("blurred", this.onBoxBlurred);
 
         this.addAppsChangeListener();
         this.addAppCloseListener();
+        this.addBoxesStatusChangeListener();
         this.refresher.add("maximized", () => {
             return autorun(() => {
                 const maximized = this.attributes.maximized;
@@ -413,6 +441,14 @@ export class AppManager {
         callbacks.emit("onBoxFocus", payload);
     };
 
+    private onBoxBlurred = (payload: BoxBlurredPayload) => {
+        const focus = this.attributes.focus;
+        if (focus === payload.appId) {
+            this.windowManger.safeSetAttributes({ focus: undefined });
+            callbacks.emit("onBoxBlurred", payload);
+        }
+    };
+
     private onBoxClose = (payload: BoxClosePayload) => {
         const appProxy = this.appProxies.get(payload.appId);
         if (appProxy) {
@@ -426,6 +462,39 @@ 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();
+                }
+            );
+        });
+        this.refresher.add("lastNotMinimizedBoxesStatus", () => {
+            return safeListenPropsUpdated(
+                () => this.attributes.lastNotMinimizedBoxesStatus,
+                () => {
+                    this.boxManager?.setLastNotMinimizedBoxesStatus(
+                        this.attributes.lastNotMinimizedBoxesStatus
+                    );
+                }
+            );
+        });
+    };
     public addAppsChangeListener = () => {
         this.refresher.add("apps", () => {
             return safeListenPropsUpdated(
@@ -532,7 +601,7 @@ export class AppManager {
                         if (!appAttributes) {
                             throw new Error("appAttributes is undefined");
                         }
-
+                        
                         this.appCreateQueue.push<AppProxy>(async () => {
                             this.appStatus.set(id, AppStatus.StartCreate);
                             const appProxy = await this.baseInsertApp(
@@ -540,15 +609,21 @@ export class AppManager {
                                     kind: app.kind,
                                     options: app.options,
                                     isDynamicPPT: app.isDynamicPPT,
+                                    forceNormal: app.forceNormal,
+                                    forceTop: app.forceTop,
+                                    isDragContent: app.isDragContent,
                                 },
                                 id,
                                 false
                             );
                             if (
                                 appProxy &&
-                                this.store.focus === id &&
+                                this._focusAppId === id &&
                                 this._focusAppCreatedResolve
                             ) {
+                                if (this._resolveTimer) {
+                                    clearTimeout(this._resolveTimer);
+                                }
                                 this._focusAppCreatedResolve(appProxy);
                             }
                             return appProxy;
@@ -697,7 +772,8 @@ export class AppManager {
             console.warn("[WindowManager]: app duplicate exists and cannot be created again");
             return;
         }
-        const appProxy = new AppProxy(params, this, appId, isAddApp);
+        const AppProxyClass = getExtendClass(AppProxy, WindowManager.extendClass);
+        const appProxy = new AppProxyClass(params, this, appId, isAddApp);
         if (appProxy) {
             await appProxy.baseInsertApp(focus);
             this.appStatus.delete(appId);
@@ -874,6 +950,10 @@ export class AppManager {
         this.sideEffectManager.flushAll();
         this._prevFocused = undefined;
         this._prevSceneIndex = undefined;
+        if (this._resolveTimer) {
+            clearTimeout(this._resolveTimer);
+        }
         this._focusAppCreatedResolve = undefined;
+        this._resolveTimer = undefined;
     }
 }

package/src/AttributesDelegate.ts

@@ -4,11 +4,15 @@ 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 { getExtendClass } from "./Utils/extendClass";
+import type { ExtendClass } from "./Utils/extendClass";
+import type { NotMinimizedBoxState, TeleBoxState } from "@netless/telebox-insider";
 
 export enum Fields {
     Apps = "apps",
     Focus = "focus",
     State = "state",
+    /** 默认窗口状态, (用于窗口状态的统一管理) */
     BoxState = "boxState",
     MainViewCamera = "mainViewCamera",
     MainViewSize = "mainViewSize",
@@ -19,6 +23,10 @@ export enum Fields {
     FullPath = "fullPath",
     Registered = "registered",
     IframeBridge = "iframeBridge",
+    /** 所有窗口状态, (用于窗口状态的单独管理) */
+    BoxesStatus = "boxesStatus",
+    /** 上次非最小化窗口状态 */
+    LastNotMinimizedBoxesStatus = "lastNotMinimizedBoxesStatus",
 }
 
 export type Apps = {
@@ -45,6 +53,7 @@ export type ICamera = Camera & { id: string };
 export type ISize = Size & { id: string };
 
 export class AttributesDelegate {
+    static readonly kind = "AttributesDelegate";
     constructor(private context: StoreContext) {}
 
     public setContext(context: StoreContext) {
@@ -79,6 +88,42 @@ export class AttributesDelegate {
         return get(this.attributes, ["minimized"]);
     }
 
+    public getBoxesStatus(): Record<string, TeleBoxState> | undefined {
+        return get(this.attributes, [Fields.BoxesStatus]);
+    }
+
+    public getBoxStatus(id: string): TeleBoxState | undefined {
+        return get(this.attributes, [Fields.BoxesStatus, id]);
+    }
+
+    public setBoxStatus(id: string, status?: TeleBoxState) {
+        const attributes = this.attributes;
+        if (!attributes.boxesStatus) {
+            this.context.safeSetAttributes({ boxesStatus: {} });
+        }
+        if (this.getBoxStatus(id) !== status) {
+            this.context.safeUpdateAttributes([Fields.BoxesStatus, id], status);
+        }
+    }
+
+    public getLastNotMinimizedBoxesStatus(): Record<string, NotMinimizedBoxState> | undefined {
+        return get(this.attributes, [Fields.LastNotMinimizedBoxesStatus]);
+    }
+
+    public getLastNotMinimizedBoxStatus(id: string): NotMinimizedBoxState | undefined {
+        return get(this.attributes, [Fields.LastNotMinimizedBoxesStatus, id]);
+    }
+
+    public setLastNotMinimizedBoxStatus(id: string, status?: NotMinimizedBoxState) {
+        const attributes = this.attributes;
+        if (!attributes.lastNotMinimizedBoxesStatus) {
+            this.context.safeSetAttributes({ lastNotMinimizedBoxesStatus: {} });
+        }
+        if (this.getLastNotMinimizedBoxStatus(id) !== status) {
+            this.context.safeUpdateAttributes([Fields.LastNotMinimizedBoxesStatus, id], status);
+        }
+    }
+
     public setupAppAttributes(params: AddAppParams, id: string, isDynamicPPT: boolean) {
         const attributes = this.attributes;
         if (!attributes.apps) {
@@ -89,7 +134,14 @@ export class AttributesDelegate {
             attrNames.push("scenes");
         }
         const options = pick(params.options, attrNames);
-        const attrs: AppSyncAttributes = { kind: params.kind, options, isDynamicPPT };
+        const attrs: AppSyncAttributes = {
+            kind: params.kind,
+            options,
+            isDynamicPPT,
+            forceTop: params.forceTop,
+            forceNormal: params.forceNormal,
+            isDragContent: params.isDragContent,
+        };
         if (typeof params.src === "string") {
             attrs.src = params.src;
         }
@@ -249,14 +301,32 @@ export type Cursors = {
     [key: string]: Cursor;
 };
 
-export const store = new AttributesDelegate({
-    getAttributes: () => {
-        throw new Error("getAttributes not implemented");
-    },
-    safeSetAttributes: () => {
-        throw new Error("safeSetAttributes not implemented");
-    },
-    safeUpdateAttributes: () => {
-        throw new Error("safeUpdateAttributes not implemented");
-    },
-});
+// export const store = new AttributesDelegate({
+//     getAttributes: () => {
+//         throw new Error("getAttributes not implemented");
+//     },
+//     safeSetAttributes: () => {
+//         throw new Error("safeSetAttributes not implemented");
+//     },
+//     safeUpdateAttributes: () => {
+//         throw new Error("safeUpdateAttributes not implemented");
+//     },
+// });
+
+export const createAttributesDelegate = (
+    extendClass?: ExtendClass,
+    context: StoreContext = {
+        getAttributes: () => {
+            throw new Error("getAttributes not implemented");
+        },
+        safeSetAttributes: () => {
+            throw new Error("safeSetAttributes not implemented");
+        },
+        safeUpdateAttributes: () => {
+            throw new Error("safeUpdateAttributes not implemented");
+        },
+    }
+) => {
+    const AttributesDelegateClass = getExtendClass(AttributesDelegate, extendClass);
+    return new AttributesDelegateClass(context);
+};

package/src/BoxEmitter.ts

@@ -3,6 +3,7 @@ import Emittery from "emittery";
 
 export type BoxMovePayload = { appId: string; x: number; y: number };
 export type BoxFocusPayload = { appId: string };
+export type BoxBlurredPayload = { appId: string };
 export type BoxResizePayload = {
     appId: string;
     width: number;
@@ -19,6 +20,7 @@ export type BoxEvent = {
     resize: BoxResizePayload;
     close: BoxClosePayload;
     boxStateChange: BoxStateChangePayload;
+    blurred: BoxBlurredPayload;
 };
 
 export type BoxEmitterType = Emittery<BoxEvent>;

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";
@@ -12,12 +12,15 @@ import type {
     TeleBoxColorScheme,
     TeleBoxRect,
     TeleBoxConfig,
+    TeleBoxState,
+    NotMinimizedBoxState,
 } from "@netless/telebox-insider";
 import type Emittery from "emittery";
 import type { NetlessApp } from "./typings";
 import type { View } from "white-web-sdk";
 import type { CallbacksType } from "./callback";
 import type { EmitterType } from "./InternalEmitter";
+import { getExtendClass, TeleBoxManager, TeleBoxCollector } from "./Utils/extendClass";
 
 export { TELE_BOX_STATE };
 
@@ -29,6 +32,10 @@ export type CreateBoxParams = {
     options?: AddAppOptions;
     canOperate?: boolean;
     smartPosition?: boolean;
+    boxStatus?: TeleBoxState;
+    forceTop?: boolean;
+    forceNormal?: boolean;
+    isDragContent?: boolean;
 };
 
 type AppId = { appId: string };
@@ -45,12 +52,15 @@ export type CreateTeleBoxManagerConfig = {
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     prefersColorScheme?: TeleBoxColorScheme;
+    useBoxesStatus?: boolean;
 };
 
 export type BoxManagerContext = {
     safeSetAttributes: (attributes: any) => void;
     getMainView: () => View;
     updateAppState: (appId: string, field: AppAttributes, value: any) => void;
+    setBoxStatus: (appId: string, status?: TeleBoxState) => void;
+    setLastNotMinimizedBoxStatus: (appId: string, status?: NotMinimizedBoxState) => void;
     emitter: EmitterType;
     boxEmitter: BoxEmitterType;
     callbacks: CallbacksType;
@@ -67,11 +77,22 @@ export const createBoxManager = (
     boxEmitter: BoxEmitterType,
     options: CreateTeleBoxManagerConfig
 ) => {
-    return new BoxManager(
+    const BoxManagerClass = getExtendClass(BoxManager, WindowManager.extendClass);
+    return new BoxManagerClass(
         {
             safeSetAttributes: (attributes: any) => manager.safeSetAttributes(attributes),
             getMainView: () => manager.mainView,
             updateAppState: (...args) => manager.appManager?.store.updateAppState(...args),
+            setBoxStatus: (id: string, boxStatus?: TeleBoxState) =>
+                manager.appManager?.store.setBoxStatus(id, boxStatus),
+            setLastNotMinimizedBoxStatus: (
+                id: string,
+                lastNotMinimizedBoxStatus?: NotMinimizedBoxState
+            ) =>
+                manager.appManager?.store.setLastNotMinimizedBoxStatus(
+                    id,
+                    lastNotMinimizedBoxStatus
+                ),
             canOperate: () => manager.canOperate,
             notifyContainerRectUpdate: (rect: TeleBoxRect) =>
                 manager.appManager?.notifyContainerRectUpdate(rect),
@@ -86,6 +107,7 @@ export const createBoxManager = (
 };
 
 export class BoxManager {
+    static readonly kind = "BoxManager";
     public teleBoxManager: TeleBoxManager;
 
     constructor(
@@ -167,9 +189,32 @@ export class BoxManager {
                 }
             }
         });
+        this.teleBoxManager.events.on("blurred", box => {
+            if (box) {
+                if (this.canOperate) {
+                    boxEmitter.emit("blurred", { appId: box.id });
+                }
+            }
+        });
         this.teleBoxManager.events.on("z_index", box => {
             this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
         });
+        this.teleBoxManager.events.on(
+            "box_status",
+            (box: { id: string; boxStatus?: TeleBoxState }) => {
+                if (this.canOperate) {
+                    this.context.setBoxStatus(box.id, box.boxStatus);
+                }
+            }
+        );
+        this.teleBoxManager.events.on(
+            "last_not_minimized_box_status",
+            (box: { id: string; boxStatus?: NotMinimizedBoxState }) => {
+                if (this.canOperate) {
+                    this.context.setLastNotMinimizedBoxStatus(box.id, box.boxStatus);
+                }
+            }
+        );
         emitter.on("playgroundSizeChange", () => this.updateManagerRect());
         emitter.on("updateManagerRect", () => this.updateManagerRect());
     }
@@ -228,6 +273,10 @@ export class BoxManager {
             width,
             height,
             id: params.appId,
+            boxStatus: params.boxStatus,
+            forceTop: params.forceTop,
+            forceNormal: params.forceNormal,
+            isDragContent: params.isDragContent,
         };
         this.teleBoxManager.create(createBoxConfig, params.smartPosition);
         this.context.emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
@@ -247,6 +296,27 @@ export class BoxManager {
             }
         }
     }
+    public setBoxesStatus(status?: Record<string, TeleBoxState>): void {
+        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, skipUpdate = false): void {
+    //     this.teleBoxManager.update(appId, { boxStatus: status }, true);
+    // }
+
+    public setLastNotMinimizedBoxesStatus(status?: Record<string, NotMinimizedBoxState>): void {
+        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 {
+    //     this.teleBoxManager.update(appId, { lastNotMinimizedBoxStatus: status }, true);
+    // }
 
     public setupBoxManager(
         createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
@@ -263,9 +333,11 @@ export class BoxManager {
             },
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
+            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();
         }
@@ -278,7 +350,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);
@@ -318,6 +391,11 @@ export class BoxManager {
                     width: state.width || 0.5,
                     height: state.height || 0.5,
                     zIndex: state.zIndex,
+                    boxStatus: state.boxStatus,
+                    lastNotMinimizedBoxStatus: state.lastNotMinimizedBoxStatus,
+                    forceTop: state.forceTop,
+                    forceNormal: state.forceNormal,
+                    isDragContent: state.isDragContent,
                 },
                 true
             );

package/src/Cursor/index.ts

@@ -26,6 +26,7 @@ export type MoveCursorParams = {
 const LocalCursorSideEffectId = "local-cursor";
 
 export class CursorManager {
+    static readonly kind = "CursorManager";
     public containerRect?: DOMRect;
     public wrapperRect?: DOMRect;
     public cursorInstances: Map<string, Cursor> = new Map();

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

@@ -0,0 +1,62 @@
+import { AppContext, AppProxy } from "../App";
+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
+    | typeof AppProxy
+    | typeof AppContext
+    | typeof BoxManager
+    | typeof AttributesDelegate
+    | typeof CursorManager
+    | typeof TeleBoxManager
+    | typeof TeleBoxCollector;
+
+export type ExtendClass = {
+    AppManager?: typeof AppManager;
+    BoxManager?: typeof BoxManager;
+    AttributesDelegate?: typeof AttributesDelegate;
+    CursorManager?: typeof CursorManager;
+    AppProxy?: typeof AppProxy;
+    AppContext?: typeof AppContext;
+    TeleBoxManager?: typeof TeleBoxManager;
+    TeleBoxCollector?: typeof TeleBoxCollector;
+};
+export function getExtendClass<T extends ExtendClassAble>(
+    baseClass: T,
+    extendClass?: ExtendClass
+): T {
+    if (baseClass.kind && extendClass && Object.keys(extendClass).includes(baseClass.kind)) {
+        switch (baseClass.kind) {
+            case "AppManager":
+                return (extendClass?.AppManager || AppManager) as T;
+            case "BoxManager":
+                return (extendClass?.BoxManager || BoxManager) as T;
+            case "AttributesDelegate":
+                return (extendClass?.AttributesDelegate || AttributesDelegate) as T;
+            case "CursorManager":
+                return (extendClass?.CursorManager || CursorManager) as T;
+            case "AppProxy":
+                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;
+        }
+    }
+    return baseClass;
+}

package/src/callback.ts

@@ -1,9 +1,15 @@
 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";
 import type {
+    BoxBlurredPayload,
     BoxClosePayload,
     BoxFocusPayload,
     BoxMovePayload,
@@ -33,6 +39,7 @@ export type PublicEvent = {
     onBoxMove: BoxMovePayload;
     onBoxResize: BoxResizePayload;
     onBoxFocus: BoxFocusPayload;
+    onBoxBlurred: BoxBlurredPayload;
     onBoxClose: BoxClosePayload;
     onBoxStateChange: BoxStateChangePayload;
     onMainViewMounted: View;
@@ -40,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>;