@netless/window-manager 0.4.11-canary.0 → 0.4.11

package/docs/advanced.md

@@ -4,6 +4,7 @@
   - [撤销重做](#redo-undo)
   - [清屏](#clean-current-scene)
   - [判断是否打开某种 APP](#has-kind)
+  - [页面控制器](#page-control)
 
 
 <h3 id="redo-undo">撤销重做</h3>
@@ -64,3 +65,26 @@ manager.emitter.on("ready", () => { // ready 事件在所有 app 创建完成后
     const hasSlide = apps.some(app => app.kind === "Slide"); // 判断已经打开的 APP 中是否有 Slide
 });
 ```
+
+<br>
+
+<h3 id="page-control">页面控制器</h3>
+
+`manager` 提供了一个 `pageState` 来获取当前的 index 和总页数
+
+```ts
+manager.pageState.index // 当前的 index
+manager.pageState.length // 总页数
+
+manager.emitter.on("pageStateChange", state => {
+    // 当前 index 变化和总页数变化会触发此事件
+});
+```
+
+上一页/下一页/添加一页
+
+```ts
+manager.nextPage()
+manager.prevPage()
+manager.addPage()
+```

package/docs/api.md

@@ -229,6 +229,7 @@ manager.addPage({ scene: { name: "page2" } }) // 传入 page 信息
 | canRedoSteps       | number  |         | 当前 focus 的 view 可以重做的步数 |
 | canRedoSteps       | number  |         | 当前 focus 的 view 可以撤销的步数 |
 | sceneState         | SceneState |      | 兼容原本 SDK 的 sceneState 属性, 只对 mainView 生效 |
+| pageState          | PageState |       | 组合 mainView 的 index 和 scenes 的修改 |
 
 <br>
 
@@ -253,6 +254,7 @@ manager.callbacks.on(events, listener)
 | loadApp                  | LoadAppEvent   |         | 加载远程APP 事件                |
 | ready                    | undefined      |         | 当所有 APP 创建完毕时触发      ｜
 | sceneStateChange         | SceneState     |         | 当 sceneState 修改时触发     |
+| pageStateChange          | PageState      |         |                            ｜
 
 ```ts
 type LoadAppEvent = {
@@ -260,4 +262,11 @@ type LoadAppEvent = {
     status: "start" | "success" | "failed";
     reason?: string;
 }
+```
+
+```ts
+type PageState = {
+    index: number;
+    length: number;
+}
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.11-canary.0",
+  "version": "0.4.11",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",

package/src/AppManager.ts

@@ -1,4 +1,4 @@
-import { AppAttributes, AppStatus, Events, MagixEventName, ROOT_DIR } from "./constants";
+import { AppAttributes, AppStatus, Events, INIT_DIR, MagixEventName, ROOT_DIR } from "./constants";
 import { AppCreateQueue } from "./Utils/AppCreateQueue";
 import { AppListeners } from "./AppListener";
 import { AppProxy } from "./AppProxy";
@@ -106,17 +106,20 @@ export class AppManager {
     }
 
     private onRemoveScenes = (scenePath: string) => {
+        // 如果移除根目录就把 scenePath 设置为初始值
         if (scenePath === ROOT_DIR) {
-            this.setMainViewScenePath(ROOT_DIR);
+            this.setMainViewScenePath(INIT_DIR);
             this.createRootDirScenesCallback();
             this.onRootDirRemoved();
             emitter.emit("rootDirRemoved");
             return;
         }
+        // 如果移除的 path 跟 MainViewScenePath 相同就取当前目录的当前 index
         const mainViewScenePath = this.store.getMainViewScenePath();
         if (this.room && mainViewScenePath) {
             if (mainViewScenePath === scenePath) {
-                this.setMainViewScenePath(ROOT_DIR);
+                const nextPath = this.callbacksNode?.scenes[this.store.getMainViewSceneIndex()];
+                this.setMainViewScenePath(`/${nextPath}` || INIT_DIR);
             }
         }
     };
@@ -163,7 +166,7 @@ export class AppManager {
             this.updateSceneState(this.callbacksNode);
             this.mainViewScenesLength = this.callbacksNode.scenes.length;
             if (isRecreate) {
-                callbacks.emit("mainViewScenesLengthChange", this.callbacksNode.scenes.length);
+                this.emitMainViewScenesChange(this.callbacksNode.scenes.length);
             }
         }
     };
@@ -171,7 +174,12 @@ export class AppManager {
     private onSceneChange = (node: ScenesCallbacksNode) => {
         this.mainViewScenesLength = node.scenes.length;
         this.updateSceneState(node);
-        callbacks.emit("mainViewScenesLengthChange", this.mainViewScenesLength);
+        this.emitMainViewScenesChange(this.mainViewScenesLength);
+    };
+
+    private emitMainViewScenesChange = (length: number) => {
+        callbacks.emit("mainViewScenesLengthChange", length);
+        emitter.emit("changePageState");
     };
 
     private updateSceneState = (node: ScenesCallbacksNode) => {
@@ -264,6 +272,7 @@ export class AppManager {
                 const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
                 if (mainSceneIndex !== undefined && this._prevSceneIndex !== mainSceneIndex) {
                     callbacks.emit("mainViewSceneIndexChange", mainSceneIndex);
+                    emitter.emit("changePageState");
                     if (this.callbacksNode) {
                         this.updateSceneState(this.callbacksNode);
                     }
@@ -300,10 +309,7 @@ export class AppManager {
         if (!this.attributes.apps || Object.keys(this.attributes.apps).length === 0) {
             const mainScenePath = this.store.getMainViewScenePath();
             if (!mainScenePath) return;
-            const sceneState = this.displayer.state.sceneState;
-            if (sceneState.scenePath !== mainScenePath) {
-                setScenePath(this.room, mainScenePath);
-            }
+            this.resetScenePath(mainScenePath);
         }
         this.displayerWritableListener(!this.room?.isWritable);
         this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
@@ -389,7 +395,7 @@ export class AppManager {
                 this.boxManager?.setMinimized(Boolean(minimized));
             }, 0);
         }
-    }
+    };
 
     public refresh() {
         this.attributesUpdateCallback(this.attributes.apps);
@@ -434,6 +440,13 @@ export class AppManager {
         }
     }
 
+    private resetScenePath(scenePath: string) {
+        const sceneState = this.displayer.state.sceneState;
+        if (sceneState.scenePath !== scenePath) {
+            setScenePath(this.room, scenePath);
+        }
+    }
+
     public async addApp(params: AddAppParams, isDynamicPPT: boolean): Promise<string | undefined> {
         log("addApp", params);
         const { appId, needFocus } = await this.beforeAddApp(params, isDynamicPPT);

package/src/InternalEmitter.ts

@@ -22,6 +22,7 @@ export type EmitterEvent = {
     focusedChange: { focused: string | undefined; prev: string | undefined };
     rootDirRemoved: undefined;
     setReadonly: boolean;
+    changePageState: undefined;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;

package/src/PageState.ts

@@ -0,0 +1,31 @@
+import type { AppManager } from "./AppManager";
+import { callbacks } from "./callback";
+import { emitter } from "./InternalEmitter";
+
+export type PageState = {
+    index: number;
+    length: number;
+};
+
+export class PageStateImpl {
+    constructor(private manager: AppManager) {
+        emitter.on("changePageState", () => {
+            callbacks.emit("pageStateChange", this.toObject());
+        });
+    }
+
+    public get index(): number {
+        return this.manager?.store.getMainViewSceneIndex() || 0;
+    }
+
+    public get length(): number {
+        return this.manager?.mainViewScenesLength || 0;
+    }
+
+    public toObject(): PageState {
+        return {
+            index: this.index,
+            length: this.length,
+        };
+    }
+}

package/src/Utils/Common.ts

@@ -33,7 +33,8 @@ export const setViewSceneIndex = (view: View, index: number) => {
 export const setScenePath = (room: Room | undefined, scenePath: string) => {
     if (room && room.isWritable) {
         if (room.state.sceneState.scenePath !== scenePath) {
-            room.setScenePath(scenePath);
+            const nextScenePath = scenePath === "/" ? "" : scenePath;
+            room.setScenePath(nextScenePath);
         }
     }
 };

package/src/callback.ts

@@ -2,6 +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";
 
 export type PublicEvent = {
     mainViewModeChange: ViewVisionMode;
@@ -18,6 +19,7 @@ export type PublicEvent = {
     loadApp: LoadAppEvent;
     ready: undefined; // 所有 APP 创建完毕时触发
     sceneStateChange: SceneState;
+    pageStateChange: PageState;
 };
 
 export type CallbacksType = Emittery<PublicEvent>;

package/src/constants.ts

@@ -49,3 +49,4 @@ export const SET_SCENEPATH_DELAY = 100; // 设置 scenePath 的延迟事件
 export const DEFAULT_CONTAINER_RATIO = 9 / 16;
 
 export const ROOT_DIR = "/";
+export const INIT_DIR = "/init";

package/src/index.ts

@@ -6,13 +6,14 @@ import { checkVersion, setupWrapper } from "./Helper";
 import { ContainerResizeObserver } from "./ContainerResizeObserver";
 import { createBoxManager } from "./BoxManager";
 import { CursorManager } from "./Cursor";
-import { DEFAULT_CONTAINER_RATIO, Events, ROOT_DIR } from "./constants";
+import { DEFAULT_CONTAINER_RATIO, Events, INIT_DIR, ROOT_DIR } from "./constants";
 import { emitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
 import { isEqual, isNull, isObject, omit } from "lodash";
 import { log } from "./Utils/log";
+import { PageStateImpl } from "./PageState";
 import { ReconnectRefresher } from "./ReconnectRefresher";
 import { replaceRoomFunction } from "./Utils/RoomHacker";
 import { setupBuiltin } from "./BuiltinApps";
@@ -56,6 +57,7 @@ import type { TeleBoxColorScheme, TeleBoxState } from "@netless/telebox-insider"
 import type { AppProxy } from "./AppProxy";
 import type { PublicEvent } from "./Callback";
 import type Emittery from "emittery";
+import type { PageState } from "./PageState";
 
 export type WindowMangerAttributes = {
     modelValue?: string;
@@ -168,11 +170,13 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public cursorManager?: CursorManager;
     public viewMode = ViewMode.Broadcaster;
     public isReplay = isPlayer(this.displayer);
+    private _pageState?: PageStateImpl;
 
     private boxManager?: BoxManager;
     private static params?: MountParams;
 
     private containerResizeObserver?: ContainerResizeObserver;
+    public containerSizeRatio = WindowManager.containerSizeRatio;
 
     constructor(context: InvisiblePluginContext) {
         super(context);
@@ -235,7 +239,11 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         await manager.ensureAttributes();
 
         manager.appManager = new AppManager(manager);
+        manager._pageState = new PageStateImpl(manager.appManager);
         manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor));
+        if (containerSizeRatio) {
+            manager.containerSizeRatio = containerSizeRatio;
+        }
 
         if (params.container) {
             manager.bindContainer(params.container);
@@ -642,7 +650,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     }
 
     public get mainViewSceneIndex(): number {
-        return this.appManager?.store.getMainViewSceneIndex();
+        return this._pageState?.index || 0;
     }
 
     public get mainViewSceneDir(): string {
@@ -658,7 +666,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     }
 
     public get mainViewScenesLength(): number {
-        return this.appManager?.mainViewScenesLength || 0;
+        return this._pageState?.length || 0;
     }
 
     public get canRedoSteps(): number {
@@ -678,6 +686,14 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         }
     }
 
+    public get pageState(): PageState {
+        if (this._pageState) {
+            return this._pageState.toObject();
+        } else {
+            throw new AppManagerNotInitError();
+        }
+    }
+
     /**
      * 查询所有的 App
      */
@@ -858,7 +874,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
                 this.safeSetAttributes({ [Fields.Cursors]: {} });
             }
             if (!this.attributes["_mainScenePath"]) {
-                this.safeSetAttributes({ _mainScenePath: ROOT_DIR });
+                this.safeSetAttributes({ _mainScenePath: INIT_DIR });
             }
             if (!this.attributes["_mainSceneIndex"]) {
                 this.safeSetAttributes({ _mainSceneIndex: 0 });
@@ -875,4 +891,4 @@ setupBuiltin();
 export * from "./typings";
 
 export { BuiltinApps } from "./BuiltinApps";
-export type { PublicEvent } from "./callback";
+export type { PublicEvent } from "./callback";