@netless/window-manager 0.3.17 → 0.4.0-canary.10

package/src/AppManager.ts

@@ -1,66 +1,55 @@
 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;
 
-    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 +63,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,19 +81,28 @@ 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();
                     }
-                    this.boxManager.setMinimized(Boolean(minimized));
+                    setTimeout(() => {
+                        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;
                 }
             });
         });
@@ -124,29 +125,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);
                     });
@@ -155,6 +166,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) => {
@@ -169,15 +196,18 @@ export class AppManager {
         mainView.disableCameraTransform = disableCameraTransform;
         mainView.divElement = divElement;
         if (!mainView.focusScenePath) {
-            this.store.setMainViewFocusPath();
+            this.setMainViewFocusPath();
         }
-        if (this.store.focus === undefined && mainView.mode !== ViewVisionMode.Writable) {
-            this.viewManager.switchMainViewToWriter();
-        }
-        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);
@@ -192,7 +222,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);
         }
@@ -209,8 +239,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);
         }
     }
 
@@ -263,22 +293,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;
@@ -328,28 +355,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();
+                }
+            }
         }
     }
 
@@ -407,7 +443,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 });
@@ -415,7 +451,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();
@@ -448,9 +484,10 @@ export class AppManager {
             });
         }
         this.viewManager.destroy();
-        this.boxManager.destroy();
+        this.boxManager?.destroy();
         this.refresher?.destroy();
         this.mainViewProxy.destroy();
         callbacks.clearListeners();
+        this._prevSceneIndex = undefined;
     }
 }

package/src/AppProxy.ts

@@ -2,16 +2,15 @@ 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 { log } from "./Utils/log";
 import {
-    notifyMainViewModeChange,
     setScenePath,
     setViewFocusScenePath,
-    setViewMode,
+    getScenePath
 } from "./Utils/Common";
 import type {
     AppEmitterEvent,
@@ -25,6 +24,7 @@ import type { AppManager } from "./AppManager";
 import type { NetlessApp } from "./typings";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import { Base } from "./Base";
+import { BoxManagerNotFoundError } from "./Utils/error";
 
 export class AppProxy extends Base {
     public id: string;
@@ -36,10 +36,12 @@ 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";
+    private stateKey: string;
+    private appResult?: NetlessApp<any>;
+    private appContext?: AppContext<any, any>;
 
     constructor(
         private params: BaseInsertParams,
@@ -50,6 +52,7 @@ export class AppProxy extends Base {
         super(manager);
         this.kind = params.kind;
         this.id = appId;
+        this.stateKey = `${this.id}_state`;
         this.appProxies.set(this.id, this);
         this.appEmitter = new Emittery();
         this.appListener = this.makeAppEventListener(this.id);
@@ -93,17 +96,25 @@ 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 }> {
         const params = this.params;
         if (!params.kind) {
@@ -117,9 +128,6 @@ export class AppProxy extends Base {
             throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
         }
         this.context.updateManagerRect();
-        if (focus) {
-            this.focusApp();
-        }
         return {
             appId: this.id,
             app: appImpl,
@@ -128,16 +136,15 @@ export class AppProxy extends Base {
 
     private focusApp() {
         this.focusBox();
-        this.context.switchAppToWriter(this.id);
-        this.store.setMainViewFocusPath();
+        this.store.setMainViewFocusPath(this.manager.mainView);
     }
 
     public get box(): ReadonlyTeleBox | undefined {
-        return this.boxManager.getBox(this.id);
+        return this.boxManager?.getBox(this.id);
     }
 
     public focusBox() {
-        this.boxManager.focusBox({ appId: this.id });
+        this.boxManager?.focusBox({ appId: this.id });
     }
 
     private async setupApp(
@@ -148,13 +155,17 @@ export class AppProxy extends Base {
         appOptions?: any
     ) {
         log("setupApp", appId, app, options);
-        const context = new AppContext(this.manager, appId, this, appOptions);
+        if (!this.boxManager) {
+            throw new BoxManagerNotFoundError();
+        }
+        const context = new AppContext(this.manager, this.boxManager, appId, this, appOptions);
+        this.appContext = context;
         try {
             emitter.once(`${appId}${Events.WindowCreated}` as any).then(async () => {
                 let boxInitState: AppInitState | undefined;
                 if (!skipUpdate) {
                     boxInitState = this.getAppInitState(appId);
-                    this.boxManager.updateBoxState(boxInitState);
+                    this.boxManager?.updateBoxState(boxInitState);
                 }
                 this.appEmitter.onAny(this.appListener);
                 this.appAttributesUpdateListener(appId);
@@ -162,12 +173,13 @@ export class AppProxy extends Base {
                 setTimeout(async () => {
                     // 延迟执行 setup, 防止初始化的属性没有更新成功
                     const result = await app.setup(context);
+                    this.appResult = result;
                     appRegister.notifyApp(app.kind, "created", { appId, result });
                     this.afterSetupApp(boxInitState);
                     this.fixMobileSize();
                 }, 50);
             });
-            this.boxManager.createBox({
+            this.boxManager?.createBox({
                 appId: appId,
                 app,
                 options,
@@ -182,9 +194,9 @@ export class AppProxy extends Base {
 
     // 兼容移动端创建时会出现 PPT 不适配的问题
     private fixMobileSize() {
-        const box = this.boxManager.getBox(this.id);
+        const box = this.boxManager?.getBox(this.id);
         if (box) {
-            this.boxManager.resizeBox({
+            this.boxManager?.resizeBox({
                 appId: this.id,
                 width: box.intrinsicWidth + 0.001,
                 height: box.intrinsicHeight + 0.001,
@@ -195,11 +207,8 @@ 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);
+                this.boxManager?.setBoxInitState(this.id);
             }
         }
     }
@@ -207,7 +216,7 @@ export class AppProxy extends Base {
     public onSeek(time: number) {
         this.appEmitter.emit("seek", time);
         const boxInitState = this.getAppInitState(this.id);
-        this.boxManager.updateBoxState(boxInitState);
+        this.boxManager?.updateBoxState(boxInitState);
     }
 
     public async onReconnected() {
@@ -216,27 +225,8 @@ 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);
-        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();
-                        notifyMainViewModeChange(callbacks, ViewVisionMode.Freedom);
-                        setViewMode(this.manager.mainView, ViewVisionMode.Freedom);
-                    }
-                    setViewMode(this.view, ViewVisionMode.Writable);
-                } catch (error) {
-                    log("switch view failed", error);
-                }
-            }
-        });
+        await appProxy.baseInsertApp(true);
+        this.boxManager?.updateBoxState(currentAppState);
     }
 
     public getAppInitState = (id: string) => {
@@ -278,7 +268,7 @@ export class AppProxy extends Base {
             if (!this.manager.canOperate) return;
             switch (eventName) {
                 case "setBoxSize": {
-                    this.boxManager.resizeBox({
+                    this.boxManager?.resizeBox({
                         appId,
                         width: data.width,
                         height: data.height,
@@ -287,7 +277,7 @@ export class AppProxy extends Base {
                     break;
                 }
                 case "setBoxMinSize": {
-                    this.boxManager.setBoxMinSize({
+                    this.boxManager?.setBoxMinSize({
                         appId,
                         minWidth: data.minwidth,
                         minHeight: data.minheight,
@@ -295,7 +285,7 @@ export class AppProxy extends Base {
                     break;
                 }
                 case "setBoxTitle": {
-                    this.boxManager.setBoxTitle({ appId, title: data.title });
+                    this.boxManager?.setBoxTitle({ appId, title: data.title });
                     break;
                 }
                 case AppEvents.destroy: {
@@ -307,7 +297,7 @@ export class AppProxy extends Base {
                     break;
                 }
                 case "focus": {
-                    this.boxManager.focusBox({ appId: this.id });
+                    this.boxManager?.focusBox({ appId: this.id });
                     emitter.emit("focus", { appId: this.id });
                     break;
                 }
@@ -327,6 +317,14 @@ export class AppProxy extends Base {
                 }
             });
         });
+        this.manager.refresher?.add(this.stateKey,() => {
+            return autorun(() => {
+                const appState = this.appAttributes?.state;
+                if (appState?.zIndex > 0 && appState.zIndex !== this.box?.zIndex) {
+                    this.boxManager?.setZIndex(appId, appState.zIndex);
+                }
+            });
+        });
     };
 
     public setScenePath(): void {
@@ -346,7 +344,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;
     }
@@ -364,17 +361,17 @@ export class AppProxy extends Base {
         this.appEmitter.clearListeners();
         emitter.emit(`destroy-${this.id}` as any, { error });
         if (needCloseBox) {
-            this.boxManager.closeBox(this.id, skipUpdate);
+            this.boxManager?.closeBox(this.id, skipUpdate);
         }
         if (cleanAttrs) {
             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);
     }
 
     public close(): Promise<void> {