@netless/window-manager 0.4.25 → 0.4.27

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/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 };

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,18 @@
+import type { PageState } from "./PageController";
+
 export * from "./PageController";
+
+export const calculateNextIndex = (index: number, pageState: PageState) => {
+    let nextIndex = 0;
+    const maxIndex = pageState.length - 1;
+    if (index === pageState.index) {
+        if (index === maxIndex) {
+            nextIndex = index - 1;
+        } else {
+            nextIndex = pageState.index + 1;
+        }
+    } else {
+        nextIndex = pageState.index;
+    }
+    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";
@@ -37,6 +37,11 @@ export class MainViewProxy {
         this.sideEffectManager.add(() => {
             return emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
         });
+        this.sideEffectManager.add(() => {
+            return emitter.on("startReconnect", () => {
+                this.mainView.release();
+            });
+        });
     }
 
     private startListenWritableChange = () => {
@@ -64,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);
@@ -133,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);
         }
     }
 
@@ -143,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;

package/src/constants.ts

@@ -9,6 +9,7 @@ export enum Events {
     WindowCreated = "WindowCreated",
     SetMainViewScenePath = "SetMainViewScenePath",
     SetMainViewSceneIndex = "SetMainViewSceneIndex",
+    SetAppFocusIndex = "SetAppFocusIndex",
     SwitchViewsToFreedom = "SwitchViewsToFreedom",
     MoveCamera = "MoveCamera",
     MoveCameraToContain = "MoveCameraToContain",

package/src/index.ts

@@ -32,6 +32,7 @@ import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
 import {
     AppCreateError,
     AppManagerNotInitError,
+    BindContainerRoomPhaseInvalidError,
     InvalidScenePath,
     ParamsInvalidError,
 } from "./Utils/error";
@@ -319,6 +320,9 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     }
 
     public bindContainer(container: HTMLElement) {
+        if (this.room.phase !== RoomPhase.Connected) {
+            throw new BindContainerRoomPhaseInvalidError();
+        }
         if (WindowManager.isCreated && WindowManager.container) {
             if (WindowManager.container.firstChild) {
                 container.appendChild(WindowManager.container.firstChild);
@@ -533,6 +537,18 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
     }
 
+    public async removePage(index: number): Promise<boolean> {
+        if (this.appManager) {
+            if (index < 0 || index >= this.pageState.length) {
+                console.warn(`[WindowManager]: index ${index} out of range`);
+                return false;
+            }
+            return this.appManager.removeSceneByIndex(index);;
+        } else {
+            return false;
+        }
+    }
+
     /**
      * 返回 mainView 的 ScenePath
      */

package/src/typings.ts

@@ -80,3 +80,4 @@ export type { ReadonlyTeleBox, TeleBoxRect };
 export type { SceneState, SceneDefinition, View, AnimationMode, Displayer, Room, Player };
 export type { Storage, StorageStateChangedEvent, StorageStateChangedListener } from "./App/Storage";
 export * from "./Page";
+export * from "./Utils/error";