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

package/package.json

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

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

@@ -14,7 +14,8 @@ 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';
@@ -41,21 +42,15 @@ 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)) {
@@ -128,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);
@@ -225,7 +237,7 @@ export class AppManager {
         });
         if (isWritable === true) {
             if (!this.store.focus) {
-                this.viewManager.switchMainViewModeToWriter();
+                this.mainViewProxy.switchViewModeToWriter();
             }
             this.mainView.disableCameraTransform = false;
         } else {

package/src/AppProxy.ts

@@ -65,7 +65,6 @@ export class AppProxy extends Base {
         if (this.params.options?.scenePath) {
             // 只有传入了 scenePath 的 App 才会创建 View
             this.createView();
-            this.addCameraListener();
         }
         this.isAddApp = isAddApp;
     }
@@ -192,16 +191,20 @@ export class AppProxy extends Base {
 
     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.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();
             }
         }
     }
@@ -335,8 +338,9 @@ export class AppProxy extends Base {
         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;
     }

package/src/AttributesDelegate.ts

@@ -94,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];
     }

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);

package/src/Cursor/index.ts

@@ -1,17 +1,17 @@
-import { Cursor } from './Cursor';
-import { CursorState } from '../constants';
-import { debounce } from 'lodash';
-import { Fields } from '../AttributesDelegate';
-import { onObjectInserted } from '../Utils/Reactive';
-import { WindowManager } from '../index';
-import type { PositionType } from '../AttributesDelegate';
-import type { RoomMember } from "white-web-sdk";
+import { Cursor } from "./Cursor";
+import { CursorState } from "../constants";
+import { debounce } from "lodash";
+import { Fields } from "../AttributesDelegate";
+import { onObjectInserted } from "../Utils/Reactive";
+import { WindowManager } from "../index";
+import type { PositionType } from "../AttributesDelegate";
+import type { Point, RoomMember, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 
 export type EventType = {
-    type: PositionType, 
-    id?: string
-}
+    type: PositionType;
+    id?: string;
+};
 export class CursorManager {
     public containerRect?: DOMRect;
     public wrapperRect?: DOMRect;
@@ -79,31 +79,8 @@ export class CursorManager {
         return this.store.getBoxState();
     }
 
-    public get focusBox() {
-        return this.appManager.boxManager.getFocusBox();
-    }
-
     public get focusView() {
-        return this.appManager.focusApp?.view
-    }
-
-    /**
-     *  因为窗口内框在不同分辨率下的大小不一样，所以这里通过来鼠标事件的 target 来判断是在主白板还是在 APP 中
-     */
-    private getType = (event: MouseEvent | Touch): EventType => {
-        const target = event.target as HTMLElement;
-        const targetIsMain = target.parentElement === this.mainViewElement;
-        if (targetIsMain) {
-            return { type: "main" };
-        } else {
-            if (!this.focusView) return { type: "main" };
-            const focusApp = this.appManager.focusApp;
-            const targetIsFocusApp = target.parentElement === focusApp?.view?.divElement;
-            if (targetIsFocusApp) {
-                return { type: "app" };
-            }
-            return { type: "main" };
-        }
+        return this.appManager.focusApp?.view;
     }
 
     private mouseMoveListener = debounce((event: MouseEvent) => {
@@ -117,50 +94,62 @@ export class CursorManager {
         }
     }, 5);
 
+    private updateCursor(event: EventType, clientX: number, clientY: number) {
+        if (this.wrapperRect && this.manager.canOperate) {
+            const view = event.type === "main" ? this.appManager.mainView : this.focusView;
+            const point = this.getPoint(view, clientX, clientY);
+            if (point) {
+                this.setNormalCursorState();
+                this.store.updateCursor(this.observerId, {
+                    x: point.x,
+                    y: point.y,
+                    ...event,
+                });
+            }
+        }
+    }
+
+    private getPoint = (view: View | undefined, clientX: number, clientY: number): Point | undefined => {
+        const rect = view?.divElement?.getBoundingClientRect();
+        if (rect) {
+            const point = view?.convertToPointInWorld({
+                x: clientX - rect.x,
+                y: clientY - rect.y,
+            });
+            return point;
+        }
+    }
+
+    /**
+     *  因为窗口内框在不同分辨率下的大小不一样，所以这里通过来鼠标事件的 target 来判断是在主白板还是在 APP 中
+     */
+    private getType = (event: MouseEvent | Touch): EventType => {
+        const target = event.target as HTMLElement;
+        const focusApp = this.appManager.focusApp;
+        switch (target.parentElement) {
+            case this.mainViewElement: {
+                return { type: "main" }; 
+            }
+            case focusApp?.view?.divElement: {
+                return { type: "app" };
+            }
+            default: {
+                return { type: "main" };
+            }
+        }
+    };
+
     private initCursorAttributes() {
         this.store.updateCursor(this.observerId, {
             x: 0,
             y: 0,
-            type: "main"
+            type: "main",
         });
         this.store.updateCursorState(this.observerId, CursorState.Leave);
     }
 
-    public getFocusBox() {
-        return this.appManager.boxManager.getFocusBox();
-    }
-
-    private updateCursor(event: EventType, clientX: number, clientY: number) {
-        if (this.wrapperRect && this.manager.canOperate) {
-            if (event.type === "main")  {
-                const mainView = this.appManager.mainView;
-                const rect = mainView?.divElement?.getBoundingClientRect();
-                if (rect) {
-                    const point = mainView.convertToPointInWorld({
-                        x: clientX - rect.x,
-                        y: clientY - rect.y,
-                    })
-                    this.setNormalCursorState();
-                    this.store.updateCursor(this.observerId, {
-                        x: point.x, y: point.y, ...event
-                    });
-                }
-            } else if (event.type === "app") {
-                const viewRect = this.focusView?.divElement?.getBoundingClientRect();
-                if (viewRect) {
-                    const worldPosition = this.focusView?.convertToPointInWorld({ x: clientX - viewRect.x, y: clientY - viewRect.y });
-                    if (!worldPosition) return;
-                    this.setNormalCursorState();
-                    this.store.updateCursor(this.observerId, {
-                        x: worldPosition.x, y: worldPosition.y, ...event
-                    });
-                }
-            }
-        }
-    }
-    
     private setNormalCursorState() {
-        const cursorState = this.store.getCursorState(this.observerId)
+        const cursorState = this.store.getCursorState(this.observerId);
         if (cursorState !== CursorState.Normal) {
             this.store.updateCursorState(this.observerId, CursorState.Normal);
         }

package/src/MainView.ts

@@ -1,25 +1,40 @@
-import { AnimationMode, reaction } from 'white-web-sdk';
+import { AnimationMode, reaction, ViewVisionMode } from 'white-web-sdk';
 import { Fields } from './AttributesDelegate';
 import { debounce, isEmpty, isEqual } from 'lodash';
 import type { Camera, Size, View } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
-import { emitter } from './index';
+import { callbacks, emitter } from './index';
+import { notifyMainViewModeChange, setViewFocusScenePath, setViewMode } from './Utils/Common';
 
 export class MainViewProxy {
     private scale?: number;
     private store = this.manager.store;
     private started = false;
+    private mainViewIsAddListener = false;
+    private mainView: View;
 
     constructor(
         private manager: AppManager,
     ) {
+        this.mainView = this.createMainView();
         emitter.once("mainViewMounted").then(() => {
+            this.view.callbacks.on("onCameraUpdated", this.mainViewCameraListener);
             setTimeout(() => {
                 this.start();
             }, 300); // 等待 mainView 挂载完毕再进行监听，否则会触发不必要的 onSizeUpdated
         })
     }
 
+    public start() {
+        if (this.started) return;
+        this.addCameraListener();
+        this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
+        this.manager.refresher?.add(Fields.MainViewSize, this.sizeReaction);
+        this.view.callbacks.on("onSizeUpdated", this.sizeListener);
+        this.started = true;
+    }
+
+
     private get observerId() {
         return this.manager.displayer.observerId;
     }
@@ -54,7 +69,23 @@ export class MainViewProxy {
     }
 
     public get view(): View {
-        return this.manager.viewManager.mainView;   
+        return this.mainView;
+    }
+
+    public createMainView(): View {
+        const mainView = this.manager.displayer.views.createView();
+        this.manager.cameraStore.setCamera("mainView", mainView.camera);
+        mainView.callbacks.on("onSizeUpdated", () => {
+            this.manager.boxManager.updateManagerRect();
+        });
+        const mainViewScenePath = this.store.getMainViewScenePath();
+        if (mainViewScenePath) {
+            setViewFocusScenePath(mainView, mainViewScenePath);
+        }
+        if (!this.store.focus) {
+            this.switchViewModeToWriter();
+        }
+        return mainView;
     }
 
     private cameraListener = (camera: Camera) => {
@@ -64,12 +95,39 @@ export class MainViewProxy {
         }
     }
 
+    public addMainViewListener(): void {
+        if (this.mainViewIsAddListener) return;
+        if (this.view.divElement) {
+            this.view.divElement.addEventListener("click", this.mainViewClickListener);
+            this.view.divElement.addEventListener("touchend", this.mainViewClickListener);
+            this.mainViewIsAddListener = true;
+        }
+    }
+
+    public removeMainViewListener(): void {
+        if (this.view.divElement) {
+            this.view.divElement.removeEventListener("click", this.mainViewClickListener);
+            this.view.divElement.removeEventListener("touchend", this.mainViewClickListener);
+        }
+    }
+
+    private mainViewClickListener = () => {
+        this.mainViewClickHandler();
+    };
+
+    public async mainViewClickHandler(): Promise<void> {
+        if (!this.manager.canOperate) return;
+        if (this.view.mode === ViewVisionMode.Writable) return;
+        this.store.cleanFocus();
+        this.manager.boxManager.blurFocusBox();
+    }
+
     private sizeListener = (size: Size) => {
         this.setMainViewSize(size);
     }
 
     public setMainViewSize = debounce(size => {
-        this.manager.store.setMainViewSize({ ...size, id: this.observerId });
+        this.store.setMainViewSize({ ...size, id: this.observerId });
     }, 50);
 
     private addCameraListener() {
@@ -80,6 +138,22 @@ export class MainViewProxy {
         this.view.callbacks.off("onCameraUpdatedByDevice", this.cameraListener);
     }
 
+    private mainViewCameraListener = (camera: Camera) => {
+        this.manager.cameraStore.setCamera("mainView", camera);
+    };
+
+    public switchViewModeToWriter(): void {
+        if (!this.manager.canOperate) return;
+        if (this.view) {
+            if (this.view.mode === ViewVisionMode.Writable) return;
+            this.view.callbacks.off("onCameraUpdated", this.mainViewCameraListener);
+            notifyMainViewModeChange(callbacks, ViewVisionMode.Writable);
+            setViewMode(this.view, ViewVisionMode.Writable);
+            this.manager.cameraStore.recoverCamera("mainView", this.view);
+            this.view.callbacks.on("onCameraUpdated", this.mainViewCameraListener);
+        }
+    }
+
     public moveCameraToContian(size: Size): void {
         if (!isEmpty(size)) {
             this.view.moveCameraToContain({
@@ -107,15 +181,6 @@ export class MainViewProxy {
         }
     }
 
-    public start() {
-        if (this.started) return;
-        this.addCameraListener();
-        this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
-        this.manager.refresher?.add(Fields.MainViewSize, this.sizeReaction);
-        this.view.callbacks.on("onSizeUpdated", this.sizeListener);
-        this.started = true;
-    }
-
     public stop() {
         this.removeCameraListener();
         this.manager.refresher?.remove(Fields.MainViewCamera);

package/src/constants.ts

@@ -43,7 +43,7 @@ export const REQUIRE_VERSION = "2.13.16";
 export const MIN_WIDTH = 340 / 720;
 export const MIN_HEIGHT = 340 / 720;
 
-export const SET_SCENEPATH_DELAY = 50; // 设置 scenePath 的延迟事件
+export const SET_SCENEPATH_DELAY = 100; // 设置 scenePath 的延迟事件
 
 export const DEFAULT_COLLECTOR_STYLE = { right: "10px", bottom: "15px", position: "absolute" };
 

package/src/index.ts

@@ -35,7 +35,6 @@ import {
     isRoom,
     RoomPhase,
     ViewMode,
-    ViewVisionMode,
     WhiteVersion,
 } from "white-web-sdk";
 import type {
@@ -49,7 +48,8 @@ import type {
     AnimationMode,
     CameraBound,
     Point,
-    Rectangle} from "white-web-sdk";
+    Rectangle,
+    ViewVisionMode} from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
 import type { NetlessApp, RegisterParams } from "./typings";
 import type { TELE_BOX_STATE } from "./BoxManager";
@@ -168,7 +168,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
     private static isCreated = false;
 
-    public version = "0.2.18";
+    public version = "0.2.19-canary.0";
 
     public appListeners?: AppListeners;
 
@@ -455,7 +455,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
      * 切换 mainView 为可写
      */
     public switchMainViewToWriter(): Promise<void> | undefined {
-        return this.appManager?.viewManager.mainViewClickHandler();
+        return this.appManager?.mainViewProxy.mainViewClickHandler();
     }
 
     /**
@@ -483,7 +483,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
 
     public get mainView(): View {
         if (this.appManager) {
-            return this.appManager.viewManager.mainView;
+            return this.appManager.mainViewProxy.view;
         } else {
             throw new AppManagerNotInitError();
         }
@@ -491,7 +491,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
 
     public get camera(): Camera {
         if (this.appManager) {
-            return this.appManager.viewManager.mainView.camera;
+            return this.appManager.mainViewProxy.view.camera;
         } else {
             throw new AppManagerNotInitError();
         }
@@ -571,21 +571,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
 
     private bindMainView(divElement: HTMLDivElement, disableCameraTransform: boolean) {
         if (this.appManager) {
-            const mainView = this.appManager.viewManager.mainView;
-            mainView.disableCameraTransform = disableCameraTransform;
-            mainView.divElement = divElement;
+            this.appManager.bindMainView(divElement, disableCameraTransform);
             this.cursorManager?.setMainViewDivElement(divElement);
-            if (!mainView.focusScenePath) {
-                this.appManager.store.setMainViewFocusPath();
-            }
-            if (
-                this.appManager.store.focus === undefined &&
-                mainView.mode !== ViewVisionMode.Writable
-            ) {
-                this.appManager.viewManager.switchMainViewToWriter();
-            }
-            this.appManager.viewManager.addMainViewListener();
-            emitter.emit("mainViewMounted");
         }
     }
 
@@ -616,12 +603,6 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         }
     }
 
-    private safeDispatchMagixEvent(event: string, payload: any) {
-        if (this.canOperate) {
-            (this.displayer as Room).dispatchMagixEvent(event, payload);
-        }
-    }
-
     private isDynamicPPT(scenes: SceneDefinition[]) {
         const sceneSrc = scenes[0]?.ppt?.src;
         return sceneSrc?.startsWith("pptx://");