@netless/window-manager 0.4.18 → 0.4.21

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();
             });
         });
     };
@@ -358,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,
@@ -384,6 +425,7 @@ export class AppProxy {
             }
         }
         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/AppListener.ts

@@ -59,6 +59,10 @@ export class AppListeners {
                     this.rootDirRemovedHandler();
                     break;
                 }
+                case Events.Refresh: {
+                    this.refreshHandler();
+                    break;
+                }
                 default:
                     break;
             }
@@ -103,4 +107,8 @@ export class AppListeners {
         this.manager.mainViewProxy.rebind();
         emitter.emit("rootDirRemoved");
     }
+
+    private refreshHandler = () => {
+        this.manager.windowManger._refresh();
+    }
 }

package/src/AppManager.ts

@@ -1,13 +1,13 @@
 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";
 import { emitter } from "./InternalEmitter";
 import { Fields, store } from "./AttributesDelegate";
-import { get, isInteger, orderBy } from "lodash";
+import { debounce, get, isInteger, orderBy } from "lodash";
 import { log } from "./Utils/log";
 import { MainViewProxy } from "./View/MainView";
 import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
@@ -251,19 +251,9 @@ export class AppManager {
         await this.attributesUpdateCallback(this.attributes.apps);
         emitter.emit("updateManagerRect");
         emitter.onAny(this.boxEventListener);
-        this.refresher?.add("apps", () => {
-            return safeListenPropsUpdated(
-                () => this.attributes.apps,
-                () => {
-                    this.attributesUpdateCallback(this.attributes.apps);
-                }
-            );
-        });
-        this.refresher?.add("appsClose", () => {
-            return onObjectRemoved(this.attributes.apps, () => {
-                this.onAppDelete(this.attributes.apps);
-            });
-        });
+
+        this.addAppsChangeListener();
+        this.addAppCloseListener();
         this.refresher?.add("maximized", () => {
             return autorun(() => {
                 const maximized = this.attributes.maximized;
@@ -313,6 +303,25 @@ export class AppManager {
         });
     }
 
+    public addAppsChangeListener = () => {
+        this.refresher?.add("apps", () => {
+            return safeListenPropsUpdated(
+                () => this.attributes.apps,
+                () => {
+                    this.attributesUpdateCallback(this.attributes.apps);
+                }
+            );
+        });
+    }
+
+    public addAppCloseListener = () => {
+        this.refresher?.add("appsClose", () => {
+            return onObjectRemoved(this.attributes.apps, () => {
+                this.onAppDelete(this.attributes.apps);
+            });
+        });
+    }
+
     private onMainViewIndexChange = (index: number) => {
         if (index !== undefined && this._prevSceneIndex !== index) {
             callbacks.emit("mainViewSceneIndexChange", index);
@@ -342,13 +351,15 @@ export class AppManager {
         }
     }
 
+    public attributesUpdateCallback = debounce((apps: any) => this._attributesUpdateCallback(apps), 100);
+
     /**
      * 插件更新 attributes 时的回调
      *
      * @param {*} attributes
      * @memberof WindowManager
      */
-    public async attributesUpdateCallback(apps: any) {
+    public async _attributesUpdateCallback(apps: any) {
         if (apps && WindowManager.container) {
             const appIds = Object.keys(apps);
             if (appIds.length === 0) {

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/ReconnectRefresher.ts

@@ -36,6 +36,10 @@ export class ReconnectRefresher {
     };
 
     private onReconnected = debounce(() => {
+        this._onReconnected();
+    }, 3000);
+
+    private _onReconnected = () => {
         log("onReconnected refresh reactors");
         this.releaseDisposers();
         this.reactors.forEach((func, id) => {
@@ -44,7 +48,7 @@ export class ReconnectRefresher {
             }
         });
         this.ctx.emitter.emit("onReconnected", undefined);
-    }, 3000);
+    }
 
     private releaseDisposers() {
         this.disposers.forEach(disposer => {
@@ -55,7 +59,15 @@ export class ReconnectRefresher {
         this.disposers.clear();
     }
 
+    public refresh() {
+        this._onReconnected();
+    }
+
     public add(id: string, func: any) {
+        const disposer = this.disposers.get(id);
+        if (disposer && isFunction(disposer)) {
+            disposer();
+        }
         if (isFunction(func)) {
             this.reactors.set(id, func);
             this.disposers.set(id, func());

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/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/constants.ts

@@ -14,6 +14,7 @@ export enum Events {
     MoveCameraToContain = "MoveCameraToContain",
     CursorMove = "CursorMove",
     RootDirRemoved = "RootDirRemoved",
+    Refresh = "Refresh",
 }
 
 export const MagixEventName = "__WindowManger";

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;
@@ -337,6 +332,9 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
                     params.chessboard,
                     params.overwriteStyles
                 );
+                if (this.boxManager) {
+                    this.boxManager.destroy();
+                }
                 const boxManager = createBoxManager(this, callbacks, emitter, {
                     collectorContainer: params.collectorContainer,
                     collectorStyles: params.collectorStyles,
@@ -881,6 +879,20 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return this.focusedView?.lockImages(locked);
     }
 
+    public refresh() {
+       this._refresh();
+       this.appManager?.dispatchInternalEvent(Events.Refresh);
+    }
+    
+    /** @inner */
+    public _refresh() {
+        this.appManager?.mainViewProxy.rebind();
+        if (WindowManager.container) {
+            this.bindContainer(WindowManager.container);
+        }
+        this.appManager?.refresher?.refresh();
+    }
+
     private isDynamicPPT(scenes: SceneDefinition[]) {
         const sceneSrc = scenes[0]?.ppt?.src;
         return sceneSrc?.startsWith("pptx://");

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";