@netless/window-manager 1.0.0-canary.2 → 1.0.0-canary.22

package/src/App/type.ts

@@ -0,0 +1,22 @@
+
+export type AppState = {
+    id: string;
+    focus?: boolean;
+    SceneIndex?: number;
+    draggable?: boolean;
+    position?: {
+        x: number;
+        y: number;
+    }
+    ratio?: number;
+    resizable?: boolean;
+    size?: {
+        width: number;
+        height: number;
+    }
+    stageRatio?: number;
+    visible?: boolean;
+    zIndex?: number;
+    maximized: boolean | null;
+    minimized: boolean | null;
+}

package/src/AppManager.ts

@@ -3,7 +3,7 @@ import { AppCreateQueue } from "./Utils/AppCreateQueue";
 import { AppListeners } from "./AppListener";
 import { AppProxy } from "./App";
 import { appRegister } from "./Register";
-import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
+import { autorun, isPlayer, isRoom, ScenePathType, toJS } from "white-web-sdk";
 import { boxEmitter } from "./BoxEmitter";
 import { calculateNextIndex } from "./Page";
 import { callbacks } from "./callback";
@@ -18,6 +18,7 @@ import { RedoUndo } from "./RedoUndo";
 import { serializeRoomMembers } from "./Helper";
 import { SideEffectManager } from "side-effect-manager";
 import { ViewManager } from "./View/ViewManager";
+import { Val } from "value-enhancer";
 import type { SyncRegisterAppPayload } from "./Register";
 import type { RemoveSceneParams } from "./InternalEmitter";
 import {
@@ -29,15 +30,16 @@ import {
     removeScenes,
     setScenePath,
     setViewFocusScenePath,
+    wait,
 } from "./Utils/Common";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
 import type {
     Displayer,
-    DisplayerState,
     Room,
     ScenesCallbacksNode,
     SceneState,
+    RoomState,
 } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
 import type {
@@ -56,17 +58,17 @@ export class AppManager {
     public appStatus: Map<string, AppStatus> = new Map();
     public store = store;
     public mainViewProxy: MainViewProxy;
-    public refresher?: ReconnectRefresher;
+    public refresher: ReconnectRefresher;
     public isReplay = this.windowManger.isReplay;
     public mainViewScenesLength = 0;
 
     private appListeners: AppListeners;
     public boxManager?: BoxManager;
 
-    private _prevSceneIndex: number | undefined;
-    private _prevFocused: string | undefined;
     private callbacksNode: ScenesCallbacksNode | null = null;
     private appCreateQueue = new AppCreateQueue();
+    private sceneIndex$ = new Val<number | undefined>(undefined);
+    private focused$ = new Val<string | undefined>(undefined);
 
     private sideEffectManager = new SideEffectManager();
 
@@ -137,7 +139,7 @@ export class AppManager {
                 sceneName = this.callbacksNode?.scenes[nextIndex];
             }
             if (sceneName) {
-                this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
+                await this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
             }
             await this.setMainViewSceneIndex(nextIndex);
         } else {
@@ -152,7 +154,7 @@ export class AppManager {
      * 所以需要关掉所有开启了 view 的 app
      */
     public async onRootDirRemoved(needClose = true) {
-        this.setMainViewScenePath(INIT_DIR);
+        await this.setMainViewScenePath(INIT_DIR);
         this.createRootDirScenesCallback();
 
         for (const [id, appProxy] of this.appProxies.entries()) {
@@ -160,9 +162,9 @@ export class AppManager {
                 await this.closeApp(id, needClose);
             }
         }
-        // 删除了根目录的 scenes 之后 mainview 需要重新绑定, 否则主白板会不能渲染
+        // 删除了根目录的 scenes 之后 main-view 需要重新绑定, 否则主白板会不能渲染
         this.mainViewProxy.rebind();
-        emitter.emit("rootDirRemoved");
+        await emitter.emit("rootDirRemoved");
         this.updateRootDirRemoving(false);
     }
 
@@ -324,31 +326,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);
@@ -361,7 +363,7 @@ export class AppManager {
         }
         this.displayerWritableListener(!this.room?.isWritable);
         this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
-        this._prevFocused = this.attributes.focus;
+        this.focused$.setValue(this.attributes.focus);
 
         this.sideEffectManager.add(() => {
             const redoUndo = new RedoUndo({
@@ -426,27 +428,28 @@ export class AppManager {
     };
 
     private onMainViewIndexChange = (index: number) => {
-        if (index !== undefined && this._prevSceneIndex !== index) {
+        if (index !== undefined && this.sceneIndex$.value !== index) {
             callbacks.emit("mainViewSceneIndexChange", index);
             emitter.emit("changePageState");
             if (this.callbacksNode) {
                 this.updateSceneState(this.callbacksNode);
             }
-            this._prevSceneIndex = index;
+            this.sceneIndex$.setValue(index);
         }
     };
 
     private onFocusChange = (focused: string | undefined) => {
-        if (this._prevFocused !== focused) {
+        if (this.focused$.value !== focused) {
             callbacks.emit("focusedChange", focused);
-            emitter.emit("focusedChange", { focused, prev: this._prevFocused });
-            this._prevFocused = focused;
+            emitter.emit("focusedChange", { focused, prev: this.focused$.value });
+            this.focused$.setValue(focused);
             if (focused !== undefined) {
                 this.boxManager?.focusBox({ appId: focused });
                 // 确保 focus 修改的时候, appProxy 已经创建
                 setTimeout(() => {
                     const appProxy = this.appProxies.get(focused);
                     if (appProxy) {
+                        appProxy.onFocus();
                         appRegister.notifyApp(appProxy.kind, "focus", { appId: focused });
                     }
                 }, 0);
@@ -460,9 +463,9 @@ export class AppManager {
     );
 
     /**
-     * 插件更新 attributes 时的回调
+     * 插件更新 apps 时的回调
      *
-     * @param {*} attributes
+     * @param {*} apps
      * @memberof WindowManager
      */
     public async _attributesUpdateCallback(apps: any) {
@@ -536,6 +539,7 @@ export class AppManager {
 
     public setBoxManager(boxManager: BoxManager) {
         this.boxManager = boxManager;
+        this.mainViewProxy.createViewSync();
     }
 
     public resetMaximized() {
@@ -565,7 +569,10 @@ export class AppManager {
     public bindMainView(divElement: HTMLDivElement, disableCameraTransform: boolean) {
         const mainView = this.mainViewProxy.view;
         mainView.disableCameraTransform = disableCameraTransform;
-        mainView.divElement = divElement;
+        // 延迟挂载 mainView 的 dom, 避免因为同步 camera 的闪动
+        wait(30).then(() => {
+            mainView.divElement = divElement;
+        });
         if (!mainView.focusScenePath) {
             this.setMainViewFocusPath();
         }
@@ -651,7 +658,7 @@ export class AppManager {
         }
     }
 
-    private displayerStateListener = (state: Partial<DisplayerState>) => {
+    private displayerStateListener = (state: Partial<RoomState>) => {
         const sceneState = state.sceneState;
         if (sceneState) {
             const scenePath = sceneState.scenePath;
@@ -669,12 +676,15 @@ export class AppManager {
             emitter.emit("roomMembersChange", this.members);
         }
         emitter.emit("observerIdChange", this.displayer.observerId);
+        if (state.memberState) {
+            emitter.emit("memberStateChange", toJS(state.memberState));
+        }
     };
 
     public displayerWritableListener = (isReadonly: boolean) => {
         const isWritable = !isReadonly;
         const isManualWritable =
-            this.windowManger.readonly === undefined || this.windowManger.readonly === false;
+            this.windowManger.readonly === undefined || !this.windowManger.readonly;
         if (this.windowManger.readonly === undefined) {
             this.boxManager?.setReadonly(isReadonly);
         } else {
@@ -683,13 +693,10 @@ export class AppManager {
         this.appProxies.forEach(appProxy => {
             appProxy.emitAppIsWritableChange();
         });
-        if (isWritable === true) {
-            this.mainView.disableCameraTransform = false;
+        if (isWritable) {
             if (this.room && this.room.disableSerialization === true) {
                 this.room.disableSerialization = false;
             }
-        } else {
-            this.mainView.disableCameraTransform = true;
         }
         emitter.emit("writableChange", isWritable);
     };
@@ -831,7 +838,7 @@ export class AppManager {
         }
         callbacks.clearListeners();
         this.sideEffectManager.flushAll();
-        this._prevFocused = undefined;
-        this._prevSceneIndex = undefined;
+        this.sceneIndex$.destroy();
+        this.focused$.destroy();
     }
 }

package/src/AttributesDelegate.ts

@@ -2,7 +2,7 @@ import { AppAttributes } from "./constants";
 import { get, pick } from "lodash";
 import { setViewFocusScenePath } from "./Utils/Common";
 import type { AddAppParams, AppSyncAttributes } from "./index";
-import type { Camera, Size, View } from "white-web-sdk";
+import type { Size, View } from "white-web-sdk";
 import type { Cursor } from "./Cursor/Cursor";
 
 export enum Fields {
@@ -18,6 +18,8 @@ export enum Fields {
     CursorState = "cursorState",
     FullPath = "fullPath",
     Registered = "registered",
+    Camera = "camera",
+    Size = "size",
 }
 
 export type Apps = {
@@ -39,9 +41,16 @@ export type StoreContext = {
     safeSetAttributes: (attributes: any) => void;
 }
 
-export type ICamera = Camera & { id: string };
+export type ICamera =  & {
+    id: string; // room uid
+    centerX: number | null,
+    centerY: number | null,
+    scale: number
+};
 
-export type ISize = Size & { id: string };
+export type ISize = Size & {
+    id: string; // room uid
+};
 
 export class AttributesDelegate {
 
@@ -108,6 +117,10 @@ 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 });
@@ -149,11 +162,11 @@ export class AttributesDelegate {
         this.context.safeSetAttributes({ _mainSceneIndex: index });
     }
 
-    public getMainViewCamera(): MainViewCamera {
+    public getMainViewCamera(): ICamera {
         return get(this.attributes, [Fields.MainViewCamera]);
     }
 
-    public getMainViewSize(): MainViewSize {
+    public getMainViewSize(): ISize {
         return get(this.attributes, [Fields.MainViewSize]);
     }
 
@@ -214,19 +227,6 @@ export class AttributesDelegate {
     }
 }
 
-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;
 };

package/src/BoxManager.ts

@@ -1,9 +1,10 @@
 import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce } from "lodash";
+import { SideEffectManager } from "side-effect-manager";
 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 { AddAppOptions } from "./index";
 import type {
     TeleBoxManagerUpdateConfig,
     TeleBoxManagerCreateConfig,
@@ -18,7 +19,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";
+import type { AppState } from "./App/type";
 
 export { TELE_BOX_STATE };
 
@@ -47,11 +48,11 @@ export type CreateTeleBoxManagerConfig = {
     collectorStyles?: Partial<CSSStyleDeclaration>;
     prefersColorScheme?: TeleBoxColorScheme;
     stageRatio?: number;
+    highlightStage?: boolean;
 };
 
 export type BoxManagerContext = {
     safeSetAttributes: (attributes: any) => void;
-    getMainView: () => View;
     updateAppState: (appId: string, field: AppAttributes, value: any) => void;
     emitter: EmitterType;
     boxEmitter: BoxEmitterType;
@@ -72,7 +73,6 @@ export const createBoxManager = (
     return new BoxManager(
         {
             safeSetAttributes: (attributes: any) => manager.safeSetAttributes(attributes),
-            getMainView: () => manager.mainView,
             updateAppState: (...args) => manager.appManager?.store.updateAppState(...args),
             canOperate: () => manager.canOperate,
             notifyContainerRectUpdate: (rect: TeleBoxRect) =>
@@ -81,7 +81,7 @@ export const createBoxManager = (
             setAppFocus: (appId: string) => manager.appManager?.store.setAppFocus(appId, true),
             callbacks,
             emitter,
-            boxEmitter
+            boxEmitter,
         },
         options
     );
@@ -100,17 +100,17 @@ export class BoxManager {
         this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
         this.sideEffectManager.add(() => [
             // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
-            this.teleBoxManager._state$.reaction(state => {
+            this.teleBoxManager.onValChanged("state", state => {
                 callbacks.emit("boxStateChange", state);
                 emitter.emit("boxStateChange", state);
             }),
-            this.teleBoxManager._darkMode$.reaction(darkMode => {
+            this.teleBoxManager.onValChanged("darkMode", darkMode => {
                 callbacks.emit("darkModeChange", darkMode);
             }),
-            this.teleBoxManager._prefersColorScheme$.reaction(colorScheme => {
+            this.teleBoxManager.onValChanged("prefersColorScheme", colorScheme => {
                 callbacks.emit("prefersColorSchemeChange", colorScheme);
             }),
-            this.teleBoxManager._minimized$.reaction((minimized, skipUpdate) => {
+            this.teleBoxManager.onValChanged("minimized", (minimized, skipUpdate) => {
                 if (skipUpdate) {
                     return;
                 }
@@ -126,7 +126,7 @@ export class BoxManager {
                     }
                 }
             }),
-            this.teleBoxManager._maximized$.reaction((maximized, skipUpdate) => {
+            this.teleBoxManager.onValChanged("maximized", (maximized, skipUpdate) => {
                 if (skipUpdate) {
                     return;
                 }
@@ -140,7 +140,11 @@ export class BoxManager {
             this.teleBoxManager.events.on(
                 "intrinsic_move",
                 debounce((box: ReadonlyTeleBox): void => {
-                    boxEmitter.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(
@@ -178,10 +182,6 @@ export class BoxManager {
         ]);
     }
 
-    private get mainView() {
-        return this.context.getMainView();
-    }
-
     private get canOperate() {
         return this.context.canOperate();
     }
@@ -214,7 +214,11 @@ export class BoxManager {
         return this.teleBoxManager.stageRect;
     }
 
-    public createBox(params: CreateBoxParams): void {
+    public get stageRect$() {
+        return this.teleBoxManager._stageRect$;
+    }
+
+    public createBox(params: CreateBoxParams): ReadonlyTeleBox | undefined {
         if (!this.teleBoxManager) return;
         let { minwidth = MIN_WIDTH, minheight = MIN_HEIGHT } = params.app.config ?? {};
         const { width, height } = params.app.config ?? {};
@@ -237,8 +241,9 @@ export class BoxManager {
             height,
             id: params.appId,
         };
-        this.teleBoxManager.create(createBoxConfig, params.smartPosition);
+        const box = this.teleBoxManager.create(createBoxConfig, params.smartPosition);
         this.context.emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
+        return box;
     }
 
     public setupBoxManager(
@@ -250,6 +255,7 @@ export class BoxManager {
             root: root,
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
+            highlightStage: createTeleBoxManagerConfig?.highlightStage,
         };
 
         const manager = new TeleBoxManager(initManagerState);
@@ -289,17 +295,17 @@ export class BoxManager {
         return this.teleBoxManager.topBox;
     }
 
-    public updateBoxState(state?: AppInitState): void {
+    public updateBoxState(state?: AppState): void {
         if (!state) return;
         const box = this.getBox(state.id);
         if (box) {
             this.teleBoxManager.update(
                 box.id,
                 {
-                    x: state.x,
-                    y: state.y,
-                    width: state.width || 0.5,
-                    height: state.height || 0.5,
+                    x: state.position?.x,
+                    y: state.position?.y,
+                    width: state.size?.width || 0.5,
+                    height: state.size?.height || 0.5,
                     zIndex: state.zIndex,
                 },
                 true

package/src/Cursor/index.ts

@@ -23,7 +23,6 @@ export type MoveCursorParams = {
 };
 
 export class CursorManager {
-    public containerRect?: DOMRect;
     public wrapperRect?: DOMRect;
     public cursorInstances: Map<string, Cursor> = new Map();
     public roomMembers?: readonly RoomMember[];
@@ -168,7 +167,6 @@ export class CursorManager {
     };
 
     public updateContainerRect() {
-        this.containerRect = WindowManager.container?.getBoundingClientRect();
         this.wrapperRect = WindowManager.playground?.getBoundingClientRect();
     }
 

package/src/InternalEmitter.ts

@@ -1,7 +1,8 @@
 import Emittery from "emittery";
 import type { TeleBoxRect } from "@netless/telebox-insider";
-import type { AppInitState, CursorMovePayload } from "./index";
+import type { CursorMovePayload } from "./index";
 import type { Member } from "./Helper";
+import type { MemberState } from "white-web-sdk";
 
 export type RemoveSceneParams = {
     scenePath: string;
@@ -10,7 +11,6 @@ export type RemoveSceneParams = {
 
 export type EmitterEvent = {
     onCreated: undefined;
-    InitReplay: AppInitState;
     error: Error;
     seekStart: undefined;
     seek: number;
@@ -31,6 +31,7 @@ export type EmitterEvent = {
     writableChange: boolean;
     containerSizeRatioUpdate: number;
     roomMembersChange: Member[];
+    memberStateChange: MemberState;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;

package/src/Page/PageController.ts

@@ -13,6 +13,7 @@ export type PageState = {
 export interface PageController {
     nextPage: () => Promise<boolean>;
     prevPage: () => Promise<boolean>;
+    jumpPage: (index: number) => Promise<boolean>;
     addPage: (params?: AddPageParams) => Promise<void>;
     removePage: (index: number) => Promise<boolean>;
     pageState: PageState;

package/src/PageState.ts

@@ -6,7 +6,7 @@ import type { PageState } from "./Page";
 export class PageStateImpl {
     constructor(private manager: AppManager) {
         emitter.on("changePageState", () => {
-            callbacks.emit("pageStateChange", this.toObject());
+          callbacks.emit("pageStateChange", this.toObject());
         });
     }
 

package/src/ReconnectRefresher.ts

@@ -46,14 +46,18 @@ export class ReconnectRefresher {
             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 {
+                this.onReconnected();
+            }
         }
         this.phase = phase;
     };
 
     private onReconnected = debounce(() => {
         this._onReconnected();
-    }, 3000);
+    }, 1000);
 
     private _onReconnected = () => {
         log("onReconnected refresh reactors");
@@ -88,6 +92,7 @@ export class ReconnectRefresher {
             this.reactors.set(id, func);
             this.disposers.set(id, func());
         }
+        return () => this.remove(id);
     }
 
     public remove(id: string) {

package/src/Utils/Common.ts

@@ -30,6 +30,12 @@ export const setViewSceneIndex = (view: View, index: number) => {
     }
 };
 
+export const releaseView = (view: View) => {
+    if (!(view as any).didRelease) {
+        view.release();
+    }
+}
+
 export const setScenePath = (room: Room | undefined, scenePath: string) => {
     if (room && room.isWritable) {
         if (room.state.sceneState.scenePath !== scenePath) {