@netless/window-manager 0.3.2 → 0.3.5-canary.1

package/dist/typings.d.ts

@@ -56,6 +56,7 @@ export declare type RegisterEvents<SetupResult = any> = {
         result: SetupResult;
     };
     destroy: RegisterEventData;
+    focus: RegisterEventData;
 };
 export declare type RegisterParams<AppOptions = any, SetupResult = any, Attributes = any> = {
     kind: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.3.2",
+  "version": "0.3.5-canary.1",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -24,7 +24,7 @@
     "@juggle/resize-observer": "^3.3.1",
     "@netless/app-docs-viewer": "^0.1.21",
     "@netless/app-media-player": "0.1.0-beta.5",
-    "@netless/telebox-insider": "0.2.4",
+    "@netless/telebox-insider": "0.2.5",
     "emittery": "^0.9.2",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.1",
@@ -56,6 +56,6 @@
     "typescript": "^4.3.5",
     "video.js": "^7.14.3",
     "vite": "^2.5.3",
-    "white-web-sdk": "^2.15.1"
+    "white-web-sdk": "2.15.6"
   }
 }

package/src/AppContext.ts

@@ -8,7 +8,6 @@ import {
     toJS
     } from 'white-web-sdk';
 import { BoxNotCreatedError } from './Utils/error';
-import { setScenePath, wait } from './Utils/Common';
 import type { Room, SceneDefinition, View } from "white-web-sdk";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import type Emittery from "emittery";
@@ -103,7 +102,7 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
     public async setScenePath(scenePath: string): Promise<void> {
         if (!this.appProxy.box) return;
         this.appProxy.setFullPath(scenePath);
-        this.manager.viewManager.switchAppToWriter(this.appId);
+        this.appProxy.context.switchAppToWriter(this.appId);
     }
 
     public mountView(dom: HTMLDivElement): void {

package/src/AppListener.ts

@@ -1,12 +1,10 @@
 import { Events, MagixEventName } from "./constants";
-import { ViewVisionMode } from "white-web-sdk";
 import type { Event } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 
 export class AppListeners {
     private displayer = this.manager.displayer;
     private boxManager = this.manager.boxManager;
-    private appProxies = this.manager.appProxies;
 
     constructor(private manager: AppManager) {}
 
@@ -30,10 +28,6 @@ export class AppListeners {
                     this.appResizeHandler(data.payload);
                     break;
                 }
-                case Events.AppBoxStateChange: {
-                    this.appBoxStateHandler(data.payload);
-                    break;
-                }
                 case Events.SwitchViewsToFreedom: {
                     this.switchViewsToFreedomHandler();
                     break;
@@ -53,10 +47,6 @@ export class AppListeners {
         this.manager.room?.refreshViewSize();
     };
 
-    private appBoxStateHandler = (payload: any) => {
-        this.boxManager.setBoxState(payload.state);
-    };
-
     private switchViewsToFreedomHandler = () => {
         this.manager.viewManager.freedomAllViews();
     };

package/src/AppManager.ts

@@ -1,31 +1,20 @@
-import {
-    AppAttributes,
-    AppStatus,
-    Events,
-    MagixEventName
-    } from './constants';
-import { AppListeners } from './AppListener';
-import { AppProxy } from './AppProxy';
-import { AttributesDelegate } from './AttributesDelegate';
-import { BoxManager, TELE_BOX_STATE } from './BoxManager';
-import { callbacks, emitter } from './index';
-import { CameraStore } from './Utils/CameraStore';
-import { genAppId, makeValidScenePath, setScenePath } from './Utils/Common';
-import {
-    autorun,
-    isPlayer,
-    isRoom,
-    ScenePathType,
-    ViewVisionMode
-    } from 'white-web-sdk';
-import { log } from './Utils/log';
-import { MainViewProxy } from './MainView';
-import { onObjectInserted, onObjectRemoved } from './Utils/Reactive';
-import { ReconnectRefresher } from './ReconnectRefresher';
-import { ViewManager } from './ViewManager';
+import { AppAttributes, AppStatus, Events, MagixEventName } from "./constants";
+import { AppListeners } from "./AppListener";
+import { AppProxy } from "./AppProxy";
+import { AttributesDelegate } from "./AttributesDelegate";
+import { BoxManager, TELE_BOX_STATE } from "./BoxManager";
+import { callbacks, emitter } from "./index";
+import { CameraStore } from "./Utils/CameraStore";
+import { genAppId, makeValidScenePath, setScenePath } from "./Utils/Common";
+import { autorun, isPlayer, isRoom, ScenePathType, ViewVisionMode } from "white-web-sdk";
+import { log } from "./Utils/log";
+import { MainViewProxy } from "./MainView";
+import { onObjectInserted, onObjectRemoved } from "./Utils/Reactive";
+import { ReconnectRefresher } from "./ReconnectRefresher";
+import { ViewManager } from "./ViewManager";
 import type { Displayer, DisplayerState, Room } from "white-web-sdk";
 import type { CreateCollectorConfig } from "./BoxManager";
-import type { AddAppParams, BaseInsertParams, WindowManager , TeleBoxRect } from "./index";
+import type { AddAppParams, BaseInsertParams, WindowManager, TeleBoxRect } from "./index";
 export class AppManager {
     public displayer: Displayer;
     public boxManager: BoxManager;
@@ -39,7 +28,6 @@ export class AppManager {
 
     private appListeners: AppListeners;
 
-
     constructor(public windowManger: WindowManager, options: CreateCollectorConfig) {
         this.displayer = windowManger.displayer;
         this.cameraStore = new CameraStore();
@@ -78,24 +66,30 @@ export class AppManager {
             });
         });
         this.refresher?.add("maximized", () => {
-            return autorun(
-                () => {
-                    const maximized = this.attributes.maximized;
-                    if (this.boxManager.teleBoxManager.maximized !== maximized) {
-                        this.boxManager.teleBoxManager.setMaximized(Boolean(maximized), true);
+            return autorun(() => {
+                const maximized = this.attributes.maximized;
+                if (this.boxManager.maximized !== maximized) {
+                    if (maximized === true && this.boxManager.minimized === false) {
+                        const topBox = this.boxManager.getTopBox();
+                        if (topBox) {
+                            emitter.emit("focus", { appId: topBox.id });
+                        }
                     }
+                    this.boxManager.setMaximized(Boolean(maximized));
                 }
-            )
+            });
         });
         this.refresher?.add("minimized", () => {
-            return autorun(
-                () => {
-                    const minimized = this.attributes.minimized;
-                    if (this.boxManager.teleBoxManager.minimized !== minimized) {
-                        this.boxManager.teleBoxManager.setMinimized(Boolean(minimized), true);
+            return autorun(() => {
+                const minimized = this.attributes.minimized;
+                if (this.boxManager.minimized !== minimized) {
+                    if (minimized === true && this.store.focus !== undefined) {
+                        this.store.cleanFocus();
+                        this.boxManager.blurFocusBox();
                     }
+                    this.boxManager.setMinimized(Boolean(minimized));
                 }
-            )
+            });
         });
         if (!this.attributes.apps || Object.keys(this.attributes.apps).length === 0) {
             const mainScenePath = this.store.getMainViewScenePath();
@@ -142,7 +136,7 @@ export class AppManager {
                 appProxy.destroy(true, false);
             }
         });
-    }
+    };
 
     public bindMainView(divElement: HTMLDivElement, disableCameraTransform: boolean) {
         const mainView = this.mainViewProxy.view;
@@ -151,10 +145,7 @@ export class AppManager {
         if (!mainView.focusScenePath) {
             this.store.setMainViewFocusPath();
         }
-        if (
-            this.store.focus === undefined &&
-            mainView.mode !== ViewVisionMode.Writable
-        ) {
+        if (this.store.focus === undefined && mainView.mode !== ViewVisionMode.Writable) {
             this.viewManager.switchMainViewToWriter();
         }
         this.mainViewProxy.addMainViewListener();
@@ -172,16 +163,16 @@ export class AppManager {
     private async beforeAddApp(params: AddAppParams, isDynamicPPT: boolean) {
         const appId = await genAppId(params.kind);
         this.appStatus.set(appId, AppStatus.StartCreate);
+        const attrs = params.attributes ?? {};
+        this.safeUpdateAttributes([appId], attrs);
         this.store.setupAppAttributes(params, appId, isDynamicPPT);
-        if (this.boxManager.boxState === TELE_BOX_STATE.Minimized) {
-            this.boxManager.teleBoxManager.setState(TELE_BOX_STATE.Normal);
+        if (this.boxManager.minimized) {
+            this.boxManager.setMinimized(false);
         }
-        const needFocus = this.boxManager.boxState !== TELE_BOX_STATE.Minimized;
+        const needFocus = !this.boxManager.minimized;
         if (needFocus) {
             this.store.setAppFocus(appId, true);
         }
-        const attrs = params.attributes ?? {};
-        this.safeUpdateAttributes([appId], attrs);
         return { appId, needFocus };
     }
 
@@ -243,16 +234,16 @@ export class AppManager {
             appProxy.appEmitter.emit("roomStateChange", state);
         });
         emitter.emit("observerIdChange", this.displayer.observerId);
-    }
+    };
 
     private displayerWritableListener = (isReadonly: boolean) => {
         const isWritable = !isReadonly;
         const isManualWritable =
             this.windowManger.readonly === undefined || this.windowManger.readonly === false;
         if (this.windowManger.readonly === undefined) {
-            this.boxManager.teleBoxManager.setReadonly(isReadonly);
+            this.boxManager.setReadonly(isReadonly);
         } else {
-            this.boxManager.teleBoxManager.setReadonly(!(isWritable && isManualWritable));
+            this.boxManager.setReadonly(!(isWritable && isManualWritable));
         }
         this.appProxies.forEach(appProxy => {
             appProxy.emitAppIsWritableChange();
@@ -265,7 +256,7 @@ export class AppManager {
         } else {
             this.mainView.disableCameraTransform = true;
         }
-    }
+    };
 
     private get eventName() {
         return isRoom(this.displayer) ? "onRoomStateChanged" : "onPlayerStateChanged";
@@ -359,10 +350,6 @@ export class AppManager {
                 this.windowManger.safeSetAttributes({ focus: payload.appId });
                 break;
             }
-            case "blur": {
-                this.dispatchInternalEvent(Events.AppBlur, payload);
-                break;
-            }
             case "resize": {
                 if (payload.width && payload.height) {
                     this.dispatchInternalEvent(Events.AppResize, payload);
@@ -373,44 +360,6 @@ export class AppManager {
                 }
                 break;
             }
-            case TELE_BOX_STATE.Minimized: {
-                this.safeDispatchMagixEvent(MagixEventName, {
-                    eventName: Events.AppBoxStateChange,
-                    payload: {
-                        ...payload,
-                        state: eventName,
-                    },
-                });
-
-                this.store.cleanFocus();
-                this.boxManager.blurFocusBox();
-                break;
-            }
-            case TELE_BOX_STATE.Maximized: {
-                this.safeDispatchMagixEvent(MagixEventName, {
-                    eventName: Events.AppBoxStateChange,
-                    payload: {
-                        ...payload,
-                        state: eventName,
-                    },
-                });
-                const topBox = this.boxManager.getTopBox();
-                if (topBox) {
-                    emitter.emit("focus", { appId: topBox.id });
-                }
-                break;
-            }
-            case TELE_BOX_STATE.Normal: {
-                this.safeDispatchMagixEvent(MagixEventName, {
-                    eventName: Events.AppBoxStateChange,
-                    payload: {
-                        ...payload,
-                        state: eventName,
-                    },
-                });
-                this.safeSetAttributes({ boxState: eventName });
-                break;
-            }
             case "close": {
                 const appProxy = this.appProxies.get(payload.appId);
                 if (appProxy) {

package/src/AppProxy.ts

@@ -211,6 +211,7 @@ export class AppProxy extends Base {
     }
 
     public switchToWritable() {
+        appRegister.notifyApp(this.kind, "focus", { appId: this.id });
         this.cameraStore.switchView(this.id, this.view, () => {
             if (this.view) {
                 if (this.view.mode === ViewVisionMode.Writable) return;

package/src/Base/Context.ts

@@ -1,4 +1,3 @@
-import { memoize } from "lodash";
 import { emitter } from "../index";
 import type { AppManager } from "../AppManager";
 
@@ -14,15 +13,18 @@ export class Context {
     };
 
     public get uid() {
-        return this.memoizeFindMember(this.observerId)?.payload?.uid || "";
+        return this.manager.room?.uid || "";
     }
 
-    private findMember =  (memberId: number) => {
+    public findMember = (memberId: number) => {
         const roomMembers = this.manager.room?.state.roomMembers;
         return roomMembers?.find(member => member.memberId === memberId);
     }
 
-    public memoizeFindMember = memoize(this.findMember);
+    public findMemberByUid = (uid: string) => {
+        const roomMembers = this.manager.room?.state.roomMembers;
+        return roomMembers?.find(member => member.payload?.uid === uid);
+    }
 
     public updateManagerRect() {
         this.manager.boxManager.updateManagerRect();

package/src/BoxManager.ts

@@ -102,10 +102,18 @@ export class BoxManager {
         });
     }
 
-    public get boxState(): string {
+    public get boxState() {
         return this.teleBoxManager.state;
     }
 
+    public get maximized() {
+        return this.teleBoxManager.maximized;
+    }
+
+    public get minimized() {
+        return this.teleBoxManager.minimized;
+    }
+
     public createBox(params: CreateBoxParams): void {
         if (!this.teleBoxManager) return;
         let { minwidth = MIN_WIDTH, minheight = MIN_HEIGHT } = params.app.config ?? {};
@@ -217,9 +225,6 @@ export class BoxManager {
                 this.teleBoxManager.setMaximized(Boolean(state.maximized), true);
                 this.teleBoxManager.setMinimized(Boolean(state.minimized), true);
             } 
-            if (state.boxState) {
-                this.teleBoxManager.setState(state.boxState, true);
-            }
             setTimeout(() => {
                 if (state.focus) {
                     this.teleBoxManager.update(box.id, { focus: true }, true);
@@ -281,9 +286,16 @@ export class BoxManager {
         this.teleBoxManager.updateAll(config);
     }
 
-    public setBoxState(state: TELE_BOX_STATE): void {
-        this.teleBoxManager.setState(state, true);
-        callbacks.emit("boxStateChange", state);
+    public setMaximized(maximized: boolean) {
+        this.teleBoxManager.setMaximized(maximized, true);
+    }
+
+    public setMinimized(minimized: boolean) {
+        this.teleBoxManager.setMinimized(minimized, true);
+    }
+
+    public setReadonly(readonly: boolean) {
+        this.teleBoxManager.setReadonly(readonly);
     }
 
     public destroy() {

package/src/Cursor/Cursor.ts

@@ -36,7 +36,7 @@ export class Cursor extends Base {
         pRetry(() => {
             this.disposer && this.disposer();
             if (!this.cursorPosition) {
-                throw new Error();
+                console.warn(`${memberId} not exist`);
             }
             this.startReaction();
         }, { retries: 3 });
@@ -142,7 +142,7 @@ export class Cursor extends Base {
         }
         this.timer = window.setTimeout(() => {
             this.hide();
-            this.store.updateCursorState(this.context.uid, CursorState.Leave);
+            this.store.updateCursorState(this.memberId, CursorState.Leave);
         }, 1000 * 10); // 10 秒钟自动隐藏
     }
 
@@ -180,8 +180,12 @@ export class Cursor extends Base {
     }
 
     public setMember() {
-        this.member = this.context.memoizeFindMember(this.context.observerId);
-        this.component?.$set(omit(this.initProps(), ["x", "y", "visible"]));
+        this.member = this.context.findMemberByUid(this.memberId);
+        this.updateComponent();
+    }
+
+    private updateComponent() {
+        this.component?.$set(omit(this.initProps(), ["x", "y"]));
     }
 
     public destroy() {

package/src/Cursor/index.ts

@@ -1,7 +1,7 @@
 import { Base } from '../Base';
 import { Cursor } from './Cursor';
 import { CursorState } from '../constants';
-import { debounce } from 'lodash';
+import { compact, debounce, uniq } from 'lodash';
 import { Fields } from '../AttributesDelegate';
 import { onObjectInserted } from '../Utils/Reactive';
 import { WindowManager } from '../index';
@@ -54,8 +54,12 @@ export class CursorManager extends Base {
         })
     }
 
+    private getUids = (members: readonly RoomMember[] | undefined) => {
+        return compact(uniq(members?.map(member => member.payload?.uid)));
+    }
+
     private handleRoomMembersChange = debounce((wrapper: HTMLElement) => {
-        const uids = this.roomMembers?.map(member => member.payload?.uid);
+        const uids = this.getUids(this.roomMembers);
         const cursors = Object.keys(this.cursors);
         if (uids?.length) {
             cursors.map(uid => {
@@ -183,7 +187,7 @@ export class CursorManager extends Base {
         }
     }
 
-    public cleanMemberCursor(uid: string) {
+    public deleteCursor(uid: string) {
         this.store.cleanCursor(uid);
         const cursor = this.cursorInstances.get(uid);
         if (cursor) {
@@ -199,20 +203,17 @@ export class CursorManager extends Base {
     }
 
     public cleanMemberAttributes(members: readonly RoomMember[]) {
-        const uids = members.map(member => member.payload?.uid);
-        const needDeleteIds = [];
-        for (const uid in this.cursors) {
-            const index = uids.findIndex(id => id === uid);
+        const uids = this.getUids(members);
+        const needDeleteIds: string[] = [];
+        const cursors = Object.keys(this.cursors);
+        cursors.map(cursorId => {
+            const index = uids.findIndex(id => id === cursorId);
             if (index === -1) {
-                needDeleteIds.push(uid);
+                needDeleteIds.push(cursorId);
             }
-        }
+        });
         needDeleteIds.forEach(uid => {
-            const instance = this.cursorInstances.get(uid);
-            if (instance) {
-                instance.destroy();
-            }
-            this.store.cleanCursor(uid);
+            this.deleteCursor(uid);
         });
     }
 

package/src/index.ts

@@ -170,7 +170,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
     private static isCreated = false;
 
-    public version = "0.3.2";
+    public version = "0.3.5-canary.1";
 
     public appListeners?: AppListeners;
 
@@ -384,7 +384,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
                 if (!isValidScenePath(scenePath)) {
                     throw new InvalidScenePath();
                 }
-                for (const appId in this.apps) {
+                const apps = Object.keys(this.apps || {});
+                for (const appId of apps) {
                     const appScenePath = appManager.store.getAppScenePath(appId);
                     if (appScenePath && appScenePath === scenePath) {
                         console.warn(`[WindowManager]: ScenePath ${scenePath} Already opened`);
@@ -449,7 +450,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public setReadonly(readonly: boolean): void {
         if (this.room?.isWritable) {
             this.readonly = readonly;
-            this.appManager?.boxManager.teleBoxManager.setReadonly(readonly);
+            this.appManager?.boxManager.setReadonly(readonly);
         }
     }
 
@@ -504,7 +505,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
 
     public get boxState(): TeleBoxState {
         if (this.appManager) {
-            return this.appManager.boxManager.teleBoxManager.state;
+            return this.appManager.boxManager.boxState;
         } else {
             throw new AppManagerNotInitError();
         }

package/src/typings.ts

@@ -59,6 +59,7 @@ export type RegisterEventData = {
 export type RegisterEvents<SetupResult = any> = {
     created: RegisterEventData & { result: SetupResult; };
     destroy: RegisterEventData;
+    focus: RegisterEventData;
 };
 
 export type RegisterParams<AppOptions = any, SetupResult = any, Attributes = any> = {

package/src/viewManager.ts

@@ -5,7 +5,6 @@ import { SET_SCENEPATH_DELAY } from "./constants";
 import {
     notifyMainViewModeChange,
     setScenePath,
-    setViewFocusScenePath,
     setViewMode,
 } from "./Utils/Common";
 import type { View } from "white-web-sdk";
@@ -96,24 +95,6 @@ export class ViewManager extends Base {
         });
     }
 
-    public refreshViews(): void {
-        const focus = this.store.focus;
-        this.setMainViewFocusScenePath();
-        if (focus) {
-            const appProxy = this.manager.appProxies.get(focus);
-            appProxy?.switchToWritable();
-        } else {
-            this.switchMainViewToWriter();
-        }
-    }
-
-    public setMainViewFocusScenePath() {
-        const mainViewScenePath = this.store.getMainViewScenePath();
-        if (mainViewScenePath) {
-            setViewFocusScenePath(this.manager.mainView, mainViewScenePath);
-        }
-    }
-
     public freedomAllViews(): void {
         this.manager.appProxies.forEach(appProxy => {
             appProxy.setViewFocusScenePath();
@@ -123,7 +104,7 @@ export class ViewManager extends Base {
         });
         if (this.mainView.mode === ViewVisionMode.Writable) {
             notifyMainViewModeChange(callbacks, ViewVisionMode.Freedom);
-            this.mainView.mode = ViewVisionMode.Freedom;
+            setViewMode(this.mainView, ViewVisionMode.Freedom);
         }
         if (!this.mainView.focusScenePath) {
             this.store.setMainViewFocusPath();
@@ -131,15 +112,15 @@ export class ViewManager extends Base {
     }
 
     public switchAppToWriter(id: string): void {
-        this.freedomAllViews();
-        // 为了同步端不闪烁, 需要给 room setScenePath 一个延迟
         if (this.appTimer) {
             clearTimeout(this.appTimer);
         }
+        this.freedomAllViews();
+        // 为了同步端不闪烁, 需要给 room setScenePath 一个延迟
         this.appTimer = setTimeout(() => {
             const appProxy = this.manager.appProxies.get(id);
             if (appProxy) {
-                if (this.manager.boxManager.teleBoxManager.minimized) return;
+                if (this.manager.boxManager.minimized) return;
                 appProxy.setScenePath();
                 appProxy.switchToWritable();
                 appProxy.focusBox();