@netless/window-manager 0.4.9 → 0.4.11-canary.1

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

@@ -11,28 +11,6 @@ const HelloWorld: NetlessApp = {
     kind: "HelloWorld",
     setup: (context: AppContext) => {
         context.mountView(context.getBox().$content); // 可选: 挂载 View 到 box 上
-
-        const storage = context.createStorage<{ a: number }>("HelloWorld", { a: 1 });
-        console.log(storage.state === { a: 1 });
-
-        storage.addStateChangedListener(diff => {
-            if (diff.a) {
-                console.log(diff.a.oldValue === 1);
-                console.log(diff.a.newValue === 2);
-            }
-        });
-
-        if (context.getIsWritable()) {
-            // 只有在可写状态才可以调用 setState
-            storage.setState({ a: 2 });
-        }
-
-        // magixEvent 事件是房间内范围的, 建议 app 内使用需要添加自己的 prefix
-        context.addMagixEventListener(`${context.appId}_event1`, message => {
-            console.log("MagixEvent", message);
-        });
-
-        context.dispatchMagixEvent(`${context.appId}_event1`, { count: 1 });
     },
 };
 
@@ -48,3 +26,63 @@ manager.addApp({
     },
 });
 ```
+
+## Counter
+
+```ts
+const Counter: NetlessApp<{ count: number }> = {
+    kind: "Counter",
+    setup: (context) => {
+        const storage = context.storage;
+        storage.ensureState({ count: 0 });
+
+        const box = context.getBox(); // box 为这个应用打开的窗口
+        const $content = box.$content // 获取窗口的 content
+
+        const countDom = document.createElement("div");
+        countDom.innerText = storage.state.count.toString();
+        $content.appendChild(countDom);
+
+        // state 变化回调
+        storage.addStateChangedListener(diff => {
+            if (diff.count) {
+                // diff 会给出 newValue 和 oldValue
+                console.log(diff.count.newValue);
+                console.log(diff.count.oldValue);
+                countDom.innerText = diff.count.newValue.toString();
+            }
+        });
+
+        const incButton = document.createElement("button");
+        incButton.innerText = "Inc";
+        const incButtonOnClick = () => {
+            storage.setState({ count: storage.state.count + 1 });
+        }
+        incButton.addEventListener("click", incButtonOnClick);
+        $content.appendChild(incButton);
+
+        const decButton = document.createElement("button");
+        decButton.innerText = "Dec";
+        const decButtonOnClick = () => {
+            storage.setState({ count: storage.state.count - 1 });
+        }
+        decButton.addEventListener("click", decButtonOnClick);
+        $content.appendChild(decButton);
+
+            // 监听事件
+        const event1Disposer = context.addMagixEventListener("event1", msg => {
+            console.log("event1", msg);
+        });
+
+        // 向打开 app 的其他人发送消息
+        context.dispatchMagixEvent("event1", { count: 10 });
+
+        // 应用销毁时, 注意清理掉监听器
+        context.emitter.on("destroy", () => {
+            incButton.removeEventListener("click", incButtonOnClick);
+            decButton.removeEventListener("click", decButtonOnClick);
+            event1Disposer();
+        });
+    }
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.9",
+  "version": "0.4.11-canary.1",
   "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

@@ -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;
@@ -88,33 +90,37 @@ export class AppManager {
 
         emitter.once("onCreated").then(() => this.onCreated());
         emitter.on("onReconnected", () => this.onReconnected());
+
         if (isPlayer(this.displayer)) {
-            emitter.on("seek", time => {
-                this.appProxies.forEach(appProxy => {
-                    appProxy.onSeek(time);
-                });
-                this.attributesUpdateCallback(this.attributes.apps);
-                this.onAppDelete(this.attributes.apps);
-            });
+            emitter.on("seek", this.onPlayerSeek);
         }
-        emitter.on("removeScenes", scenePath => {
-            if (scenePath === ROOT_DIR) {
-                this.setMainViewScenePath(ROOT_DIR);
-                this.createRootDirScenesCallback();
-                this.onRootDirRemoved();
-                emitter.emit("rootDirRemoved");
-                return;
-            }
-            const mainViewScenePath = this.store.getMainViewScenePath();
-            if (this.room && mainViewScenePath) {
-                if (mainViewScenePath === scenePath) {
-                    this.setMainViewScenePath(ROOT_DIR);
-                }
-            }
-        });
+
+        emitter.on("removeScenes", this.onRemoveScenes);
+        emitter.on("setReadonly", this.onReadonlyChanged);
+
         this.createRootDirScenesCallback();
+
+        appRegister.setSyncRegisterApp(payload => {
+            this.safeUpdateAttributes([Fields.Registered, payload.kind], payload);
+        });
     }
 
+    private onRemoveScenes = (scenePath: string) => {
+        if (scenePath === ROOT_DIR) {
+            this.setMainViewScenePath("");
+            this.createRootDirScenesCallback();
+            this.onRootDirRemoved();
+            emitter.emit("rootDirRemoved");
+            return;
+        }
+        const mainViewScenePath = this.store.getMainViewScenePath();
+        if (this.room && mainViewScenePath) {
+            if (mainViewScenePath === scenePath) {
+                this.setMainViewScenePath("");
+            }
+        }
+    };
+
     /**
      * 根目录被删除时所有的 scene 都会被删除.
      * 所以需要关掉所有开启了 view 的 app
@@ -129,6 +135,20 @@ export class AppManager {
         this.mainViewProxy.rebind();
     }
 
+    private onReadonlyChanged = () => {
+        this.appProxies.forEach(appProxy => {
+            appProxy.emitAppIsWritableChange();
+        });
+    };
+
+    private onPlayerSeek = (time: number) => {
+        this.appProxies.forEach(appProxy => {
+            appProxy.onSeek(time);
+        });
+        this.attributesUpdateCallback(this.attributes.apps);
+        this.onAppDelete(this.attributes.apps);
+    };
+
     private createRootDirScenesCallback = () => {
         let isRecreate = false;
         if (this.callbacksNode) {
@@ -143,7 +163,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);
             }
         }
     };
@@ -151,7 +171,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) => {
@@ -236,14 +261,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", () => {
@@ -251,6 +269,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);
                     }
@@ -278,13 +297,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);
@@ -348,6 +370,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);
     }
@@ -391,6 +437,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

@@ -21,6 +21,8 @@ export type EmitterEvent = {
     updateManagerRect: undefined;
     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/index.ts

@@ -13,6 +13,7 @@ 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 至白板
      */
@@ -517,6 +528,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public setReadonly(readonly: boolean): void {
         this.readonly = readonly;
         this.boxManager?.setReadonly(readonly);
+        emitter.emit("setReadonly", readonly);
     }
 
     /**
@@ -670,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
      */
@@ -855,6 +875,9 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             if (!this.attributes["_mainSceneIndex"]) {
                 this.safeSetAttributes({ _mainSceneIndex: 0 });
             }
+            if (!this.attributes[Fields.Registered]) {
+                this.safeSetAttributes({ [Fields.Registered]: {} });
+            }
         }
     }
 }
@@ -864,3 +887,4 @@ setupBuiltin();
 export * from "./typings";
 
 export { BuiltinApps } from "./BuiltinApps";
+export type { PublicEvent } from "./callback";