@netless/window-manager 0.4.0-canary.0 → 0.4.0-canary.4

package/src/index.ts

@@ -6,7 +6,7 @@ import { AppManager } from "./AppManager";
 import { appRegister } from "./Register";
 import { createBoxManager } from "./BoxManager";
 import { CursorManager } from "./Cursor";
-import { DEFAULT_CONTAINER_RATIO, REQUIRE_VERSION } from "./constants";
+import { DEFAULT_CONTAINER_RATIO, Events, REQUIRE_VERSION } from "./constants";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { isNull, isObject } from "lodash";
@@ -58,6 +58,7 @@ import type { AppListeners } from "./AppListener";
 import type { NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxColorScheme, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./AppProxy";
+import { ReconnectRefresher } from "./ReconnectRefresher";
 
 const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 
@@ -81,14 +82,14 @@ export type AddAppOptions = {
 
 export type setAppOptions = AddAppOptions & { appOptions?: any };
 
-export type AddAppParams = {
+export type AddAppParams<TAttributes = any> = {
     kind: string;
     // app 地址(本地 app 不需要传)
     src?: string;
     // 窗口配置
     options?: AddAppOptions;
     // 初始化 attributes
-    attributes?: any;
+    attributes?: TAttributes;
 };
 
 export type BaseInsertParams = {
@@ -139,6 +140,7 @@ export type EmitterEvent = {
     observerIdChange: number;
     boxStateChange: string;
     playgroundSizeChange: DOMRect;
+    onReconnected: void;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;
@@ -171,6 +173,8 @@ export type MountParams = {
 export type CallbacksType = Emittery<PublicEvent>;
 export const callbacks: CallbacksType = new Emittery();
 
+export const reconnectRefresher = new ReconnectRefresher({ emitter });
+
 export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static kind = "WindowManager";
     public static displayer: Displayer;
@@ -181,7 +185,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
     private static isCreated = false;
 
-    public version = "0.4.0-canary.0";
+    public version = "0.4.0-canary.4";
 
     public appListeners?: AppListeners;
 
@@ -254,7 +258,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         }
 
         if (params.container) {
-            manager.bindContainer(params.container, params.collectorContainer);
+            manager.bindContainer(params.container);
         }
 
         replaceRoomFunction(room, manager);
@@ -317,32 +321,50 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             playground.appendChild(style);
         }
         manager.observePlaygroundSize(playground, sizer, wrapper);
+        WindowManager.wrapper = wrapper;
         return mainViewElement;
     }
 
-    public bindContainer(container: HTMLElement, collectorContainer?: HTMLElement) {
-        if (WindowManager.params) {
-            const params = WindowManager.params;
-            const mainViewElement = WindowManager.initContainer(
-                this,
-                container,
-                params.chessboard,
-                params.overwriteStyles
-            );
-            const boxManager = createBoxManager(this, callbacks, emitter, {
-                collectorContainer: collectorContainer,
-                collectorStyles: params.collectorStyles,
-                prefersColorScheme: params.prefersColorScheme,
-            });
-            this.boxManager = boxManager;
-            this.appManager?.setBoxManager(boxManager);
-            this.bindMainView(mainViewElement, params.disableCameraTransform);
-            this.boxManager.updateManagerRect();
-            this.appManager?.refresh();
-            this.appManager?.resetMaximized();
-            this.appManager?.resetMinimized();
-            if (WindowManager.wrapper) {
-                this.cursorManager?.setupWrapper(WindowManager.wrapper);
+    public bindContainer(container: HTMLElement) {
+        if (WindowManager.isCreated && WindowManager.container) {
+            if (WindowManager.container.firstChild) {
+                container.appendChild(WindowManager.container.firstChild);
+            }
+        } else {
+            if (WindowManager.params) {
+                const params = WindowManager.params;
+                const mainViewElement = WindowManager.initContainer(
+                    this,
+                    container,
+                    params.chessboard,
+                    params.overwriteStyles
+                );
+                const boxManager = createBoxManager(this, callbacks, emitter, {
+                    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);
+                }
+            }
+        }
+        this.boxManager?.updateManagerRect();
+        this.appManager?.refresh();
+        this.appManager?.resetMaximized();
+        this.appManager?.resetMinimized();
+        WindowManager.container = container;
+    }
+
+    public bindCollectorContainer(container: HTMLElement) {
+        if (WindowManager.isCreated && this.boxManager) {
+            this.boxManager.setCollectorContainer(container);
+        } else {
+            if (WindowManager.params) {
+                WindowManager.params.collectorContainer = container;
             }
         }
     }
@@ -356,30 +378,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return appRegister.register(params);
     }
 
-    public static setContainer(container: HTMLElement) {
-        if (this.isCreated && WindowManager.container) {
-            if (WindowManager.container.firstChild) {
-                container.appendChild(WindowManager.container.firstChild);
-            }
-        }
-        WindowManager.container = container;
-    }
-
-    public static setCollectorContainer(container: HTMLElement) {
-        const manager = this.displayer.getInvisiblePlugin(this.kind) as WindowManager;
-        if (this.isCreated && manager) {
-            manager.boxManager?.setCollectorContainer(container);
-        } else {
-            if (this.params) {
-                this.params.collectorContainer = container;
-            }
-        }
-    }
-
     /**
      * 创建一个 app 至白板
      */
-    public async addApp(params: AddAppParams): Promise<string | undefined> {
+    public async addApp<T = any>(params: AddAppParams<T>): Promise<string | undefined> {
         if (this.appManager) {
             if (!params.kind || typeof params.kind !== "string") {
                 throw new ParamsInvalidError();
@@ -593,6 +595,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             }>
     ): void {
         this.mainView.moveCameraToContain(rectangle);
+        this.appManager?.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
+        setTimeout(() => {
+            this.appManager?.mainViewProxy.setCameraAndSize();
+        }, 1000);
     }
 
     public convertToPointInWorld(point: Point): Point {