@netless/window-manager 0.4.10 → 0.4.11-canary.2

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/docs/develop-app.md

@@ -69,10 +69,14 @@ const Counter: NetlessApp<{ count: number }> = {
         decButton.addEventListener("click", decButtonOnClick);
         $content.appendChild(decButton);
 
-        const event1Disposer = context.addMagixEventListener(`${context.appId}_event1`, msg => {
+            // 监听事件
+        const event1Disposer = context.addMagixEventListener("event1", msg => {
             console.log("event1", msg);
         });
 
+        // 向打开 app 的其他人发送消息
+        context.dispatchMagixEvent("event1", { count: 10 });
+
         // 应用销毁时, 注意清理掉监听器
         context.emitter.on("destroy", () => {
             incButton.removeEventListener("click", incButtonOnClick);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.10",
+  "version": "0.4.11-canary.2",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -31,7 +31,7 @@
     "video.js": ">=7"
   },
   "devDependencies": {
-    "@netless/app-docs-viewer": "^0.2.6",
+    "@netless/app-docs-viewer": "^0.2.8",
     "@netless/app-media-player": "0.1.0-beta.5",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",

package/src/AppContext.ts

@@ -165,7 +165,8 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     /** Dispatch events to other clients (and self). */
     public dispatchMagixEvent: MagixEventDispatcher<TMagixEventPayloads> = (...args) => {
         // can't dispatch events on replay mode
-        return this.manager.room?.dispatchMagixEvent(...args);
+        const appScopeEvent = `${this.appId}:${args[0]}`;
+        return this.manager.room?.dispatchMagixEvent(appScopeEvent, args[1]);
     };
 
     /** Listen to events from others clients (and self messages). */
@@ -174,9 +175,17 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         handler,
         options
     ) => {
-        this.manager.displayer.addMagixEventListener(event, handler as WhiteEventListener, options);
+        const appScopeEvent = `${this.appId}:${event}`;
+        this.manager.displayer.addMagixEventListener(
+            appScopeEvent,
+            handler as WhiteEventListener,
+            options
+        );
         return () =>
-            this.manager.displayer.removeMagixEventListener(event, handler as WhiteEventListener);
+            this.manager.displayer.removeMagixEventListener(
+                appScopeEvent,
+                handler as WhiteEventListener
+            );
     };
 
     /** Remove a Magix event listener. */

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";
@@ -6,6 +6,7 @@ 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 { log } from "./Utils/log";
 import { MainViewProxy } from "./View/MainView";
@@ -13,8 +14,8 @@ import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
 import { reconnectRefresher, WindowManager } from "./index";
 import { RedoUndo } from "./RedoUndo";
 import { SideEffectManager } from "side-effect-manager";
-import { store } from "./AttributesDelegate";
 import { ViewManager } from "./View/ViewManager";
+import type { SyncRegisterAppPayload } from "./Register";
 import type { EmitterEvent } from "./InternalEmitter";
 import {
     entireScenes,
@@ -34,6 +35,7 @@ import type {
     SceneState,
 } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
+
 export class AppManager {
     public displayer: Displayer;
     public viewManager: ViewManager;
@@ -97,23 +99,30 @@ export class AppManager {
         emitter.on("setReadonly", this.onReadonlyChanged);
 
         this.createRootDirScenesCallback();
+
+        appRegister.setSyncRegisterApp(payload => {
+            this.safeUpdateAttributes([Fields.Registered, payload.kind], payload);
+        });
     }
 
     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);
             }
         }
-    }
+    };
 
     /**
      * 根目录被删除时所有的 scene 都会被删除.
@@ -133,7 +142,7 @@ export class AppManager {
         this.appProxies.forEach(appProxy => {
             appProxy.emitAppIsWritableChange();
         });
-    }
+    };
 
     private onPlayerSeek = (time: number) => {
         this.appProxies.forEach(appProxy => {
@@ -141,7 +150,7 @@ export class AppManager {
         });
         this.attributesUpdateCallback(this.attributes.apps);
         this.onAppDelete(this.attributes.apps);
-    }
+    };
 
     private createRootDirScenesCallback = () => {
         let isRecreate = false;
@@ -157,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);
             }
         }
     };
@@ -165,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) => {
@@ -250,14 +264,7 @@ export class AppManager {
         this.refresher?.add("minimized", () => {
             return autorun(() => {
                 const minimized = this.attributes.minimized;
-                if (this.boxManager?.minimized !== minimized) {
-                    if (minimized === true) {
-                        this.boxManager?.blurAllBox();
-                    }
-                    setTimeout(() => {
-                        this.boxManager?.setMinimized(Boolean(minimized));
-                    }, 0);
-                }
+                this.onMinimized(minimized);
             });
         });
         this.refresher?.add("mainViewIndex", () => {
@@ -265,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);
                     }
@@ -292,13 +300,16 @@ export class AppManager {
                 }
             });
         });
+        this.refresher?.add("registeredChange", () => {
+            return autorun(() => {
+                const registered = get(this.attributes, Fields.Registered);
+                this.onRegisteredChange(registered);
+            });
+        });
         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);
@@ -362,6 +373,30 @@ export class AppManager {
         }
     }
 
+    private onRegisteredChange = (registered: Record<string, SyncRegisterAppPayload>) => {
+        if (!registered) return;
+        Object.entries(registered).forEach(([kind, payload]) => {
+            if (!appRegister.appClasses.has(kind)) {
+                appRegister.register({
+                    kind,
+                    src: payload.src,
+                    name: payload.name,
+                });
+            }
+        });
+    };
+
+    private onMinimized = (minimized: boolean | undefined) => {
+        if (this.boxManager?.minimized !== minimized) {
+            if (minimized === true) {
+                this.boxManager?.blurAllBox();
+            }
+            setTimeout(() => {
+                this.boxManager?.setMinimized(Boolean(minimized));
+            }, 0);
+        }
+    };
+
     public refresh() {
         this.attributesUpdateCallback(this.attributes.apps);
     }
@@ -405,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/AttributesDelegate.ts

@@ -17,6 +17,7 @@ export enum Fields {
     Position = "position",
     CursorState = "cursorState",
     FullPath = "fullPath",
+    Registered = "registered",
 }
 
 export type Apps = {

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/Register/index.ts

@@ -8,12 +8,25 @@ export type LoadAppEvent = {
     reason?: string;
 };
 
+export type SyncRegisterAppPayload =  { kind: string, src: string, name: string | undefined };
+export type SyncRegisterApp = (payload: SyncRegisterAppPayload) => void;
+
 class AppRegister {
     public kindEmitters: Map<string, Emittery<RegisterEvents>> = new Map();
     public registered: Map<string, RegisterParams> = new Map();
     public appClassesCache: Map<string, Promise<NetlessApp>> = new Map();
     public appClasses: Map<string, () => Promise<NetlessApp>> = new Map();
 
+    private syncRegisterApp: SyncRegisterApp | null = null;
+
+    public setSyncRegisterApp(fn: SyncRegisterApp) {
+        this.syncRegisterApp = fn;
+    }
+
+    public onSyncRegisterAppChange = (payload: SyncRegisterAppPayload) => {
+        this.register({ kind: payload.kind, src: payload.src });
+    }
+
     public async register(params: RegisterParams): Promise<void> {
         this.appClassesCache.delete(params.kind);
         this.registered.set(params.kind, params);
@@ -23,7 +36,7 @@ class AppRegister {
 
         if (typeof srcOrAppOrFunction === "string") {
             downloadApp = async () => {
-                let appClass = (await loadApp(srcOrAppOrFunction, params.kind)) as any;
+                let appClass = (await loadApp(srcOrAppOrFunction, params.kind, params.name)) as any;
                 if (appClass) {
                     if (appClass.__esModule) {
                         appClass = appClass.default;
@@ -35,6 +48,9 @@ class AppRegister {
                     );
                 }
             };
+            if (this.syncRegisterApp) {
+                this.syncRegisterApp({ kind: params.kind, src: srcOrAppOrFunction, name: params.name });
+            }
         } else if (typeof srcOrAppOrFunction === "function") {
             downloadApp = srcOrAppOrFunction;
         } else {
@@ -58,6 +74,17 @@ class AppRegister {
         }
     }
 
+    public unregister(kind: string) {
+        this.appClasses.delete(kind);
+        this.appClassesCache.delete(kind);
+        this.registered.delete(kind);
+        const kindEmitter = this.kindEmitters.get(kind);
+        if (kindEmitter) {
+            kindEmitter.clearListeners();
+            this.kindEmitters.delete(kind);
+        }
+    }
+
     public async notifyApp<T extends keyof RegisterEvents>(
         kind: string,
         event: T,

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,6 +170,7 @@ 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;
@@ -235,6 +238,7 @@ 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 (params.container) {
@@ -368,6 +372,13 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return appRegister.register(params);
     }
 
+    /**
+     * 注销插件
+     */
+    public static unregister(kind: string) {
+        return appRegister.unregister(kind);
+    }
+
     /**
      * 创建一个 app 至白板
      */
@@ -671,6 +682,14 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         }
     }
 
+    public get pageState(): PageState {
+        if (this._pageState) {
+            return this._pageState.toObject();
+        } else {
+            throw new AppManagerNotInitError();
+        }
+    }
+
     /**
      * 查询所有的 App
      */
@@ -851,11 +870,14 @@ 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 });
             }
+            if (!this.attributes[Fields.Registered]) {
+                this.safeSetAttributes({ [Fields.Registered]: {} });
+            }
         }
     }
 }
@@ -865,4 +887,4 @@ setupBuiltin();
 export * from "./typings";
 
 export { BuiltinApps } from "./BuiltinApps";
-export type { PublicEvent } from "./callback";
+export type { PublicEvent } from "./callback";