@netless/window-manager 1.0.0-canary.0 → 1.0.0-canary.3

package/src/App/AppContext.ts

@@ -1,5 +1,4 @@
 import { BoxNotCreatedError } from "../Utils/error";
-import { putScenes } from "../Utils/Common";
 import { Storage } from "./Storage";
 import {
     autorun,
@@ -19,7 +18,7 @@ import type {
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import type Emittery from "emittery";
 import type { BoxManager } from "../BoxManager";
-import type { AppEmitterEvent } from "../index";
+import type { AppEmitterEvent, Member } from "../index";
 import type { AppManager } from "../AppManager";
 import type { AppProxy } from "./AppProxy";
 import type {
@@ -27,11 +26,13 @@ import type {
     MagixEventDispatcher,
     MagixEventRemoveListener,
 } from "./MagixEvent";
-import type { AddPageParams, PageController, PageState } from "../Page";
+import { WhiteBoardView } from "./WhiteBoardView";
+import { findMemberByUid } from "../Helper";
+import { MAX_PAGE_SIZE } from "../constants";
+import { putScenes } from "../Utils/Common";
+import { isNumber } from "lodash";
 
-export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOptions = any>
-    implements PageController
-{
+export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOptions = any> {
     public readonly emitter: Emittery<AppEmitterEvent<TAttributes>>;
     public readonly mobxUtils = {
         autorun,
@@ -48,6 +49,7 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     private store = this.manager.store;
     public readonly isAddApp: boolean;
     public readonly isReplay = this.manager.isReplay;
+    private whiteBoardView?: WhiteBoardView;
 
     constructor(
         private manager: AppManager,
@@ -60,7 +62,7 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         this.isAddApp = appProxy.isAddApp;
     }
 
-    public getDisplayer = () => {
+    public get displayer(){
         return this.manager.displayer;
     };
 
@@ -78,32 +80,58 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         }
     };
 
-    public getView = (): View | undefined => {
+    public get view(): View | undefined {
         return this.appProxy.view;
     };
 
-    public mountView = (dom: HTMLElement): void => {
-        const view = this.getView();
-        if (view) {
-            view.divElement = dom as HTMLDivElement;
-            setTimeout(() => {
-                // 渲染需要时间，延迟 refresh
-                this.getRoom()?.refreshViewSize();
-            }, 1000);
+    public createWhiteBoardView = (size?: number): WhiteBoardView => {
+        if (this.whiteBoardView) {
+            return this.whiteBoardView;
         }
-    };
+        let view = this.view;
+        if (!view) {
+            view = this.appProxy.createAppDir();
+        }
+        const viewWrapper = document.createElement("div");
+        viewWrapper.className = "window-manager-view-wrapper";
+        this.box.$content.parentElement?.appendChild(viewWrapper);
+        const removeViewWrapper = () => {
+            this.box.$content.parentElement?.removeChild(viewWrapper);
+        }
+        view.divElement = viewWrapper
+        if (this.isAddApp) {
+            this.initPageSize(size);
+        }
+        this.whiteBoardView = new WhiteBoardView(this, this.appProxy, removeViewWrapper);
+        return this.whiteBoardView;
+    }
+
+    private initPageSize = (size?: number) => {
+        if (!isNumber(size)) return;
+        if (!this.appProxy.scenePath) return;
+        if (this.appProxy.pageState.length >= size) return;
+        if (size <= 0 || size >= MAX_PAGE_SIZE) {
+            throw Error(`[WindowManager]: size ${size} muse be in range [1, ${MAX_PAGE_SIZE}]`);
+        }
+        const needInsert = size - this.appProxy.pageState.length;
+        const startPageNumber = this.appProxy.pageState.length;
+        const scenes = new Array(needInsert).fill({}).map((_, index) => {
+            return { name: `${startPageNumber + index + 1}` };
+        });
+        putScenes(this.room, this.appProxy.scenePath, scenes);
+    }
 
     public getInitScenePath = () => {
         return this.manager.getAppInitPath(this.appId);
     };
 
     /** Get App writable status. */
-    public getIsWritable = (): boolean => {
+    public get isWritable(): boolean {
         return this.manager.canOperate;
     };
 
     /** Get the App Window UI box. */
-    public getBox = (): ReadonlyTeleBox => {
+    public get box(): ReadonlyTeleBox {
         const box = this.boxManager.getBox(this.appId);
         if (box) {
             return box;
@@ -112,10 +140,25 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         }
     };
 
-    public getRoom = (): Room | undefined => {
+    public get room(): Room | undefined {
         return this.manager.room;
     };
 
+    public get members() {
+        return this.manager.members;
+    }
+
+    public get memberState(): Member {
+        const self = findMemberByUid(this.room, this.manager.uid);
+        if (!self) {
+            throw new Error(`Member ${this.manager.uid} not found.`);
+        }
+        return {
+            uid: this.manager.uid,
+            ...self,
+        }
+    }
+
     /** @deprecated Use context.storage.setState instead. */
     public setAttributes = (attributes: TAttributes) => {
         this.manager.safeSetAttributes({ [this.appId]: attributes });
@@ -128,11 +171,12 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         }
     };
 
+    /** @deprecated Use Pages api instead. */
     public setScenePath = async (scenePath: string): Promise<void> => {
         if (!this.appProxy.box) return;
         this.appProxy.setFullPath(scenePath);
         // 兼容 15 版本 SDK 的切页
-        this.getRoom()?.setScenePath(scenePath);
+        this.room?.setScenePath(scenePath);
     };
 
     /** Get the local App options. */
@@ -196,55 +240,4 @@ 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 removePage = async (index?: number): Promise<boolean> => {
-        const needRemoveIndex = index === undefined ? this.pageState.index : index;
-        if (this.pageState.length === 1) {
-            console.warn(`[WindowManager]: can not remove the last page`);
-            return false;
-        }
-        if (needRemoveIndex < 0 || needRemoveIndex >= this.pageState.length) {
-            console.warn(`[WindowManager]: page index ${index} out of range`);
-            return false;
-        }
-        return this.appProxy.removeSceneByIndex(needRemoveIndex);;
-    }
-
-    public get pageState(): PageState {
-        return this.appProxy.pageState;
-    }
 }

package/src/App/AppPageStateImpl.ts

@@ -9,11 +9,15 @@ export type AppPageStateParams = {
 };
 
 export class AppPageStateImpl {
-    private sceneNode: ScenesCallbacksNode | null = null;
+    public sceneNode: ScenesCallbacksNode | null = null;
+    private scenePath?: string;
+    private view?: View;
 
     constructor(private params: AppPageStateParams) {
         const { displayer, scenePath } = this.params;
+        this.view = this.params.view;
         if (scenePath) {
+            this.scenePath = scenePath;
             this.sceneNode = displayer.createScenesCallback(scenePath, {
                 onAddScene: this.onSceneChange,
                 onRemoveScene: this.onSceneChange,
@@ -21,24 +25,39 @@ export class AppPageStateImpl {
         }
     }
 
-    private onSceneChange = (node: ScenesCallbacksNode) => {
-        this.sceneNode = node;
+    public createSceneNode = (scenePath: string) => {
+        this.scenePath = scenePath;
+        if (this.sceneNode) {
+            this.sceneNode.dispose();
+        }
+        this.sceneNode = this.params.displayer.createScenesCallback(scenePath, {
+            onAddScene: this.onSceneChange,
+            onRemoveScene: this.onSceneChange,
+        });
+        return this.sceneNode;
+    }
+
+    public setView(view: View) {
+        this.view = view;
+    }
+
+    private onSceneChange = () => {
         this.params.notifyPageStateChange();
     };
 
     public getFullPath(index: number) {
         const scenes = this.sceneNode?.scenes;
-        if (this.params.scenePath && scenes) {
+        if (this.scenePath && scenes) {
             const name = scenes[index];
             if (name) {
-                return `${this.params.scenePath}/${name}`;
+                return `${this.scenePath}/${name}`;
             }
         }
     }
 
     public toObject(): PageState {
         return {
-            index: this.params.view?.focusSceneIndex || 0,
+            index: this.view?.focusSceneIndex || 0,
             length: this.sceneNode?.scenes.length || 0,
         };
     }

package/src/App/AppProxy.ts

@@ -12,6 +12,7 @@ import { log } from "../Utils/log";
 import {
     entireScenes,
     getScenePath,
+    putScenes,
     removeScenes,
     setScenePath,
     setViewFocusScenePath,
@@ -30,6 +31,7 @@ import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import type { PageRemoveService, PageState } from "../Page";
 import { calculateNextIndex } from "../Page";
 import { boxEmitter } from "../BoxEmitter";
+import { SideEffectManager } from "side-effect-manager";
 
 export type AppEmitter = Emittery<AppEmitterEvent>;
 
@@ -37,6 +39,7 @@ export class AppProxy implements PageRemoveService {
     public kind: string;
     public id: string;
     public scenePath?: string;
+    private appScenePath: string;
     public appEmitter: AppEmitter;
     public scenes?: SceneDefinition[];
 
@@ -49,12 +52,14 @@ export class AppProxy implements PageRemoveService {
     public isAddApp: boolean;
     private status: "normal" | "destroyed" = "normal";
     private stateKey: string;
-    private _pageState: AppPageStateImpl;
+    public _pageState: AppPageStateImpl;
     private _prevFullPath: string | undefined;
 
     public appResult?: NetlessApp<any>;
     public appContext?: AppContext<any, any>;
 
+    private sideEffectManager = new SideEffectManager();
+
     constructor(
         private params: BaseInsertParams,
         private manager: AppManager,
@@ -63,6 +68,7 @@ export class AppProxy implements PageRemoveService {
     ) {
         this.kind = params.kind;
         this.id = appId;
+        this.appScenePath = `/${this.id}-app-dir`;
         this.stateKey = `${this.id}_state`;
         this.appProxies.set(this.id, this);
         this.appEmitter = new Emittery();
@@ -75,12 +81,37 @@ export class AppProxy implements PageRemoveService {
             // 只有传入了 scenePath 的 App 才会创建 View
             this.createView();
         }
+        if (!this.scenePath) {
+            this.scenePath = this.appScenePath;
+        }
         this._pageState = new AppPageStateImpl({
             displayer: this.manager.displayer,
             scenePath: this.scenePath,
             view: this.view,
             notifyPageStateChange: this.notifyPageStateChange,
         });
+        this.sideEffectManager.add(() => {
+            return () => this._pageState.destroy();
+        });
+        this.sideEffectManager.add(() => {
+            return emitter.on("roomMembersChange", members => {
+                this.appEmitter.emit("roomMembersChange", members);
+            });
+        });
+    }
+
+    public createAppDir() {
+        const scenePath = this.scenePath || this.appScenePath;
+        const sceneNode = this._pageState.createSceneNode(scenePath);
+        if (!sceneNode) {
+            putScenes(this.manager.room, scenePath, [{ name: "1" }]);
+            this._pageState.createSceneNode(scenePath);
+            this.setSceneIndex(0);
+        }
+        this.scenes = entireScenes(this.manager.displayer)[scenePath];
+        const view = this.createView();
+        this._pageState.setView(view);
+        return view;
     }
 
     private initScenes() {
@@ -395,14 +426,16 @@ export class AppProxy implements PageRemoveService {
         return fullPath;
     }
 
-    private async createView(): Promise<View> {
-        const view = await this.viewManager.createView(this.id);
+    private createView(): View {
+        const view = this.viewManager.createView(this.id);
         this.setViewFocusScenePath();
         return view;
     }
 
     public notifyPageStateChange = debounce(() => {
-        this.appEmitter.emit("pageStateChange", this.pageState);
+        if (this.pageState) {
+            this.appEmitter.emit("pageStateChange", this.pageState);
+        }
     }, 50);
 
     public get pageState(): PageState {
@@ -412,7 +445,7 @@ export class AppProxy implements PageRemoveService {
     // PageRemoveService
     public async removeSceneByIndex(index: number) {
         const scenePath = this._pageState.getFullPath(index);
-        if (scenePath) {
+        if (scenePath && this.pageState) {
             const nextIndex = calculateNextIndex(index, this.pageState);
             // 只修改 focus path 不修改 FullPath
             this.setSceneIndexWithoutSync(nextIndex);
@@ -474,7 +507,6 @@ export class AppProxy implements PageRemoveService {
             }
         }
         this.appProxies.delete(this.id);
-        this._pageState.destroy();
 
         this.viewManager.destroyView(this.id);
         this.manager.appStatus.delete(this.id);
@@ -482,6 +514,7 @@ export class AppProxy implements PageRemoveService {
         this.manager.refresher?.remove(this.stateKey);
         this.manager.refresher?.remove(`${this.id}-fullPath`);
         this._prevFullPath = undefined;
+        this.sideEffectManager.flushAll();
     }
 
     public close(): Promise<void> {

package/src/App/Storage/index.ts

@@ -37,7 +37,7 @@ export class Storage<TState extends Record<string, any> = any> implements Storag
     this._state = {} as TState;
     const rawState = this._getRawState(this._state);
 
-    if (this._context.getIsWritable()) {
+    if (this._context.isWritable) {
       if (this.id === null) {
         if (context.isAddApp && defaultState) {
             this.setState(defaultState);
@@ -115,7 +115,7 @@ export class Storage<TState extends Record<string, any> = any> implements Storag
       return;
     }
 
-    if (!this._context.getIsWritable()) {
+    if (!this._context.isWritable) {
       console.error(new Error(`Cannot setState on Storage "${this.id}" without writable access`), state);
       return;
     }
@@ -165,7 +165,7 @@ export class Storage<TState extends Record<string, any> = any> implements Storag
       return;
     }
 
-    if (!this._context.getIsWritable()) {
+    if (!this._context.isWritable) {
       console.error(new Error(`Cannot empty Storage "${this.id}" without writable access.`));
       return;
     }
@@ -181,7 +181,7 @@ export class Storage<TState extends Record<string, any> = any> implements Storag
       throw new Error(`Cannot delete main Storage`);
     }
 
-    if (!this._context.getIsWritable()) {
+    if (!this._context.isWritable) {
       console.error(new Error(`Cannot delete Storage "${this.id}" without writable access.`));
       return;
     }

package/src/App/WhiteBoardView.ts

@@ -0,0 +1,76 @@
+import { putScenes } from "../Utils/Common";
+import { Val } from "value-enhancer";
+
+import type { ReadonlyVal } from "value-enhancer";
+import type { AddPageParams, PageController, PageState } from "../Page";
+import type { AppProxy } from "./AppProxy";
+import type { AppContext } from "./AppContext";
+
+export class WhiteBoardView implements PageController {
+    public readonly pageState$: ReadonlyVal<PageState>;
+
+    constructor(
+        protected appContext: AppContext, 
+        protected appProxy: AppProxy,
+        private removeViewWrapper: () => void,
+    ) {
+        const pageState$ = new Val<PageState>(appProxy.pageState);
+        this.pageState$ = pageState$;
+        appProxy.appEmitter.on("pageStateChange", pageState => {
+            pageState$.setValue(pageState);
+        });
+    }
+
+    public get pageState() {
+        return this.pageState$.value;
+    }
+
+    public nextPage = async (): Promise<boolean> => {
+        const nextIndex = this.pageState.index + 1;
+        return this.jumpPage(nextIndex);
+    };
+
+    public prevPage = async (): Promise<boolean> => {
+        const nextIndex = this.pageState.index - 1;
+        return this.jumpPage(nextIndex);
+    };
+
+    public jumpPage = async (index: number): Promise<boolean> => {
+        if (index < 0 || index >= this.pageState.length) {
+            console.warn(`[WindowManager]: index ${index} out of range`);
+            return false;
+        }
+        this.appProxy.setSceneIndex(index);
+        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.appContext.room, scenePath, [scene || {}], nextIndex);
+        } else {
+            putScenes(this.appContext.room, scenePath, [scene || {}]);
+        }
+    };
+
+    public removePage = async (index?: number): Promise<boolean> => {
+        const needRemoveIndex = index === undefined ? this.pageState.index : index;
+        if (this.pageState.length === 1) {
+            console.warn(`[WindowManager]: can not remove the last page`);
+            return false;
+        }
+        if (needRemoveIndex < 0 || needRemoveIndex >= this.pageState.length) {
+            console.warn(`[WindowManager]: page index ${index} out of range`);
+            return false;
+        }
+        return this.appProxy.removeSceneByIndex(needRemoveIndex);
+    };
+
+    public destroy() {
+        this.removeViewWrapper();
+    }
+}

package/src/App/index.ts

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

package/src/AppManager.ts

@@ -15,6 +15,7 @@ import { MainViewProxy } from "./View/MainView";
 import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
 import { reconnectRefresher, WindowManager } from "./index";
 import { RedoUndo } from "./RedoUndo";
+import { serializeRoomMembers } from "./Helper";
 import { SideEffectManager } from "side-effect-manager";
 import { ViewManager } from "./View/ViewManager";
 import type { SyncRegisterAppPayload } from "./Register";
@@ -46,7 +47,7 @@ import type {
     BoxResizePayload,
     BoxStateChangePayload,
 } from "./BoxEmitter";
-
+import type { Member } from "./Helper";
 
 export class AppManager {
     public displayer: Displayer;
@@ -299,6 +300,10 @@ export class AppManager {
         return this.room?.uid || "";
     }
 
+    public get members(): Member[] {
+        return serializeRoomMembers(this.displayer.state.roomMembers);
+    }
+
     public getMainViewSceneDir() {
         const scenePath = this.store.getMainViewScenePath();
         if (scenePath) {
@@ -660,6 +665,9 @@ export class AppManager {
         this.appProxies.forEach(appProxy => {
             appProxy.appEmitter.emit("roomStateChange", state);
         });
+        if (state.roomMembers) {
+            emitter.emit("roomMembersChange", this.members);
+        }
         emitter.emit("observerIdChange", this.displayer.observerId);
     };
 

package/src/BoxManager.ts

@@ -210,6 +210,10 @@ export class BoxManager {
         return this.teleBoxManager.boxes.length;
     }
 
+    public get stageRect() {
+        return this.teleBoxManager.stageRect;
+    }
+
     public createBox(params: CreateBoxParams): void {
         if (!this.teleBoxManager) return;
         let { minwidth = MIN_WIDTH, minheight = MIN_HEIGHT } = params.app.config ?? {};
@@ -242,7 +246,7 @@ export class BoxManager {
     ): TeleBoxManager {
         const root = WindowManager.playground;
         const initManagerState: TeleBoxManagerConfig = {
-            stageRatio: 3 / 4,
+            stageRatio: createTeleBoxManagerConfig?.stageRatio,
             root: root,
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
@@ -390,6 +394,10 @@ export class BoxManager {
         this.teleBoxManager._root$.setValue(root);
     }
 
+    public setCollector(collector: HTMLElement) {
+        this.teleBoxManager.collector.set$collector(collector);
+    }
+
     public destroy() {
         this.sideEffectManager.flushAll();
         this.teleBoxManager.destroy();

package/src/Helper.ts

@@ -2,7 +2,7 @@ import { getVersionNumber } from "./Utils/Common";
 import { REQUIRE_VERSION } from "./constants";
 import { WhiteVersion } from "white-web-sdk";
 import { WhiteWebSDKInvalidError } from "./Utils/error";
-import type { Room } from "white-web-sdk";
+import type { Room , RoomMember} from "white-web-sdk";
 
 export const setupWrapper = (
     root: HTMLElement
@@ -32,3 +32,12 @@ export const findMemberByUid = (room: Room | undefined, uid: string) => {
     const roomMembers = room?.state.roomMembers;
     return roomMembers?.find(member => member.payload?.uid === uid);
 };
+
+export type Member = RoomMember & { uid: string };
+
+export const serializeRoomMembers = (members: readonly RoomMember[]) => {
+    return members.map(member => ({
+        uid: member.payload?.uid || "",
+        ...member,
+    }));
+}

package/src/InternalEmitter.ts

@@ -1,6 +1,7 @@
 import Emittery from "emittery";
 import type { TeleBoxRect } from "@netless/telebox-insider";
 import type { AppInitState, CursorMovePayload } from "./index";
+import type { Member } from "./Helper";
 
 export type RemoveSceneParams = {
     scenePath: string;
@@ -29,6 +30,7 @@ export type EmitterEvent = {
     changePageState: undefined;
     writableChange: boolean;
     containerSizeRatioUpdate: number;
+    roomMembersChange: Member[];
 };
 
 export type EmitterType = Emittery<EmitterEvent>;

package/src/View/MainView.ts

@@ -42,7 +42,7 @@ export class MainViewProxy {
                 }
             });
         });
-        const rect = this.manager.boxManager?.teleBoxManager.stageRect;
+        const rect = this.manager.boxManager?.stageRect;
         if (rect) {
             this.synchronizer.setRect(rect);
         }
@@ -191,7 +191,7 @@ export class MainViewProxy {
     };
 
     private getStageSize(): Size | undefined {
-        const stage = this.manager.boxManager?.teleBoxManager.stageRect;
+        const stage = this.manager.boxManager?.stageRect;
         if (stage) {
             return { width: stage.width, height: stage.height };
         }

package/src/constants.ts

@@ -57,3 +57,5 @@ export const ROOT_DIR = "/";
 export const INIT_DIR = "/init";
 
 export const SETUP_APP_DELAY = 50;
+
+export const MAX_PAGE_SIZE = 500;

package/src/index.ts

@@ -340,7 +340,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
 
     public bindCollectorContainer(container: HTMLElement) {
         if (WindowManager.isCreated && this.boxManager) {
-            this.boxManager.teleBoxManager.collector.set$collector(container)
+            this.boxManager.setCollector(container);
         } else {
             if (WindowManager.params) {
                 WindowManager.params.collectorContainer = container;

package/src/style.css

@@ -178,3 +178,12 @@
     right: 10px;
     bottom: 15px;
 }
+
+.window-manager-view-wrapper {
+    z-index: 5000;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+}