@netless/window-manager 0.4.30 → 0.4.33

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

@@ -2,6 +2,7 @@ import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce } from "lodash";
 import { TELE_BOX_STATE, TeleBoxCollector, TeleBoxManager } from "@netless/telebox-insider";
 import { WindowManager } from "./index";
+import type { BoxEmitterType } from "./BoxEmitter";
 import type { AddAppOptions, AppInitState } from "./index";
 import type {
     TeleBoxManagerUpdateConfig,
@@ -51,6 +52,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 +64,7 @@ export const createBoxManager = (
     manager: WindowManager,
     callbacks: CallbacksType,
     emitter: EmitterType,
+    boxEmitter: BoxEmitterType,
     options: CreateTeleBoxManagerConfig
 ) => {
     return new BoxManager(
@@ -76,6 +79,7 @@ export const createBoxManager = (
             setAppFocus: (appId: string) => manager.appManager?.store.setAppFocus(appId, true),
             callbacks,
             emitter,
+            boxEmitter
         },
         options
     );
@@ -88,7 +92,7 @@ export class BoxManager {
         private context: BoxManagerContext,
         private createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ) {
-        const { emitter, callbacks } = context;
+        const { emitter, callbacks, boxEmitter } = context;
         this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
 
         // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
@@ -123,19 +127,19 @@ export class BoxManager {
         });
         this.teleBoxManager.events.on("removed", boxes => {
             boxes.forEach(box => {
-                emitter.emit("close", { appId: box.id });
+                boxEmitter.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 });
+                boxEmitter.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", {
+                boxEmitter.emit("resize", {
                     appId: box.id,
                     width: box.intrinsicWidth,
                     height: box.intrinsicHeight,
@@ -145,7 +149,7 @@ export class BoxManager {
         this.teleBoxManager.events.on("focused", box => {
             if (box) {
                 if (this.canOperate) {
-                    emitter.emit("focus", { appId: box.id });
+                    boxEmitter.emit("focus", { appId: box.id });
                 } else {
                     this.teleBoxManager.blurBox(box.id);
                 }
@@ -221,7 +225,7 @@ export class BoxManager {
         const box = this.teleBoxManager.queryOne({ id: appId });
         if (box) {
             if (box.state === TELE_BOX_STATE.Maximized) {
-                this.context.emitter.emit("resize", {
+                this.context.boxEmitter.emit("resize", {
                     appId: appId,
                     x: box.x,
                     y: box.y,

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,8 +30,9 @@ 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) {
@@ -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) => {

package/src/Helper.ts

@@ -1,4 +1,5 @@
-import { getVersionNumber } from "./Utils/Common";
+import { getVersionNumber, wait } from "./Utils/Common";
+import { log } from "./Utils/log";
 import { REQUIRE_VERSION } from "./constants";
 import { WhiteVersion } from "white-web-sdk";
 import { WhiteWebSDKInvalidError } from "./Utils/error";
@@ -45,3 +46,18 @@ export const findMemberByUid = (room: Room | undefined, uid: string) => {
     const roomMembers = room?.state.roomMembers;
     return roomMembers?.find(member => member.payload?.uid === uid);
 };
+
+export const createInvisiblePlugin = async (room: Room) => {
+    try {
+        const manager = (await room.createInvisiblePlugin(WindowManager, {})) as WindowManager;
+        return manager;
+    } catch (error) {
+        // 如果有两个用户同时调用 WindowManager.mount 有概率出现这个错误
+        if (error.message === `invisible plugin "WindowManager" exits`) {
+            await wait(200);
+            return room.getInvisiblePlugin(WindowManager.kind) as WindowManager;
+        } else {
+            log("createInvisiblePlugin failed", error);
+        }
+    }
+};

package/src/InternalEmitter.ts

@@ -8,10 +8,6 @@ export type RemoveSceneParams = {
 export type EmitterEvent = {
     onCreated: undefined;
     InitReplay: AppInitState;
-    move: { appId: string; x: number; y: number };
-    focus: { appId: string };
-    close: { appId: string };
-    resize: { appId: string; width: number; height: number; x?: number; y?: number };
     error: Error;
     seekStart: undefined;
     seek: number;

package/src/ReconnectRefresher.ts

@@ -4,6 +4,7 @@ import { RoomPhase } from "white-web-sdk";
 import type { Room } from "white-web-sdk";
 import type { EmitterType } from "./InternalEmitter";
 import { EnsureReconnectEvent } from "./constants";
+import { wait } from "./Utils/Common";
 
 export type ReconnectRefresherContext = {
     emitter: EmitterType;
@@ -41,19 +42,24 @@ export class ReconnectRefresher {
         this.ctx = ctx;
     }
 
-    private onPhaseChanged = (phase: RoomPhase) => {
+    private onPhaseChanged = async (phase: RoomPhase) => {
         if (phase === RoomPhase.Reconnecting) {
             this.ctx.emitter.emit("startReconnect");
         }
         if (phase === RoomPhase.Connected && this.phase === RoomPhase.Reconnecting) {
-            this.room?.dispatchMagixEvent(EnsureReconnectEvent, {});
+            if (this.room?.isWritable) {
+                this.room?.dispatchMagixEvent(EnsureReconnectEvent, {});
+            } else {
+                await wait(500);
+                this.onReconnected();
+            }
         }
         this.phase = phase;
     };
 
     private onReconnected = debounce(() => {
         this._onReconnected();
-    }, 3000);
+    }, 1000);
 
     private _onReconnected = () => {
         log("onReconnected refresh reactors");

package/src/Utils/AppCreateQueue.ts

@@ -1,8 +1,7 @@
 import { callbacks } from "../callback";
 import { SETUP_APP_DELAY } from "../constants";
-import type { AppProxy } from "../App";
 
-export type Invoker = () => Promise<AppProxy | undefined>;
+export type Invoker<T = any> = () => Promise<T | undefined>;
 
 export class AppCreateQueue {
     private list: Invoker[] = [];
@@ -16,7 +15,7 @@ export class AppCreateQueue {
         }, 50);
     }
 
-    public push(item: Invoker) {
+    public push<T>(item: Invoker<T>) {
         this.list.push(item);
         this.invoke();
         if (this.timer === undefined && this.list.length > 0) {