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

package/src/AttributesDelegate.ts

@@ -4,11 +4,14 @@ 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";
 
 export enum Fields {
     Apps = "apps",
     Focus = "focus",
     State = "state",
+    /** 默认窗口状态, (用于窗口状态的统一管理) */
     BoxState = "boxState",
     MainViewCamera = "mainViewCamera",
     MainViewSize = "mainViewSize",
@@ -19,6 +22,10 @@ export enum Fields {
     FullPath = "fullPath",
     Registered = "registered",
     IframeBridge = "iframeBridge",
+    /** 所有窗口状态, (用于窗口状态的单独管理) */
+    BoxesStatus = "boxesStatus",
+    /** 上次非最小化窗口状态 */
+    LastNotMinimizedBoxesStatus = "lastNotMinimizedBoxesStatus",
 }
 
 export type Apps = {
@@ -79,6 +86,42 @@ export class AttributesDelegate {
         return get(this.attributes, ["minimized"]);
     }
 
+    public getBoxesStatus(): Record<string, TELE_BOX_STATE> | undefined {
+        return get(this.attributes, [Fields.BoxesStatus]);
+    }
+
+    public getBoxStatus(id: string): TELE_BOX_STATE | 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) {
@@ -249,14 +292,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

@@ -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 } from "./Utils/extendClass";
 
 export { TELE_BOX_STATE };
 
@@ -29,6 +32,7 @@ export type CreateBoxParams = {
     options?: AddAppOptions;
     canOperate?: boolean;
     smartPosition?: boolean;
+    boxStatus?: TeleBoxState;
 };
 
 type AppId = { appId: string };
@@ -45,12 +49,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 +74,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),
@@ -161,15 +179,40 @@ export class BoxManager {
         this.teleBoxManager.events.on("focused", box => {
             if (box) {
                 if (this.canOperate) {
+                    console.log("focused===>focused", box.id, box.zIndex)
                     boxEmitter.emit("focus", { appId: box.id });
                 } else {
                     this.teleBoxManager.blurBox(box.id);
                 }
             }
         });
+        this.teleBoxManager.events.on("blurred", box => {
+            if (box) {
+                if (this.canOperate) {
+                    console.log("focused===>blurred", box.id, box.zIndex)
+                    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,7 +271,9 @@ export class BoxManager {
             width,
             height,
             id: params.appId,
+            boxStatus: params.boxStatus,
         };
+        console.log("createBox===>", createBoxConfig.id, params.boxStatus)
         this.teleBoxManager.create(createBoxConfig, params.smartPosition);
         this.context.emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
     }
@@ -247,6 +292,21 @@ export class BoxManager {
             }
         }
     }
+    public setBoxesStatus(status?: Record<string, TeleBoxState>): void {
+        this.teleBoxManager.setBoxesStatus(new Map(Object.entries(status ?? {})), true);
+    }
+
+    public setBoxStatus(appId: string, status?: TeleBoxState): void {
+        this.teleBoxManager.update(appId, { boxStatus: status }, true);
+    }
+
+    public setLastNotMinimizedBoxesStatus(status?: Record<string, NotMinimizedBoxState>): void {
+        this.teleBoxManager.setLastNotMinimizedBoxesStatus(new Map(Object.entries(status ?? {})), true);
+    }
+
+    public setLastNotMinimizedBoxStatus(appId: string, status?: NotMinimizedBoxState): void {
+        this.teleBoxManager.update(appId, { lastNotMinimizedBoxStatus: status }, true);
+    }
 
     public setupBoxManager(
         createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
@@ -263,6 +323,7 @@ export class BoxManager {
             },
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
+            useBoxesStatus: createTeleBoxManagerConfig?.useBoxesStatus || false,
         };
 
         const manager = new TeleBoxManager(initManagerState);
@@ -318,6 +379,8 @@ export class BoxManager {
                     width: state.width || 0.5,
                     height: state.height || 0.5,
                     zIndex: state.zIndex,
+                    boxStatus: state.boxStatus,
+                    lastNotMinimizedBoxStatus: state.lastNotMinimizedBoxStatus,
                 },
                 true
             );

package/src/Utils/extendClass.ts

@@ -0,0 +1,39 @@
+import { AppProxy } from "../App";
+import { AppManager } from "../AppManager";
+import { AttributesDelegate } from "../AttributesDelegate";
+import { BoxManager } from "../BoxManager";
+import { CursorManager } from "../Cursor";
+
+export type ExtendClassAble =
+    | typeof AppManager
+    | typeof BoxManager
+    | typeof AttributesDelegate
+    | typeof CursorManager
+    | typeof AppProxy;
+
+export type ExtendClass = {
+    AppManager?: typeof AppManager;
+    BoxManager?: typeof BoxManager;
+    AttributesDelegate?: typeof AttributesDelegate;
+    CursorManager?: typeof CursorManager;
+    AppProxy?: typeof AppProxy;
+};
+export function getExtendClass<T extends ExtendClassAble>(
+    baseClass: T,
+    extendClass?: ExtendClass
+): T {
+    switch (baseClass.constructor.name) {
+        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;
+        default:
+            return baseClass;
+    }
+}

package/src/callback.ts

@@ -4,6 +4,7 @@ import type { CameraState, SceneState, View, ViewVisionMode } from "white-web-sd
 import type { LoadAppEvent } from "./Register";
 import type { PageState } from "./Page";
 import type {
+    BoxBlurredPayload,
     BoxClosePayload,
     BoxFocusPayload,
     BoxMovePayload,
@@ -33,6 +34,7 @@ export type PublicEvent = {
     onBoxMove: BoxMovePayload;
     onBoxResize: BoxResizePayload;
     onBoxFocus: BoxFocusPayload;
+    onBoxBlurred: BoxBlurredPayload;
     onBoxClose: BoxClosePayload;
     onBoxStateChange: BoxStateChangePayload;
     onMainViewMounted: View;

package/src/index.ts

@@ -28,9 +28,9 @@ import {
     putScenes,
     wait,
 } from "./Utils/Common";
-import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
+import { TELE_BOX_STATE, BoxManager } from "./BoxManager";
 import * as Errors from "./Utils/error";
-import type { Apps, Position } from "./AttributesDelegate";
+import { Apps, Position } from "./AttributesDelegate";
 import type {
     Displayer,
     SceneDefinition,
@@ -49,8 +49,12 @@ import type {
 } from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
 import type { ApplianceIcons, NetlessApp, RegisterParams } from "./typings";
-import type { TeleBoxColorScheme, TeleBoxState } from "@netless/telebox-insider";
-import type { AppProxy } from "./App";
+import type {
+    NotMinimizedBoxState,
+    TeleBoxColorScheme,
+    TeleBoxState,
+} from "@netless/telebox-insider";
+import { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
 import type { PageController, AddPageParams, PageState } from "./Page";
@@ -59,6 +63,7 @@ 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";
 export * from "./View/IframeBridge";
 
 export type WindowMangerAttributes = {
@@ -122,8 +127,13 @@ export type AppInitState = {
     maximized?: boolean;
     minimized?: boolean;
     sceneIndex?: number;
+    /** 所有box的基本状态 */
     boxState?: TeleBoxState; // 兼容旧版 telebox
     zIndex?: number;
+    /** 扩展版本,单个box的状态 */
+    boxStatus?: TeleBoxState;
+    /** 上次非最小化窗口状态 */
+    lastNotMinimizedBoxStatus?: NotMinimizedBoxState;
 };
 
 export type CursorMovePayload = { uid: string; state?: "leave"; position: Position };
@@ -156,10 +166,11 @@ export type MountParams = {
     fullscreen?: boolean;
     polling?: boolean;
     supportAppliancePlugin?: boolean;
+    /** 是否使用 boxesStatus 状态 */
+    useBoxesStatus?: boolean;
 };
 
 export const reconnectRefresher = new ReconnectRefresher({ emitter: internalEmitter });
-
 export class WindowManager
     extends InvisiblePlugin<WindowMangerAttributes, any>
     implements PageController
@@ -194,6 +205,7 @@ export class WindowManager
 
     private boxManager?: BoxManager;
     private static params?: MountParams;
+    static extendClass?: ExtendClass;
 
     private containerResizeObserver?: ContainerResizeObserver;
     public containerSizeRatio = WindowManager.containerSizeRatio;
@@ -210,7 +222,10 @@ export class WindowManager
         WindowManager._resolve(manager);
     }
 
-    public static async mount(params: MountParams): Promise<WindowManager> {
+    public static async mount(
+        params: MountParams,
+        extendClass?: ExtendClass
+    ): Promise<WindowManager> {
         const room = params.room;
         WindowManager.container = params.container;
         WindowManager.supportAppliancePlugin = params.supportAppliancePlugin;
@@ -219,6 +234,7 @@ export class WindowManager
 
         const cursor = params.cursor;
         WindowManager.params = params;
+        WindowManager.extendClass = extendClass;
         WindowManager.displayer = params.room;
         checkVersion();
         let manager: WindowManager | undefined = undefined;
@@ -269,11 +285,14 @@ export class WindowManager
         }
         await manager.ensureAttributes();
 
+        const AppManagerClass = getExtendClass(AppManager, WindowManager.extendClass);
+        const CursorManagerClass = getExtendClass(CursorManager, WindowManager.extendClass);
+
         manager._fullscreen = params.fullscreen;
-        manager.appManager = new AppManager(manager);
+        manager.appManager = new AppManagerClass(manager);
         manager.appManager.polling = params.polling || false;
         manager._pageState = new PageStateImpl(manager.appManager);
-        manager.cursorManager = new CursorManager(
+        manager.cursorManager = new CursorManagerClass(
             manager.appManager,
             Boolean(cursor),
             params.cursorOptions,
@@ -369,9 +388,14 @@ export class WindowManager
                     collectorContainer: params.collectorContainer,
                     collectorStyles: params.collectorStyles,
                     prefersColorScheme: params.prefersColorScheme,
+                    useBoxesStatus: params.useBoxesStatus,
                 });
                 this.boxManager = boxManager;
-                this.appManager?.setBoxManager(boxManager);
+                if (this.appManager) {
+                    this.appManager.useBoxesStatus = params.useBoxesStatus || false;
+                    this.appManager.setBoxManager(boxManager);
+    
+                }
                 this.bindMainView(mainViewElement, params.disableCameraTransform);
                 if (WindowManager.wrapper) {
                     this.cursorManager?.setupWrapper(WindowManager.wrapper);
@@ -696,6 +720,21 @@ export class WindowManager
         this.boxManager?.setMinimized(minimized, false);
     }
 
+    /** 设置指定 box 的状态, 如果为 undefined, 则移除状态*/
+    public setBoxStatus(boxId: string, boxStatus?: TELE_BOX_STATE): void {
+        if (!this.canOperate) return;
+        this.boxManager?.setBoxStatus(boxId, boxStatus);
+    }
+
+    /** 设置指定 box 的非最小化状态, 如果为 undefined, 则移除状态 */
+    public setLastNotMinimizedBoxStatus(
+        boxId: string,
+        lastNotMinimizedBoxStatus?: NotMinimizedBoxState
+    ): void {
+        if (!this.canOperate) return;
+        this.boxManager?.setLastNotMinimizedBoxStatus(boxId, lastNotMinimizedBoxStatus);
+    }
+
     public setFullscreen(fullscreen: boolean): void {
         if (this._fullscreen !== fullscreen) {
             this._fullscreen = fullscreen;
@@ -761,6 +800,22 @@ export class WindowManager
         }
     }
 
+    public get boxStatus(): Record<string, TELE_BOX_STATE> | undefined {
+        if (this.appManager) {
+            return this.appManager.store.getBoxesStatus();
+        } else {
+            throw new Errors.AppManagerNotInitError();
+        }
+    }
+
+    public get lastNotMinimizedBoxStatus(): Record<string, NotMinimizedBoxState> | undefined {
+        if (this.appManager) {
+            return this.appManager.store.getLastNotMinimizedBoxesStatus();
+        } else {
+            throw new Errors.AppManagerNotInitError();
+        }
+    }
+
     public get darkMode(): boolean {
         return Boolean(this.appManager?.boxManager?.darkMode);
     }

package/src/shim.d.ts

@@ -5,6 +5,10 @@ declare module "*.svelte" {
     export default app;
 }
 
+declare module "@netless/telebox-insider" {
+    export * from "@netless/telebox-insider/dist/index.d.ts";
+}
+
 declare global {
     const __APP_VERSION__: string;
     const __APP_DEPENDENCIES__: Record<string, string>;