@netless/window-manager 0.4.17 → 0.4.20

package/src/{AppContext.ts → App/AppContext.ts}

@@ -1,5 +1,6 @@
-import { BoxNotCreatedError } from "./Utils/error";
-import { Storage } from "./App/Storage";
+import { BoxNotCreatedError } from "../Utils/error";
+import { putScenes } from "../Utils/Common";
+import { Storage } from "./Storage";
 import {
     autorun,
     listenDisposed,
@@ -17,17 +18,20 @@ import type {
 } from "white-web-sdk";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import type Emittery from "emittery";
-import type { BoxManager } from "./BoxManager";
-import type { AppEmitterEvent } from "./index";
-import type { AppManager } from "./AppManager";
+import type { BoxManager } from "../BoxManager";
+import type { AppEmitterEvent } from "../index";
+import type { AppManager } from "../AppManager";
 import type { AppProxy } from "./AppProxy";
 import type {
     MagixEventAddListener,
     MagixEventDispatcher,
     MagixEventRemoveListener,
-} from "./App/MagixEvent";
+} from "./MagixEvent";
+import type { AddPageParams, PageController, PageState } from "../Page";
 
-export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOptions = any> {
+export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOptions = any>
+    implements PageController
+{
     public readonly emitter: Emittery<AppEmitterEvent<TAttributes>>;
     public readonly mobxUtils = {
         autorun,
@@ -192,4 +196,42 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     public removeMagixEventListener = this.manager.displayer.removeMagixEventListener.bind(
         this.manager.displayer
     ) as MagixEventRemoveListener<TMagixEventPayloads>;
+
+    /** PageController  */
+    public nextPage = async (): Promise<boolean> => {
+        const nextIndex = this.pageState.index + 1;
+        if (nextIndex > this.pageState.length - 1) {
+            console.warn("[WindowManager] nextPage: index out of range");
+            return false;
+        }
+        this.appProxy.setSceneIndex(nextIndex);
+        return true;
+    };
+
+    public prevPage = async (): Promise<boolean> => {
+        const nextIndex = this.pageState.index - 1;
+        if (nextIndex < 0) {
+            console.warn("[WindowManager] prevPage: index out of range");
+            return false;
+        }
+        this.appProxy.setSceneIndex(nextIndex);
+        return true;
+    };
+
+    public addPage = async (params?: AddPageParams) => {
+        const after = params?.after;
+        const scene = params?.scene;
+        const scenePath = this.appProxy.scenePath;
+        if (!scenePath) return;
+        if (after) {
+            const nextIndex = this.pageState.index + 1;
+            putScenes(this.manager.room, scenePath, [scene || {}], nextIndex);
+        } else {
+            putScenes(this.manager.room, scenePath, [scene || {}]);
+        }
+    };
+
+    public get pageState(): PageState {
+        return this.appProxy.pageState;
+    }
 }

package/src/App/AppPageStateImpl.ts

@@ -0,0 +1,49 @@
+import type { Displayer, ScenesCallbacksNode, View } from "white-web-sdk";
+import type { PageState } from "../Page";
+
+export type AppPageStateParams = {
+    displayer: Displayer;
+    scenePath: string | undefined;
+    view: View | undefined;
+    notifyPageStateChange: () => void;
+};
+
+export class AppPageStateImpl {
+    private sceneNode: ScenesCallbacksNode | null = null;
+
+    constructor(private params: AppPageStateParams) {
+        const { displayer, scenePath } = this.params;
+        if (scenePath) {
+            this.sceneNode = displayer.createScenesCallback(scenePath, {
+                onAddScene: this.onSceneChange,
+                onRemoveScene: this.onSceneChange,
+            });
+        }
+    }
+
+    private onSceneChange = (node: ScenesCallbacksNode) => {
+        this.sceneNode = node;
+        this.params.notifyPageStateChange();
+    };
+
+    public getFullPath(index: number) {
+        const scenes = this.sceneNode?.scenes;
+        if (this.params.scenePath && scenes) {
+            const name = scenes[index];
+            if (name) {
+                return `${this.params.scenePath}/${name}`;
+            }
+        }
+    }
+
+    public toObject(): PageState {
+        return {
+            index: this.params.view?.focusSceneIndex || 0,
+            length: this.sceneNode?.scenes.length || 0,
+        };
+    }
+
+    public destroy() {
+        this.sceneNode?.dispose();
+    }
+}

package/src/{AppProxy.ts → App/AppProxy.ts}

@@ -1,31 +1,41 @@
 import Emittery from "emittery";
-import { AppAttributes, AppEvents, Events, SETUP_APP_DELAY } from "./constants";
+import { AppAttributes, AppEvents, Events, SETUP_APP_DELAY } from "../constants";
 import { AppContext } from "./AppContext";
-import { appRegister } from "./Register";
+import { AppPageStateImpl } from "./AppPageStateImpl";
+import { appRegister } from "../Register";
 import { autorun } from "white-web-sdk";
-import { BoxManagerNotFoundError } from "./Utils/error";
+import { BoxManagerNotFoundError } from "../Utils/error";
 import { debounce, get } from "lodash";
-import { emitter } from "./InternalEmitter";
-import { Fields } from "./AttributesDelegate";
-import { entireScenes, getScenePath, removeScenes, setScenePath, setViewFocusScenePath } from "./Utils/Common";
-import { log } from "./Utils/log";
+import { emitter } from "../InternalEmitter";
+import { Fields } from "../AttributesDelegate";
+import { log } from "../Utils/log";
+import {
+    entireScenes,
+    getScenePath,
+    removeScenes,
+    setScenePath,
+    setViewFocusScenePath,
+} from "../Utils/Common";
 import type {
     AppEmitterEvent,
     AppInitState,
     BaseInsertParams,
     setAppOptions,
     AppListenerKeys,
-} from "./index";
+} from "../index";
 import type { SceneState, View, SceneDefinition } from "white-web-sdk";
-import type { AppManager } from "./AppManager";
-import type { NetlessApp } from "./typings";
+import type { AppManager } from "../AppManager";
+import type { NetlessApp } from "../typings";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
+import type { PageState } from "../Page";
+
+export type AppEmitter = Emittery<AppEmitterEvent>;
 
 export class AppProxy {
     public kind: string;
     public id: string;
     public scenePath?: string;
-    public appEmitter: Emittery<AppEmitterEvent>;
+    public appEmitter: AppEmitter;
     public scenes?: SceneDefinition[];
 
     private appListener: any;
@@ -37,8 +47,10 @@ export class AppProxy {
     public isAddApp: boolean;
     private status: "normal" | "destroyed" = "normal";
     private stateKey: string;
-    private appResult?: NetlessApp<any>;
-    private appContext?: AppContext<any, any>;
+    private _pageState: AppPageStateImpl;
+
+    public appResult?: NetlessApp<any>;
+    public appContext?: AppContext<any, any>;
 
     constructor(
         private params: BaseInsertParams,
@@ -60,6 +72,12 @@ export class AppProxy {
             // 只有传入了 scenePath 的 App 才会创建 View
             this.createView();
         }
+        this._pageState = new AppPageStateImpl({
+            displayer: this.manager.displayer,
+            scenePath: this.scenePath,
+            view: this.view,
+            notifyPageStateChange: this.notifyPageStateChange,
+        });
     }
 
     private initScenes() {
@@ -78,6 +96,10 @@ export class AppProxy {
         return this.manager.viewManager.getView(this.id);
     }
 
+    public get viewIndex(): number | undefined {
+        return this.view?.focusSceneIndex;
+    }
+
     public get isWritable(): boolean {
         return this.manager.canOperate && !this.box?.readonly;
     }
@@ -127,7 +149,7 @@ export class AppProxy {
         } else {
             throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
         }
-        emitter.emit("updateManagerRect")
+        emitter.emit("updateManagerRect");
         return {
             appId: this.id,
             app: appImpl,
@@ -210,7 +232,7 @@ export class AppProxy {
 
     public async onSeek(time: number) {
         this.appEmitter.emit("seek", time).catch(err => {
-            console.log(`[WindowManager]: emit seek error: ${err.message}`)
+            console.log(`[WindowManager]: emit seek error: ${err.message}`);
         });
         const boxInitState = this.getAppInitState(this.id);
         this.boxManager?.updateBoxState(boxInitState);
@@ -326,6 +348,7 @@ export class AppProxy {
             return autorun(() => {
                 const fullPath = this.appAttributes?.fullPath;
                 this.setFocusScenePathHandler(fullPath);
+                this.notifyPageStateChange();
             });
         });
     };
@@ -346,7 +369,6 @@ export class AppProxy {
 
     public setViewFocusScenePath() {
         const fullPath = this.getFullScenePath();
-        console.log("setViewFocusScenePath", this.kind, this.id, fullPath)
         if (fullPath && this.view) {
             setViewFocusScenePath(this.view, fullPath);
         }
@@ -359,6 +381,24 @@ export class AppProxy {
         return view;
     }
 
+    public notifyPageStateChange = () => {
+        this.appEmitter.emit("pageStateChange", this.pageState);
+    };
+
+    public get pageState(): PageState {
+        return this._pageState.toObject();
+    }
+
+    public setSceneIndex(index: number) {
+        if (this.view) {
+            this.view.focusSceneIndex = index;
+            const fullPath = this._pageState.getFullPath(index);
+            if (fullPath) {
+                this.setFullPath(fullPath);
+            }
+        }
+    }
+
     public async destroy(
         needCloseBox: boolean,
         cleanAttrs: boolean,
@@ -381,11 +421,11 @@ export class AppProxy {
         if (cleanAttrs) {
             this.store.cleanAppAttributes(this.id);
             if (this.scenePath) {
-                console.log("put closeApp", this.scenePath);
                 removeScenes(this.manager.room, this.scenePath);
             }
         }
         this.appProxies.delete(this.id);
+        this._pageState.destroy();
 
         this.viewManager.destroyView(this.id);
         this.manager.appStatus.delete(this.id);

package/src/App/Storage/index.ts

@@ -1,7 +1,7 @@
 import type { AkkoObjectUpdatedProperty } from "white-web-sdk";
 import { get, has, mapValues, isObject, size, noop } from "lodash";
 import { SideEffectManager } from "side-effect-manager";
-import type { AppContext } from "../../AppContext";
+import type { AppContext } from "../AppContext";
 import { safeListenPropsUpdated } from "../../Utils/Reactive";
 import { isRef, makeRef, plainObjectKeys } from "./utils";
 import type { Diff, MaybeRefValue, RefValue, StorageStateChangedEvent, StorageStateChangedListener, StorageStateChangedListenerDisposer } from "./typings";

package/src/App/index.ts

@@ -0,0 +1,2 @@
+export * from "./AppProxy";
+export * from "./AppContext";

package/src/AppManager.ts

@@ -1,7 +1,7 @@
 import { AppAttributes, AppStatus, Events, INIT_DIR, MagixEventName, ROOT_DIR } from "./constants";
 import { AppCreateQueue } from "./Utils/AppCreateQueue";
 import { AppListeners } from "./AppListener";
-import { AppProxy } from "./AppProxy";
+import { AppProxy } from "./App";
 import { appRegister } from "./Register";
 import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
 import { callbacks } from "./callback";

package/src/Page/PageController.ts

@@ -0,0 +1,18 @@
+import type { SceneDefinition } from "white-web-sdk";
+
+export type AddPageParams = {
+    after?: boolean;
+    scene?: SceneDefinition;
+};
+
+export type PageState = {
+    index: number;
+    length: number;
+};
+
+export interface PageController {
+    nextPage: () => Promise<boolean>;
+    prevPage: () => Promise<boolean>;
+    addPage: (params?: AddPageParams) => Promise<void>;
+    pageState: PageState;
+}

package/src/Page/index.ts

@@ -0,0 +1 @@
+export * from "./PageController";

package/src/PageState.ts

@@ -1,11 +1,7 @@
-import type { AppManager } from "./AppManager";
 import { callbacks } from "./callback";
 import { emitter } from "./InternalEmitter";
-
-export type PageState = {
-    index: number;
-    length: number;
-};
+import type { AppManager } from "./AppManager";
+import type { PageState } from "./Page";
 
 export class PageStateImpl {
     constructor(private manager: AppManager) {

package/src/RedoUndo.ts

@@ -1,7 +1,7 @@
 import { callbacks } from "./callback";
 import { emitter } from "./InternalEmitter";
 import type { View } from "white-web-sdk";
-import type { AppProxy } from "./AppProxy";
+import type { AppProxy } from "./App";
 
 export type RedoUndoContext = {
     mainView: () => View;

package/src/Utils/AppCreateQueue.ts

@@ -1,6 +1,6 @@
 import { callbacks } from "../callback";
-import type { AppProxy } from "../AppProxy";
 import { SETUP_APP_DELAY } from "../constants";
+import type { AppProxy } from "../App";
 
 export type Invoker = () => Promise<AppProxy | undefined>;
 
@@ -52,12 +52,12 @@ export class AppCreateQueue {
             this.clear();
             this.emitReady();
         }
-    }
+    };
 
     private clear = () => {
         clearInterval(this.timer);
         this.timer = undefined;
-    }
+    };
 
     public emitReady() {
         if (!this.isEmit) {

package/src/Utils/Common.ts

@@ -104,8 +104,8 @@ export const entireScenes = (displayer: Displayer) => {
     return displayer.entireScenes();
 };
 
-export const putScenes = (room: Room | undefined, path: string, scenes: SceneDefinition[]) => {
-    return room?.putScenes(path, scenes);
+export const putScenes = (room: Room | undefined, path: string, scenes: SceneDefinition[], index?: number) => {
+    return room?.putScenes(path, scenes, index);
 }
 
 export const isValidScenePath = (scenePath: string) => {

package/src/View/MainView.ts

@@ -23,6 +23,7 @@ export class MainViewProxy {
         this.moveCameraSizeByAttributes();
         emitter.once("mainViewMounted").then(() => {
             setTimeout(() => {
+                this.addMainViewListener();
                 this.start();
                 if (!this.mainViewCamera || !this.mainViewSize) {
                     this.setCameraAndSize();
@@ -54,7 +55,6 @@ export class MainViewProxy {
     public start() {
         if (this.started) return;
         this.sizeChangeHandler(this.mainViewSize);
-        this.addMainViewListener();
         this.addCameraListener();
         this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
         this.started = true;
@@ -116,9 +116,11 @@ export class MainViewProxy {
         const disableCameraTransform = this.mainView.disableCameraTransform;
         this.stop();
         this.mainView.release();
+        this.removeMainViewListener();
         this.mainView = this.createMainView();
         this.mainView.disableCameraTransform = disableCameraTransform;
         this.mainView.divElement = divElement;
+        this.addMainViewListener();
         this.start();
     }
 
@@ -204,7 +206,6 @@ export class MainViewProxy {
     }
 
     public stop() {
-        this.removeMainViewListener();
         this.removeCameraListener();
         this.manager.refresher?.remove(Fields.MainViewCamera);
         this.manager.refresher?.remove(Fields.MainViewSize);
@@ -212,6 +213,7 @@ export class MainViewProxy {
     }
 
     public destroy() {
+        this.removeMainViewListener();
         this.stop();
         this.sideEffectManager.flushAll();
     }

package/src/callback.ts

@@ -2,7 +2,7 @@ import Emittery from "emittery";
 import type { TeleBoxColorScheme, TELE_BOX_STATE } from "@netless/telebox-insider";
 import type { CameraState, SceneState, ViewVisionMode } from "white-web-sdk";
 import type { LoadAppEvent } from "./Register";
-import type { PageState } from "./PageState";
+import type { PageState } from "./Page";
 
 export type PublicEvent = {
     mainViewModeChange: ViewVisionMode;

package/src/index.ts

@@ -55,10 +55,10 @@ import type {
 import type { AppListeners } from "./AppListener";
 import type { NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxColorScheme, TeleBoxState } from "@netless/telebox-insider";
-import type { AppProxy } from "./AppProxy";
-import type { PublicEvent } from "./Callback";
+import type { AppProxy } from "./App";
+import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
-import type { PageState } from "./PageState";
+import type { PageController, AddPageParams, PageState } from "./Page";
 
 export type WindowMangerAttributes = {
     modelValue?: string;
@@ -145,12 +145,7 @@ export type MountParams = {
 
 export const reconnectRefresher = new ReconnectRefresher({ emitter });
 
-export type AddPageParams = {
-    after?: boolean;
-    scene?: SceneDefinition;
-};
-
-export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
+export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> implements PageController {
     public static kind = "WindowManager";
     public static displayer: Displayer;
     public static wrapper?: HTMLElement;

package/src/typings.ts

@@ -9,8 +9,9 @@ import type {
     SceneState,
     View,
 } from "white-web-sdk";
-import type { AppContext } from "./AppContext";
+import type { AppContext } from "./App";
 import type { ReadonlyTeleBox, TeleBoxRect } from "@netless/telebox-insider";
+import type { PageState } from "./Page";
 
 export interface NetlessApp<Attributes = any, MagixEventPayloads = any, AppOptions = any, SetupResult = any> {
     kind: string;
@@ -50,6 +51,7 @@ export type AppEmitterEvent<T = any> = {
     focus: boolean;
     reconnected: void;
     seek: number;
+    pageStateChange: PageState,
 };
 
 export type RegisterEventData = {
@@ -73,7 +75,8 @@ export type RegisterParams<AppOptions = any, SetupResult = any, Attributes = any
 
 export type AppListenerKeys = keyof AppEmitterEvent;
 
-export type { AppContext } from "./AppContext";
+export type { AppContext } from "./App/AppContext";
 export type { ReadonlyTeleBox, TeleBoxRect };
 export type { SceneState, SceneDefinition, View, AnimationMode, Displayer, Room, Player };
 export type { Storage, StorageStateChangedEvent, StorageStateChangedListener } from "./App/Storage";
+export * from "./Page";