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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.7-beta.2",
+  "version": "1.0.7-beta.4",
   "description": "Multi-window mode for Netless Whiteboard",
   "author": "l1shen <lishen1635@gmail.com> (https://github.com/l1shen)",
   "license": "MIT",
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/telebox-insider": "0.3.0-beta.9",
+    "@netless/telebox-insider": "0.3.0-beta.10",
     "emittery": "^0.9.2",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.1",

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";
@@ -179,7 +180,8 @@ export class AppProxy implements PageRemoveService {
         if (!this.boxManager) {
             throw new BoxManagerNotFoundError();
         }
-        const context = new AppContext(this.manager, this.boxManager, appId, this, appOptions);
+        const AppContextClass = getExtendClass(AppContext, WindowManager.extendClass);
+        const context = new AppContextClass(this.manager, this.boxManager, appId, this, appOptions);
         this.appContext = context;
         try {
             internalEmitter.once(`${appId}${Events.WindowCreated}` as any).then(async () => {
@@ -216,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) {
@@ -308,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) {

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";
@@ -434,7 +435,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);
         }
@@ -458,8 +459,6 @@ export class AppManager {
             return safeListenPropsUpdated(
                 () => this.attributes.boxesStatus,
                 () => {
-                    const currentBoxesStatus = this.boxManager?.teleBoxManager.boxesStatus;
-                    console.log("boxesStatus===>autorun", isEqual(Object.entries(this.attributes.boxesStatus), [...(currentBoxesStatus?.entries() ?? [])]), Object.entries(this.attributes.boxesStatus), [...(currentBoxesStatus?.entries() ?? [])])
                     this.boxManager?.setBoxesStatus(this.attributes.boxesStatus);
                 }
             );
@@ -468,9 +467,9 @@ export class AppManager {
             return safeListenPropsUpdated(
                 () => this.attributes.lastNotMinimizedBoxesStatus,
                 () => {
-                    const currentLastNotMinimizedBoxesStatus = this.boxManager?.teleBoxManager.lastNotMinimizedBoxesStatus;
-                    console.log("lastNotMinimizedBoxesStatus===>autorun", isEqual(Object.entries(this.attributes.lastNotMinimizedBoxesStatus), [...(currentLastNotMinimizedBoxesStatus?.entries() ?? [])]), Object.entries(this.attributes.lastNotMinimizedBoxesStatus), [...(currentLastNotMinimizedBoxesStatus?.entries() ?? [])])
-                    this.boxManager?.setLastNotMinimizedBoxesStatus(this.attributes.lastNotMinimizedBoxesStatus);
+                    this.boxManager?.setLastNotMinimizedBoxesStatus(
+                        this.attributes.lastNotMinimizedBoxesStatus
+                    );
                 }
             );
         });
@@ -708,12 +707,6 @@ export class AppManager {
         const attrs = params.attributes ?? {};
         this.safeUpdateAttributes([appId], attrs);
         this.store.setupAppAttributes(params, appId, isDynamicPPT);
-        // if (this.useBoxesStatus){
-        //     // todo: 这里需要优化
-        //     // if(!this.store.getLastNotMinimizedBoxesStatus()){
-        //     //     this.store.setLastNotMinimizedBoxesStatus({});
-        //     // }
-        // }
         const needFocus = !this.boxManager?.minimized;
         if (needFocus) {
             this.store.setAppFocus(appId, true);

package/src/AttributesDelegate.ts

@@ -4,8 +4,10 @@ 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 { TELE_BOX_STATE } from "@netless/telebox-insider";
+import type { ExtendClass } from "./Utils/extendClass";
+import type { NotMinimizedBoxState, TeleBoxState } from "@netless/telebox-insider";
 
 export enum Fields {
     Apps = "apps",

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 };
 
@@ -179,7 +179,6 @@ 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);
@@ -189,7 +188,6 @@ export class BoxManager {
         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 });
                 }
             }
@@ -273,7 +271,6 @@ export class BoxManager {
             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);
     }
@@ -301,7 +298,10 @@ export class BoxManager {
     }
 
     public setLastNotMinimizedBoxesStatus(status?: Record<string, NotMinimizedBoxState>): void {
-        this.teleBoxManager.setLastNotMinimizedBoxesStatus(new Map(Object.entries(status ?? {})), true);
+        this.teleBoxManager.setLastNotMinimizedBoxesStatus(
+            new Map(Object.entries(status ?? {})),
+            true
+        );
     }
 
     public setLastNotMinimizedBoxStatus(appId: string, status?: NotMinimizedBoxState): void {
@@ -326,7 +326,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();
         }
@@ -339,7 +340,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/Utils/extendClass.ts

@@ -1,15 +1,26 @@
-import { AppProxy } from "../App";
+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 AppProxy;
+    | typeof TeleBoxManager
+    | typeof TeleBoxCollector;
 
 export type ExtendClass = {
     AppManager?: typeof AppManager;
@@ -17,12 +28,15 @@ export type ExtendClass = {
     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 {
-    switch (baseClass.constructor.name) {
+    switch (baseClass.name) {
         case "AppManager":
             return (extendClass?.AppManager || AppManager) as T;
         case "BoxManager":
@@ -33,6 +47,12 @@ export function getExtendClass<T extends ExtendClassAble>(
             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;
     }

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,8 +64,10 @@ 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";
+import { getExtendClass } from "./Utils/extendClass";
+import type { ExtendClass } from "./Utils/extendClass";
+
+export * from "./utils/extendClass";
 
 export type WindowMangerAttributes = {
     modelValue?: string;
@@ -166,7 +169,7 @@ export type MountParams = {
     fullscreen?: boolean;
     polling?: boolean;
     supportAppliancePlugin?: boolean;
-    /** 是否使用 boxesStatus 状态 */
+    /** 是否使用 boxesStatus 状态管理窗口 */
     useBoxesStatus?: boolean;
 };
 
@@ -394,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) {