@netless/window-manager 0.4.7 → 0.4.9-canary.0

package/src/AppManager.ts

@@ -4,13 +4,18 @@ import { AppListeners } from "./AppListener";
 import { AppProxy } from "./AppProxy";
 import { appRegister } from "./Register";
 import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
-import { callbacks, emitter, reconnectRefresher, WindowManager } from "./index";
+import { callbacks } from "./callback";
+import { emitter } from "./InternalEmitter";
 import { get, isInteger, orderBy } from "lodash";
 import { log } from "./Utils/log";
 import { MainViewProxy } from "./View/MainView";
 import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
+import { reconnectRefresher, WindowManager } from "./index";
+import { RedoUndo } from "./RedoUndo";
+import { SideEffectManager } from "side-effect-manager";
 import { store } from "./AttributesDelegate";
 import { ViewManager } from "./View/ViewManager";
+import type { EmitterEvent } from "./InternalEmitter";
 import {
     entireScenes,
     genAppId,
@@ -21,9 +26,14 @@ import {
 } from "./Utils/Common";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
-import type { Displayer, DisplayerState, Room, ScenesCallbacksNode, View } from "white-web-sdk";
-import type { AddAppParams, BaseInsertParams, TeleBoxRect, EmitterEvent } from "./index";
-
+import type {
+    Displayer,
+    DisplayerState,
+    Room,
+    ScenesCallbacksNode,
+    SceneState,
+} from "white-web-sdk";
+import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
 export class AppManager {
     public displayer: Displayer;
     public viewManager: ViewManager;
@@ -43,6 +53,10 @@ export class AppManager {
     private callbacksNode: ScenesCallbacksNode | null = null;
     private appCreateQueue = new AppCreateQueue();
 
+    private sideEffectManager = new SideEffectManager();
+
+    public sceneState: SceneState | null = null;
+
     constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
         this.store.setContext({
@@ -50,6 +64,7 @@ export class AppManager {
             safeSetAttributes: attributes => this.safeSetAttributes(attributes),
             safeUpdateAttributes: (keys, val) => this.safeUpdateAttributes(keys, val),
         });
+
         this.mainViewProxy = new MainViewProxy(this);
         this.viewManager = new ViewManager(this.displayer);
         this.appListeners = new AppListeners(this);
@@ -60,6 +75,17 @@ export class AppManager {
         this.refresher.setRoom(this.room);
         this.refresher.setContext({ emitter });
 
+        this.sideEffectManager.add(() => {
+            return () => {
+                this.appCreateQueue.destroy();
+                this.mainViewProxy.destroy();
+                this.refresher?.destroy();
+                this.viewManager.destroy();
+                this.boxManager?.destroy();
+                this.callbacksNode?.dispose();
+            };
+        });
+
         emitter.once("onCreated").then(() => this.onCreated());
         emitter.on("onReconnected", () => this.onReconnected());
         if (isPlayer(this.displayer)) {
@@ -75,6 +101,8 @@ export class AppManager {
             if (scenePath === ROOT_DIR) {
                 this.setMainViewScenePath(ROOT_DIR);
                 this.createRootDirScenesCallback();
+                this.onRootDirRemoved();
+                emitter.emit("rootDirRemoved");
                 return;
             }
             const mainViewScenePath = this.store.getMainViewScenePath();
@@ -87,6 +115,20 @@ export class AppManager {
         this.createRootDirScenesCallback();
     }
 
+    /**
+     * 根目录被删除时所有的 scene 都会被删除.
+     * 所以需要关掉所有开启了 view 的 app
+     */
+    private onRootDirRemoved() {
+        this.appProxies.forEach(appProxy => {
+            if (appProxy.view) {
+                this.closeApp(appProxy.id);
+            }
+        });
+        // 删除了根目录的 scenes 之后 mainview 需要重新绑定, 否则主白板会不能渲染
+        this.mainViewProxy.rebind();
+    }
+
     private createRootDirScenesCallback = () => {
         let isRecreate = false;
         if (this.callbacksNode) {
@@ -94,22 +136,39 @@ export class AppManager {
             isRecreate = true;
         }
         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);
-            },
+            onAddScene: this.onSceneChange,
+            onRemoveScene: this.onSceneChange,
         });
         if (this.callbacksNode) {
+            this.updateSceneState(this.callbacksNode);
             this.mainViewScenesLength = this.callbacksNode.scenes.length;
             if (isRecreate) {
                 callbacks.emit("mainViewScenesLengthChange", this.callbacksNode.scenes.length);
             }
         }
-    }
+    };
+
+    private onSceneChange = (node: ScenesCallbacksNode) => {
+        this.mainViewScenesLength = node.scenes.length;
+        this.updateSceneState(node);
+        callbacks.emit("mainViewScenesLengthChange", this.mainViewScenesLength);
+    };
+
+    private updateSceneState = (node: ScenesCallbacksNode) => {
+        const currentIndex = this.store.getMainViewSceneIndex() || 0;
+        const sceneName = node.scenes[currentIndex];
+        this.sceneState = {
+            scenePath: `${ROOT_DIR}${sceneName}`,
+            contextPath: node.path,
+            index: currentIndex,
+            scenes: node.scenes.map(scene => {
+                return {
+                    name: scene,
+                };
+            }),
+            sceneName: sceneName,
+        };
+    };
 
     private get eventName() {
         return isRoom(this.displayer) ? "onRoomStateChanged" : "onPlayerStateChanged";
@@ -152,7 +211,7 @@ export class AppManager {
 
     private async onCreated() {
         await this.attributesUpdateCallback(this.attributes.apps);
-        this.boxManager?.updateManagerRect();
+        emitter.emit("updateManagerRect");
         emitter.onAny(this.boxEventListener);
         this.refresher?.add("apps", () => {
             return safeListenPropsUpdated(
@@ -191,6 +250,9 @@ export class AppManager {
                 const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
                 if (mainSceneIndex !== undefined && this._prevSceneIndex !== mainSceneIndex) {
                     callbacks.emit("mainViewSceneIndexChange", mainSceneIndex);
+                    if (this.callbacksNode) {
+                        this.updateSceneState(this.callbacksNode);
+                    }
                     this._prevSceneIndex = mainSceneIndex;
                 }
             });
@@ -200,10 +262,7 @@ export class AppManager {
                 const focused = get(this.attributes, "focus");
                 if (this._prevFocused !== focused) {
                     callbacks.emit("focusedChange", focused);
-                    this.disposePrevFocusViewRedoUndoListeners(this._prevFocused);
-                    setTimeout(() => {
-                        this.addRedoUndoListeners(focused);
-                    }, 0);
+                    emitter.emit("focusedChange", { focused, prev: this._prevFocused });
                     this._prevFocused = focused;
                     if (focused !== undefined) {
                         this.boxManager?.focusBox({ appId: focused });
@@ -229,59 +288,16 @@ 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);
-    };
+        this.sideEffectManager.add(() => {
+            const redoUndo = new RedoUndo({
+                mainView: () => this.mainViewProxy.view,
+                focus: () => this.attributes.focus,
+                getAppProxy: id => this.appProxies.get(id),
+            });
+            return () => redoUndo.destroy();
+        });
+    }
 
     /**
      * 插件更新 attributes 时的回调
@@ -292,6 +308,9 @@ export class AppManager {
     public async attributesUpdateCallback(apps: any) {
         if (apps && WindowManager.container) {
             const appIds = Object.keys(apps);
+            if (appIds.length === 0) {
+                this.appCreateQueue.emitReady();
+            }
             const appsWithCreatedAt = appIds.map(appId => {
                 return {
                     id: appId,
@@ -637,11 +656,6 @@ 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);
@@ -653,14 +667,8 @@ export class AppManager {
                 appProxy.destroy(true, false, true);
             });
         }
-        this.viewManager.destroy();
-        this.boxManager?.destroy();
-        this.refresher?.destroy();
-        this.mainViewProxy.destroy();
         callbacks.clearListeners();
-        this.callbacksNode?.dispose();
-        this.appCreateQueue.destroy();
-        this.disposePrevFocusViewRedoUndoListeners(this._prevFocused);
+        this.sideEffectManager.flushAll();
         this._prevFocused = undefined;
         this._prevSceneIndex = undefined;
     }

package/src/AppProxy.ts

@@ -5,7 +5,7 @@ import { appRegister } from "./Register";
 import { autorun } from "white-web-sdk";
 import { BoxManagerNotFoundError } from "./Utils/error";
 import { debounce, get } from "lodash";
-import { emitter } from "./index";
+import { emitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { entireScenes, getScenePath, removeScenes, setScenePath, setViewFocusScenePath } from "./Utils/Common";
 import { log } from "./Utils/log";
@@ -127,7 +127,7 @@ export class AppProxy {
         } else {
             throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
         }
-        this.boxManager?.updateManagerRect();
+        emitter.emit("updateManagerRect")
         return {
             appId: this.id,
             app: appImpl,
@@ -363,8 +363,12 @@ export class AppProxy {
     ) {
         if (this.status === "destroyed") return;
         this.status = "destroyed";
-        await appRegister.notifyApp(this.kind, "destroy", { appId: this.id });
-        await this.appEmitter.emit("destroy", { error });
+        try {
+            await appRegister.notifyApp(this.kind, "destroy", { appId: this.id });
+            await this.appEmitter.emit("destroy", { error });
+        } catch (error) {
+            console.error("[WindowManager]: notifyApp error", error.message, error.stack);
+        }
         this.appEmitter.clearListeners();
         emitter.emit(`destroy-${this.id}` as any, { error });
         if (needCloseBox) {

package/src/BoxManager.ts

@@ -1,12 +1,8 @@
 import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce } from "lodash";
-import { emitter, WindowManager } from "./index";
-import {
-    TELE_BOX_STATE,
-    TeleBoxCollector,
-    TeleBoxManager,
-} from "@netless/telebox-insider";
-import type { AddAppOptions, AppInitState, EmitterType, CallbacksType } from "./index";
+import { TELE_BOX_STATE, TeleBoxCollector, TeleBoxManager } from "@netless/telebox-insider";
+import { WindowManager } from "./index";
+import type { AddAppOptions, AppInitState } from "./index";
 import type {
     TeleBoxManagerUpdateConfig,
     TeleBoxManagerCreateConfig,
@@ -19,6 +15,8 @@ import type {
 import type Emittery from "emittery";
 import type { NetlessApp } from "./typings";
 import type { View } from "white-web-sdk";
+import type { CallbacksType } from "./callback";
+import type { EmitterType } from "./InternalEmitter";
 
 export { TELE_BOX_STATE };
 
@@ -156,13 +154,10 @@ export class BoxManager {
         this.teleBoxManager.events.on("z_index", box => {
             this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
         });
-        emitter.on("playgroundSizeChange", this.playgroundSizeChangeListener);
+        emitter.on("playgroundSizeChange", () => this.updateManagerRect());
+        emitter.on("updateManagerRect", () => this.updateManagerRect());
     }
 
-    private playgroundSizeChangeListener = () => {
-        this.updateManagerRect();
-    };
-
     private get mainView() {
         return this.context.getMainView();
     }
@@ -406,7 +401,6 @@ export class BoxManager {
     }
 
     public destroy() {
-        emitter.off("playgroundSizeChange", this.playgroundSizeChangeListener);
         this.teleBoxManager.destroy();
     }
 }

package/src/ContainerResizeObserver.ts

@@ -1,6 +1,6 @@
 import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
 import { WindowManager } from "./index";
-import type { EmitterType } from "./index";
+import type { EmitterType } from "./InternalEmitter";
 
 const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 

package/src/Cursor/Cursor.ts

@@ -1,6 +1,7 @@
 import App from "./Cursor.svelte";
 import { ApplianceMap } from "./icons";
 import { ApplianceNames } from "white-web-sdk";
+import { findMemberByUid } from "../Helper";
 import { omit } from "lodash";
 import type { Position } from "../AttributesDelegate";
 import type { RoomMember } from "white-web-sdk";
@@ -164,7 +165,7 @@ export class Cursor {
     }
 
     public updateMember() {
-        this.member = this.manager.findMemberByUid(this.memberId);
+        this.member = findMemberByUid(this.manager.room, this.memberId);
         this.updateComponent();
         return this.member;
     }

package/src/Cursor/index.ts

@@ -1,9 +1,10 @@
 import { ApplianceNames } from "white-web-sdk";
 import { Cursor } from "./Cursor";
 import { CursorState, Events } from "../constants";
-import { emitter, WindowManager } from "../index";
+import { emitter } from "../InternalEmitter";
 import { SideEffectManager } from "side-effect-manager";
 import { throttle } from "lodash";
+import { WindowManager } from "../index";
 import type { CursorMovePayload } from "../index";
 import type { PositionType } from "../AttributesDelegate";
 import type { Point, RoomMember, View } from "white-web-sdk";
@@ -65,7 +66,8 @@ export class CursorManager {
     };
 
     private canMoveCursor(member: RoomMember | undefined) {
-        const isLaserPointer = member?.memberState.currentApplianceName === ApplianceNames.laserPointer;
+        const isLaserPointer =
+            member?.memberState.currentApplianceName === ApplianceNames.laserPointer;
         // 激光笔教具在不开启光标的情况下也要显示
         return this.enableCursor || isLaserPointer;
     }

package/src/Helper.ts

@@ -3,6 +3,7 @@ import { REQUIRE_VERSION } from "./constants";
 import { WhiteVersion } from "white-web-sdk";
 import { WhiteWebSDKInvalidError } from "./Utils/error";
 import { WindowManager } from "./index";
+import type { Room } from "white-web-sdk";
 
 export const setupWrapper = (
     root: HTMLElement
@@ -39,3 +40,8 @@ export const checkVersion = () => {
         throw new WhiteWebSDKInvalidError(REQUIRE_VERSION);
     }
 };
+
+export const findMemberByUid = (room: Room | undefined, uid: string) => {
+    const roomMembers = room?.state.roomMembers;
+    return roomMembers?.find(member => member.payload?.uid === uid);
+};

package/src/InternalEmitter.ts

@@ -0,0 +1,27 @@
+import Emittery from "emittery";
+import type { AppInitState, CursorMovePayload } from "./index";
+
+
+export type EmitterEvent = {
+    onCreated: undefined;
+    InitReplay: AppInitState;
+    move: { appId: string; x: number; y: number };
+    focus: { appId: string };
+    close: { appId: string };
+    resize: { appId: string; width: number; height: number; x?: number; y?: number };
+    error: Error;
+    seek: number;
+    mainViewMounted: undefined;
+    observerIdChange: number;
+    boxStateChange: string;
+    playgroundSizeChange: DOMRect;
+    onReconnected: void;
+    removeScenes: string;
+    cursorMove: CursorMovePayload;
+    updateManagerRect: undefined;
+    focusedChange: { focused: string | undefined; prev: string | undefined };
+    rootDirRemoved: undefined;
+};
+
+export type EmitterType = Emittery<EmitterEvent>;
+export const emitter: EmitterType = new Emittery();

package/src/ReconnectRefresher.ts

@@ -2,7 +2,7 @@ import { debounce, isFunction } from "lodash";
 import { log } from "./Utils/log";
 import { RoomPhase } from "white-web-sdk";
 import type { Room } from "white-web-sdk";
-import type { EmitterType } from "./index";
+import type { EmitterType } from "./InternalEmitter";
 
 export type ReconnectRefresherContext = {
     emitter: EmitterType;

package/src/RedoUndo.ts

@@ -0,0 +1,88 @@
+import { callbacks } from "./callback";
+import { emitter } from "./InternalEmitter";
+import type { View } from "white-web-sdk";
+import type { AppProxy } from "./AppProxy";
+
+export type RedoUndoContext = {
+    mainView: () => View;
+    focus: () => string | undefined;
+    getAppProxy: (id: string) => AppProxy | undefined;
+};
+
+export class RedoUndo {
+    constructor(private context: RedoUndoContext) {
+        emitter.on("focusedChange", changed => {
+            this.disposePrevFocusViewRedoUndoListeners(changed.prev);
+            setTimeout(() => {
+                this.addRedoUndoListeners(changed.focused);
+            }, 0);
+        });
+        emitter.on("rootDirRemoved", () => {
+            this.disposePrevFocusViewRedoUndoListeners(context.focus());
+            this.addRedoUndoListeners(context.focus());
+        });
+        this.addRedoUndoListeners(context.focus());
+    }
+
+    private addRedoUndoListeners = (focused: string | undefined) => {
+        if (focused === undefined) {
+            this.addViewCallbacks(
+                this.context.mainView(),
+                this.onCanRedoStepsUpdate,
+                this.onCanUndoStepsUpdate
+            );
+        } else {
+            const focusApp = this.context.getAppProxy(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 disposeViewCallbacks = (view: View) => {
+        view.callbacks.off("onCanRedoStepsUpdate", this.onCanRedoStepsUpdate);
+        view.callbacks.off("onCanUndoStepsUpdate", this.onCanUndoStepsUpdate);
+    };
+
+    private onCanRedoStepsUpdate = (steps: number) => {
+        callbacks.emit("canRedoStepsChange", steps);
+    };
+
+    private onCanUndoStepsUpdate = (steps: number) => {
+        callbacks.emit("canUndoStepsChange", steps);
+    };
+
+    private disposePrevFocusViewRedoUndoListeners = (prevFocused: string | undefined) => {
+        let view: View | undefined = undefined;
+        if (prevFocused === undefined) {
+            view = this.context.mainView();
+        } else {
+            const appProxy = this.context.getAppProxy(prevFocused);
+            if (appProxy && appProxy.view) {
+                view = appProxy.view;
+            }
+        }
+        if (view) {
+            this.disposeViewCallbacks(view);
+        }
+    };
+
+    public destroy() {
+        this.disposePrevFocusViewRedoUndoListeners(this.context.focus());
+    }
+}

package/src/Register/index.ts

@@ -15,6 +15,7 @@ class AppRegister {
     public appClasses: Map<string, () => Promise<NetlessApp>> = new Map();
 
     public async register(params: RegisterParams): Promise<void> {
+        this.appClassesCache.delete(params.kind);
         this.registered.set(params.kind, params);
 
         const srcOrAppOrFunction = params.src;

package/src/Register/loader.ts

@@ -1,4 +1,4 @@
-import { callbacks } from "../index";
+import { callbacks } from "../callback";
 import { getItem, setItem } from "./storage";
 import type { NetlessApp } from "../typings";
 

package/src/Utils/AppCreateQueue.ts

@@ -1,3 +1,4 @@
+import { callbacks } from "../callback";
 import type { AppProxy } from "../AppProxy";
 
 export type Invoker = () => Promise<AppProxy | undefined>;
@@ -6,6 +7,7 @@ export class AppCreateQueue {
     private list: Invoker[] = [];
     private currentInvoker: Invoker | undefined;
     private timer: number | undefined;
+    public isEmit = false;
 
     private initInterval() {
         return setInterval(() => {
@@ -37,6 +39,7 @@ export class AppCreateQueue {
                     this.currentInvoker = undefined;
                     if (this.list.length === 0) {
                         clearInterval(this.timer);
+                        this.emitReady();
                     }
                 })
                 .catch(error => {
@@ -46,6 +49,13 @@ export class AppCreateQueue {
         }
     }
 
+    public emitReady() {
+        if (!this.isEmit) {
+            callbacks.emit("ready");
+        }
+        this.isEmit = true;
+    }
+
     public destroy() {
         if (this.timer) {
             clearInterval(this.timer);

package/src/Utils/Common.ts

@@ -1,9 +1,9 @@
 import { appRegister } from "../Register";
 import { debounce } from "lodash";
-import { emitter } from "../index";
+import { emitter } from "../InternalEmitter";
 import { ScenePathType } from "white-web-sdk";
 import { v4 } from "uuid";
-import type { PublicEvent } from "../index";
+import type { PublicEvent } from "../callback";
 import type { Displayer, ViewVisionMode, Room, View } from "white-web-sdk";
 import type Emittery from "emittery";
 import { ROOT_DIR } from "../constants";

package/src/Utils/RoomHacker.ts

@@ -1,4 +1,4 @@
-import { emitter } from "../index";
+import { emitter } from "../InternalEmitter";
 import { isPlayer } from "white-web-sdk";
 import type { WindowManager } from "../index";
 import type { Camera, Room, Player, PlayerSeekingResult } from "white-web-sdk";
@@ -23,13 +23,13 @@ export const replaceRoomFunction = (room: Room | Player, manager: WindowManager)
 
         Object.defineProperty(room, "canUndoSteps", {
             get() {
-                return manager.mainView.canUndoSteps;
+                return manager.canUndoSteps;
             },
         });
 
         Object.defineProperty(room, "canRedoSteps", {
             get() {
-                return manager.mainView.canRedoSteps;
+                return manager.canRedoSteps;
             },
         });
 

package/src/View/MainView.ts

@@ -1,7 +1,8 @@
 import { AnimationMode, reaction } from "white-web-sdk";
-import { callbacks, emitter } from "../index";
+import { callbacks } from "../callback";
 import { createView } from "./ViewManager";
 import { debounce, isEmpty, isEqual } from "lodash";
+import { emitter } from "../InternalEmitter";
 import { Fields } from "../AttributesDelegate";
 import { setViewFocusScenePath } from "../Utils/Common";
 import { SideEffectManager } from "side-effect-manager";
@@ -110,6 +111,17 @@ export class MainViewProxy {
         }
     }
 
+    public rebind(): void {
+        const divElement = this.mainView.divElement;
+        const disableCameraTransform = this.mainView.disableCameraTransform;
+        this.stop();
+        this.mainView.release();
+        this.mainView = this.createMainView();
+        this.mainView.disableCameraTransform = disableCameraTransform;
+        this.mainView.divElement = divElement;
+        this.start();
+    }
+
     private onCameraUpdatedByDevice = (camera: Camera) => {
         this.store.setMainViewCamera({ ...camera, id: this.manager.uid });
         if (!isEqual(this.mainViewSize, { ...this.mainView.size, id: this.manager.uid })) {