@netless/window-manager 0.4.24 → 0.4.27-canary.0

package/src/App/AppContext.ts

@@ -82,6 +82,17 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         return this.appProxy.view;
     };
 
+    public mountView = (dom: HTMLElement): void => {
+        const view = this.getView();
+        if (view) {
+            view.divElement = dom as HTMLDivElement;
+            setTimeout(() => {
+                // 渲染需要时间，延迟 refresh
+                this.getRoom()?.refreshViewSize();
+            }, 1000);
+        }
+    };
+
     public getInitScenePath = () => {
         return this.manager.getAppInitPath(this.appId);
     };
@@ -124,17 +135,6 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         this.getRoom()?.setScenePath(scenePath);
     };
 
-    public mountView = (dom: HTMLElement): void => {
-        const view = this.getView();
-        if (view) {
-            view.divElement = dom as HTMLDivElement;
-            setTimeout(() => {
-                // 渲染需要时间，延迟 refresh
-                this.getRoom()?.refreshViewSize();
-            }, 1000);
-        }
-    };
-
     /** Get the local App options. */
     public getAppOptions = (): TAppOptions | undefined => {
         return typeof this.appOptions === "function"
@@ -231,6 +231,15 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         }
     };
 
+    public removePage = async (index: number): Promise<boolean> => {
+        if (index < 0 || index >= this.pageState.length) {
+            console.warn(`[WindowManager]: page index ${index} out of range`);
+            return false;
+        }
+        this.appProxy.removeSceneByIndex(index);
+        return true;
+    }
+
     public get pageState(): PageState {
         return this.appProxy.pageState;
     }

package/src/App/AppProxy.ts

@@ -27,11 +27,11 @@ import type { SceneState, View, SceneDefinition } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 import type { NetlessApp } from "../typings";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
-import type { PageState } from "../Page";
+import { calculateNextIndex, PageRemoveService, PageState } from "../Page";
 
 export type AppEmitter = Emittery<AppEmitterEvent>;
 
-export class AppProxy {
+export class AppProxy implements PageRemoveService {
     public kind: string;
     public id: string;
     public scenePath?: string;
@@ -48,6 +48,7 @@ export class AppProxy {
     private status: "normal" | "destroyed" = "normal";
     private stateKey: string;
     private _pageState: AppPageStateImpl;
+    private _prevFullPath: string | undefined;
 
     public appResult?: NetlessApp<any>;
     public appContext?: AppContext<any, any>;
@@ -248,6 +249,24 @@ export class AppProxy {
         this.boxManager?.updateBoxState(currentAppState);
     }
 
+    public async onRemoveScene(scenePath: string) {
+        if (this.scenePath && scenePath.startsWith(this.scenePath + "/")) {
+            let nextIndex = this.pageState.index;
+            let fullPath = this._pageState.getFullPath(nextIndex);
+            if (!fullPath) {
+                nextIndex = 0;
+                fullPath = this._pageState.getFullPath(nextIndex);
+            }
+            if (fullPath) {
+                this.setFullPath(fullPath);
+            }
+            this.setViewFocusScenePath();
+            if (this.view) {
+                this.view.focusSceneIndex = nextIndex;
+            }
+        }
+    }
+
     public getAppInitState = (id: string) => {
         const attrs = this.store.getAppState(id);
         if (!attrs) return;
@@ -348,7 +367,10 @@ export class AppProxy {
             return autorun(() => {
                 const fullPath = this.appAttributes?.fullPath;
                 this.setFocusScenePathHandler(fullPath);
-                this.notifyPageStateChange();
+                if (this._prevFullPath !== fullPath) {
+                    this.notifyPageStateChange();
+                    this._prevFullPath = fullPath;
+                }
             });
         });
     };
@@ -381,14 +403,47 @@ export class AppProxy {
         return view;
     }
 
-    public notifyPageStateChange = () => {
+    public notifyPageStateChange = debounce(() => {
         this.appEmitter.emit("pageStateChange", this.pageState);
-    };
+    }, 50);
 
     public get pageState(): PageState {
         return this._pageState.toObject();
     }
 
+    // PageRemoveService
+    public async removeSceneByIndex(index: number) {
+        const scenePath = this._pageState.getFullPath(index);
+        if (scenePath) {
+            // 不能删除所有场景
+            if (this.pageState.length <= 1) {
+                return false;
+            }
+            const nextIndex = calculateNextIndex(index, this.pageState);
+            // 只修改 focus path 不修改 FullPath
+            this.setSceneIndexWithoutSync(nextIndex);
+            this.manager.dispatchInternalEvent(Events.SetAppFocusIndex, {
+                type: "app",
+                appID: this.id,
+                index: nextIndex,
+            });
+            // 手动添加一个延迟, 让 app 切换场景后再删除以避免闪烁
+            setTimeout(() => {
+                removeScenes(this.manager.room, scenePath, index);
+            }, 100);
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    public setSceneIndexWithoutSync(index: number) {
+        if (this.view) {
+            this.view.focusSceneIndex = index;
+        }
+    }
+    // PageRemoveService end
+
     public setSceneIndex(index: number) {
         if (this.view) {
             this.view.focusSceneIndex = index;
@@ -432,6 +487,7 @@ export class AppProxy {
         this.manager.refresher?.remove(this.id);
         this.manager.refresher?.remove(this.stateKey);
         this.manager.refresher?.remove(`${this.id}-fullPath`);
+        this._prevFullPath = undefined;
     }
 
     public close(): Promise<void> {

package/src/App/Storage/index.ts

@@ -37,15 +37,21 @@ export class Storage<TState extends Record<string, any> = any> implements Storag
     this._state = {} as TState;
     const rawState = this._getRawState(this._state);
 
-    if (this.id !== null && this._context.getIsWritable()) {
-      if (rawState === this._state || !isObject(rawState)) {
-        if (!get(this._context.getAttributes(), [STORAGE_NS])) {
-          this._context.updateAttributes([STORAGE_NS], {});
+    if (this._context.getIsWritable()) {
+      if (this.id === null) {
+        if (context.isAddApp && defaultState) {
+            this.setState(defaultState);
+        }
+      } else {
+        if (rawState === this._state || !isObject(rawState)) {
+          if (!get(this._context.getAttributes(), [STORAGE_NS])) {
+            this._context.updateAttributes([STORAGE_NS], {});
+          }
+          this._context.updateAttributes([STORAGE_NS, this.id], this._state);
+          if (defaultState) {
+            this.setState(defaultState);
+          }
         }
-        this._context.updateAttributes([STORAGE_NS, this.id], this._state);
-      }
-      if (defaultState) {
-        this.setState(defaultState);
       }
     }
 

package/src/AppListener.ts

@@ -6,6 +6,13 @@ 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";
+
+type SetAppFocusIndex = {
+    type: "main" | "app";
+    appID?: string;
+    index: number;
+}
+
 export class AppListeners {
     private displayer = this.manager.displayer;
 
@@ -67,6 +74,10 @@ export class AppListeners {
                     this.initMainViewCameraHandler();
                     break;
                 }
+                case Events.SetAppFocusIndex: {
+                    this.setAppFocusViewIndexHandler(data.payload);
+                    break;
+                }
                 default:
                     break;
             }
@@ -119,4 +130,15 @@ export class AppListeners {
     private initMainViewCameraHandler = () => {
         this.manager.mainViewProxy.addCameraReaction();
     }
+
+    private setAppFocusViewIndexHandler = (payload: SetAppFocusIndex) => {
+        if (payload.type === "main") {
+            this.manager.setSceneIndexWithoutSync(payload.index);
+        } else if (payload.type === "app" && payload.appID) {
+            const app = this.manager.appProxies.get(payload.appID);
+            if (app) {
+                app.setSceneIndexWithoutSync(payload.index);
+            }
+        }
+    }
 }

package/src/AppManager.ts

@@ -6,7 +6,7 @@ import { appRegister } from "./Register";
 import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
 import { callbacks } from "./callback";
 import { debounce, get, isInteger, orderBy } from "lodash";
-import { emitter } from "./InternalEmitter";
+import { emitter, RemoveSceneParams } from "./InternalEmitter";
 import { Fields, store } from "./AttributesDelegate";
 import { log } from "./Utils/log";
 import { MainViewProxy } from "./View/MainView";
@@ -20,8 +20,10 @@ import type { EmitterEvent } from "./InternalEmitter";
 import {
     entireScenes,
     genAppId,
+    isRootDirPage,
     makeValidScenePath,
     parseSceneDir,
+    removeScenes,
     setScenePath,
     setViewFocusScenePath,
 } from "./Utils/Common";
@@ -35,6 +37,7 @@ import type {
     SceneState,
 } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
+import { calculateNextIndex } from "./Page";
 
 export class AppManager {
     public displayer: Displayer;
@@ -108,20 +111,29 @@ export class AppManager {
         });
     }
 
-    private onRemoveScenes = async (scenePath: string) => {
+    private onRemoveScenes = async (params: RemoveSceneParams) => {
+        const { scenePath } = params;
         // 如果移除根目录就把 scenePath 设置为初始值
         if (scenePath === ROOT_DIR) {
             await this.onRootDirRemoved();
             this.dispatchInternalEvent(Events.RootDirRemoved);
             return;
         }
-        // 如果移除的 path 跟 MainViewScenePath 相同就取当前目录的当前 index
-        const mainViewScenePath = this.store.getMainViewScenePath();
-        if (this.room && mainViewScenePath) {
-            if (mainViewScenePath === scenePath) {
-                const nextPath = this.callbacksNode?.scenes[this.store.getMainViewSceneIndex()];
-                this.setMainViewScenePath(`/${nextPath}` || INIT_DIR);
+        if (isRootDirPage(scenePath)) {
+            let nextIndex = this.mainView.focusSceneIndex || 0;
+            let sceneName = this.callbacksNode?.scenes[nextIndex];
+            if (!sceneName) {
+                nextIndex = 0;
+                sceneName = this.callbacksNode?.scenes[nextIndex];
             }
+            if (sceneName) {
+                this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
+            }
+            await this.setMainViewSceneIndex(nextIndex);
+        } else {
+            this.appProxies.forEach(app => {
+                app.onRemoveScene(scenePath);
+            });
         }
     };
 
@@ -180,6 +192,26 @@ export class AppManager {
         }
     };
 
+    public removeSceneByIndex = async (index: number) => {
+        const nextIndex = calculateNextIndex(index, this.windowManger.pageState);
+        this.setSceneIndexWithoutSync(nextIndex);
+        this.dispatchInternalEvent(Events.SetAppFocusIndex, { type: "main", index: nextIndex });
+        setTimeout(() => {
+            const scene = this.callbacksNode?.scenes[index];
+            if (scene) {
+                removeScenes(this.room, `${ROOT_DIR}${scene}`, index)
+            }
+        }, 100);
+        return true;
+    }
+
+    public setSceneIndexWithoutSync = (index: number) => {
+        const sceneName = this.callbacksNode?.scenes[index];
+        if (sceneName) {
+            this.mainViewProxy.setFocusScenePath(`${ROOT_DIR}${sceneName}`);
+        }
+    }
+
     private onSceneChange = (node: ScenesCallbacksNode) => {
         this.mainViewScenesLength = node.scenes.length;
         this.updateSceneState(node);
@@ -193,7 +225,10 @@ export class AppManager {
 
     private updateSceneState = (node: ScenesCallbacksNode) => {
         const currentIndex = this.store.getMainViewSceneIndex() || 0;
-        const sceneName = node.scenes[currentIndex];
+        let sceneName = node.scenes[currentIndex];
+        if (!sceneName) {
+            sceneName = node.scenes[this.mainView.focusSceneIndex || 0];
+        }
         this.sceneState = {
             scenePath: `${ROOT_DIR}${sceneName}`,
             contextPath: node.path,
@@ -322,6 +357,7 @@ export class AppManager {
         });
     };
 
+    
     private onMainViewIndexChange = (index: number) => {
         if (index !== undefined && this._prevSceneIndex !== index) {
             callbacks.emit("mainViewSceneIndexChange", index);
@@ -472,8 +508,8 @@ export class AppManager {
     public setMainViewFocusPath(scenePath?: string) {
         const focusScenePath = scenePath || this.store.getMainViewScenePath();
         if (focusScenePath) {
-            const view = setViewFocusScenePath(this.mainView, focusScenePath);
-            return view?.focusScenePath === focusScenePath;
+            setViewFocusScenePath(this.mainView, focusScenePath);
+            return this.mainView?.focusScenePath === focusScenePath;
         }
     }
 
@@ -643,20 +679,17 @@ export class AppManager {
     public async setMainViewSceneIndex(index: number) {
         if (this.room) {
             if (this.store.getMainViewSceneIndex() === index) return;
-            const mainViewScenePath = this.store.getMainViewScenePath() as string;
-            if (mainViewScenePath) {
-                const sceneDir = parseSceneDir(mainViewScenePath);
-                const scenePath = makeValidScenePath(this.displayer, sceneDir, index);
-                if (scenePath) {
-                    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`);
+            const sceneName = this.callbacksNode?.scenes[index];
+            const scenePath =`${ROOT_DIR}${sceneName}`;
+            if (sceneName) {
+                const success = this.setMainViewFocusPath(scenePath);
+                if (success) {
+                    this.store.setMainViewScenePath(scenePath);
+                    this.safeSetAttributes({ _mainSceneIndex: index });
+                    this.dispatchSetMainViewScenePath(scenePath);
                 }
+            } else {
+                throw new Error(`[WindowManager]: ${index} not valid index`);
             }
         }
     }

package/src/ContainerResizeObserver.ts

@@ -1,11 +1,14 @@
 import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
+import { isFunction } from "lodash";
 import { WindowManager } from "./index";
 import type { EmitterType } from "./InternalEmitter";
+import type { UnsubscribeFn } from "emittery";
 
 const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 
 export class ContainerResizeObserver {
     private containerResizeObserver?: ResizeObserver;
+    private disposer?: UnsubscribeFn;
 
     constructor(private emitter: EmitterType) {}
 
@@ -35,10 +38,14 @@ export class ContainerResizeObserver {
             }
         });
 
+        this.disposer = this.emitter.on("containerSizeRatioUpdate", () => {
+            this.updateSizer(container.getBoundingClientRect(), sizer, wrapper);
+        });
+
         this.containerResizeObserver.observe(container);
     }
 
-    private updateSizer(
+    public updateSizer(
         { width, height }: DOMRectReadOnly,
         sizer: HTMLElement,
         wrapper: HTMLDivElement
@@ -58,5 +65,9 @@ export class ContainerResizeObserver {
 
     public disconnect() {
         this.containerResizeObserver?.disconnect();
+        if (isFunction(this.disposer)) {
+            this.disposer();
+            this.disposer = undefined;
+        }        
     }
 }

package/src/InternalEmitter.ts

@@ -1,6 +1,9 @@
 import Emittery from "emittery";
 import type { AppInitState, CursorMovePayload } from "./index";
 
+export type RemoveSceneParams = {
+    scenePath: string, index?: number
+}
 
 export type EmitterEvent = {
     onCreated: undefined;
@@ -16,8 +19,9 @@ export type EmitterEvent = {
     observerIdChange: number;
     boxStateChange: string;
     playgroundSizeChange: DOMRect;
-    onReconnected: void;
-    removeScenes: string;
+    startReconnect: undefined;
+    onReconnected: undefined;
+    removeScenes: RemoveSceneParams;
     cursorMove: CursorMovePayload;
     updateManagerRect: undefined;
     focusedChange: { focused: string | undefined; prev: string | undefined };
@@ -25,6 +29,7 @@ export type EmitterEvent = {
     setReadonly: boolean;
     changePageState: undefined;
     writableChange: boolean;
+    containerSizeRatioUpdate: number;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;

package/src/Page/PageController.ts

@@ -14,5 +14,11 @@ export interface PageController {
     nextPage: () => Promise<boolean>;
     prevPage: () => Promise<boolean>;
     addPage: (params?: AddPageParams) => Promise<void>;
+    removePage: (index: number) => Promise<boolean>;
     pageState: PageState;
 }
+
+export interface PageRemoveService {
+    removeSceneByIndex: (index: number) => Promise<boolean>;
+    setSceneIndexWithoutSync: (index: number) => void;
+}

package/src/Page/index.ts

@@ -1 +1,19 @@
+import type { PageState } from "./PageController";
+
 export * from "./PageController";
+
+export const calculateNextIndex = (index: number, pageState: PageState) => {
+    let nextIndex = 0;
+    if (index === 0) {
+        return index + 1;
+    }
+    if (pageState.index !== 0 && index !== 0) {
+        const maxIndex = pageState.length - 1;
+        if (index === maxIndex) {
+            nextIndex = maxIndex - 1;   
+        } else if (index > 0 && index < maxIndex) {
+            nextIndex = index + 1;
+        }
+    }
+    return nextIndex;
+}

package/src/PageState.ts

@@ -19,8 +19,9 @@ export class PageStateImpl {
     }
 
     public toObject(): PageState {
+        const index = this.index >= this.length ? this.length - 1 : this.index;
         return {
-            index: this.index,
+            index,
             length: this.length,
         };
     }

package/src/ReconnectRefresher.ts

@@ -29,6 +29,9 @@ export class ReconnectRefresher {
     }
 
     private onPhaseChanged = (phase: RoomPhase) => {
+        if (phase === RoomPhase.Reconnecting) {
+            this.ctx.emitter.emit("startReconnect");
+        }
         if (phase === RoomPhase.Connected && this.phase === RoomPhase.Reconnecting) {
             this.onReconnected();
         }
@@ -47,7 +50,7 @@ export class ReconnectRefresher {
                 this.disposers.set(id, func());
             }
         });
-        this.ctx.emitter.emit("onReconnected", undefined);
+        this.ctx.emitter.emit("onReconnected");
     }
 
     private releaseDisposers() {

package/src/Utils/Common.ts

@@ -53,11 +53,11 @@ export const getScenePath = (
     }
 };
 
-export const removeScenes = (room: Room | undefined, scenePath: string) => {
+export const removeScenes = (room: Room | undefined, scenePath: string, index?: number) => {
     if (room) {
         const type = room.scenePathType(scenePath);
         if (type !== ScenePathType.None) {
-            room.removeScenes(scenePath);
+            (room.removeScenes as any)(scenePath, index);
         }
     }
 };
@@ -140,3 +140,15 @@ export const getVersionNumber = (version: string) => {
 };
 
 export const wait = (time: number) => new Promise(resolve => setTimeout(resolve, time));
+
+// rootDirPage: /page1  || / page2
+// notRootDirPage: /dir1/page1 || /dir1/page2
+export const isRootDirPage = (scenePath: string) => {
+    const delimiterCount = scenePath.split("").reduce((prev, cur) => {
+        if (cur === ROOT_DIR) {
+            prev += 1;
+        }
+        return prev;
+    }, 0);
+    return delimiterCount === 1;
+}

package/src/Utils/RoomHacker.ts

@@ -61,12 +61,12 @@ export const replaceRoomFunction = (room: Room | Player, manager: WindowManager)
 
 const delegateRemoveScenes = (room: Room, manager: WindowManager) => {
     const originRemoveScenes = room.removeScenes;
-    room.removeScenes = (scenePath: string) => {
+    room.removeScenes = (scenePath: string, index?: number) => {
         if (scenePath === ROOT_DIR) {
             manager.appManager?.updateRootDirRemoving(true);
         }
         const result = originRemoveScenes.call(room, scenePath);
-        emitter.emit("removeScenes", scenePath);
+        emitter.emit("removeScenes", { scenePath, index });
         return result;
     };
 };

package/src/Utils/error.ts

@@ -34,3 +34,7 @@ export class InvalidScenePath extends Error {
 export class BoxManagerNotFoundError extends Error {
     override message = "[WindowManager]: boxManager not found";
 }
+
+export class BindContainerRoomPhaseInvalidError extends Error {
+    override message = "[WindowManager]: room phase only Connected can be bindContainer";
+}

package/src/View/MainView.ts

@@ -1,7 +1,7 @@
 import { AnimationMode, reaction } from "white-web-sdk";
 import { callbacks } from "../callback";
 import { createView } from "./ViewManager";
-import { debounce, isEmpty, isEqual } from "lodash";
+import { debounce, get, isEmpty, isEqual } from "lodash";
 import { emitter } from "../InternalEmitter";
 import { Fields } from "../AttributesDelegate";
 import { setViewFocusScenePath } from "../Utils/Common";
@@ -32,8 +32,15 @@ export class MainViewProxy {
             this.sizeChangeHandler(this.mainViewSize);
         };
         this.sideEffectManager.add(() => {
-            emitter.on("playgroundSizeChange", playgroundSizeChangeListener);
-            return () => emitter.off("playgroundSizeChange", playgroundSizeChangeListener);
+            return emitter.on("playgroundSizeChange", playgroundSizeChangeListener);
+        });
+        this.sideEffectManager.add(() => {
+            return emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
+        });
+        this.sideEffectManager.add(() => {
+            return emitter.on("startReconnect", () => {
+                this.mainView.release();
+            });
         });
     }
 
@@ -62,6 +69,10 @@ export class MainViewProxy {
         return this.store.getMainViewSize();
     }
 
+    private get didRelease(): boolean {
+        return get(this.view, ["didRelease"]);
+    }
+
     private moveCameraSizeByAttributes() {
         this.moveCameraToContian(this.mainViewSize);
         this.moveCamera(this.mainViewCamera);
@@ -98,13 +109,21 @@ export class MainViewProxy {
         );
     };
 
-    private sizeChangeHandler = debounce((size: Size) => {
+    public sizeChangeHandler = debounce((size: Size) => {
         if (size) {
             this.moveCameraToContian(size);
             this.moveCamera(this.mainViewCamera);
         }
     }, 30);
 
+    public onUpdateContainerSizeRatio = () => {
+        const size = this.store.getMainViewSize();
+        this.sizeChangeHandler(size);
+        if (size.id === this.manager.uid) {
+            this.setCameraAndSize();
+        }
+    }
+
     public get view(): View {
         return this.mainView;
     }
@@ -123,9 +142,17 @@ export class MainViewProxy {
     }
 
     public onReconnect(): void {
-        const mainViewScenePath = this.store.getMainViewScenePath();
-        if (mainViewScenePath) {
-            setViewFocusScenePath(this.view, mainViewScenePath);
+        if (this.didRelease) {
+            this.rebind();
+        } else {
+            const mainViewScenePath = this.store.getMainViewScenePath();
+            this.setFocusScenePath(mainViewScenePath);
+        }
+    }
+
+    public setFocusScenePath(path: string | undefined) {
+        if (path) {
+            return setViewFocusScenePath(this.view, path);
         }
     }
 
@@ -133,7 +160,9 @@ export class MainViewProxy {
         const divElement = this.mainView.divElement;
         const disableCameraTransform = this.mainView.disableCameraTransform;
         this.stop();
-        this.mainView.release();
+        if (!this.didRelease) {
+            this.mainView.release();
+        }
         this.removeMainViewListener();
         this.mainView = this.createMainView();
         this.mainView.disableCameraTransform = disableCameraTransform;