@netless/window-manager 0.3.0-canary.1 → 0.3.1

package/example/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import ReactDom from "react-dom";
 import { PlayerPhase, WhiteWebSdk } from "white-web-sdk";
 import type { AppContext} from "../dist";
-import { BuiltinApps, WindowManager } from "../dist";
+import { BuiltinApps, WindowManager } from "../dist/index.es";
 import "../dist/style.css";
 import "video.js/dist/video-js.css";
 
@@ -214,7 +214,7 @@ const replay = () => {
     sdk.replayRoom({
         room: process.env.ROOM_UUID,
         roomToken: process.env.ROOM_TOKEN,
-        invisiblePlugins: [WindowManager],
+        invisiblePlugins: [WindowManager as any],
         useMultiViews: true,
     }).then(async player => {
         await anyWindow.manager.destroy();
@@ -240,7 +240,7 @@ const onRef = (ref) => {
     sdk.joinRoom({
         uuid: process.env.ROOM_UUID,
         roomToken: process.env.ROOM_TOKEN,
-        invisiblePlugins: [WindowManager],
+        invisiblePlugins: [WindowManager as any],
         useMultiViews: true,
         userPayload: {
             userId: "111",

package/package.json

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

package/src/AppListener.ts

@@ -30,10 +30,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 +53,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

@@ -12,6 +12,7 @@ import { callbacks, emitter } from './index';
 import { CameraStore } from './Utils/CameraStore';
 import { genAppId, makeValidScenePath, setScenePath } from './Utils/Common';
 import {
+    autorun,
     isPlayer,
     isRoom,
     ScenePathType,
@@ -76,12 +77,32 @@ export class AppManager {
                 this.onAppDelete(this.attributes.apps);
             });
         });
+        this.refresher?.add("maximized", () => {
+            return autorun(
+                () => {
+                    const maximized = this.attributes.maximized;
+                    if (this.boxManager.teleBoxManager.maximized !== maximized) {
+                        this.boxManager.teleBoxManager.setMaximized(Boolean(maximized), true);
+                    }
+                }
+            )
+        });
+        this.refresher?.add("minimized", () => {
+            return autorun(
+                () => {
+                    const minimized = this.attributes.minimized;
+                    if (this.boxManager.teleBoxManager.minimized !== minimized) {
+                        this.boxManager.teleBoxManager.setMinimized(Boolean(minimized), true);
+                    }
+                }
+            )
+        });
         if (!this.attributes.apps || Object.keys(this.attributes.apps).length === 0) {
             const mainScenePath = this.store.getMainViewScenePath();
             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);
@@ -442,6 +463,7 @@ export class AppManager {
             });
         }
         this.viewManager.destroy();
+        this.boxManager.destroy();
         this.refresher?.destroy();
         this.mainViewProxy.destroy();
         callbacks.clearListeners();

package/src/AttributesDelegate.ts

@@ -52,6 +52,10 @@ export class AttributesDelegate {
         return get(this.apps(), [id, Fields.State]);
     }
 
+    public getMaximized() {
+        return get(this.manager.attributes, ["maximized"])
+    }
+
     public setupAppAttributes(params: AddAppParams, id: string, isDynamicPPT: boolean) {
         const attributes = this.manager.attributes;
         if (!attributes.apps) {

package/src/BoxManager.ts

@@ -216,12 +216,16 @@ export class BoxManager {
             if (state.maximized != null) {
                 this.teleBoxManager.setMaximized(Boolean(state.maximized), true);
                 this.teleBoxManager.setMinimized(Boolean(state.minimized), true);
-            } else if (state.boxState) {
+            } 
+            if (state.boxState) {
                 this.teleBoxManager.setState(state.boxState, true);
             }
-            if (state.focus) {
-                this.teleBoxManager.update(box.id, { focus: true }, true);
-            }
+            setTimeout(() => {
+                if (state.focus) {
+                    this.teleBoxManager.update(box.id, { focus: true }, true);
+                }
+            }, 50);
+            callbacks.emit("boxStateChange", this.teleBoxManager.state);
         }
     }
 
@@ -281,4 +285,8 @@ export class BoxManager {
         this.teleBoxManager.setState(state, true);
         callbacks.emit("boxStateChange", state);
     }
+
+    public destroy() {
+        this.teleBoxManager.destroy();
+    }
 }

package/src/Cursor/Cursor.ts

@@ -142,6 +142,7 @@ export class Cursor extends Base {
         }
         this.timer = window.setTimeout(() => {
             this.hide();
+            this.store.updateCursorState(this.context.uid, CursorState.Leave);
         }, 1000 * 10); // 10 秒钟自动隐藏
     }
 

package/src/Cursor/index.ts

@@ -22,7 +22,6 @@ export type MoveCursorParams = {
 export class CursorManager extends Base {
     public containerRect?: DOMRect;
     public wrapperRect?: DOMRect;
-    private disposer: any;
     public cursorInstances: Map<string, Cursor> = new Map();
     public roomMembers?: readonly RoomMember[];
     private mainViewElement?: HTMLDivElement;
@@ -48,20 +47,25 @@ export class CursorManager extends Base {
     }
 
     private startReaction(wrapper: HTMLElement) {
-        this.disposer = onObjectInserted(this.cursors, () => {
-            this.handleRoomMembersChange(wrapper);
-        });
+        this.manager.refresher?.add("cursors", () => {
+            return onObjectInserted(this.cursors, () => {
+                this.handleRoomMembersChange(wrapper);
+            });
+        })
     }
 
-    private handleRoomMembersChange(wrapper: HTMLElement) {
+    private handleRoomMembersChange = debounce((wrapper: HTMLElement) => {
         const uids = this.roomMembers?.map(member => member.payload?.uid);
+        const cursors = Object.keys(this.cursors);
         if (uids?.length) {
-            for (const uid in this.cursors) {
+            cursors.map(uid => {
                 if (
                     uids.includes(uid) &&
-                    !this.cursorInstances.has(uid) &&
-                    uid !== this.context.uid
+                    !this.cursorInstances.has(uid)
                 ) {
+                    if (uid === this.context.uid) {
+                        return;
+                    }
                     const component = new Cursor(
                         this.appManager,
                         this.cursors,
@@ -71,9 +75,9 @@ export class CursorManager extends Base {
                     );
                     this.cursorInstances.set(uid, component);
                 }
-            }
+            })
         }
-    }
+    }, 100);
 
     public get cursors() {
         return this.manager.attributes?.[Fields.Cursors];
@@ -221,10 +225,10 @@ export class CursorManager extends Base {
             wrapper.removeEventListener("mouseleave", this.mouseLeaveListener);
             wrapper.removeEventListener("touchend", this.mouseLeaveListener);
         }
-        this.disposer && this.disposer();
         if (this.cursorInstances.size) {
             this.cursorInstances.forEach(cursor => cursor.destroy());
             this.cursorInstances.clear();
         }
+        this.manager.refresher?.remove("cursors");
     }
 }

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

@@ -20,9 +20,9 @@ import { log } from './Utils/log';
 import { replaceRoomFunction } from './Utils/RoomHacker';
 import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
 import { setupWrapper } from './ViewManager';
-import { TELE_BOX_STATE } from './BoxManager';
 import './style.css';
 import '@netless/telebox-insider/dist/style.css';
+import type { TELE_BOX_STATE } from './BoxManager';
 import {
     AppCreateError,
     AppManagerNotInitError,
@@ -45,7 +45,6 @@ import type {
     Room,
     InvisiblePluginContext,
     Camera,
-
     AnimationMode,
     CameraBound,
     Point,
@@ -61,6 +60,8 @@ const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 export type WindowMangerAttributes = {
     modelValue?: string;
     boxState: TELE_BOX_STATE;
+    maximized?: boolean;
+    minimized?: boolean;
     [key: string]: any;
 };
 
@@ -169,7 +170,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
     private static isCreated = false;
 
-    public version = "0.3.0-canary.1";
+    public version = "0.3.1";
 
     public appListeners?: AppListeners;
 
@@ -503,7 +504,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
 
     public get boxState(): TeleBoxState {
         if (this.appManager) {
-            return this.appManager.store.getBoxState() || TELE_BOX_STATE.Normal;
+            return this.appManager.boxManager.teleBoxManager.state;
         } else {
             throw new AppManagerNotInitError();
         }

package/src/viewManager.ts

@@ -136,10 +136,7 @@ export class ViewManager extends Base {
         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.teleBoxManager.minimized) return;
                 appProxy.setScenePath();
                 appProxy.switchToWritable();
                 appProxy.focusBox();