@netless/window-manager 0.3.0 → 0.3.3

package/example/index.tsx

@@ -237,6 +237,7 @@ const replay = () => {
 }
 
 const onRef = (ref) => {
+    const uid = Math.random().toString().substr(3, 8)
     sdk.joinRoom({
         uuid: process.env.ROOM_UUID,
         roomToken: process.env.ROOM_TOKEN,
@@ -244,12 +245,12 @@ const onRef = (ref) => {
         useMultiViews: true,
         userPayload: {
             userId: "111",
-            cursorName: "测试测试",
+            cursorName: uid,
             avatar: "https://avatars.githubusercontent.com/u/8299540?s=60&v=4",
         },
         isWritable: !(isWritable === "false"),
         cursorAdapter: undefined,
-        uid: Math.random().toString().substr(3, 8),
+        uid: uid,
         disableMagixEventDispatchLimit: true,
     }).then(async room => {
         if (room.isWritable) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "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.3",
+    "@netless/telebox-insider": "0.2.5",
     "emittery": "^0.9.2",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.1",

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";
@@ -102,13 +101,8 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
 
     public async setScenePath(scenePath: string): Promise<void> {
         if (!this.appProxy.box) return;
-        if (this.appProxy.box.focus) {
-            setScenePath(this.getRoom(), scenePath);
-        } else {
-            this.emitter.emit("focus", true);
-            await wait(50);
-            setScenePath(this.getRoom(), scenePath);
-        }
+        this.appProxy.setFullPath(scenePath);
+        this.manager.viewManager.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.AppBlur: {
-                    this.appBlurHandler(data.payload);
-                    break;
-                }
                 case Events.AppBoxStateChange: {
                     this.appBoxStateHandler(data.payload);
                     break;
@@ -57,21 +51,10 @@ export class AppListeners {
         this.manager.room?.refreshViewSize();
     };
 
-    private appBlurHandler = (payload: any) => {
-        const proxy = this.appProxies.get(payload.appId);
-        if (proxy) {
-            proxy.appEmitter.emit("writableChange", false);
-            if (proxy.view?.mode === ViewVisionMode.Writable) {
-                this.manager.viewManager.refreshViews();
-            }
-        }
-    };
-
     private appBoxStateHandler = (payload: any) => {
         this.boxManager.setBoxState(payload.state);
     };
 
-
     private switchViewsToFreedomHandler = () => {
         this.manager.viewManager.freedomAllViews();
     };

package/src/AppManager.ts

@@ -80,16 +80,20 @@ export class AppManager {
         this.refresher?.add("maximized", () => {
             return autorun(
                 () => {
-                    const maximized = this.attributes.maximized
-                    this.boxManager.teleBoxManager.setMaximized(Boolean(maximized), true);
+                    const maximized = this.attributes.maximized;
+                    if (this.boxManager.maximized !== maximized) {
+                        this.boxManager.setMaximized(Boolean(maximized));
+                    }
                 }
             )
         });
         this.refresher?.add("minimized", () => {
             return autorun(
                 () => {
-                    const minimized = this.attributes.minimized
-                    this.boxManager.teleBoxManager.setMinimized(Boolean(minimized), true);
+                    const minimized = this.attributes.minimized;
+                    if (this.boxManager.minimized !== minimized) {
+                        this.boxManager.setMinimized(Boolean(minimized));
+                    }
                 }
             )
         });
@@ -98,7 +102,7 @@ export class AppManager {
             if (!mainScenePath) return;
             const sceneState = this.displayer.state.sceneState;
             if (sceneState.scenePath !== mainScenePath) {
-                this.room?.setScenePath(mainScenePath);
+                setScenePath(this.room, mainScenePath);
             }
         }
         this.displayerWritableListener(!this.room?.isWritable);
@@ -170,7 +174,7 @@ export class AppManager {
         this.appStatus.set(appId, AppStatus.StartCreate);
         this.store.setupAppAttributes(params, appId, isDynamicPPT);
         if (this.boxManager.boxState === TELE_BOX_STATE.Minimized) {
-            this.boxManager.teleBoxManager.setState(TELE_BOX_STATE.Normal);
+            this.boxManager.setBoxState(TELE_BOX_STATE.Normal);
         }
         const needFocus = this.boxManager.boxState !== TELE_BOX_STATE.Minimized;
         if (needFocus) {
@@ -246,9 +250,9 @@ export class AppManager {
         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();

package/src/Base/Context.ts

@@ -14,16 +14,23 @@ export class Context {
     };
 
     public get uid() {
-        return this.memoizeFindMember(this.observerId)?.payload?.uid || "";
+        return this.findMember(this.observerId)?.payload?.uid || "";
     }
 
-    private findMember =  (memberId: number) => {
+    public findMember = (memberId: number) => {
         const roomMembers = this.manager.room?.state.roomMembers;
         return roomMembers?.find(member => member.memberId === memberId);
     }
 
+    public findMemberByUid = (uid: string) => {
+        const roomMembers = this.manager.room?.state.roomMembers;
+        return roomMembers?.find(member => member.payload?.uid === uid);
+    }
+
     public memoizeFindMember = memoize(this.findMember);
 
+    public memoizeFindMemberByUid = memoize(this.findMemberByUid);
+
     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 ?? {};
@@ -286,6 +294,18 @@ export class BoxManager {
         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() {
         this.teleBoxManager.destroy();
     }

package/src/Cursor/Cursor.ts

@@ -180,7 +180,7 @@ export class Cursor extends Base {
     }
 
     public setMember() {
-        this.member = this.context.memoizeFindMember(this.context.observerId);
+        this.member = this.context.memoizeFindMemberByUid(this.memberId);
         this.component?.$set(omit(this.initProps(), ["x", "y", "visible"]));
     }
 

package/src/Utils/Common.ts

@@ -26,7 +26,7 @@ export const setScenePath = (room: Room | undefined, scenePath: string) => {
             room.setScenePath(scenePath);
         }
     }
-};
+}
 
 export const setViewMode = (view: View, mode: ViewVisionMode) => {
     if (view.mode !== mode) {

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.0";
+    public version = "0.3.3";
 
     public appListeners?: AppListeners;
 
@@ -449,7 +449,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 +504,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/viewManager.ts

@@ -2,11 +2,9 @@ import { Base } from "./Base";
 import { callbacks, WindowManager } from "./index";
 import { reaction, ViewVisionMode } from "white-web-sdk";
 import { SET_SCENEPATH_DELAY } from "./constants";
-import { TELE_BOX_STATE } from "@netless/telebox-insider";
 import {
     notifyMainViewModeChange,
     setScenePath,
-    setViewFocusScenePath,
     setViewMode,
 } from "./Utils/Common";
 import type { View } from "white-web-sdk";
@@ -15,6 +13,7 @@ import type { AppManager } from "./AppManager";
 export class ViewManager extends Base {
     private views: Map<string, View> = new Map();
     private timer?: number;
+    private appTimer?: number;
 
     private mainViewProxy = this.manager.mainViewProxy;
     private displayer = this.manager.displayer;
@@ -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();
@@ -131,15 +112,15 @@ export class ViewManager extends Base {
     }
 
     public switchAppToWriter(id: string): void {
+        if (this.appTimer) {
+            clearTimeout(this.appTimer);
+        }
         this.freedomAllViews();
         // 为了同步端不闪烁, 需要给 room setScenePath 一个延迟
-        setTimeout(() => {
+        this.appTimer = setTimeout(() => {
             const appProxy = this.manager.appProxies.get(id);
             if (appProxy) {
-                const boxState = this.store.getBoxState();
-                if (boxState && boxState === TELE_BOX_STATE.Minimized) {
-                    return;
-                }
+                if (this.manager.boxManager.minimized) return;
                 appProxy.setScenePath();
                 appProxy.switchToWritable();
                 appProxy.focusBox();