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

package/src/AppManager.ts

@@ -4,6 +4,8 @@ import { AppListeners } from "./AppListener";
 import { AppProxy } from "./App";
 import { appRegister } from "./Register";
 import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
+import { boxEmitter } from "./BoxEmitter";
+import { calculateNextIndex } from "./Page";
 import { callbacks } from "./callback";
 import { debounce, get, isInteger, orderBy } from "lodash";
 import { emitter } from "./InternalEmitter";
@@ -16,7 +18,7 @@ import { RedoUndo } from "./RedoUndo";
 import { SideEffectManager } from "side-effect-manager";
 import { ViewManager } from "./View/ViewManager";
 import type { SyncRegisterAppPayload } from "./Register";
-import type { EmitterEvent , RemoveSceneParams } from "./InternalEmitter";
+import type { RemoveSceneParams } from "./InternalEmitter";
 import {
     entireScenes,
     genAppId,
@@ -37,7 +39,14 @@ import type {
     SceneState,
 } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
-import { calculateNextIndex } from "./Page";
+import type {
+    BoxClosePayload,
+    BoxFocusPayload,
+    BoxMovePayload,
+    BoxResizePayload,
+    BoxStateChangePayload,
+} from "./BoxEmitter";
+
 
 export class AppManager {
     public displayer: Displayer;
@@ -202,27 +211,30 @@ export class AppManager {
         const scene = this.callbacksNode?.scenes[index];
         setTimeout(() => {
             if (scene) {
-                removeScenes(this.room, `${ROOT_DIR}${scene}`, index)
+                removeScenes(this.room, `${ROOT_DIR}${scene}`, index);
             }
         }, 100);
         return new Promise<boolean>((resolve, reject) => {
-            emitter.once("rootDirSceneRemoved").then(name => {
-                if (name === scene) {
-                    resolve(true);
-                }
-            }).catch(e => {
-                console.log(`[WindowManager]: removePage error: ${e}`);
-                reject(false);
-            });
+            emitter
+                .once("rootDirSceneRemoved")
+                .then(name => {
+                    if (name === scene) {
+                        resolve(true);
+                    }
+                })
+                .catch(e => {
+                    console.log(`[WindowManager]: removePage error: ${e}`);
+                    reject(false);
+                });
         });
-    }
+    };
 
     public setSceneIndexWithoutSync = (index: number) => {
         const sceneName = this.callbacksNode?.scenes[index];
         if (sceneName) {
             this.mainViewProxy.setFocusScenePath(`${ROOT_DIR}${sceneName}`);
         }
-    }
+    };
 
     private onSceneChange = (node: ScenesCallbacksNode) => {
         this.mainViewScenesLength = node.scenes.length;
@@ -299,7 +311,11 @@ export class AppManager {
     private async onCreated() {
         await this.attributesUpdateCallback(this.attributes.apps);
         emitter.emit("updateManagerRect");
-        emitter.onAny(this.boxEventListener);
+        boxEmitter.on("move", this.onBoxMove);
+        boxEmitter.on("resize", this.onBoxResize);
+        boxEmitter.on("focus", this.onBoxFocus);
+        boxEmitter.on("close", this.onBoxClose);
+        boxEmitter.on("boxStateChange", this.onBoxStateChange);
 
         this.addAppsChangeListener();
         this.addAppCloseListener();
@@ -352,6 +368,39 @@ export class AppManager {
         });
     }
 
+    private onBoxMove = (payload: BoxMovePayload) => {
+        this.dispatchInternalEvent(Events.AppMove, payload);
+        this.store.updateAppState(payload.appId, AppAttributes.Position, {
+            x: payload.x,
+            y: payload.y,
+        });
+    };
+
+    private onBoxResize = (payload: BoxResizePayload) => {
+        if (payload.width && payload.height) {
+            this.dispatchInternalEvent(Events.AppResize, payload);
+            this.store.updateAppState(payload.appId, AppAttributes.Size, {
+                width: payload.width,
+                height: payload.height,
+            });
+        }
+    };
+
+    private onBoxFocus = (payload: BoxFocusPayload) => {
+        this.windowManger.safeSetAttributes({ focus: payload.appId });
+    };
+
+    private onBoxClose = (payload: BoxClosePayload) => {
+        const appProxy = this.appProxies.get(payload.appId);
+        if (appProxy) {
+            appProxy.destroy(false, true, true, payload.error);
+        }
+    };
+
+    private onBoxStateChange = (payload: BoxStateChangePayload) => {
+        this.dispatchInternalEvent(Events.AppBoxStateChange, payload);
+    };
+
     public addAppsChangeListener = () => {
         this.refresher?.add("apps", () => {
             return safeListenPropsUpdated(
@@ -371,7 +420,6 @@ export class AppManager {
         });
     };
 
-    
     private onMainViewIndexChange = (index: number) => {
         if (index !== undefined && this._prevSceneIndex !== index) {
             callbacks.emit("mainViewSceneIndexChange", index);
@@ -432,7 +480,7 @@ export class AppManager {
                         if (!appAttributes) {
                             throw new Error("appAttributes is undefined");
                         }
-                        this.appCreateQueue.push(() => {
+                        this.appCreateQueue.push<AppProxy>(() => {
                             this.appStatus.set(id, AppStatus.StartCreate);
                             return this.baseInsertApp(
                                 {
@@ -558,7 +606,7 @@ export class AppManager {
     private afterAddApp(appProxy: AppProxy | undefined) {
         if (appProxy && appProxy.box) {
             const box = appProxy.box;
-            emitter.emit("move", {
+            boxEmitter.emit("move", {
                 appId: appProxy.id,
                 x: box?.intrinsicX,
                 y: box?.intrinsicY,
@@ -694,7 +742,7 @@ export class AppManager {
         if (this.room) {
             if (this.store.getMainViewSceneIndex() === index) return;
             const sceneName = this.callbacksNode?.scenes[index];
-            const scenePath =`${ROOT_DIR}${sceneName}`;
+            const scenePath = `${ROOT_DIR}${sceneName}`;
             if (sceneName) {
                 const success = this.setMainViewFocusPath(scenePath);
                 if (success) {
@@ -727,46 +775,6 @@ export class AppManager {
         }
     }
 
-    private boxEventListener = (eventName: keyof EmitterEvent, payload: any) => {
-        switch (eventName) {
-            case "move": {
-                this.dispatchInternalEvent(Events.AppMove, payload);
-                this.store.updateAppState(payload.appId, AppAttributes.Position, {
-                    x: payload.x,
-                    y: payload.y,
-                });
-                break;
-            }
-            case "focus": {
-                this.windowManger.safeSetAttributes({ focus: payload.appId });
-                break;
-            }
-            case "resize": {
-                if (payload.width && payload.height) {
-                    this.dispatchInternalEvent(Events.AppResize, payload);
-                    this.store.updateAppState(payload.appId, AppAttributes.Size, {
-                        width: payload.width,
-                        height: payload.height,
-                    });
-                }
-                break;
-            }
-            case "close": {
-                const appProxy = this.appProxies.get(payload.appId);
-                if (appProxy) {
-                    appProxy.destroy(false, true, payload.error);
-                }
-                break;
-            }
-            case "boxStateChange": {
-                this.dispatchInternalEvent(Events.AppBoxStateChange, payload);
-                break;
-            }
-            default:
-                break;
-        }
-    };
-
     public focusByAttributes(apps: any) {
         if (apps && Object.keys(apps).length === this.boxManager?.boxSize) {
             const focusAppId = this.store.focus;
@@ -806,7 +814,7 @@ export class AppManager {
         this.displayer.callbacks.off(this.eventName, this.displayerStateListener);
         this.displayer.callbacks.off("onEnableWriteNowChanged", this.displayerWritableListener);
         this.appListeners.removeListeners();
-        emitter.offAny(this.boxEventListener);
+        boxEmitter.clearListeners();
         emitter.clearListeners();
         if (this.appProxies.size) {
             this.appProxies.forEach(appProxy => {

package/src/BoxEmitter.ts

@@ -0,0 +1,19 @@
+import type { TELE_BOX_STATE } from "@netless/telebox-insider";
+import Emittery from "emittery";
+
+export type BoxMovePayload = { appId: string, x: number; y: number };
+export type BoxFocusPayload = { appId: string };
+export type BoxResizePayload = { appId: string, width: number; height: number, x?: number, y?: number };
+export type BoxClosePayload = { appId: string, error?: Error };
+export type BoxStateChangePayload = { appId: string, state: TELE_BOX_STATE };
+
+export type BoxEvent = {
+    move: BoxMovePayload;
+    focus: BoxFocusPayload;
+    resize: BoxResizePayload;
+    close: BoxClosePayload;
+    boxStateChange: BoxStateChangePayload
+}
+
+export type BoxEmitterType = Emittery<BoxEvent>;
+export const boxEmitter: BoxEmitterType = new Emittery();

package/src/BoxManager.ts

@@ -1,7 +1,8 @@
 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";
 import type {
     TeleBoxManagerUpdateConfig,
@@ -17,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 };
 
@@ -44,6 +46,7 @@ export type CreateTeleBoxManagerConfig = {
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     prefersColorScheme?: TeleBoxColorScheme;
+    stageRatio?: number;
 };
 
 export type BoxManagerContext = {
@@ -51,6 +54,7 @@ export type BoxManagerContext = {
     getMainView: () => View;
     updateAppState: (appId: string, field: AppAttributes, value: any) => void;
     emitter: EmitterType;
+    boxEmitter: BoxEmitterType;
     callbacks: CallbacksType;
     canOperate: () => boolean;
     notifyContainerRectUpdate: (rect: TeleBoxRect) => void;
@@ -62,6 +66,7 @@ export const createBoxManager = (
     manager: WindowManager,
     callbacks: CallbacksType,
     emitter: EmitterType,
+    boxEmitter: BoxEmitterType,
     options: CreateTeleBoxManagerConfig
 ) => {
     return new BoxManager(
@@ -76,6 +81,7 @@ export const createBoxManager = (
             setAppFocus: (appId: string) => manager.appManager?.store.setAppFocus(appId, true),
             callbacks,
             emitter,
+            boxEmitter
         },
         options
     );
@@ -83,79 +89,93 @@ export const createBoxManager = (
 
 export class BoxManager {
     public teleBoxManager: TeleBoxManager;
+    protected sideEffectManager: SideEffectManager;
 
     constructor(
         private context: BoxManagerContext,
-        private createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
+        createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ) {
-        const { emitter, callbacks } = context;
+        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 => {
-                emitter.emit("close", { appId: box.id });
-            });
-        });
-        this.teleBoxManager.events.on(
-            "intrinsic_move",
-            debounce((box: ReadonlyTeleBox): void => {
-                emitter.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
-            }, 50)
-        );
-        this.teleBoxManager.events.on(
-            "intrinsic_resize",
-            debounce((box: ReadonlyTeleBox): void => {
-                emitter.emit("resize", {
-                    appId: box.id,
-                    width: box.intrinsicWidth,
-                    height: box.intrinsicHeight,
-                });
-            }, 200)
-        );
-        this.teleBoxManager.events.on("focused", box => {
-            if (box) {
-                if (this.canOperate) {
-                    emitter.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() {
@@ -195,7 +215,7 @@ export class BoxManager {
         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;
@@ -217,34 +237,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.emitter.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: 3 / 4,
             root: root,
-            containerRect: {
-                x: 0,
-                y: 0,
-                width: rect.width,
-                height: rect.height,
-            },
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
         };
@@ -254,20 +253,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 });
     }
@@ -320,15 +315,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);
     }
@@ -400,7 +386,12 @@ export class BoxManager {
         this.teleBoxManager.update(id, { zIndex }, skipUpdate);
     }
 
+    public setRoot(root: HTMLElement) {
+        this.teleBoxManager._root$.setValue(root);
+    }
+
     public destroy() {
+        this.sideEffectManager.flushAll();
         this.teleBoxManager.destroy();
     }
 }

package/src/Cursor/Cursor.ts

@@ -1,5 +1,4 @@
 import App from "./Cursor.svelte";
-import { ApplianceMap } from "./icons";
 import { ApplianceNames } from "white-web-sdk";
 import { findMemberByUid } from "../Helper";
 import { omit } from "lodash";
@@ -159,8 +158,9 @@ export class Cursor {
 
     private getIcon() {
         if (this.member) {
-            const applianceSrc = ApplianceMap[this.memberApplianceName || ApplianceNames.shape];
-            return applianceSrc || ApplianceMap[ApplianceNames.shape];
+            const icons = this.cursorManager.applianceIcons;
+            const applianceSrc = icons[this.memberApplianceName || ApplianceNames.shape];
+            return applianceSrc || icons[ApplianceNames.shape];
         }
     }
 

package/src/Cursor/index.ts

@@ -5,10 +5,11 @@ import { emitter } from "../InternalEmitter";
 import { SideEffectManager } from "side-effect-manager";
 import { throttle } from "lodash";
 import { WindowManager } from "../index";
-import type { CursorMovePayload } from "../index";
+import type { CursorMovePayload , ApplianceIcons} from "../index";
 import type { PositionType } from "../AttributesDelegate";
 import type { Point, RoomMember, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
+import { ApplianceMap } from "./icons";
 
 export type EventType = {
     type: PositionType;
@@ -20,6 +21,7 @@ export type MoveCursorParams = {
     x: number;
     y: number;
 };
+
 export class CursorManager {
     public containerRect?: DOMRect;
     public wrapperRect?: DOMRect;
@@ -28,12 +30,13 @@ export class CursorManager {
     private mainViewElement?: HTMLDivElement;
     private sideEffectManager = new SideEffectManager();
     private store = this.manager.store;
+    public applianceIcons: ApplianceIcons = ApplianceMap;
 
-    constructor(private manager: AppManager, private enableCursor: boolean) {
+    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);
@@ -42,6 +45,9 @@ export class CursorManager {
         this.sideEffectManager.add(() => {
             return emitter.on("playgroundSizeChange", () => this.updateContainerRect());
         });
+        if (applianceIcons) {
+            this.applianceIcons = { ...ApplianceMap, ...applianceIcons };
+        }
     }
 
     private onCursorMove = (payload: CursorMovePayload) => {
@@ -59,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;
@@ -163,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";
 
 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 = () => {