@netless/window-manager 0.4.0-canary.1 → 0.4.0-canary.13

package/src/AppContext.ts

@@ -6,18 +6,20 @@ import {
     unlistenDisposed,
     unlistenUpdated,
     toJS
-    } from 'white-web-sdk';
+} from 'white-web-sdk';
 import { BoxNotCreatedError } from './Utils/error';
-import type { Room, SceneDefinition, View } from "white-web-sdk";
+import type { Room, SceneDefinition, View, EventListener as WhiteEventListener } from "white-web-sdk";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import type Emittery from "emittery";
 import type { BoxManager } from "./BoxManager";
 import type { AppEmitterEvent } from "./index";
 import type { AppManager } from "./AppManager";
 import type { AppProxy } from "./AppProxy";
+import { Storage } from './App/Storage';
+import type { MagixEventAddListener, MagixEventDispatcher, MagixEventRemoveListener } from './App/MagixEvent';
 
-export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
-    public readonly emitter: Emittery<AppEmitterEvent<TAttrs>>;
+export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOptions = any> {
+    public readonly emitter: Emittery<AppEmitterEvent<TAttributes>>;
     public readonly mobxUtils = {
         autorun,
         reaction,
@@ -39,21 +41,22 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
         private boxManager: BoxManager,
         public appId: string,
         private appProxy: AppProxy,
-        private appOptions?: AppOptions | (() => AppOptions),
+        private appOptions?: TAppOptions | (() => TAppOptions),
     ) {
         this.emitter = appProxy.appEmitter;
         this.isAddApp = appProxy.isAddApp;
     }
 
-    public getDisplayer() {
+    public getDisplayer = () => {
         return this.manager.displayer;
     }
 
-    public getAttributes(): TAttrs | undefined {
+    /** @deprecated Use context.storage.state instead. */
+    public getAttributes = (): TAttributes | undefined => {
         return this.appProxy.attributes;
     }
 
-    public getScenes(): SceneDefinition[] | undefined {
+    public getScenes = (): SceneDefinition[] | undefined => {
         const appAttr = this.store.getAppAttributes(this.appId);
         if (appAttr?.isDynamicPPT) {
             const appProxy = this.manager.appProxies.get(this.appId);
@@ -65,19 +68,21 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
         }
     }
 
-    public getView(): View | undefined {
+    public getView = (): View | undefined => {
         return this.appProxy.view;
     }
 
-    public getInitScenePath() {
+    public getInitScenePath = () => {
         return this.manager.getAppInitPath(this.appId);
     }
 
-    public getIsWritable(): boolean {
+    /** Get App writable status. */
+    public getIsWritable = (): boolean => {
         return this.manager.canOperate;
     }
 
-    public getBox(): ReadonlyTeleBox {
+    /** Get the App Window UI box. */
+    public getBox = (): ReadonlyTeleBox => {
         const box = this.boxManager.getBox(this.appId);
         if (box) {
             return box;
@@ -86,27 +91,30 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
         }
     }
 
-    public getRoom(): Room | undefined {
+    public getRoom = (): Room | undefined => {
         return this.manager.room;
     }
 
-    public setAttributes(attributes: TAttrs) {
+    /** @deprecated Use context.storage.setState instead. */
+    public setAttributes = (attributes: TAttributes) => {
         this.manager.safeSetAttributes({ [this.appId]: attributes });
     }
 
-    public updateAttributes(keys: string[], value: any) {
+    /** @deprecated Use context.storage.setState instead. */
+    public updateAttributes = (keys: string[], value: any) => {
         if (this.manager.attributes[this.appId]) {
             this.manager.safeUpdateAttributes([this.appId, ...keys], value);
         }
     }
 
-    public async setScenePath(scenePath: string): Promise<void> {
+    public setScenePath = async (scenePath: string): Promise<void> => {
         if (!this.appProxy.box) return;
         this.appProxy.setFullPath(scenePath);
-        this.appProxy.context.switchAppToWriter(this.appId);
+        // 兼容 15 版本 SDK 的切页
+        this.getRoom()?.setScenePath(scenePath);
     }
 
-    public mountView(dom: HTMLDivElement): void {
+    public mountView = (dom: HTMLDivElement): void => {
         const view = this.getView();
         if (view) {
             view.divElement = dom;
@@ -117,7 +125,44 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
         }
     }
 
-    public getAppOptions(): AppOptions | undefined {
-        return typeof this.appOptions === 'function' ? (this.appOptions as () => AppOptions)() : this.appOptions
+    /** Get the local App options. */
+    public getAppOptions = (): TAppOptions | undefined => {
+        return typeof this.appOptions === 'function' ? (this.appOptions as () => TAppOptions)() : this.appOptions
     }
+
+    private _storage?: Storage<TAttributes>
+
+    /** Main Storage for attributes. */
+    public get storage(): Storage<TAttributes> {
+        if (!this._storage) {
+            this._storage = new Storage(this);
+        }
+        return this._storage;
+    }
+
+    /**
+     * Create separated storages for flexible state management.
+     * @param storeId Namespace for the storage. Storages of the same namespace share the same data.
+     * @param defaultState Default state for initial storage creation.
+     * @returns 
+     */
+    public createStorage = <TState>(storeId: string, defaultState?: TState): Storage<TState> => {
+        const storage = new Storage(this, storeId, defaultState);
+        this.emitter.on("destroy", () => {
+            storage.destroy();
+        });
+        return storage;
+    }
+
+    /** Dispatch events to other clients (and self). */
+    public dispatchMagixEvent: MagixEventDispatcher<TMagixEventPayloads> = (this.manager.displayer as Room).dispatchMagixEvent.bind(this.manager.displayer)
+
+    /** Listen to events from others clients (and self messages). */
+    public addMagixEventListener: MagixEventAddListener<TMagixEventPayloads> = (event, handler, options) => {
+        this.manager.displayer.addMagixEventListener(event, handler as WhiteEventListener, options);
+        return () => this.manager.displayer.removeMagixEventListener(event, handler as WhiteEventListener);
+    }
+
+    /** Remove a Magix event listener. */
+    public removeMagixEventListener = this.manager.displayer.removeMagixEventListener.bind(this.manager.displayer) as MagixEventRemoveListener<TMagixEventPayloads>
 }

package/src/AppListener.ts

@@ -34,10 +34,6 @@ export class AppListeners {
                     this.appResizeHandler(data.payload);
                     break;
                 }
-                case Events.SwitchViewsToFreedom: {
-                    this.switchViewsToFreedomHandler();
-                    break;
-                }
                 case Events.AppBoxStateChange: {
                     this.boxStateChangeHandler(data.payload);
                     break;
@@ -65,16 +61,13 @@ export class AppListeners {
         this.manager.room?.refreshViewSize();
     };
 
-    private switchViewsToFreedomHandler = () => {
-        this.manager.viewManager.freedomAllViews();
-    };
-
     private boxStateChangeHandler = (state: TeleBoxState) => {
         callbacks.emit("boxStateChange", state);
     }
 
     private setMainViewScenePathHandler = ({ nextScenePath }: { nextScenePath: string }) => {
         setViewFocusScenePath(this.manager.mainView, nextScenePath);
+        callbacks.emit("mainViewScenePathChange", nextScenePath);
     }
 
     private moveCameraToContainHandler = (payload: any) => {

package/src/AppManager.ts

@@ -1,24 +1,23 @@
 import pRetry from "p-retry";
-import { sortBy } from "lodash";
 import { AppAttributes, AppStatus, Events, MagixEventName } from "./constants";
 import { AppListeners } from "./AppListener";
 import { AppProxy } from "./AppProxy";
-import { store } from "./AttributesDelegate";
-import { autorun, isPlayer, isRoom, ScenePathType, ViewVisionMode } from "white-web-sdk";
-import { callbacks, emitter, WindowManager } from "./index";
-import { CameraStore } from "./Utils/CameraStore";
-import { genAppId, makeValidScenePath, setScenePath } from "./Utils/Common";
+import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
+import { callbacks, emitter, WindowManager, reconnectRefresher } from "./index";
+import { genAppId, makeValidScenePath, setScenePath, setViewFocusScenePath } from "./Utils/Common";
 import { log } from "./Utils/log";
-import { MainViewProxy } from "./MainView";
+import { MainViewProxy } from "./View/MainView";
 import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
-import { ReconnectRefresher } from "./ReconnectRefresher";
-import { ViewManager } from "./ViewManager";
+import { get, sortBy } from "lodash";
+import { store } from "./AttributesDelegate";
+import { ViewManager } from "./View/ViewManager";
+import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
 import type { Displayer, DisplayerState, Room } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect, EmitterEvent } from "./index";
+
 export class AppManager {
     public displayer: Displayer;
-    public cameraStore: CameraStore;
     public viewManager: ViewManager;
     public appProxies: Map<string, AppProxy> = new Map();
     public appStatus: Map<string, AppStatus> = new Map();
@@ -30,6 +29,9 @@ export class AppManager {
     private appListeners: AppListeners;
     public boxManager?: BoxManager;
 
+    private _prevSceneIndex: number | undefined;
+    private _prevFocused: string | undefined;
+
     constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
         this.store.setContext({
@@ -37,19 +39,18 @@ export class AppManager {
             safeSetAttributes: attributes => this.safeSetAttributes(attributes),
             safeUpdateAttributes: (keys, val) => this.safeUpdateAttributes(keys, val),
         });
-        this.cameraStore = new CameraStore();
         this.mainViewProxy = new MainViewProxy(this);
-        this.viewManager = new ViewManager(this);
+        this.viewManager = new ViewManager(this.displayer);
         this.appListeners = new AppListeners(this);
         this.displayer.callbacks.on(this.eventName, this.displayerStateListener);
         this.appListeners.addListeners();
 
-        this.refresher = new ReconnectRefresher(this.room, {
-            notifyReconnected: () => this.notifyReconnected(),
-        });
+        this.refresher = reconnectRefresher;
+        this.refresher.setRoom(this.room);
+        this.refresher.setContext({ emitter });
 
         emitter.once("onCreated").then(() => this.onCreated());
-
+        emitter.on("onReconnected", () => this.onReconnected());
         if (isPlayer(this.displayer)) {
             emitter.on("seek", time => {
                 this.appProxies.forEach(appProxy => {
@@ -97,6 +98,24 @@ export class AppManager {
                 }
             });
         });
+        this.refresher?.add("mainViewIndex", () => {
+            return autorun(() => {
+                const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
+                if (mainSceneIndex !== undefined && this._prevSceneIndex !== mainSceneIndex) {
+                    callbacks.emit("mainViewSceneIndexChange", mainSceneIndex);
+                    this._prevSceneIndex = mainSceneIndex;
+                }
+            });
+        });
+        this.refresher?.add("focusedChange", () => {
+            return autorun(() => {
+                const focused = get(this.attributes, "focus");
+                if (this._prevFocused !== focused) {
+                    callbacks.emit("focusedChange", focused);
+                    this._prevFocused = focused;
+                }
+            });
+        })
         if (!this.attributes.apps || Object.keys(this.attributes.apps).length === 0) {
             const mainScenePath = this.store.getMainViewScenePath();
             if (!mainScenePath) return;
@@ -107,6 +126,7 @@ export class AppManager {
         }
         this.displayerWritableListener(!this.room?.isWritable);
         this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
+        this._prevFocused = this.attributes.focus;
     }
 
     /**
@@ -187,15 +207,18 @@ export class AppManager {
         mainView.disableCameraTransform = disableCameraTransform;
         mainView.divElement = divElement;
         if (!mainView.focusScenePath) {
-            this.store.setMainViewFocusPath(mainView);
-        }
-        if (this.store.focus === undefined && mainView.mode !== ViewVisionMode.Writable) {
-            this.viewManager.switchMainViewToWriter();
+            this.setMainViewFocusPath();
         }
-        this.mainViewProxy.addMainViewListener();
         emitter.emit("mainViewMounted");
     }
 
+    public setMainViewFocusPath() {
+        const scenePath = this.store.getMainViewScenePath();
+        if (scenePath) {
+            setViewFocusScenePath(this.mainView, scenePath);
+        }
+    }
+
     public async addApp(params: AddAppParams, isDynamicPPT: boolean): Promise<string | undefined> {
         log("addApp", params);
         const { appId, needFocus } = await this.beforeAddApp(params, isDynamicPPT);
@@ -281,7 +304,7 @@ export class AppManager {
         emitter.emit("observerIdChange", this.displayer.observerId);
     };
 
-    private displayerWritableListener = (isReadonly: boolean) => {
+    public displayerWritableListener = (isReadonly: boolean) => {
         const isWritable = !isReadonly;
         const isManualWritable =
             this.windowManger.readonly === undefined || this.windowManger.readonly === false;
@@ -294,10 +317,10 @@ export class AppManager {
             appProxy.emitAppIsWritableChange();
         });
         if (isWritable === true) {
-            if (!this.store.focus) {
-                this.mainViewProxy.switchViewModeToWriter();
-            }
             this.mainView.disableCameraTransform = false;
+            if (this.room && this.room.disableSerialization === true) {
+                this.room.disableSerialization = false;
+            }
         } else {
             this.mainView.disableCameraTransform = true;
         }
@@ -346,15 +369,16 @@ export class AppManager {
                 await this._setMainViewScenePath(scenePath);
             } else if (scenePathType === ScenePathType.Dir) {
                 const validScenePath = makeValidScenePath(this.displayer, scenePath);
-                await this._setMainViewScenePath(validScenePath);
+                if (validScenePath) {
+                    await this._setMainViewScenePath(validScenePath);
+                }
             }
         }
     }
 
     private async _setMainViewScenePath(scenePath: string) {
         this.safeSetAttributes({ _mainScenePath: scenePath });
-        await this.viewManager.switchMainViewToWriter();
-        setScenePath(this.room, scenePath);
+        this.setMainViewFocusPath();
         this.store.setMainViewFocusPath(this.mainView);
         this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath: scenePath });
     }
@@ -362,12 +386,20 @@ export class AppManager {
     public async setMainViewSceneIndex(index: number) {
         if (this.room) {
             this.safeSetAttributes({ _mainSceneIndex: index });
-            await this.viewManager.switchMainViewToWriter();
-            this.room.setSceneIndex(index);
-            const nextScenePath = this.room.state.sceneState.scenePath;
-            this.store.setMainViewScenePath(nextScenePath);
-            this.store.setMainViewFocusPath(this.mainView);
-            this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath });
+            const mainViewScenePath = this.store.getMainViewScenePath() as string;
+            if (mainViewScenePath) {
+                const sceneList = mainViewScenePath.split("/");
+                sceneList.pop();
+                let sceneDir = sceneList.join("/");
+                if (sceneDir === "") {
+                    sceneDir = "/";
+                }
+                const scenePath = makeValidScenePath(this.displayer, sceneDir, index);
+                if (scenePath) {
+                    this.store.setMainViewScenePath(scenePath);
+                    this.setMainViewFocusPath();
+                }
+            }
         }
     }
 
@@ -433,7 +465,7 @@ export class AppManager {
         }
     }
 
-    public async notifyReconnected() {
+    public async onReconnected() {
         const appProxies = Array.from(this.appProxies.values());
         const reconnected = appProxies.map(appProxy => {
             return appProxy.onReconnected();
@@ -470,5 +502,6 @@ export class AppManager {
         this.refresher?.destroy();
         this.mainViewProxy.destroy();
         callbacks.clearListeners();
+        this._prevSceneIndex = undefined;
     }
 }

package/src/AppProxy.ts

@@ -2,17 +2,12 @@ import Emittery from "emittery";
 import { AppAttributes, AppEvents, Events } from "./constants";
 import { AppContext } from "./AppContext";
 import { appRegister } from "./Register";
-import { autorun, ViewVisionMode } from "white-web-sdk";
-import { callbacks, emitter } from "./index";
+import { autorun } from "white-web-sdk";
+import { emitter } from "./index";
 import { Fields } from "./AttributesDelegate";
-import { get } from "lodash";
+import { debounce, get } from "lodash";
 import { log } from "./Utils/log";
-import {
-    notifyMainViewModeChange,
-    setScenePath,
-    setViewFocusScenePath,
-    setViewMode,
-} from "./Utils/Common";
+import { setScenePath, setViewFocusScenePath, getScenePath } from "./Utils/Common";
 import type {
     AppEmitterEvent,
     AppInitState,
@@ -37,7 +32,6 @@ export class AppProxy extends Base {
     private boxManager = this.manager.boxManager;
     private appProxies = this.manager.appProxies;
     private viewManager = this.manager.viewManager;
-    private cameraStore = this.manager.cameraStore;
     private kind: string;
     public isAddApp: boolean;
     private status: "normal" | "destroyed" = "normal";
@@ -98,18 +92,24 @@ export class AppProxy extends Base {
 
     public getFullScenePath(): string | undefined {
         if (this.scenePath) {
-            return get(this.appAttributes, [Fields.FullPath], this.scenePath);
+            return get(this.appAttributes, [Fields.FullPath], this.getFullScenePathFromScenes());
         }
     }
 
+    private getFullScenePathFromScenes() {
+        const sceneIndex = get(this.appAttributes, ["state", "SceneIndex"], 0);
+        const fullPath = getScenePath(this.manager.room, this.scenePath, sceneIndex);
+        if (fullPath) {
+            this.setFullPath(fullPath);
+        }
+        return fullPath;
+    }
+
     public setFullPath(path: string) {
         this.manager.safeUpdateAttributes(["apps", this.id, Fields.FullPath], path);
     }
 
-    public async baseInsertApp(
-        skipUpdate = false,
-        focus?: boolean
-    ): Promise<{ appId: string; app: NetlessApp }> {
+    public async baseInsertApp(skipUpdate = false): Promise<{ appId: string; app: NetlessApp }> {
         const params = this.params;
         if (!params.kind) {
             throw new Error("[WindowManager]: kind require");
@@ -117,14 +117,17 @@ export class AppProxy extends Base {
         const appImpl = await appRegister.appClasses.get(params.kind)?.();
         const appParams = appRegister.registered.get(params.kind);
         if (appImpl) {
-            await this.setupApp(this.id, skipUpdate, appImpl, params.options, appParams?.appOptions);
+            await this.setupApp(
+                this.id,
+                skipUpdate,
+                appImpl,
+                params.options,
+                appParams?.appOptions
+            );
         } else {
             throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
         }
         this.context.updateManagerRect();
-        if (focus) {
-            this.focusApp();
-        }
         return {
             appId: this.id,
             app: appImpl,
@@ -133,7 +136,6 @@ export class AppProxy extends Base {
 
     private focusApp() {
         this.focusBox();
-        this.context.switchAppToWriter(this.id);
         this.store.setMainViewFocusPath(this.manager.mainView);
     }
 
@@ -205,9 +207,6 @@ export class AppProxy extends Base {
 
     private afterSetupApp(boxInitState: AppInitState | undefined): void {
         if (boxInitState) {
-            if (boxInitState.focus && this.scenePath) {
-                this.context.switchAppToWriter(this.id);
-            }
             if (!boxInitState?.x || !boxInitState.y) {
                 this.boxManager?.setBoxInitState(this.id);
             }
@@ -226,29 +225,10 @@ export class AppProxy extends Base {
         await this.destroy(true, false, true);
         const params = this.params;
         const appProxy = new AppProxy(params, this.manager, this.id, this.isAddApp);
-        await appProxy.baseInsertApp(true, this.store.focus === this.id);
+        await appProxy.baseInsertApp(true);
         this.boxManager?.updateBoxState(currentAppState);
     }
 
-    public switchToWritable() {
-        appRegister.notifyApp(this.kind, "focus", { appId: this.id });
-        this.cameraStore.switchView(this.id, this.view, () => {
-            if (this.view) {
-                if (this.view.mode === ViewVisionMode.Writable) return;
-                try {
-                    if (this.manager.mainView.mode === ViewVisionMode.Writable) {
-                        this.store.setMainViewFocusPath(this.manager.mainView);
-                        notifyMainViewModeChange(callbacks, ViewVisionMode.Freedom);
-                        setViewMode(this.manager.mainView, ViewVisionMode.Freedom);
-                    }
-                    setViewMode(this.view, ViewVisionMode.Writable);
-                } catch (error) {
-                    log("switch view failed", error);
-                }
-            }
-        });
-    }
-
     public getAppInitState = (id: string) => {
         const attrs = this.store.getAppState(id);
         if (!attrs) return;
@@ -337,7 +317,7 @@ export class AppProxy extends Base {
                 }
             });
         });
-        this.manager.refresher?.add(this.stateKey,() => {
+        this.manager.refresher?.add(this.stateKey, () => {
             return autorun(() => {
                 const appState = this.appAttributes?.state;
                 if (appState?.zIndex > 0 && appState.zIndex !== this.box?.zIndex) {
@@ -345,8 +325,20 @@ export class AppProxy extends Base {
                 }
             });
         });
+        this.manager.refresher?.add(`${appId}-fullPath`, () => {
+            return autorun(() => {
+                const fullPath = this.appAttributes?.fullPath;
+                this.setFocusScenePathHandler(fullPath);
+            });
+        });
     };
 
+    private setFocusScenePathHandler = debounce((fullPath: string | undefined) => {
+        if (this.view && fullPath && fullPath !== this.view?.focusScenePath) {
+            setViewFocusScenePath(this.view, fullPath);
+        }
+    }, 50);
+
     public setScenePath(): void {
         if (!this.manager.canOperate) return;
         const fullScenePath = this.getFullScenePath();
@@ -364,7 +356,6 @@ export class AppProxy extends Base {
 
     private async createView(): Promise<View> {
         const view = await this.viewManager.createView(this.id);
-        this.cameraStore.register(this.id, view);
         this.setViewFocusScenePath();
         return view;
     }
@@ -388,12 +379,12 @@ export class AppProxy extends Base {
             this.store.cleanAppAttributes(this.id);
         }
         this.appProxies.delete(this.id);
-        this.cameraStore.unregister(this.id, this.view);
 
         this.viewManager.destroyView(this.id);
         this.manager.appStatus.delete(this.id);
         this.manager.refresher?.remove(this.id);
         this.manager.refresher?.remove(this.stateKey);
+        this.manager.refresher?.remove(`${this.id}-fullPath`);
     }
 
     public close(): Promise<void> {

package/src/Base/Context.ts

@@ -33,10 +33,6 @@ export class Context {
     public blurFocusBox() {
         this.manager.boxManager?.blurAllBox();
     }
-
-    public switchAppToWriter(id: string) {
-        this.manager.viewManager.switchAppToWriter(id);
-    }
 }
 
 let context: Context;

package/src/BoxManager.ts

@@ -1,4 +1,4 @@
-import { AppAttributes, DEFAULT_COLLECTOR_STYLE, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
+import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce, maxBy } from "lodash";
 import {
     TELE_BOX_MANAGER_EVENT,
@@ -6,7 +6,7 @@ import {
     TeleBoxCollector,
     TeleBoxManager,
 } from "@netless/telebox-insider";
-import { WindowManager } from "./index";
+import { emitter, WindowManager } from "./index";
 import type { AddAppOptions, AppInitState, EmitterType, CallbacksType } from "./index";
 import type {
     TeleBoxManagerUpdateConfig,
@@ -145,6 +145,11 @@ export class BoxManager {
         this.teleBoxManager.events.on("z_index", box => {
             this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
         });
+        emitter.on("playgroundSizeChange", this.playgroundSizeChangeListener);
+    }
+
+    private playgroundSizeChangeListener = () => {
+        this.updateManagerRect();
     }
 
     private get mainView() {
@@ -251,12 +256,8 @@ export class BoxManager {
     }
 
     public setCollectorContainer(container: HTMLElement) {
-        const styles = {
-            ...DEFAULT_COLLECTOR_STYLE,
-            ...this.createTeleBoxManagerConfig?.collectorStyles,
-        };
         const collector = new TeleBoxCollector({
-            styles
+            styles: this.createTeleBoxManagerConfig?.collectorStyles,
         }).mount(container);
         this.teleBoxManager.setCollector(collector);
     }
@@ -391,6 +392,7 @@ export class BoxManager {
     }
 
     public destroy() {
+        emitter.off("playgroundSizeChange", this.playgroundSizeChangeListener);
         this.teleBoxManager.destroy();
     }
 }

package/src/BuiltinApps.ts

@@ -0,0 +1,24 @@
+import AppDocsViewer from "@netless/app-docs-viewer";
+import AppMediaPlayer, { setOptions } from "@netless/app-media-player";
+import { WindowManager } from "./index";
+import "@netless/app-docs-viewer/dist/style.css";
+
+export const setupBuiltin = () => {
+    if (WindowManager.debug) {
+        setOptions({ verbose: true });
+    }
+
+    WindowManager.register({
+        kind: AppDocsViewer.kind,
+        src: AppDocsViewer,
+    });
+    WindowManager.register({
+        kind: AppMediaPlayer.kind,
+        src: AppMediaPlayer,
+    });
+};
+
+export const BuiltinApps = {
+    DocsViewer: AppDocsViewer.kind as string,
+    MediaPlayer: AppMediaPlayer.kind as string,
+};