@netless/window-manager 0.2.15 → 0.2.19-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.2.15",
+  "version": "0.2.19-canary.0",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",

package/src/AppContext.ts

@@ -31,7 +31,7 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
         unlistenDisposed
     };
     private boxManager: BoxManager;
-    private delegate = this.manager.delegate;
+    private store = this.manager.store;
     public readonly isAddApp: boolean;
 
     constructor(
@@ -54,7 +54,7 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
     }
 
     public getScenes(): SceneDefinition[] | undefined {
-        const appAttr = this.delegate.getAppAttributes(this.appId);
+        const appAttr = this.store.getAppAttributes(this.appId);
         if (appAttr?.isDynamicPPT) {
             const appProxy = this.manager.appProxies.get(this.appId);
             if (appProxy) {

package/src/AppListener.ts

@@ -2,10 +2,8 @@ import { Events, MagixEventName } from './constants';
 import { ViewVisionMode } from 'white-web-sdk';
 import type { Event } from "white-web-sdk";
 import type { TeleBox } from "@netless/telebox-insider";
-import type { ViewManager } from "./ViewManager";
 import type { AppProxy } from "./AppProxy";
 import type { AppManager } from "./AppManager";
-import type { WindowManager } from "./index";
 
 export class AppListeners {
     private displayer = this.manager.displayer;
@@ -13,8 +11,6 @@ export class AppListeners {
 
     constructor(
         private manager: AppManager,
-        private windowManager: WindowManager,
-        private viewManager: ViewManager,
         private appProxies: Map<string, AppProxy>
     ) {}
 

package/src/AppManager.ts

@@ -10,11 +10,12 @@ import { AttributesDelegate } from './AttributesDelegate';
 import { BoxManager, TELE_BOX_STATE } from './BoxManager';
 import { callbacks, emitter } from './index';
 import { CameraStore } from './Utils/CameraStore';
-import { genAppId, makeValidScenePath } from './Utils/Common';
+import { genAppId, makeValidScenePath, setScenePath } from './Utils/Common';
 import {
     isPlayer,
     isRoom,
-    ScenePathType
+    ScenePathType,
+    ViewVisionMode
     } from 'white-web-sdk';
 import { log } from './Utils/log';
 import { MainViewProxy } from './MainView';
@@ -24,7 +25,6 @@ import { ViewManager } from './ViewManager';
 import type { Displayer, DisplayerState, Room } from "white-web-sdk";
 import type { CreateCollectorConfig } from "./BoxManager";
 import type { AddAppParams, BaseInsertParams, WindowManager } from "./index";
-
 export class AppManager {
     public displayer: Displayer;
     public boxManager: BoxManager;
@@ -32,7 +32,7 @@ export class AppManager {
     public viewManager: ViewManager;
     public appProxies: Map<string, AppProxy> = new Map();
     public appStatus: Map<string, AppStatus> = new Map();
-    public delegate = new AttributesDelegate(this);
+    public store = new AttributesDelegate(this);
     public mainViewProxy: MainViewProxy;
     public refresher?: ReconnectRefresher;
 
@@ -42,28 +42,24 @@ export class AppManager {
     constructor(public windowManger: WindowManager, options: CreateCollectorConfig) {
         this.displayer = windowManger.displayer;
         this.cameraStore = new CameraStore();
+        this.mainViewProxy = new MainViewProxy(this);
         this.viewManager = new ViewManager(this.displayer as Room, this, this.cameraStore);
-        this.boxManager = new BoxManager(this, this.viewManager.mainView, this.appProxies, options);
-        this.appListeners = new AppListeners(
-            this,
-            this.windowManger,
-            this.viewManager,
-            this.appProxies
-        );
+        this.boxManager = new BoxManager(this, this.mainViewProxy.view, this.appProxies, options);
+        this.appListeners = new AppListeners(this, this.appProxies);
         this.displayer.callbacks.on(this.eventName, this.displayerStateListener);
         this.appListeners.addListeners();
 
         this.refresher = new ReconnectRefresher(this.room, this);
 
-        this.mainViewProxy = new MainViewProxy(this);
-
         emitter.once("onCreated").then(() => this.onCreated());
 
         if (isPlayer(this.displayer)) {
             emitter.on("seek", time => {
-                this.appProxies.forEach(appProxy => appProxy.appEmitter.emit("seek", time));
+                this.appProxies.forEach(appProxy => {
+                    appProxy.onSeek(time);
+                });
                 this.attributesUpdateCallback(this.attributes.apps);
-            })
+            });
         }
     }
 
@@ -81,7 +77,7 @@ export class AppManager {
             });
         });
         if (!this.attributes.apps || Object.keys(this.attributes.apps).length === 0) {
-            const mainScenePath = this.delegate.getMainViewScenePath();
+            const mainScenePath = this.store.getMainViewScenePath();
             if (!mainScenePath) return;
             const sceneState = this.displayer.state.sceneState;
             if (sceneState.scenePath !== mainScenePath) {
@@ -127,6 +123,23 @@ export class AppManager {
         });
     }
 
+    public bindMainView(divElement: HTMLDivElement, disableCameraTransform: boolean) {
+        const mainView = this.mainViewProxy.view;
+        mainView.disableCameraTransform = disableCameraTransform;
+        mainView.divElement = divElement;
+        if (!mainView.focusScenePath) {
+            this.store.setMainViewFocusPath();
+        }
+        if (
+            this.store.focus === undefined &&
+            mainView.mode !== ViewVisionMode.Writable
+        ) {
+            this.viewManager.switchMainViewToWriter();
+        }
+        this.mainViewProxy.addMainViewListener();
+        emitter.emit("mainViewMounted");
+    }
+
     public async addApp(params: AddAppParams, isDynamicPPT: boolean): Promise<string | undefined> {
         log("addApp", params);
         const { appId, needFocus } = await this.beforeAddApp(params, isDynamicPPT);
@@ -138,13 +151,13 @@ export class AppManager {
     private async beforeAddApp(params: AddAppParams, isDynamicPPT: boolean) {
         const appId = await genAppId(params.kind);
         this.appStatus.set(appId, AppStatus.StartCreate);
-        this.delegate.setupAppAttributes(params, appId, isDynamicPPT);
+        this.store.setupAppAttributes(params, appId, isDynamicPPT);
         if (this.boxManager.boxState === TELE_BOX_STATE.Minimized) {
             this.boxManager.teleBoxManager.setState(TELE_BOX_STATE.Normal);
         }
         const needFocus = this.boxManager.boxState !== TELE_BOX_STATE.Minimized;
         if (needFocus) {
-            this.delegate.setAppFocus(appId, true);
+            this.store.setAppFocus(appId, true);
         }
         const attrs = params.attributes ?? {};
         this.safeUpdateAttributes([appId], attrs);
@@ -223,8 +236,8 @@ export class AppManager {
             appProxy.emitAppIsWritableChange();
         });
         if (isWritable === true) {
-            if (!this.delegate.focus) {
-                this.viewManager.switchMainViewModeToWriter();
+            if (!this.store.focus) {
+                this.mainViewProxy.switchViewModeToWriter();
             }
             this.mainView.disableCameraTransform = false;
         } else {
@@ -253,7 +266,9 @@ export class AppManager {
     }
 
     public get focusApp() {
-        return this.appProxies.get(this.delegate.focus);
+        if (this.store.focus) {
+            return this.appProxies.get(this.store.focus);
+        }
     }
 
     public safeSetAttributes(attributes: any) {
@@ -264,40 +279,39 @@ export class AppManager {
         this.windowManger.safeUpdateAttributes(keys, value);
     }
 
-    public setMainViewScenePath(scenePath: string) {
+    public async setMainViewScenePath(scenePath: string) {
         if (this.room) {
             const scenePathType = this.displayer.scenePathType(scenePath);
             if (scenePathType === ScenePathType.None) {
                 throw new Error(`[WindowManager]: ${scenePath} not valid scene`);
             } else if (scenePathType === ScenePathType.Page) {
-                this._setMainViewScenePath(scenePath);
+                await this._setMainViewScenePath(scenePath);
             } else if (scenePathType === ScenePathType.Dir) {
                 const validScenePath = makeValidScenePath(this.displayer, scenePath);
-                this._setMainViewScenePath(validScenePath);
+                await this._setMainViewScenePath(validScenePath);
             }
         }
     }
 
-    private _setMainViewScenePath(scenePath: string) {
+    private async _setMainViewScenePath(scenePath: string) {
         this.safeSetAttributes({ _mainScenePath: scenePath });
-        this.viewManager.freedomAllViews();
-        this.viewManager.switchMainViewToWriter();
-        this.delegate.setMainViewFocusPath();
+        await this.viewManager.switchMainViewToWriter();
+        setScenePath(this.room, scenePath);
+        this.store.setMainViewFocusPath();
     }
 
-    public setMainViewSceneIndex(index: number) {
+    public async setMainViewSceneIndex(index: number) {
         if (this.room) {
             this.safeSetAttributes({ _mainSceneIndex: index });
-            this.viewManager.freedomAllViews();
-            this.viewManager.switchMainViewToWriter();
+            await this.viewManager.switchMainViewToWriter();
             this.room.setSceneIndex(index);
-            this.delegate.setMainViewScenePath(this.room.state.sceneState.scenePath);
-            this.delegate.setMainViewFocusPath();
+            this.store.setMainViewScenePath(this.room.state.sceneState.scenePath);
+            this.store.setMainViewFocusPath();
         }
     }
 
     public getAppInitPath(appId: string): string | undefined {
-        const attrs = this.delegate.getAppAttributes(appId);
+        const attrs = this.store.getAppAttributes(appId);
         if (attrs) {
             return attrs?.options?.scenePath;
         }
@@ -313,7 +327,7 @@ export class AppManager {
         switch (eventName) {
             case "move": {
                 this.dispatchInternalEvent(Events.AppMove, payload);
-                this.delegate.updateAppState(payload.appId, AppAttributes.Position, {
+                this.store.updateAppState(payload.appId, AppAttributes.Position, {
                     x: payload.x,
                     y: payload.y,
                 });
@@ -330,11 +344,10 @@ export class AppManager {
             case "resize": {
                 if (payload.width && payload.height) {
                     this.dispatchInternalEvent(Events.AppResize, payload);
-                    this.delegate.updateAppState(payload.appId, AppAttributes.Size, {
+                    this.store.updateAppState(payload.appId, AppAttributes.Size, {
                         width: payload.width,
                         height: payload.height,
                     });
-                    this.room?.refreshViewSize();
                 }
                 break;
             }
@@ -348,7 +361,7 @@ export class AppManager {
                 });
                 this.safeSetAttributes({ boxState: eventName });
 
-                this.delegate.cleanFocus();
+                this.store.cleanFocus();
                 this.boxManager.blurFocusBox();
                 break;
             }
@@ -384,7 +397,7 @@ export class AppManager {
                     payload,
                 });
 
-                this.delegate.updateAppState(payload.appId, AppAttributes.SnapshotRect, {
+                this.store.updateAppState(payload.appId, AppAttributes.SnapshotRect, {
                     ...payload.rect,
                 });
                 break;
@@ -403,7 +416,7 @@ export class AppManager {
 
     public focusByAttributes(apps: any) {
         if (apps && Object.keys(apps).length === this.boxManager.appBoxMap.size) {
-            const focusAppId = this.delegate.focus;
+            const focusAppId = this.store.focus;
             if (focusAppId) {
                 this.boxManager.focusBox({ appId: focusAppId });
             }
@@ -412,8 +425,8 @@ export class AppManager {
 
     public notifyReconnected() {
         this.appProxies.forEach(appProxy => {
-            appProxy.appEmitter.emit("reconnected", undefined);
-        })
+            appProxy.onReconnected();
+        });
     }
 
     public dispatchInternalEvent(event: Events, payload: any) {

package/src/AppProxy.ts

@@ -24,8 +24,9 @@ import type { Camera, SceneState, View, SceneDefinition } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 import type { NetlessApp } from "./typings";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
+import { Base } from './Base';
 
-export class AppProxy {
+export class AppProxy extends Base {
     public id: string;
     public scenePath?: string;
     public appEmitter: Emittery<AppEmitterEvent>;
@@ -41,10 +42,11 @@ export class AppProxy {
 
     constructor(
         private params: BaseInsertParams,
-        private manager: AppManager,
+        manager: AppManager,
         appId: string,
         isAddApp: boolean
     ) {
+        super(manager);
         this.kind = params.kind;
         this.id = appId;
         this.appProxies.set(this.id, this);
@@ -63,7 +65,6 @@ export class AppProxy {
         if (this.params.options?.scenePath) {
             // 只有传入了 scenePath 的 App 才会创建 View
             this.createView();
-            this.addCameraListener();
         }
         this.isAddApp = isAddApp;
     }
@@ -81,7 +82,7 @@ export class AppProxy {
     }
 
     public get appAttributes() {
-        return this.manager.delegate.getAppAttributes(this.id);
+        return this.store.getAppAttributes(this.id);
     }
 
     public getFullScenePath(): string | undefined {
@@ -108,7 +109,7 @@ export class AppProxy {
             if (focus) {
                 this.focusBox();
                 this.manager.viewManager.switchAppToWriter(this.id);
-                this.manager.delegate.setMainViewFocusPath();
+                this.store.setMainViewFocusPath();
             }
             return {
                 appId: this.id,
@@ -174,31 +175,49 @@ export class AppProxy {
         }
     }
 
+    public onSeek(time: number) {
+        this.appEmitter.emit("seek", time);
+        const boxInitState = this.getAppInitState(this.id);
+        this.boxManager.updateBoxState(boxInitState);
+    }
+
+    public async onReconnected() {
+        this.appEmitter.emit("reconnected", undefined);
+        await this.destroy(true, false);
+        const params = this.params;
+        const appProxy = new AppProxy(params, this.manager, this.id, this.isAddApp);
+        await appProxy.baseInsertApp(this.store.focus === this.id);
+    }
+
     public switchToWritable() {
         if (this.view) {
+            if (this.view.mode === ViewVisionMode.Writable) return;
+            this.removeCameraListener();
             try {
-                if (this.view.mode === ViewVisionMode.Writable) return;
                 if (this.manager.mainView.mode === ViewVisionMode.Writable) {
-                    this.manager.delegate.setMainViewFocusPath();
+                    this.store.setMainViewFocusPath();
                     notifyMainViewModeChange(callbacks, ViewVisionMode.Freedom);
                     setViewMode(this.manager.mainView, ViewVisionMode.Freedom);
                 }
                 setViewMode(this.view, ViewVisionMode.Writable);
+                this.recoverCamera();
             } catch (error) {
                 log("switch view failed", error);
+            } finally {
+                this.addCameraListener();
             }
         }
     }
 
     public getAppInitState = (id: string) => {
-        const attrs = this.manager.delegate.getAppState(id);
+        const attrs = this.store.getAppState(id);
         if (!attrs) return;
         const position = attrs?.[AppAttributes.Position];
-        const focus = this.manager.attributes.focus;
+        const focus = this.store.focus;
         const size = attrs?.[AppAttributes.Size];
         const snapshotRect = attrs?.[AppAttributes.SnapshotRect];
         const sceneIndex = attrs?.[AppAttributes.SceneIndex];
-        const boxState = this.manager.attributes["boxState"];
+        const boxState = this.store.getBoxState();
         let payload = { boxState } as AppInitState;
         if (position) {
             payload = { ...payload, id: id, x: position.x, y: position.y };
@@ -215,7 +234,6 @@ export class AppProxy {
         if (sceneIndex) {
             payload = { ...payload, sceneIndex };
         }
-        emitter.emit(Events.InitReplay, payload);
         return payload;
     };
 
@@ -320,8 +338,9 @@ export class AppProxy {
         this.view?.callbacks.off("onCameraUpdated", this.cameraListener);
     }
 
-    private createView(): View {
-        const view = this.viewManager.createView(this.id);
+    private async createView(): Promise<View> {
+        const view = await this.viewManager.createView(this.id);
+        this.addCameraListener();
         this.setViewFocusScenePath();
         return view;
     }
@@ -341,7 +360,7 @@ export class AppProxy {
             this.boxManager.closeBox(this.id);
         }
         if (cleanAttrs) {
-            this.manager.delegate.cleanAppAttributes(this.id);
+            this.store.cleanAppAttributes(this.id);
         }
         this.appProxies.delete(this.id);
         this.manager.cameraStore.deleteCamera(this.id);

package/src/AttributesDelegate.ts

@@ -4,6 +4,7 @@ import { setViewFocusScenePath } from "./Utils/Common";
 import type { AddAppParams, AppSyncAttributes } from "./index";
 import type { Camera, Size } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
+import type { Cursor } from "./Cursor/Cursor";
 
 export enum Fields {
     Apps = "apps",
@@ -39,7 +40,7 @@ export class AttributesDelegate {
         return get(this.manager.attributes, [Fields.Apps]);
     }
 
-    public get focus() {
+    public get focus(): string | undefined {
         return get(this.manager.attributes, [Fields.Focus]);
     }
 
@@ -93,16 +94,6 @@ export class AttributesDelegate {
         this.manager.safeSetAttributes({ [Fields.Focus]: undefined });
     }
 
-    public cleanAttributes() {
-        this.manager.safeSetAttributes({
-            [Fields.Apps]: undefined,
-            [Fields.BoxState]: undefined,
-            [Fields.Focus]: undefined,
-            _mainScenePath: undefined,
-            _mainSceneIndex: undefined,
-        });
-    }
-
     public getAppSceneIndex(id: string) {
         return this.getAppState(id)?.[AppAttributes.SceneIndex];
     }
@@ -131,11 +122,11 @@ export class AttributesDelegate {
         this.manager.safeSetAttributes({ _mainSceneIndex: index });
     }
 
-    public getMainViewCamera(): Camera {
+    public getMainViewCamera(): MainViewCamera {
         return get(this.manager.attributes, [Fields.MainViewCamera]);
     }
 
-    public getMainViewSize(): Size & { id: number } | undefined {
+    public getMainViewSize(): MainViewSize {
         return get(this.manager.attributes, [Fields.MainViewSize]);
     }
 
@@ -191,3 +182,20 @@ export class AttributesDelegate {
         }
     }
 }
+
+export type MainViewSize = {
+    id: number;
+    width: number;
+    height: number;
+}
+
+export type MainViewCamera = {
+    id: number;
+    centerX: number;
+    centerY: number;
+    scale: number;
+}
+
+export type Cursors = {
+    [key: number]: Cursor;
+}

package/src/Base/index.ts

@@ -0,0 +1,7 @@
+import type { AppManager } from "../AppManager";
+import { AttributesDelegate } from "../AttributesDelegate";
+
+export class Base {
+    public store = new AttributesDelegate(this.manager);
+    constructor(public manager: AppManager) {}
+}

package/src/BoxManager.ts

@@ -50,6 +50,7 @@ export type CreateCollectorConfig = {
 export class BoxManager {
     public teleBoxManager: TeleBoxManager;
     public appBoxMap: Map<string, string> = new Map();
+    private store = this.manager.store;
 
     constructor(
         private manager: AppManager,
@@ -126,15 +127,15 @@ export class BoxManager {
             id: params.appId,
         };
         this.teleBoxManager.create(createBoxConfig);
-            emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
+        emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
 
-            const appState = this.manager.delegate.getAppState(params.appId);
-            if (appState) {
-                const snapshotRect = get(appState, [AppAttributes.SnapshotRect]);
-                if (isEmpty(snapshotRect)) {
-                    this.setBoxInitState(params.appId);
-                }
+        const appState = this.manager.store.getAppState(params.appId);
+        if (appState) {
+            const snapshotRect = get(appState, [AppAttributes.SnapshotRect]);
+            if (isEmpty(snapshotRect)) {
+                this.setBoxInitState(params.appId);
             }
+        }
     }
 
     public setBoxInitState(appId: string): void {
@@ -208,26 +209,32 @@ export class BoxManager {
         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,
-            }, true);
-            if (state.focus) {
-                this.teleBoxManager.update(box.id, { focus: true }, true);
-            }
+            this.teleBoxManager.update(
+                box.id,
+                {
+                    x: state.x,
+                    y: state.y,
+                    width: state.width || 0.5,
+                    height: state.height || 0.5,
+                },
+                true
+            );
             // TODO 连续调用 teleboxManager update 和 setState 会导致 box 出现问题. 先用 setTimeout 延迟调用,等 telebox 修复后去掉
+            setTimeout(() => {
+                if (state.boxState && this.teleBoxManager.state !== state.boxState) {
+                    this.teleBoxManager.setState(state.boxState, true);
+                }
+            }, 0);
             setTimeout(() => {
                 if (state.snapshotRect) {
                     (box as TeleBox).setSnapshot(state.snapshotRect);
                 }
             }, 30);
             setTimeout(() => {
-                if (state.boxState && this.teleBoxManager.state !== state.boxState) {
-                    this.teleBoxManager.setState(state.boxState, true);
+                if (state.focus) {
+                    this.teleBoxManager.update(box.id, { focus: true }, true);
                 }
-            }, 0);
+            }, 50);
         }
     }
 

package/src/Cursor/Cursor.ts

@@ -134,10 +134,6 @@ export class Cursor {
         return get(this.cursors, [this.memberId, Fields.Position]);
     }
 
-    public getFocusBox() {
-        return this.cursorManager.getFocusBox();
-    }
-
     private autoHidden() {
         if (this.timer) {
             clearTimeout(this.timer);