@netless/window-manager 0.3.18 → 0.4.0-canary.11

package/src/AppContext.ts

@@ -6,7 +6,7 @@ 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 { ReadonlyTeleBox } from "@netless/telebox-insider";
@@ -15,9 +15,11 @@ 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,
@@ -29,31 +31,32 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
         listenDisposed,
         unlistenDisposed
     };
-    private boxManager: BoxManager;
+
     private store = this.manager.store;
     public readonly isAddApp: boolean;
     public readonly isReplay = this.manager.isReplay;
 
     constructor(
         private manager: AppManager,
+        private boxManager: BoxManager,
         public appId: string,
         private appProxy: AppProxy,
-        private appOptions?: AppOptions | (() => AppOptions),
+        private appOptions?: TAppOptions | (() => TAppOptions),
     ) {
         this.emitter = appProxy.appEmitter;
-        this.boxManager = this.manager.boxManager;
         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,28 @@ 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);
     }
 
-    public mountView(dom: HTMLDivElement): void {
+    public mountView = (dom: HTMLDivElement): void => {
         const view = this.getView();
         if (view) {
             view.divElement = dom;
@@ -117,7 +123,41 @@ 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> = this.manager.displayer.addMagixEventListener.bind(this.manager.displayer)
+
+    /** Remove a Magix event listener. */
+    public removeMagixEventListener = this.manager.displayer.removeMagixEventListener.bind(this.manager.displayer) as MagixEventRemoveListener<TMagixEventPayloads>
 }

package/src/AppListener.ts

@@ -7,10 +7,13 @@ import { setViewFocusScenePath } from './Utils/Common';
 
 export class AppListeners {
     private displayer = this.manager.displayer;
-    private boxManager = this.manager.boxManager;
 
     constructor(private manager: AppManager) {}
 
+    private get boxManager() {
+        return this.manager.boxManager;
+    }
+
     public addListeners() {
         this.displayer.addMagixEventListener(MagixEventName, this.mainMagixEventListener);
     }
@@ -31,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;
@@ -43,6 +42,10 @@ export class AppListeners {
                     this.setMainViewScenePathHandler(data.payload);
                     break;
                 }
+                case Events.MoveCameraToContain: {
+                    this.moveCameraToContainHandler(data.payload);
+                    break;
+                }
                 default:
                     break;
             }
@@ -50,23 +53,24 @@ export class AppListeners {
     };
 
     private appMoveHandler = (payload: any) => {
-        this.boxManager.moveBox(payload);
+        this.boxManager?.moveBox(payload);
     };
 
     private appResizeHandler = (payload: any) => {
-        this.boxManager.resizeBox(Object.assign(payload, { skipUpdate: true }));
+        this.boxManager?.resizeBox(Object.assign(payload, { skipUpdate: true }));
         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) => {
+        this.manager.mainView.moveCameraToContain(payload);
     }
 }

package/src/AppManager.ts

@@ -1,66 +1,56 @@
 import pRetry from "p-retry";
-import {
-    AppAttributes,
-    AppStatus,
-    Events,
-    MagixEventName
-    } from "./constants";
+import { AppAttributes, AppStatus, Events, MagixEventName } from "./constants";
 import { AppListeners } from "./AppListener";
 import { AppProxy } from "./AppProxy";
-import { AttributesDelegate } from "./AttributesDelegate";
-import {
-    autorun,
-    isPlayer,
-    isRoom,
-    ScenePathType,
-    ViewVisionMode
-    } from "white-web-sdk";
-import { BoxManager } from "./BoxManager";
-import { callbacks, emitter } 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 { CreateTeleBoxManagerConfig } from "./BoxManager";
-import type {
-    AddAppParams,
-    BaseInsertParams,
-    WindowManager,
-    TeleBoxRect,
-    EmitterEvent,
-} from "./index";
+import type { AddAppParams, BaseInsertParams, TeleBoxRect, EmitterEvent } from "./index";
+
 export class AppManager {
     public displayer: Displayer;
-    public boxManager: BoxManager;
-    public cameraStore: CameraStore;
     public viewManager: ViewManager;
     public appProxies: Map<string, AppProxy> = new Map();
     public appStatus: Map<string, AppStatus> = new Map();
-    public store = new AttributesDelegate(this);
+    public store = store;
     public mainViewProxy: MainViewProxy;
     public refresher?: ReconnectRefresher;
     public isReplay = this.windowManger.isReplay;
 
     private appListeners: AppListeners;
+    public boxManager?: BoxManager;
+
+    private _prevSceneIndex: number | undefined;
+    private _prevFocused: string | undefined;
 
-    constructor(public windowManger: WindowManager, options: CreateTeleBoxManagerConfig) {
+    constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
-        this.cameraStore = new CameraStore();
+        this.store.setContext({
+            getAttributes: () => this.attributes,
+            safeSetAttributes: attributes => this.safeSetAttributes(attributes),
+            safeUpdateAttributes: (keys, val) => this.safeUpdateAttributes(keys, val),
+        });
         this.mainViewProxy = new MainViewProxy(this);
-        this.viewManager = new ViewManager(this);
-        this.boxManager = new BoxManager(this, options);
+        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, this);
+        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 => {
@@ -74,12 +64,15 @@ export class AppManager {
 
     private async onCreated() {
         await this.attributesUpdateCallback(this.attributes.apps);
-        this.boxManager.updateManagerRect();
+        this.boxManager?.updateManagerRect();
         emitter.onAny(this.boxEventListener);
         this.refresher?.add("apps", () => {
-            return safeListenPropsUpdated(() => this.attributes.apps, () => {
-                this.attributesUpdateCallback(this.attributes.apps);
-            });
+            return safeListenPropsUpdated(
+                () => this.attributes.apps,
+                () => {
+                    this.attributesUpdateCallback(this.attributes.apps);
+                }
+            );
         });
         this.refresher?.add("appsClose", () => {
             return onObjectRemoved(this.attributes.apps, () => {
@@ -89,24 +82,40 @@ export class AppManager {
         this.refresher?.add("maximized", () => {
             return autorun(() => {
                 const maximized = this.attributes.maximized;
-                if (this.boxManager.maximized !== maximized) {
-                    this.boxManager.setMaximized(Boolean(maximized));
-                }
+                this.boxManager?.setMaximized(Boolean(maximized));
             });
         });
         this.refresher?.add("minimized", () => {
             return autorun(() => {
                 const minimized = this.attributes.minimized;
-                if (this.boxManager.minimized !== minimized) {
+                if (this.boxManager?.minimized !== minimized) {
                     if (minimized === true) {
-                        this.boxManager.blurAllBox();
+                        this.boxManager?.blurAllBox();
                     }
                     setTimeout(() => {
-                        this.boxManager.setMinimized(Boolean(minimized));
+                        this.boxManager?.setMinimized(Boolean(minimized));
                     }, 0);
                 }
             });
         });
+        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;
@@ -117,6 +126,7 @@ export class AppManager {
         }
         this.displayerWritableListener(!this.room?.isWritable);
         this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
+        this._prevFocused = this.attributes.focus;
     }
 
     /**
@@ -126,29 +136,39 @@ export class AppManager {
      * @memberof WindowManager
      */
     public async attributesUpdateCallback(apps: any) {
-        if (apps) {
-            for (const id in apps) {
+        if (apps && WindowManager.container) {
+            const appIds = Object.keys(apps);
+            const appsWithCreatedAt = appIds.map(appId => {
+                return {
+                    id: appId,
+                    createdAt: apps[appId].createdAt,
+                };
+            });
+            for (const { id } of sortBy(appsWithCreatedAt, "createdAt")) {
                 if (!this.appProxies.has(id) && !this.appStatus.has(id)) {
                     const app = apps[id];
 
-                    pRetry(async () => {
-                        this.appStatus.set(id, AppStatus.StartCreate);
-                        // 防御 appAttributes 有可能为 undefined 的情况，这里做一个重试
-                        const appAttributes = this.attributes[id];
-                        if (!appAttributes) {
-                            throw new Error("appAttributes is undefined");
-                        }
-                        await this.baseInsertApp(
-                            {
-                                kind: app.kind,
-                                options: app.options,
-                                isDynamicPPT: app.isDynamicPPT,
-                            },
-                            id,
-                            false
-                        );
-                        this.focusByAttributes(apps);
-                    }, { retries: 3 }).catch(err => {
+                    pRetry(
+                        async () => {
+                            this.appStatus.set(id, AppStatus.StartCreate);
+                            // 防御 appAttributes 有可能为 undefined 的情况，这里做一个重试
+                            const appAttributes = this.attributes[id];
+                            if (!appAttributes) {
+                                throw new Error("appAttributes is undefined");
+                            }
+                            await this.baseInsertApp(
+                                {
+                                    kind: app.kind,
+                                    options: app.options,
+                                    isDynamicPPT: app.isDynamicPPT,
+                                },
+                                id,
+                                false
+                            );
+                            this.focusByAttributes(apps);
+                        },
+                        { retries: 3 }
+                    ).catch(err => {
                         console.warn(`[WindowManager]: Insert App Error`, err);
                         this.appStatus.delete(id);
                     });
@@ -157,6 +177,22 @@ export class AppManager {
         }
     }
 
+    public refresh() {
+        this.attributesUpdateCallback(this.attributes.apps);
+    }
+
+    public setBoxManager(boxManager: BoxManager) {
+        this.boxManager = boxManager;
+    }
+
+    public resetMaximized() {
+        this.boxManager?.setMaximized(Boolean(this.store.getMaximized()));
+    }
+
+    public resetMinimized() {
+        this.boxManager?.setMinimized(Boolean(this.store.getMinimized()));
+    }
+
     private onAppDelete = (apps: any) => {
         const ids = Object.keys(apps);
         this.appProxies.forEach((appProxy, id) => {
@@ -171,15 +207,18 @@ export class AppManager {
         mainView.disableCameraTransform = disableCameraTransform;
         mainView.divElement = divElement;
         if (!mainView.focusScenePath) {
-            this.store.setMainViewFocusPath();
-        }
-        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);
@@ -194,7 +233,7 @@ export class AppManager {
         const attrs = params.attributes ?? {};
         this.safeUpdateAttributes([appId], attrs);
         this.store.setupAppAttributes(params, appId, isDynamicPPT);
-        const needFocus = !this.boxManager.minimized;
+        const needFocus = !this.boxManager?.minimized;
         if (needFocus) {
             this.store.setAppFocus(appId, true);
         }
@@ -211,8 +250,8 @@ export class AppManager {
             });
             this.store.updateAppState(appProxy.id, AppAttributes.ZIndex, box.zIndex);
         }
-        if (this.boxManager.minimized) {
-            this.boxManager.setMinimized(false, false);
+        if (this.boxManager?.minimized) {
+            this.boxManager?.setMinimized(false, false);
         }
     }
 
@@ -265,22 +304,19 @@ 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;
         if (this.windowManger.readonly === undefined) {
-            this.boxManager.setReadonly(isReadonly);
+            this.boxManager?.setReadonly(isReadonly);
         } else {
-            this.boxManager.setReadonly(!(isWritable && isManualWritable));
+            this.boxManager?.setReadonly(!(isWritable && isManualWritable));
         }
         this.appProxies.forEach(appProxy => {
             appProxy.emitAppIsWritableChange();
         });
         if (isWritable === true) {
-            if (!this.store.focus) {
-                this.mainViewProxy.switchViewModeToWriter();
-            }
             this.mainView.disableCameraTransform = false;
         } else {
             this.mainView.disableCameraTransform = true;
@@ -330,28 +366,37 @@ 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.store.setMainViewFocusPath();
+        this.setMainViewFocusPath();
+        this.store.setMainViewFocusPath(this.mainView);
         this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath: scenePath });
     }
 
     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.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();
+                }
+            }
         }
     }
 
@@ -409,7 +454,7 @@ export class AppManager {
     };
 
     public focusByAttributes(apps: any) {
-        if (apps && Object.keys(apps).length === this.boxManager.appBoxMap.size) {
+        if (apps && Object.keys(apps).length === this.boxManager?.boxSize) {
             const focusAppId = this.store.focus;
             if (focusAppId) {
                 this.boxManager.focusBox({ appId: focusAppId });
@@ -417,7 +462,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();
@@ -450,9 +495,10 @@ export class AppManager {
             });
         }
         this.viewManager.destroy();
-        this.boxManager.destroy();
+        this.boxManager?.destroy();
         this.refresher?.destroy();
         this.mainViewProxy.destroy();
         callbacks.clearListeners();
+        this._prevSceneIndex = undefined;
     }
 }