@netless/window-manager 0.4.32 → 1.0.0-canary.2

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() {
@@ -191,7 +222,6 @@ export class AppProxy implements PageRemoveService {
                     const result = await app.setup(context);
                     this.appResult = result;
                     appRegister.notifyApp(this.kind, "created", { appId, result });
-                    this.afterSetupApp(boxInitState);
                     this.fixMobileSize();
                 }, SETUP_APP_DELAY);
             });
@@ -225,14 +255,6 @@ export class AppProxy implements PageRemoveService {
         }
     }
 
-    private afterSetupApp(boxInitState: AppInitState | undefined): void {
-        if (boxInitState) {
-            if (!boxInitState?.x || !boxInitState.y) {
-                this.boxManager?.setBoxInitState(this.id);
-            }
-        }
-    }
-
     public async onSeek(time: number) {
         this.appEmitter.emit("seek", time).catch(err => {
             console.log(`[WindowManager]: emit seek error: ${err.message}`);
@@ -404,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 {
@@ -421,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);
@@ -483,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);
@@ -491,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,68 @@
+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) {
+        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);
+    };
+}

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

@@ -1,6 +1,6 @@
 import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce } from "lodash";
-import { TELE_BOX_STATE, TeleBoxCollector, TeleBoxManager } from "@netless/telebox-insider";
+import { TELE_BOX_STATE, TeleBoxManager } from "@netless/telebox-insider";
 import { WindowManager } from "./index";
 import type { BoxEmitterType } from "./BoxEmitter";
 import type { AddAppOptions, AppInitState } from "./index";
@@ -18,6 +18,7 @@ import type { NetlessApp } from "./typings";
 import type { View } from "white-web-sdk";
 import type { CallbacksType } from "./callback";
 import type { EmitterType } from "./InternalEmitter";
+import { SideEffectManager } from "side-effect-manager";
 
 export { TELE_BOX_STATE };
 
@@ -45,6 +46,7 @@ export type CreateTeleBoxManagerConfig = {
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     prefersColorScheme?: TeleBoxColorScheme;
+    stageRatio?: number;
 };
 
 export type BoxManagerContext = {
@@ -87,79 +89,93 @@ export const createBoxManager = (
 
 export class BoxManager {
     public teleBoxManager: TeleBoxManager;
+    protected sideEffectManager: SideEffectManager;
 
     constructor(
         private context: BoxManagerContext,
-        private createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
+        createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ) {
+        this.sideEffectManager = new SideEffectManager();
         const { emitter, callbacks, boxEmitter } = context;
         this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
-
-        // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
-        this.teleBoxManager._state$.reaction(state => {
-            callbacks.emit("boxStateChange", state);
-            emitter.emit("boxStateChange", state);
-        });
-
-        this.teleBoxManager._darkMode$.reaction(darkMode => {
-            callbacks.emit("darkModeChange", darkMode);
-        });
-        this.teleBoxManager._prefersColorScheme$.reaction(colorScheme => {
-            callbacks.emit("prefersColorSchemeChange", colorScheme);
-        });
-
-        // events.on 的值则会根据 skipUpdate 来决定是否触发回调
-        this.teleBoxManager.events.on("minimized", minimized => {
-            this.context.safeSetAttributes({ minimized });
-            if (minimized) {
-                this.context.cleanFocus();
-                this.blurAllBox();
-            } else {
-                const topBox = this.getTopBox();
-                if (topBox) {
-                    this.context.setAppFocus(topBox.id);
-                    this.focusBox({ appId: topBox.id }, false);
+        this.sideEffectManager.add(() => [
+            // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
+            this.teleBoxManager._state$.reaction(state => {
+                callbacks.emit("boxStateChange", state);
+                emitter.emit("boxStateChange", state);
+            }),
+            this.teleBoxManager._darkMode$.reaction(darkMode => {
+                callbacks.emit("darkModeChange", darkMode);
+            }),
+            this.teleBoxManager._prefersColorScheme$.reaction(colorScheme => {
+                callbacks.emit("prefersColorSchemeChange", colorScheme);
+            }),
+            this.teleBoxManager._minimized$.reaction((minimized, skipUpdate) => {
+                if (skipUpdate) {
+                    return;
                 }
-            }
-        });
-        this.teleBoxManager.events.on("maximized", maximized => {
-            this.context.safeSetAttributes({ maximized });
-        });
-        this.teleBoxManager.events.on("removed", boxes => {
-            boxes.forEach(box => {
-                boxEmitter.emit("close", { appId: box.id });
-            });
-        });
-        this.teleBoxManager.events.on(
-            "intrinsic_move",
-            debounce((box: ReadonlyTeleBox): void => {
-                boxEmitter.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
-            }, 50)
-        );
-        this.teleBoxManager.events.on(
-            "intrinsic_resize",
-            debounce((box: ReadonlyTeleBox): void => {
-                boxEmitter.emit("resize", {
-                    appId: box.id,
-                    width: box.intrinsicWidth,
-                    height: box.intrinsicHeight,
-                });
-            }, 200)
-        );
-        this.teleBoxManager.events.on("focused", box => {
-            if (box) {
-                if (this.canOperate) {
-                    boxEmitter.emit("focus", { appId: box.id });
+                this.context.safeSetAttributes({ minimized });
+                if (minimized) {
+                    this.context.cleanFocus();
+                    this.blurAllBox();
                 } else {
-                    this.teleBoxManager.blurBox(box.id);
+                    const topBox = this.getTopBox();
+                    if (topBox) {
+                        this.context.setAppFocus(topBox.id);
+                        this.focusBox({ appId: topBox.id }, false);
+                    }
                 }
-            }
-        });
-        this.teleBoxManager.events.on("z_index", box => {
-            this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
-        });
-        emitter.on("playgroundSizeChange", () => this.updateManagerRect());
-        emitter.on("updateManagerRect", () => this.updateManagerRect());
+            }),
+            this.teleBoxManager._maximized$.reaction((maximized, skipUpdate) => {
+                if (skipUpdate) {
+                    return;
+                }
+                this.context.safeSetAttributes({ maximized });
+            }),
+            this.teleBoxManager.events.on("removed", boxes => {
+                boxes.forEach(box => {
+                    boxEmitter.emit("close", { appId: box.id });
+                });
+            }),
+            this.teleBoxManager.events.on(
+                "intrinsic_move",
+                debounce((box: ReadonlyTeleBox): void => {
+                    boxEmitter.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
+                }, 50)
+            ),
+            this.teleBoxManager.events.on(
+                "intrinsic_resize",
+                debounce((box: ReadonlyTeleBox): void => {
+                    boxEmitter.emit("resize", {
+                        appId: box.id,
+                        width: box.intrinsicWidth,
+                        height: box.intrinsicHeight,
+                    });
+                }, 200)
+            ),
+            this.teleBoxManager.events.on("focused", box => {
+                if (box) {
+                    if (this.canOperate) {
+                        boxEmitter.emit("focus", { appId: box.id });
+                    } else {
+                        this.teleBoxManager.blurBox(box.id);
+                    }
+                }
+            }),
+            this.teleBoxManager.events.on("z_index", box => {
+                this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
+            }),
+            this.teleBoxManager._stageRect$.subscribe(stage => {
+                emitter.emit("playgroundSizeChange", stage);
+                this.context.notifyContainerRectUpdate(stage);
+            }),
+            emitter.on("writableChange", isWritable => {
+                this.teleBoxManager.setHighlightStage(isWritable);
+            }),
+            emitter.on("containerSizeRatioUpdate", ratio => {
+                this.teleBoxManager._stageRatio$.setValue(ratio);
+            }),
+        ]);
     }
 
     private get mainView() {
@@ -194,12 +210,16 @@ 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 ?? {};
         const { width, height } = params.app.config ?? {};
         const title = params.options?.title || params.appId;
-        const rect = this.teleBoxManager.containerRect;
+        const rect = this.teleBoxManager.rootRect;
 
         if (minwidth > 1) {
             minwidth = minwidth / rect.width;
@@ -221,34 +241,13 @@ export class BoxManager {
         this.context.emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
     }
 
-    public setBoxInitState(appId: string): void {
-        const box = this.teleBoxManager.queryOne({ id: appId });
-        if (box) {
-            if (box.state === TELE_BOX_STATE.Maximized) {
-                this.context.boxEmitter.emit("resize", {
-                    appId: appId,
-                    x: box.x,
-                    y: box.y,
-                    width: box.intrinsicWidth,
-                    height: box.intrinsicHeight,
-                });
-            }
-        }
-    }
-
     public setupBoxManager(
         createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ): TeleBoxManager {
-        const root = WindowManager.wrapper ? WindowManager.wrapper : document.body;
-        const rect = root.getBoundingClientRect();
+        const root = WindowManager.playground;
         const initManagerState: TeleBoxManagerConfig = {
+            stageRatio: createTeleBoxManagerConfig?.stageRatio,
             root: root,
-            containerRect: {
-                x: 0,
-                y: 0,
-                width: rect.width,
-                height: rect.height,
-            },
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
         };
@@ -258,20 +257,16 @@ export class BoxManager {
             this.teleBoxManager.destroy();
         }
         this.teleBoxManager = manager;
-        const container = createTeleBoxManagerConfig?.collectorContainer || WindowManager.wrapper;
+        const container = createTeleBoxManagerConfig?.collectorContainer;
         if (container) {
-            this.setCollectorContainer(container);
+            this.teleBoxManager.collector.set$collector(container);
+        }
+        if (createTeleBoxManagerConfig?.collectorStyles) {
+            this.teleBoxManager.collector.setStyles(createTeleBoxManagerConfig.collectorStyles);
         }
         return manager;
     }
 
-    public setCollectorContainer(container: HTMLElement) {
-        const collector = new TeleBoxCollector({
-            styles: this.createTeleBoxManagerConfig?.collectorStyles,
-        }).mount(container);
-        this.teleBoxManager.setCollector(collector);
-    }
-
     public getBox(appId: string): ReadonlyTeleBox | undefined {
         return this.teleBoxManager.queryOne({ id: appId });
     }
@@ -324,15 +319,6 @@ export class BoxManager {
         }
     }
 
-    public updateManagerRect(): void {
-        const rect = this.mainView.divElement?.getBoundingClientRect();
-        if (rect && rect.width > 0 && rect.height > 0) {
-            const containerRect = { x: 0, y: 0, width: rect.width, height: rect.height };
-            this.teleBoxManager.setContainerRect(containerRect);
-            this.context.notifyContainerRectUpdate(this.teleBoxManager.containerRect);
-        }
-    }
-
     public moveBox({ appId, x, y }: MoveBoxParams): void {
         this.teleBoxManager.update(appId, { x, y }, true);
     }
@@ -404,7 +390,16 @@ export class BoxManager {
         this.teleBoxManager.update(id, { zIndex }, skipUpdate);
     }
 
+    public setRoot(root: HTMLElement) {
+        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/Cursor/index.ts

@@ -34,9 +34,9 @@ export class CursorManager {
 
     constructor(private manager: AppManager, private enableCursor: boolean, applianceIcons?: ApplianceIcons) {
         this.roomMembers = this.manager.room?.state.roomMembers;
-        const wrapper = WindowManager.wrapper;
-        if (wrapper) {
-            this.setupWrapper(wrapper);
+        const playground = WindowManager.playground;
+        if (playground) {
+            this.setupWrapper(playground);
         }
         this.sideEffectManager.add(() => {
             return emitter.on("cursorMove", this.onCursorMove);
@@ -65,7 +65,7 @@ export class CursorManager {
     private initCursorInstance = (uid: string) => {
         let cursorInstance = this.cursorInstances.get(uid);
         if (!cursorInstance) {
-            cursorInstance = new Cursor(this.manager, uid, this, WindowManager.wrapper);
+            cursorInstance = new Cursor(this.manager, uid, this, WindowManager.playground);
             this.cursorInstances.set(uid, cursorInstance);
         }
         return cursorInstance;
@@ -169,7 +169,7 @@ export class CursorManager {
 
     public updateContainerRect() {
         this.containerRect = WindowManager.container?.getBoundingClientRect();
-        this.wrapperRect = WindowManager.wrapper?.getBoundingClientRect();
+        this.wrapperRect = WindowManager.playground?.getBoundingClientRect();
     }
 
     public deleteCursor(uid: string) {

package/src/Helper.ts

@@ -2,36 +2,23 @@ import { getVersionNumber } from "./Utils/Common";
 import { REQUIRE_VERSION } from "./constants";
 import { WhiteVersion } from "white-web-sdk";
 import { WhiteWebSDKInvalidError } from "./Utils/error";
-import { WindowManager } from "./index";
-import type { Room } from "white-web-sdk";
+import type { Room , RoomMember} from "white-web-sdk";
 
 export const setupWrapper = (
     root: HTMLElement
 ): {
     playground: HTMLDivElement;
-    wrapper: HTMLDivElement;
-    sizer: HTMLDivElement;
     mainViewElement: HTMLDivElement;
 } => {
     const playground = document.createElement("div");
     playground.className = "netless-window-manager-playground";
 
-    const sizer = document.createElement("div");
-    sizer.className = "netless-window-manager-sizer";
-
-    const wrapper = document.createElement("div");
-    wrapper.className = "netless-window-manager-wrapper";
-
     const mainViewElement = document.createElement("div");
     mainViewElement.className = "netless-window-manager-main-view";
-
-    playground.appendChild(sizer);
-    sizer.appendChild(wrapper);
-    wrapper.appendChild(mainViewElement);
+    playground.appendChild(mainViewElement);
     root.appendChild(playground);
-    WindowManager.wrapper = wrapper;
 
-    return { playground, wrapper, sizer, mainViewElement };
+    return { playground, mainViewElement };
 };
 
 export const checkVersion = () => {
@@ -45,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,
+    }));
+}