@netless/window-manager 0.4.31 → 1.0.0-canary.1

package/src/index.ts

@@ -3,7 +3,6 @@ import { AppManager } from "./AppManager";
 import { appRegister } from "./Register";
 import { callbacks } from "./callback";
 import { checkVersion, setupWrapper } from "./Helper";
-import { ContainerResizeObserver } from "./ContainerResizeObserver";
 import { createBoxManager } from "./BoxManager";
 import { CursorManager } from "./Cursor";
 import { DEFAULT_CONTAINER_RATIO, Events, INIT_DIR, ROOT_DIR } from "./constants";
@@ -29,13 +28,7 @@ import {
     wait,
 } from "./Utils/Common";
 import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
-import {
-    AppCreateError,
-    AppManagerNotInitError,
-    BindContainerRoomPhaseInvalidError,
-    InvalidScenePath,
-    ParamsInvalidError,
-} from "./Utils/error";
+import * as Errors from "./Utils/error";
 import type { Apps, Position } from "./AttributesDelegate";
 import type {
     Displayer,
@@ -54,7 +47,7 @@ import type {
     SceneState,
 } from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
-import type { NetlessApp, RegisterParams } from "./typings";
+import type { ApplianceIcons, NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxColorScheme, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
@@ -143,6 +136,7 @@ export type MountParams = {
     debug?: boolean;
     disableCameraTransform?: boolean;
     prefersColorScheme?: TeleBoxColorScheme;
+    applianceIcons?: ApplianceIcons;
 };
 
 export const reconnectRefresher = new ReconnectRefresher({ emitter });
@@ -150,7 +144,6 @@ export const reconnectRefresher = new ReconnectRefresher({ emitter });
 export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> implements PageController {
     public static kind = "WindowManager";
     public static displayer: Displayer;
-    public static wrapper?: HTMLElement;
     public static playground?: HTMLElement;
     public static container?: HTMLElement;
     public static debug = false;
@@ -173,7 +166,6 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     private boxManager?: BoxManager;
     private static params?: MountParams;
 
-    private containerResizeObserver?: ContainerResizeObserver;
     public containerSizeRatio = WindowManager.containerSizeRatio;
 
     constructor(context: InvisiblePluginContext) {
@@ -238,11 +230,17 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
 
         manager.appManager = new AppManager(manager);
         manager._pageState = new PageStateImpl(manager.appManager);
-        manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor));
+        manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor), params.applianceIcons);
         if (containerSizeRatio) {
             manager.containerSizeRatio = containerSizeRatio;
         }
-
+        manager.boxManager = createBoxManager(manager, callbacks, emitter, boxEmitter, {
+            collectorContainer: params.collectorContainer,
+            collectorStyles: params.collectorStyles,
+            prefersColorScheme: params.prefersColorScheme,
+            stageRatio: params.containerSizeRatio,
+        });
+        manager.appManager?.setBoxManager(manager.boxManager);
         if (params.container) {
             manager.bindContainer(params.container);
         }
@@ -288,31 +286,19 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     }
 
     private static initContainer(
-        manager: WindowManager,
         container: HTMLElement,
-        chessboard: boolean | undefined,
         overwriteStyles: string | undefined
     ) {
         if (!WindowManager.container) {
             WindowManager.container = container;
         }
-        const { playground, wrapper, sizer, mainViewElement } = setupWrapper(container);
+        const { playground, mainViewElement } = setupWrapper(container);
         WindowManager.playground = playground;
-        if (chessboard) {
-            sizer.classList.add("netless-window-manager-chess-sizer");
-        }
         if (overwriteStyles) {
             const style = document.createElement("style");
             style.textContent = overwriteStyles;
             playground.appendChild(style);
         }
-        manager.containerResizeObserver = ContainerResizeObserver.create(
-            playground,
-            sizer,
-            wrapper,
-            emitter
-        );
-        WindowManager.wrapper = wrapper;
         return mainViewElement;
     }
 
@@ -322,7 +308,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
 
     public bindContainer(container: HTMLElement) {
         if (isRoom(this.displayer) && this.room.phase !== RoomPhase.Connected) {
-            throw new BindContainerRoomPhaseInvalidError();
+            throw new Errors.BindContainerRoomPhaseInvalidError();
         }
         if (WindowManager.isCreated && WindowManager.container) {
             if (WindowManager.container.firstChild) {
@@ -332,24 +318,15 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             if (WindowManager.params) {
                 const params = WindowManager.params;
                 const mainViewElement = WindowManager.initContainer(
-                    this,
                     container,
-                    params.chessboard,
                     params.overwriteStyles
                 );
-                if (this.boxManager) {
-                    this.boxManager.destroy();
+                if (this.boxManager && WindowManager.playground) {
+                    this.boxManager.setRoot(WindowManager.playground);
                 }
-                const boxManager = createBoxManager(this, callbacks, emitter, boxEmitter, {
-                    collectorContainer: params.collectorContainer,
-                    collectorStyles: params.collectorStyles,
-                    prefersColorScheme: params.prefersColorScheme,
-                });
-                this.boxManager = boxManager;
-                this.appManager?.setBoxManager(boxManager);
                 this.bindMainView(mainViewElement, params.disableCameraTransform);
-                if (WindowManager.wrapper) {
-                    this.cursorManager?.setupWrapper(WindowManager.wrapper);
+                if (WindowManager.playground) {
+                    this.cursorManager?.setupWrapper(WindowManager.playground);
                 }
             }
         }
@@ -363,7 +340,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
 
     public bindCollectorContainer(container: HTMLElement) {
         if (WindowManager.isCreated && this.boxManager) {
-            this.boxManager.setCollectorContainer(container);
+            this.boxManager.setCollector(container);
         } else {
             if (WindowManager.params) {
                 WindowManager.params.collectorContainer = container;
@@ -408,19 +385,19 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
                 return this._addApp(params);
             }
         } else {
-            throw new AppManagerNotInitError();
+            throw new Errors.AppManagerNotInitError();
         }
     }
 
     private async _addApp<T = any>(params: AddAppParams<T>): Promise<string | undefined> {
         if (this.appManager) {
             if (!params.kind || typeof params.kind !== "string") {
-                throw new ParamsInvalidError();
+                throw new Errors.ParamsInvalidError();
             }
             const appImpl = await appRegister.appClasses.get(params.kind)?.();
             if (appImpl && appImpl.config?.singleton) {
                 if (this.appManager.appProxies.has(params.kind)) {
-                    throw new AppCreateError();
+                    throw new Errors.AppCreateError();
                 }
             }
             const isDynamicPPT = this.setupScenePath(params, this.appManager);
@@ -433,7 +410,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             const appId = await this.appManager.addApp(params, Boolean(isDynamicPPT));
             return appId;
         } else {
-            throw new AppManagerNotInitError();
+            throw new Errors.AppManagerNotInitError();
         }
     }
 
@@ -443,7 +420,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             const { scenePath, scenes } = params.options;
             if (scenePath) {
                 if (!isValidScenePath(scenePath)) {
-                    throw new InvalidScenePath();
+                    throw new Errors.InvalidScenePath();
                 }
                 const apps = Object.keys(this.apps || {});
                 for (const appId of apps) {
@@ -646,7 +623,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         if (this.appManager) {
             return this.appManager.mainViewProxy.view;
         } else {
-            throw new AppManagerNotInitError();
+            throw new Errors.AppManagerNotInitError();
         }
     }
 
@@ -654,7 +631,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         if (this.appManager) {
             return this.appManager.mainViewProxy.view.camera;
         } else {
-            throw new AppManagerNotInitError();
+            throw new Errors.AppManagerNotInitError();
         }
     }
 
@@ -662,7 +639,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         if (this.appManager) {
             return this.appManager.mainViewProxy.cameraState;
         } else {
-            throw new AppManagerNotInitError();
+            throw new Errors.AppManagerNotInitError();
         }
     }
 
@@ -674,7 +651,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         if (this.appManager) {
             return this.appManager.boxManager?.boxState;
         } else {
-            throw new AppManagerNotInitError();
+            throw new Errors.AppManagerNotInitError();
         }
     }
 
@@ -686,7 +663,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         if (this.appManager) {
             return this.appManager.boxManager?.prefersColorScheme;
         } else {
-            throw new AppManagerNotInitError();
+            throw new Errors.AppManagerNotInitError();
         }
     }
 
@@ -706,7 +683,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         if (this.appManager) {
             return this.appManager?.getMainViewSceneDir();
         } else {
-            throw new AppManagerNotInitError();
+            throw new Errors.AppManagerNotInitError();
         }
     }
 
@@ -731,7 +708,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             return this.appManager.sceneState!;
         } else {
-            throw new AppManagerNotInitError();
+            throw new Errors.AppManagerNotInitError();
         }
     }
 
@@ -739,7 +716,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         if (this._pageState) {
             return this._pageState.toObject();
         } else {
-            throw new AppManagerNotInitError();
+            throw new Errors.AppManagerNotInitError();
         }
     }
 
@@ -807,11 +784,9 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     }
 
     private _destroy() {
-        this.containerResizeObserver?.disconnect();
         this.appManager?.destroy();
         this.cursorManager?.destroy();
         WindowManager.container = undefined;
-        WindowManager.wrapper = undefined;
         WindowManager.isCreated = false;
         if (WindowManager.playground) {
             WindowManager.playground.parentNode?.removeChild(WindowManager.playground);

package/src/typings.ts

@@ -1,6 +1,7 @@
 import type Emittery from "emittery";
 import type {
     AnimationMode,
+    ApplianceNames,
     Displayer,
     DisplayerState,
     Player,
@@ -75,6 +76,8 @@ export type RegisterParams<AppOptions = any, SetupResult = any, Attributes = any
 
 export type AppListenerKeys = keyof AppEmitterEvent;
 
+export type ApplianceIcons = Partial<Record<ApplianceNames, string>>;
+
 export type { AppContext } from "./App/AppContext";
 export type { ReadonlyTeleBox, TeleBoxRect };
 export type { SceneState, SceneDefinition, View, AnimationMode, Displayer, Room, Player };

package/vite.config.js

@@ -39,7 +39,6 @@ export default defineConfig(({ mode }) => {
                 fileName: "index"
             },
             outDir: "dist",
-            sourcemap: true,
             rollupOptions: {
                 external: Object.keys({
                     ...omit(dependencies, ["@netless/telebox-insider"]),

package/dist/ContainerResizeObserver.d.ts

@@ -1,11 +0,0 @@
-import type { EmitterType } from "./InternalEmitter";
-export declare class ContainerResizeObserver {
-    private emitter;
-    private containerResizeObserver?;
-    private disposer?;
-    constructor(emitter: EmitterType);
-    static create(container: HTMLElement, sizer: HTMLElement, wrapper: HTMLDivElement, emitter: EmitterType): ContainerResizeObserver;
-    observePlaygroundSize(container: HTMLElement, sizer: HTMLElement, wrapper: HTMLDivElement): void;
-    updateSizer({ width, height }: DOMRectReadOnly, sizer: HTMLElement, wrapper: HTMLDivElement): void;
-    disconnect(): void;
-}