@netless/window-manager 0.3.3 → 0.3.5

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.3",
+  "version": "0.3.5",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -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

@@ -102,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

@@ -28,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;
@@ -51,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.maximized !== maximized) {
-                        this.boxManager.setMaximized(Boolean(maximized));
+            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.minimized !== minimized) {
-                        this.boxManager.setMinimized(Boolean(minimized));
+            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.setBoxState(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,7 +234,7 @@ export class AppManager {
             appProxy.appEmitter.emit("roomStateChange", state);
         });
         emitter.emit("observerIdChange", this.displayer.observerId);
-    }
+    };
 
     private displayerWritableListener = (isReadonly: boolean) => {
         const isWritable = !isReadonly;
@@ -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,7 +13,7 @@ export class Context {
     };
 
     public get uid() {
-        return this.findMember(this.observerId)?.payload?.uid || "";
+        return this.manager.room?.uid || "";
     }
 
     public findMember = (memberId: number) => {
@@ -27,10 +26,6 @@ export class Context {
         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

@@ -225,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);
@@ -289,11 +286,6 @@ 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);
     }

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.memoizeFindMemberByUid(this.memberId);
-        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.3";
+    public version = "0.3.5";
 
     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`);

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

@@ -104,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();

package/e2e/cypress/integration/index.spec.ts

@@ -1,105 +0,0 @@
-import { TELE_BOX_STATE } from "@netless/telebox-insider";
-import { RoomPhase, ViewVisionMode } from "white-web-sdk";
-
-describe("正常流程", () => {
-    before(() => {
-        cy.visit("/");
-        cy.wait(8000);
-    })
-
-    afterEach(() => {
-        cy.wait(1000)
-    })
-    
-    it("挂载成功", () => {
-        cy.window().then((window: any) => {
-            const manager = window.manager;
-            const room = window.room;
-            expect(room).to.be.a("object");
-            expect(room.phase).to.be.equal(RoomPhase.Connected);
-            expect(manager).to.be.a("object");
-        })
-    })
-
-    it("插入一个 APP", () => {
-        cy.window().then(async (window: any) => {
-            const manager = window.manager;
-            const appId = await manager.addApp({
-                kind: "HelloWorld",
-                options: {
-                    scenePath: "/helloworld1"
-                }
-            });
-            cy.wait(1000).then(() => {
-                expect(appId).to.be.string;
-                cy.get(".telebox-box").should("have.length", 1);
-                expect(manager.queryAll().length).to.be.equal(1);
-            })
-        });
-    })
-
-    it("切换可写白板", () => {
-        cy.window().then(async (window: any) => {
-            const manager = window.manager;
-            const apps = manager.queryAll();
-            const app = apps[0];
-            cy.get(".netless-window-manager-main-view").click({ force: true })
-            cy.wait(1000).then(() => {
-                expect(manager.mainView.mode).to.be.equal(ViewVisionMode.Writable);
-            })
-            cy.get(`[data-tele-box-i-d=${app.id}] .telebox-content-wrap`).click({ force: true });
-            cy.wait(1000).then(() => {
-                expect(app.view.mode).to.be.equal(ViewVisionMode.Writable);
-            })
-        });
-    })
-
-    it("最大化", () => {
-        cy.window().then(async (window: any) => {
-            const manager = window.manager;
-            const apps = manager.queryAll();
-            const app = apps[0];
-            expect(manager.boxState).to.be.equal(TELE_BOX_STATE.Normal);
-            cy.get(`[data-tele-box-i-d=${app.id}] .telebox-titlebar-icon-maximize`).click({ force: true });
-            cy.wait(500).then(() => {
-                expect(manager.boxState).to.be.equal(TELE_BOX_STATE.Maximized);
-            });
-            cy.get(`[data-tele-box-i-d=${app.id}] .telebox-titlebar-icon-maximize`).click({ force: true });
-            cy.wait(500).then(() => {
-                expect(manager.boxState).to.be.equal(TELE_BOX_STATE.Normal);
-            });
-        })
-    })
-
-    it("最小化", () => {
-        cy.window().then(async (window: any) => {
-            const manager = window.manager;
-            const apps = manager.queryAll();
-            const app = apps[0];
-            expect(manager.boxState).to.be.equal(TELE_BOX_STATE.Normal);
-            cy.get(`[data-tele-box-i-d=${app.id}] .telebox-titlebar-icon-minimize`).click({ force: true });
-            cy.wait(500).then(() => {
-                expect(manager.boxState).to.be.equal(TELE_BOX_STATE.Minimized);
-                cy.get(".telebox-collector.telebox-collector-visible").should("have.length", 1);
-            });
-            cy.get(`.telebox-collector.telebox-collector-visible`).click({ force: true });
-            cy.wait(500).then(() => {
-                expect(manager.boxState).to.be.equal(TELE_BOX_STATE.Normal);
-            });
-        })
-    })
-
-    it("删除所有 APP", () => {
-        cy.window().then(async (window: any) => {
-            const manager = window.manager;
-            const apps = manager.queryAll();
-            for (const app of apps) {
-                await app.close();
-            }
-            expect(manager.queryAll().length).to.be.equal(0);
-            cy.get(".telebox-box").should("have.length", 0);
-        })
-    })
-})
-
-export {};

package/e2e/cypress/integration/readonly.spec.ts

@@ -1,26 +0,0 @@
-import { RoomPhase } from 'white-web-sdk';
-import type { Room} from "white-web-sdk";
-
-describe("只读模式加入房间", () => {
-    before(() => {
-        cy.visit("/?isWritable=false");
-        cy.wait(8000);
-    })
-
-    afterEach(() => {
-        cy.wait(1000)
-    })
-
-    it("挂载成功", () => {
-        cy.window().then((window: any) => {
-            const manager = window.manager;
-            const room = window.room as Room;
-            expect(room.phase).to.be.equal(RoomPhase.Connected);
-            expect(manager).to.be.a("object");
-            expect(room.isWritable).to.be.false;
-            cy.get(".netless-whiteboard").should("have.length", 1);      
-        })
-    })
-})
-
-export {};

package/e2e/cypress/plugins/index.js

@@ -1,22 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-// eslint-disable-next-line no-unused-vars
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-}

package/e2e/cypress/support/commands.js

@@ -1,25 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

package/e2e/cypress/support/index.js

@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')