@netless/window-manager 1.0.0-canary.8 → 1.0.0

package/src/AppManager.ts

@@ -3,19 +3,18 @@ import { AppCreateQueue } from "./Utils/AppCreateQueue";
 import { AppListeners } from "./AppListener";
 import { AppProxy } from "./App";
 import { appRegister } from "./Register";
-import { autorun, isPlayer, isRoom, ScenePathType, toJS } from "white-web-sdk";
+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";
+import { internalEmitter } from "./InternalEmitter";
 import { Fields, store } from "./AttributesDelegate";
 import { log } from "./Utils/log";
 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";
@@ -38,6 +37,7 @@ import type {
     ScenesCallbacksNode,
     SceneState,
     RoomState,
+    MemberState,
 } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
 import type {
@@ -47,7 +47,6 @@ import type {
     BoxResizePayload,
     BoxStateChangePayload,
 } from "./BoxEmitter";
-import type { Member } from "./Helper";
 
 export class AppManager {
     public displayer: Displayer;
@@ -90,29 +89,27 @@ export class AppManager {
 
         this.refresher = reconnectRefresher;
         this.refresher.setRoom(this.room);
-        this.refresher.setContext({ emitter });
-
-        this.sideEffectManager.add(() => {
-            return () => {
-                this.appCreateQueue.destroy();
-                this.mainViewProxy.destroy();
-                this.refresher?.destroy();
-                this.viewManager.destroy();
-                this.boxManager?.destroy();
-                this.callbacksNode?.dispose();
-            };
+        this.refresher.setContext({ emitter: internalEmitter });
+
+        this.sideEffectManager.addDisposer(() => {
+            this.appCreateQueue.destroy();
+            this.mainViewProxy.destroy();
+            this.refresher.destroy();
+            this.viewManager.destroy();
+            this.boxManager?.destroy();
+            this.callbacksNode?.dispose();
         });
 
-        emitter.once("onCreated").then(() => this.onCreated());
-        emitter.on("onReconnected", () => this.onReconnected());
+        internalEmitter.once("onCreated").then(() => this.onCreated());
+        internalEmitter.on("onReconnected", () => this.onReconnected());
 
         if (isPlayer(this.displayer)) {
-            emitter.on("seekStart", this.onPlayerSeekStart);
-            emitter.on("seek", this.onPlayerSeekDone);
+            internalEmitter.on("seekStart", this.onPlayerSeekStart);
+            internalEmitter.on("seek", this.onPlayerSeekDone);
         }
 
-        emitter.on("removeScenes", this.onRemoveScenes);
-        emitter.on("setReadonly", this.onReadonlyChanged);
+        internalEmitter.on("removeScenes", this.onRemoveScenes);
+        internalEmitter.on("setReadonly", this.onReadonlyChanged);
 
         this.createRootDirScenesCallback();
 
@@ -121,6 +118,10 @@ export class AppManager {
         });
     }
 
+    public getMemberState(): MemberState {
+        return this.room?.state.memberState || ({ strokeColor: [0, 0, 0] } as MemberState);
+    }
+
     private onRemoveScenes = async (params: RemoveSceneParams) => {
         const { scenePath } = params;
         // 如果移除根目录就把 scenePath 设置为初始值
@@ -162,7 +163,7 @@ export class AppManager {
         }
         // 删除了根目录的 scenes 之后 mainview 需要重新绑定, 否则主白板会不能渲染
         this.mainViewProxy.rebind();
-        emitter.emit("rootDirRemoved");
+        internalEmitter.emit("rootDirRemoved");
         this.updateRootDirRemoving(false);
     }
 
@@ -193,7 +194,7 @@ export class AppManager {
             onAddScene: this.onSceneChange,
             onRemoveScene: async (node, name) => {
                 await this.onSceneChange(node);
-                emitter.emit("rootDirSceneRemoved", name);
+                internalEmitter.emit("rootDirSceneRemoved", name);
             },
         });
         if (this.callbacksNode) {
@@ -216,7 +217,7 @@ export class AppManager {
             }
         }, 100);
         return new Promise<boolean>((resolve, reject) => {
-            emitter
+            internalEmitter
                 .once("rootDirSceneRemoved")
                 .then(name => {
                     if (name === scene) {
@@ -246,7 +247,7 @@ export class AppManager {
     private emitMainViewScenesChange = (length: number) => {
         return Promise.all([
             callbacks.emit("mainViewScenesLengthChange", length),
-            emitter.emit("changePageState"),
+            internalEmitter.emit("changePageState"),
         ]);
     };
 
@@ -290,6 +291,14 @@ export class AppManager {
         return this.mainViewProxy.view;
     }
 
+    public get polling() {
+        return this.mainViewProxy.polling;
+    }
+
+    public set polling(b: boolean) {
+        this.mainViewProxy.polling = b;
+    }
+
     public get focusApp() {
         if (this.store.focus) {
             return this.appProxies.get(this.store.focus);
@@ -300,10 +309,6 @@ 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) {
@@ -315,7 +320,7 @@ export class AppManager {
 
     private async onCreated() {
         await this.attributesUpdateCallback(this.attributes.apps);
-        emitter.emit("updateManagerRect");
+        internalEmitter.emit("updateManagerRect");
         boxEmitter.on("move", this.onBoxMove);
         boxEmitter.on("resize", this.onBoxResize);
         boxEmitter.on("focus", this.onBoxFocus);
@@ -324,31 +329,31 @@ export class AppManager {
 
         this.addAppsChangeListener();
         this.addAppCloseListener();
-        this.refresher?.add("maximized", () => {
+        this.refresher.add("maximized", () => {
             return autorun(() => {
                 const maximized = this.attributes.maximized;
                 this.boxManager?.setMaximized(Boolean(maximized));
             });
         });
-        this.refresher?.add("minimized", () => {
+        this.refresher.add("minimized", () => {
             return autorun(() => {
                 const minimized = this.attributes.minimized;
                 this.onMinimized(minimized);
             });
         });
-        this.refresher?.add("mainViewIndex", () => {
+        this.refresher.add("mainViewIndex", () => {
             return autorun(() => {
                 const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
                 this.onMainViewIndexChange(mainSceneIndex);
             });
         });
-        this.refresher?.add("focusedChange", () => {
+        this.refresher.add("focusedChange", () => {
             return autorun(() => {
                 const focused = get(this.attributes, "focus");
                 this.onFocusChange(focused);
             });
         });
-        this.refresher?.add("registeredChange", () => {
+        this.refresher.add("registeredChange", () => {
             return autorun(() => {
                 const registered = get(this.attributes, Fields.Registered);
                 this.onRegisteredChange(registered);
@@ -379,6 +384,7 @@ export class AppManager {
             x: payload.x,
             y: payload.y,
         });
+        callbacks.emit("onBoxMove", payload);
     };
 
     private onBoxResize = (payload: BoxResizePayload) => {
@@ -388,11 +394,13 @@ export class AppManager {
                 width: payload.width,
                 height: payload.height,
             });
+            callbacks.emit("onBoxResize", payload);
         }
     };
 
     private onBoxFocus = (payload: BoxFocusPayload) => {
         this.windowManger.safeSetAttributes({ focus: payload.appId });
+        callbacks.emit("onBoxFocus", payload);
     };
 
     private onBoxClose = (payload: BoxClosePayload) => {
@@ -400,14 +408,16 @@ export class AppManager {
         if (appProxy) {
             appProxy.destroy(false, true, true, payload.error);
         }
+        callbacks.emit("onBoxClose", payload);
     };
 
     private onBoxStateChange = (payload: BoxStateChangePayload) => {
         this.dispatchInternalEvent(Events.AppBoxStateChange, payload);
+        callbacks.emit("onBoxStateChange", payload);
     };
 
     public addAppsChangeListener = () => {
-        this.refresher?.add("apps", () => {
+        this.refresher.add("apps", () => {
             return safeListenPropsUpdated(
                 () => this.attributes.apps,
                 () => {
@@ -418,7 +428,7 @@ export class AppManager {
     };
 
     public addAppCloseListener = () => {
-        this.refresher?.add("appsClose", () => {
+        this.refresher.add("appsClose", () => {
             return onObjectRemoved(this.attributes.apps, () => {
                 this.onAppDelete(this.attributes.apps);
             });
@@ -428,7 +438,7 @@ export class AppManager {
     private onMainViewIndexChange = (index: number) => {
         if (index !== undefined && this._prevSceneIndex !== index) {
             callbacks.emit("mainViewSceneIndexChange", index);
-            emitter.emit("changePageState");
+            internalEmitter.emit("changePageState");
             if (this.callbacksNode) {
                 this.updateSceneState(this.callbacksNode);
             }
@@ -439,7 +449,7 @@ export class AppManager {
     private onFocusChange = (focused: string | undefined) => {
         if (this._prevFocused !== focused) {
             callbacks.emit("focusedChange", focused);
-            emitter.emit("focusedChange", { focused, prev: this._prevFocused });
+            internalEmitter.emit("focusedChange", { focused, prev: this._prevFocused });
             this._prevFocused = focused;
             if (focused !== undefined) {
                 this.boxManager?.focusBox({ appId: focused });
@@ -459,6 +469,17 @@ export class AppManager {
         100
     );
 
+    private _appIds: string[] = [];
+    public notifyAppsChange(appIds: string[]): void {
+        if (
+            this._appIds.length !== appIds.length ||
+            !this._appIds.every(id => appIds.includes(id))
+        ) {
+            this._appIds = appIds;
+            callbacks.emit("appsChange", appIds);
+        }
+    }
+
     /**
      * 插件更新 attributes 时的回调
      *
@@ -471,13 +492,19 @@ export class AppManager {
             if (appIds.length === 0) {
                 this.appCreateQueue.emitReady();
             }
-            const appsWithCreatedAt = appIds.map(appId => {
-                return {
-                    id: appId,
-                    createdAt: apps[appId].createdAt,
-                };
-            });
-            for (const { id } of orderBy(appsWithCreatedAt, "createdAt", "asc")) {
+            const appsWithCreatedAt = orderBy(
+                appIds.map(appId => {
+                    return {
+                        id: appId,
+                        createdAt: apps[appId].createdAt,
+                    };
+                }),
+                "createdAt",
+                "asc"
+            );
+            const orderedAppIds = appsWithCreatedAt.map(({ id }) => id);
+            this.notifyAppsChange(orderedAppIds);
+            for (const id of orderedAppIds) {
                 if (!this.appProxies.has(id) && !this.appStatus.has(id)) {
                     const app = apps[id];
                     try {
@@ -569,7 +596,8 @@ export class AppManager {
         if (!mainView.focusScenePath) {
             this.setMainViewFocusPath();
         }
-        emitter.emit("mainViewMounted");
+        internalEmitter.emit("mainViewMounted");
+        callbacks.emit("onMainViewMounted", mainView);
     }
 
     public setMainViewFocusPath(scenePath?: string) {
@@ -652,26 +680,10 @@ export class AppManager {
     }
 
     private displayerStateListener = (state: Partial<RoomState>) => {
-        const sceneState = state.sceneState;
-        if (sceneState) {
-            const scenePath = sceneState.scenePath;
-            this.appProxies.forEach(appProxy => {
-                if (appProxy.scenePath && scenePath.startsWith(appProxy.scenePath)) {
-                    appProxy.emitAppSceneStateChange(sceneState);
-                    appProxy.setFullPath(scenePath);
-                }
-            });
-        }
         this.appProxies.forEach(appProxy => {
             appProxy.appEmitter.emit("roomStateChange", state);
         });
-        if (state.roomMembers) {
-            emitter.emit("roomMembersChange", this.members);
-        }
-        emitter.emit("observerIdChange", this.displayer.observerId);
-        if (state.memberState) {
-            emitter.emit("memberStateChange", toJS(state.memberState));
-        }
+        internalEmitter.emit("observerIdChange", this.displayer.observerId);
     };
 
     public displayerWritableListener = (isReadonly: boolean) => {
@@ -686,15 +698,7 @@ export class AppManager {
         this.appProxies.forEach(appProxy => {
             appProxy.emitAppIsWritableChange();
         });
-        if (isWritable === true) {
-            this.mainView.disableCameraTransform = false;
-            if (this.room && this.room.disableSerialization === true) {
-                this.room.disableSerialization = false;
-            }
-        } else {
-            this.mainView.disableCameraTransform = true;
-        }
-        emitter.emit("writableChange", isWritable);
+        internalEmitter.emit("writableChange", isWritable);
     };
 
     public safeSetAttributes(attributes: any) {
@@ -758,7 +762,7 @@ export class AppManager {
                 const success = this.setMainViewFocusPath(scenePath);
                 if (success) {
                     this.store.setMainViewScenePath(scenePath);
-                    this.safeSetAttributes({ _mainSceneIndex: index });
+                    this.store.setMainViewSceneIndex(index);
                     this.dispatchSetMainViewScenePath(scenePath);
                 }
             } else {
@@ -769,6 +773,7 @@ export class AppManager {
 
     private dispatchSetMainViewScenePath(scenePath: string): void {
         this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath: scenePath });
+        callbacks.emit("mainViewScenePathChange", scenePath);
         // 兼容 15 的 SDK, 需要 room 的当前 ScenePath
         setScenePath(this.room, scenePath);
     }
@@ -796,12 +801,16 @@ export class AppManager {
     }
 
     public async onReconnected() {
+        this.attributesUpdateCallback(this.attributes.apps);
         const appProxies = Array.from(this.appProxies.values());
         const reconnected = appProxies.map(appProxy => {
             return appProxy.onReconnected();
         });
         this.mainViewProxy.onReconnect();
         await Promise.all(reconnected);
+        if (this.callbacksNode) {
+            this.onSceneChange(this.callbacksNode);
+        }
     }
 
     public notifyContainerRectUpdate(rect: TeleBoxRect) {
@@ -826,7 +835,7 @@ export class AppManager {
         this.displayer.callbacks.off("onEnableWriteNowChanged", this.displayerWritableListener);
         this.appListeners.removeListeners();
         boxEmitter.clearListeners();
-        emitter.clearListeners();
+        internalEmitter.clearListeners();
         if (this.appProxies.size) {
             this.appProxies.forEach(appProxy => {
                 appProxy.destroy(true, false, true);

package/src/AttributesDelegate.ts

@@ -1,5 +1,5 @@
 import { AppAttributes } from "./constants";
-import { get, pick } from "lodash";
+import { get, isObject, pick } from "lodash";
 import { setViewFocusScenePath } from "./Utils/Common";
 import type { AddAppParams, AppSyncAttributes } from "./index";
 import type { Camera, Size, View } from "white-web-sdk";
@@ -18,8 +18,7 @@ export enum Fields {
     CursorState = "cursorState",
     FullPath = "fullPath",
     Registered = "registered",
-    Camera = "camera",
-    Size = "size",
+    IframeBridge = "iframeBridge",
 }
 
 export type Apps = {
@@ -39,18 +38,13 @@ export type StoreContext = {
     getAttributes: () => any;
     safeUpdateAttributes: (keys: string[], value: any) => void;
     safeSetAttributes: (attributes: any) => void;
-}
-
-export type ICamera = Camera & { 
-    id: string; // room uid
 };
 
-export type ISize = Size & {
-    id: string; // room uid
-};
+export type ICamera = Camera & { id: string };
 
-export class AttributesDelegate {
+export type ISize = Size & { id: string };
 
+export class AttributesDelegate {
     constructor(private context: StoreContext) {}
 
     public setContext(context: StoreContext) {
@@ -114,10 +108,6 @@ export class AttributesDelegate {
         }
     }
 
-    public updateAppAttributes(appId: string, key: string, value: any) {
-        this.context.safeUpdateAttributes([Fields.Apps, appId, key], value);
-    }
-
     public cleanAppAttributes(id: string) {
         this.context.safeUpdateAttributes([Fields.Apps, id], undefined);
         this.context.safeSetAttributes({ [id]: undefined });
@@ -159,11 +149,11 @@ export class AttributesDelegate {
         this.context.safeSetAttributes({ _mainSceneIndex: index });
     }
 
-    public getMainViewCamera(): ICamera {
+    public getMainViewCamera(): MainViewCamera {
         return get(this.attributes, [Fields.MainViewCamera]);
     }
 
-    public getMainViewSize(): ISize {
+    public getMainViewSize(): MainViewSize {
         return get(this.attributes, [Fields.MainViewSize]);
     }
 
@@ -172,10 +162,12 @@ export class AttributesDelegate {
     }
 
     public setMainViewSize(size: ISize) {
+        if (size.width === 0 || size.height === 0) return;
         this.context.safeSetAttributes({ [Fields.MainViewSize]: { ...size } });
     }
 
     public setMainViewCameraAndSize(camera: ICamera, size: ISize) {
+        if (size.width === 0 || size.height === 0) return;
         this.context.safeSetAttributes({
             [Fields.MainViewCamera]: { ...camera },
             [Fields.MainViewSize]: { ...size },
@@ -188,7 +180,7 @@ export class AttributesDelegate {
         } else {
             this.context.safeSetAttributes({ [Fields.Focus]: undefined });
         }
-    }
+    };
 
     public updateCursor(uid: string, position: Position) {
         if (!get(this.attributes, [Fields.Cursors])) {
@@ -222,21 +214,49 @@ export class AttributesDelegate {
             setViewFocusScenePath(mainView, scenePath);
         }
     }
+
+    public getIframeBridge() {
+        return get(this.attributes, [Fields.IframeBridge]);
+    }
+
+    public setIframeBridge(data: any) {
+        if (isObject(data)) {
+            const oldState = this.getIframeBridge();
+            for (const key in data) {
+                const value = (data as any)[key];
+                if (oldState[key] !== value) {
+                    this.context.safeUpdateAttributes([Fields.IframeBridge, key], value);
+                }
+            }
+        }
+    }
 }
 
+export type MainViewSize = {
+    id: string;
+    width: number;
+    height: number;
+};
+
+export type MainViewCamera = {
+    id: string;
+    centerX: number;
+    centerY: number;
+    scale: number;
+};
+
 export type Cursors = {
     [key: string]: Cursor;
 };
 
-
 export const store = new AttributesDelegate({
     getAttributes: () => {
-        throw new Error("getAttributes not implemented")
+        throw new Error("getAttributes not implemented");
     },
     safeSetAttributes: () => {
-        throw new Error("safeSetAttributes not implemented")
+        throw new Error("safeSetAttributes not implemented");
     },
     safeUpdateAttributes: () => {
-        throw new Error("safeUpdateAttributes not implemented")
+        throw new Error("safeUpdateAttributes not implemented");
     },
 });

package/src/BoxEmitter.ts

@@ -1,19 +1,25 @@
 import type { TELE_BOX_STATE } from "@netless/telebox-insider";
 import Emittery from "emittery";
 
-export type BoxMovePayload = { appId: string, x: number; y: number };
+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 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
-}
+    boxStateChange: BoxStateChangePayload;
+};
 
 export type BoxEmitterType = Emittery<BoxEvent>;
 export const boxEmitter: BoxEmitterType = new Emittery();