@netless/window-manager 0.4.0-canary.8 → 0.4.1

package/src/AppContext.ts

@@ -6,9 +6,9 @@ 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";
@@ -16,9 +16,10 @@ 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,
@@ -40,45 +41,45 @@ 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);
-            if (appProxy) {
-                return appProxy.scenes;
-            }
+            return this.appProxy.scenes;
         } else {
             return appAttr?.options["scenes"];
         }
     }
 
-    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;
@@ -87,26 +88,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);
+        // 兼容 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,15 +122,47 @@ 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
     }
 
-    public createStorage<TState>(storeId: string, defaultState?: TState): Storage<TState> {
+    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> = (...args) => {
+        // can't dispatch events on replay mode
+        return this.manager.room?.dispatchMagixEvent(...args);
+    }
+
+    /** 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

@@ -1,10 +1,10 @@
-import { callbacks } from './index';
-import { Events, MagixEventName } from './constants';
-import type { Event } from "white-web-sdk";
+import { callbacks, emitter } from "./index";
+import { Events, MagixEventName } from "./constants";
+import { isEqual, omit } from "lodash";
+import { setViewFocusScenePath } from "./Utils/Common";
+import type { AnimationMode, Camera, Event } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 import type { TeleBoxState } from "@netless/telebox-insider";
-import { setViewFocusScenePath } from './Utils/Common';
-
 export class AppListeners {
     private displayer = this.manager.displayer;
 
@@ -42,10 +42,18 @@ export class AppListeners {
                     this.setMainViewScenePathHandler(data.payload);
                     break;
                 }
+                case Events.MoveCamera: {
+                    this.moveCameraHandler(data.payload);
+                    break;
+                }
                 case Events.MoveCameraToContain: {
                     this.moveCameraToContainHandler(data.payload);
                     break;
                 }
+                case Events.CursorMove: {
+                    this.cursorMoveHandler(data.payload);
+                    break;
+                }
                 default:
                     break;
             }
@@ -63,13 +71,25 @@ export class AppListeners {
 
     private boxStateChangeHandler = (state: TeleBoxState) => {
         callbacks.emit("boxStateChange", state);
-    }
+    };
 
     private setMainViewScenePathHandler = ({ nextScenePath }: { nextScenePath: string }) => {
         setViewFocusScenePath(this.manager.mainView, nextScenePath);
-    }
+        callbacks.emit("mainViewScenePathChange", nextScenePath);
+    };
+
+    private moveCameraHandler = (
+        payload: Camera & { animationMode?: AnimationMode | undefined }
+    ) => {
+        if (isEqual(omit(payload, ["animationMode"]), { ...this.manager.mainView.camera })) return;
+        this.manager.mainView.moveCamera(payload);
+    };
 
     private moveCameraToContainHandler = (payload: any) => {
         this.manager.mainView.moveCameraToContain(payload);
-    }
+    };
+
+    private cursorMoveHandler = (payload: any) => {
+        emitter.emit("cursorMove", payload);
+    };
 }

package/src/AppManager.ts

@@ -1,19 +1,27 @@
-import pRetry from "p-retry";
-import { AppAttributes, AppStatus, Events, MagixEventName } from "./constants";
+import { AppAttributes, AppStatus, Events, MagixEventName, ROOT_DIR } from "./constants";
+import { AppCreateQueue } from "./Utils/AppCreateQueue";
 import { AppListeners } from "./AppListener";
 import { AppProxy } from "./AppProxy";
+import { appRegister } from "./Register";
 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 { callbacks, emitter, reconnectRefresher, WindowManager } from "./index";
+import { get, isInteger, orderBy } from "lodash";
 import { log } from "./Utils/log";
 import { MainViewProxy } from "./View/MainView";
 import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
-import { sortBy } from "lodash";
 import { store } from "./AttributesDelegate";
 import { ViewManager } from "./View/ViewManager";
+import {
+    entireScenes,
+    genAppId,
+    makeValidScenePath,
+    parseSceneDir,
+    setScenePath,
+    setViewFocusScenePath,
+} from "./Utils/Common";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
-import type { Displayer, DisplayerState, Room } from "white-web-sdk";
+import type { Displayer, DisplayerState, Room, ScenesCallbacksNode, View } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect, EmitterEvent } from "./index";
 
 export class AppManager {
@@ -25,10 +33,16 @@ export class AppManager {
     public mainViewProxy: MainViewProxy;
     public refresher?: ReconnectRefresher;
     public isReplay = this.windowManger.isReplay;
+    public mainViewScenesLength = 0;
 
     private appListeners: AppListeners;
     public boxManager?: BoxManager;
 
+    private _prevSceneIndex: number | undefined;
+    private _prevFocused: string | undefined;
+    private callbacksNode: ScenesCallbacksNode | null;
+    private appCreateQueue = new AppCreateQueue();
+
     constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
         this.store.setContext({
@@ -57,6 +71,70 @@ export class AppManager {
                 this.onAppDelete(this.attributes.apps);
             });
         }
+        emitter.on("removeScenes", scenePath => {
+            if (scenePath === ROOT_DIR) {
+                this.setMainViewScenePath(ROOT_DIR);
+                return;
+            }
+            const mainViewScenePath = this.store.getMainViewScenePath();
+            if (this.room && mainViewScenePath) {
+                if (mainViewScenePath === scenePath) {
+                    this.setMainViewScenePath(ROOT_DIR);
+                }
+            }
+        });
+        this.callbacksNode = this.displayer.createScenesCallback(ROOT_DIR, {
+            onAddScene: scenesCallback => {
+                this.mainViewScenesLength = scenesCallback.scenes.length;
+                callbacks.emit("mainViewScenesLengthChange", this.mainViewScenesLength);
+            },
+            onRemoveScene: scenesCallback => {
+                this.mainViewScenesLength = scenesCallback.scenes.length;
+                callbacks.emit("mainViewScenesLengthChange", this.mainViewScenesLength);
+            },
+        });
+        if (this.callbacksNode) {
+            this.mainViewScenesLength = this.callbacksNode.scenes.length;
+        }
+    }
+
+    private get eventName() {
+        return isRoom(this.displayer) ? "onRoomStateChanged" : "onPlayerStateChanged";
+    }
+
+    public get attributes() {
+        return this.windowManger.attributes;
+    }
+
+    public get canOperate() {
+        return this.windowManger.canOperate;
+    }
+
+    public get room() {
+        return isRoom(this.displayer) ? (this.displayer as Room) : undefined;
+    }
+
+    public get mainView() {
+        return this.mainViewProxy.view;
+    }
+
+    public get focusApp() {
+        if (this.store.focus) {
+            return this.appProxies.get(this.store.focus);
+        }
+    }
+
+    public get uid() {
+        return this.room?.uid || "";
+    }
+
+    public getMainViewSceneDir() {
+        const scenePath = this.store.getMainViewScenePath();
+        if (scenePath) {
+            return parseSceneDir(scenePath);
+        } else {
+            throw new Error("[WindowManager]: mainViewSceneDir not found");
+        }
     }
 
     private async onCreated() {
@@ -95,6 +173,38 @@ 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.disposePrevFocusViewRedoUndoListeners(this._prevFocused);
+                    setTimeout(() => {
+                        this.addRedoUndoListeners(focused);
+                    }, 0);
+                    this._prevFocused = focused;
+                    if (focused !== undefined) {
+                        this.boxManager?.focusBox({ appId: focused });
+                        // 确保 focus 修改的时候, appProxy 已经创建
+                        setTimeout(() => {
+                            const appProxy = this.appProxies.get(focused);
+                            if (appProxy) {
+                                appRegister.notifyApp(appProxy.kind, "focus", { appId: focused });
+                            }
+                        }, 0);
+                    }
+                }
+            });
+        });
         if (!this.attributes.apps || Object.keys(this.attributes.apps).length === 0) {
             const mainScenePath = this.store.getMainViewScenePath();
             if (!mainScenePath) return;
@@ -105,8 +215,61 @@ export class AppManager {
         }
         this.displayerWritableListener(!this.room?.isWritable);
         this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
+        this._prevFocused = this.attributes.focus;
+        this.addRedoUndoListeners(this.attributes.focus);
     }
 
+    private disposePrevFocusViewRedoUndoListeners = (prevFocused: string | undefined) => {
+        if (prevFocused === undefined) {
+            this.mainView.callbacks.off("onCanRedoStepsUpdate", this.onCanRedoStepsUpdate);
+            this.mainView.callbacks.off("onCanUndoStepsUpdate", this.onCanRedoStepsUpdate);
+        } else {
+            const appProxy = this.appProxies.get(prevFocused);
+            if (appProxy) {
+                appProxy.view?.callbacks.off("onCanRedoStepsUpdate", this.onCanRedoStepsUpdate);
+                appProxy.view?.callbacks.off("onCanUndoStepsUpdate", this.onCanUndoStepsUpdate);
+            }
+        }
+    };
+
+    private addRedoUndoListeners = (focused: string | undefined) => {
+        if (focused === undefined) {
+            this.addViewCallbacks(
+                this.mainView,
+                this.onCanRedoStepsUpdate,
+                this.onCanUndoStepsUpdate
+            );
+        } else {
+            const focusApp = this.appProxies.get(focused);
+            if (focusApp && focusApp.view) {
+                this.addViewCallbacks(
+                    focusApp.view,
+                    this.onCanRedoStepsUpdate,
+                    this.onCanUndoStepsUpdate
+                );
+            }
+        }
+    };
+
+    private addViewCallbacks = (
+        view: View,
+        redoListener: (steps: number) => void,
+        undoListener: (steps: number) => void
+    ) => {
+        redoListener(view.canRedoSteps);
+        undoListener(view.canUndoSteps);
+        view.callbacks.on("onCanRedoStepsUpdate", redoListener);
+        view.callbacks.on("onCanUndoStepsUpdate", undoListener);
+    };
+
+    private onCanRedoStepsUpdate = (steps: number) => {
+        callbacks.emit("canRedoStepsChange", steps);
+    };
+
+    private onCanUndoStepsUpdate = (steps: number) => {
+        callbacks.emit("canUndoStepsChange", steps);
+    };
+
     /**
      * 插件更新 attributes 时的回调
      *
@@ -122,19 +285,18 @@ export class AppManager {
                     createdAt: apps[appId].createdAt,
                 };
             });
-            for (const { id } of sortBy(appsWithCreatedAt, "createdAt")) {
+            for (const { id } of orderBy(appsWithCreatedAt, "createdAt", "asc")) {
                 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(
+                    this.appStatus.set(id, AppStatus.StartCreate);
+                    try {
+                        const appAttributes = this.attributes[id];
+                        if (!appAttributes) {
+                            throw new Error("appAttributes is undefined");
+                        }
+                        this.appCreateQueue.push(() => {
+                            return this.baseInsertApp(
                                 {
                                     kind: app.kind,
                                     options: app.options,
@@ -143,13 +305,11 @@ export class AppManager {
                                 id,
                                 false
                             );
-                            this.focusByAttributes(apps);
-                        },
-                        { retries: 3 }
-                    ).catch(err => {
-                        console.warn(`[WindowManager]: Insert App Error`, err);
-                        this.appStatus.delete(id);
-                    });
+                        });
+                        this.focusByAttributes(apps);
+                    } catch (error) {
+                        console.warn(`[WindowManager]: Insert App Error`, error);
+                    }
                 }
             }
         }
@@ -190,10 +350,11 @@ export class AppManager {
         emitter.emit("mainViewMounted");
     }
 
-    public setMainViewFocusPath() {
-        const scenePath = this.store.getMainViewScenePath();
-        if (scenePath) {
-            setViewFocusScenePath(this.mainView, scenePath);
+    public setMainViewFocusPath(scenePath?: string) {
+        const focusScenePath = scenePath || this.store.getMainViewScenePath();
+        if (focusScenePath) {
+            const view = setViewFocusScenePath(this.mainView, focusScenePath);
+            return view?.focusScenePath === focusScenePath;
         }
     }
 
@@ -272,10 +433,6 @@ export class AppManager {
                 }
             });
         }
-        if (state.roomMembers) {
-            this.windowManger.cursorManager?.setRoomMembers(state.roomMembers);
-            this.windowManger.cursorManager?.cleanMemberAttributes(state.roomMembers);
-        }
         this.appProxies.forEach(appProxy => {
             appProxy.appEmitter.emit("roomStateChange", state);
         });
@@ -296,37 +453,14 @@ export class AppManager {
         });
         if (isWritable === true) {
             this.mainView.disableCameraTransform = false;
+            if (this.room && this.room.disableSerialization === true) {
+                this.room.disableSerialization = false;
+            }
         } else {
             this.mainView.disableCameraTransform = true;
         }
     };
 
-    private get eventName() {
-        return isRoom(this.displayer) ? "onRoomStateChanged" : "onPlayerStateChanged";
-    }
-
-    public get attributes() {
-        return this.windowManger.attributes;
-    }
-
-    public get canOperate() {
-        return this.windowManger.canOperate;
-    }
-
-    public get room() {
-        return isRoom(this.displayer) ? (this.displayer as Room) : undefined;
-    }
-
-    public get mainView() {
-        return this.mainViewProxy.view;
-    }
-
-    public get focusApp() {
-        if (this.store.focus) {
-            return this.appProxies.get(this.store.focus);
-        }
-    }
-
     public safeSetAttributes(attributes: any) {
         this.windowManger.safeSetAttributes(attributes);
     }
@@ -338,6 +472,10 @@ export class AppManager {
     public async setMainViewScenePath(scenePath: string) {
         if (this.room) {
             const scenePathType = this.displayer.scenePathType(scenePath);
+            const sceneDir = parseSceneDir(scenePath);
+            if (sceneDir !== ROOT_DIR) {
+                throw new Error(`[WindowManager]: main view scenePath must in root dir "/"`);
+            }
             if (scenePathType === ScenePathType.None) {
                 throw new Error(`[WindowManager]: ${scenePath} not valid scene`);
             } else if (scenePathType === ScenePathType.Page) {
@@ -352,32 +490,56 @@ export class AppManager {
     }
 
     private async _setMainViewScenePath(scenePath: string) {
-        this.safeSetAttributes({ _mainScenePath: scenePath });
-        this.setMainViewFocusPath();
-        this.store.setMainViewFocusPath(this.mainView);
-        this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath: scenePath });
+        const success = this.setMainViewFocusPath(scenePath);
+        if (success) {
+            this.safeSetAttributes({ _mainScenePath: scenePath });
+            this.store.setMainViewFocusPath(this.mainView);
+            this.updateSceneIndex();
+            this.dispatchSetMainViewScenePath(scenePath);
+        }
     }
 
+    private updateSceneIndex = () => {
+        const scenePath = this.store.getMainViewScenePath() as string;
+        const sceneDir = parseSceneDir(scenePath);
+        const scenes = entireScenes(this.displayer)[sceneDir];
+        if (scenes.length) {
+            // "/ppt3/1" -> "1"
+            const pageName = scenePath.replace(sceneDir, "").replace("/", "");
+            const index = scenes.findIndex(scene => scene.name === pageName);
+            if (isInteger(index) && index >= 0) {
+                this.safeSetAttributes({ _mainSceneIndex: index });
+            }
+        }
+    };
+
     public async setMainViewSceneIndex(index: number) {
         if (this.room) {
-            this.safeSetAttributes({ _mainSceneIndex: index });
+            if (this.store.getMainViewSceneIndex() === index) return;
             const mainViewScenePath = this.store.getMainViewScenePath() as string;
             if (mainViewScenePath) {
-                const sceneList = mainViewScenePath.split("/");
-                sceneList.pop();
-                let sceneDir = sceneList.join("/");
-                if (sceneDir === "") {
-                    sceneDir = "/";
-                }
+                const sceneDir = parseSceneDir(mainViewScenePath);
                 const scenePath = makeValidScenePath(this.displayer, sceneDir, index);
                 if (scenePath) {
-                    this.store.setMainViewScenePath(scenePath);
-                    this.setMainViewFocusPath();
+                    const success = this.setMainViewFocusPath(scenePath);
+                    if (success) {
+                        this.store.setMainViewScenePath(scenePath);
+                        this.safeSetAttributes({ _mainSceneIndex: index });
+                        this.dispatchSetMainViewScenePath(scenePath);
+                    }
+                } else {
+                    throw new Error(`[WindowManager]: ${sceneDir}: ${index} not valid index`);
                 }
-            }   
+            }
         }
     }
 
+    private dispatchSetMainViewScenePath(scenePath: string): void {
+        this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath: scenePath });
+        // 兼容 15 的 SDK, 需要 room 的当前 ScenePath
+        setScenePath(this.room, scenePath);
+    }
+
     public getAppInitPath(appId: string): string | undefined {
         const attrs = this.store.getAppAttributes(appId);
         if (attrs) {
@@ -445,6 +607,7 @@ export class AppManager {
         const reconnected = appProxies.map(appProxy => {
             return appProxy.onReconnected();
         });
+        this.mainViewProxy.onReconnect();
         await Promise.all(reconnected);
     }
 
@@ -461,6 +624,11 @@ export class AppManager {
         });
     }
 
+    public findMemberByUid = (uid: string) => {
+        const roomMembers = this.room?.state.roomMembers;
+        return roomMembers?.find(member => member.payload?.uid === uid);
+    };
+
     public destroy() {
         this.displayer.callbacks.off(this.eventName, this.displayerStateListener);
         this.displayer.callbacks.off("onEnableWriteNowChanged", this.displayerWritableListener);
@@ -477,5 +645,10 @@ export class AppManager {
         this.refresher?.destroy();
         this.mainViewProxy.destroy();
         callbacks.clearListeners();
+        this.callbacksNode?.dispose();
+        this.appCreateQueue.destroy();
+        this.disposePrevFocusViewRedoUndoListeners(this._prevFocused);
+        this._prevFocused = undefined;
+        this._prevSceneIndex = undefined;
     }
 }