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

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;
@@ -19,7 +19,7 @@ export class CursorManager {
     public cursorInstances: Map<string, Cursor> = new Map();
     public roomMembers?: readonly RoomMember[];
     private mainViewElement?: HTMLDivElement;
-    private delegate = this.appManager.delegate;
+    private store = this.appManager.store;
 
     constructor(private manager: WindowManager, private appManager: AppManager) {
         this.roomMembers = this.manager.room?.state.roomMembers;
@@ -76,34 +76,11 @@ export class CursorManager {
     }
 
     public get boxState() {
-        return this.delegate.getBoxState();
-    }
-
-    public get focusBox() {
-        return this.appManager.boxManager.getFocusBox();
+        return this.store.getBoxState();
     }
 
     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,58 +94,70 @@ export class CursorManager {
         }
     }, 5);
 
-    private initCursorAttributes() {
-        this.delegate.updateCursor(this.observerId, {
-            x: 0,
-            y: 0,
-            type: "main"
-        });
-        this.delegate.updateCursorState(this.observerId, CursorState.Leave);
+    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,
+                });
+            }
+        }
     }
 
-    public getFocusBox() {
-        return this.appManager.boxManager.getFocusBox();
+    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;
+        }
     }
 
-    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.delegate.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.delegate.updateCursor(this.observerId, {
-                        x: worldPosition.x, y: worldPosition.y, ...event
-                    });
-                }
+    /**
+     *  因为窗口内框在不同分辨率下的大小不一样，所以这里通过来鼠标事件的 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",
+        });
+        this.store.updateCursorState(this.observerId, CursorState.Leave);
     }
-    
+
     private setNormalCursorState() {
-        const cursorState = this.delegate.getCursorState(this.observerId)
+        const cursorState = this.store.getCursorState(this.observerId);
         if (cursorState !== CursorState.Normal) {
-            this.delegate.updateCursorState(this.observerId, CursorState.Normal);
+            this.store.updateCursorState(this.observerId, CursorState.Normal);
         }
     }
 
     private mouseLeaveListener = () => {
         this.hideCursor(this.observerId);
-        this.delegate.updateCursorState(this.observerId, CursorState.Leave);
+        this.store.updateCursorState(this.observerId, CursorState.Leave);
     };
 
     public updateContainerRect() {
@@ -187,7 +176,7 @@ export class CursorManager {
     }
 
     public cleanMemberCursor(memberId: string) {
-        this.delegate.cleanCursor(memberId);
+        this.store.cleanCursor(memberId);
         const cursor = this.cursorInstances.get(memberId);
         if (cursor) {
             cursor.destroy();
@@ -215,7 +204,7 @@ export class CursorManager {
             if (instance) {
                 instance.destroy();
             }
-            this.delegate.cleanCursor(memberId);
+            this.store.cleanCursor(memberId);
         });
     }
 

package/src/MainView.ts

@@ -1,26 +1,44 @@
-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 delegate = this.manager.delegate;
+    private store = this.manager.store;
     private started = false;
-    private observerId = this.manager.displayer.observerId;
+    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;
+    }
+
     private cameraReaction = () => {
         return reaction(
             () => this.manager.attributes?.[Fields.MainViewCamera],
@@ -41,7 +59,7 @@ export class MainViewProxy {
             size => {
                 if (size && size.id !== this.observerId) {
                     this.moveCameraToContian(size);
-                    this.moveCamera(this.delegate.getMainViewCamera());
+                    this.moveCamera(this.store.getMainViewCamera());
                 }
             },
             {
@@ -51,22 +69,65 @@ 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) => {
-        this.delegate.setMainViewCamera({ ...camera, id: this.observerId});
-        if (this.delegate.getMainViewSize()?.id !== this.observerId) {
+        this.store.setMainViewCamera({ ...camera, id: this.observerId});
+        if (this.store.getMainViewSize()?.id !== this.observerId) {
             this.setMainViewSize(this.view.size);
         }
     }
 
+    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.delegate.setMainViewSize({ ...size, id: this.observerId });
+        this.store.setMainViewSize({ ...size, id: this.observerId });
     }, 50);
 
     private addCameraListener() {
@@ -77,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({
@@ -104,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/Utils/RoomHacker.ts

@@ -28,7 +28,7 @@ export const replaceRoomFunction = (room: Room, manager: AppManager) => {
                 manager.mainView.disableCameraTransform = disable;
             },
         });
-    
+
         room.moveCamera = (camera: Camera) => manager.mainView.moveCamera(camera);
         room.moveCameraToContain = (...args) => manager.mainView.moveCameraToContain(...args);
         room.convertToPointInWorld = (...args) => manager.mainView.convertToPointInWorld(...args);

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,6 +168,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
     private static isCreated = false;
 
+    public version = "0.2.19-canary.0";
+
     public appListeners?: AppListeners;
 
     public readonly?: boolean;
@@ -381,7 +383,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
                     throw new InvalidScenePath();
                 }
                 for (const appId in this.apps) {
-                    const appScenePath = appManager.delegate.getAppScenePath(appId);
+                    const appScenePath = appManager.store.getAppScenePath(appId);
                     if (appScenePath && appScenePath === scenePath) {
                         console.warn(`[WindowManager]: ScenePath ${scenePath} Already opened`);
                         return;
@@ -410,18 +412,18 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     /**
      * 设置 mainView 的 ScenePath, 并且切换白板为可写状态
      */
-    public setMainViewScenePath(scenePath: string): void {
+    public async setMainViewScenePath(scenePath: string): Promise<void> {
         if (this.appManager) {
-            this.appManager.setMainViewScenePath(scenePath);
+            await this.appManager.setMainViewScenePath(scenePath);
         }
     }
 
     /**
      * 设置 mainView 的 SceneIndex, 并且切换白板为可写状态
      */
-    public setMainViewSceneIndex(index: number): void {
+    public async setMainViewSceneIndex(index: number): Promise<void> {
         if (this.appManager) {
-            this.appManager.setMainViewSceneIndex(index);
+            await this.appManager.setMainViewSceneIndex(index);
         }
     }
 
@@ -429,14 +431,14 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
      * 返回 mainView 的 ScenePath
      */
     public getMainViewScenePath(): string {
-        return this.appManager?.delegate.getMainViewScenePath();
+        return this.appManager?.store.getMainViewScenePath();
     }
 
     /**
      * 返回 mainView 的 SceneIndex
      */
     public getMainViewSceneIndex(): number {
-        return this.appManager?.delegate.getMainViewSceneIndex();
+        return this.appManager?.store.getMainViewSceneIndex();
     }
 
     /**
@@ -453,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();
     }
 
     /**
@@ -469,8 +471,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public setViewMode(mode: ViewMode): void {
         if (!this.canOperate) return;
         if (mode === ViewMode.Broadcaster) {
-            this.appManager?.delegate.setMainViewCamera({ ...this.mainView.camera, id: this.displayer.observerId });
-            this.appManager?.delegate.setMainViewSize({ ...this.mainView.size, id: this.displayer.observerId });
+            this.appManager?.store.setMainViewCamera({ ...this.mainView.camera, id: this.displayer.observerId });
+            this.appManager?.store.setMainViewSize({ ...this.mainView.size, id: this.displayer.observerId });
             this.appManager?.mainViewProxy.start();
         }
         if (mode === ViewMode.Freedom) {
@@ -481,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();
         }
@@ -489,14 +491,14 @@ 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();
         }
     }
 
     public get apps(): Apps | undefined {
-        return this.appManager?.delegate.apps();
+        return this.appManager?.store.apps();
     }
 
     public get boxState(): TeleBoxState {
@@ -569,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.delegate.setMainViewFocusPath();
-            }
-            if (
-                this.appManager.delegate.focus === undefined &&
-                mainView.mode !== ViewVisionMode.Writable
-            ) {
-                this.appManager.viewManager.switchMainViewToWriter();
-            }
-            this.appManager.viewManager.addMainViewListener();
-            emitter.emit("mainViewMounted");
         }
     }
 
@@ -614,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://");

package/src/sdk.ts

@@ -1,3 +1,4 @@
+import { isBoolean } from 'lodash';
 import { WhiteWebSdk } from 'white-web-sdk';
 import { WindowManager } from './index';
 import type { MountParams } from "./index";
@@ -30,6 +31,9 @@ export class WhiteWindowSDK {
             room,
             ...params.mountParams
         });
+        if (isBoolean(params.joinRoomParams.disableCameraTransform)) {
+            manager.mainView.disableCameraTransform = params.joinRoomParams.disableCameraTransform;
+        }
         return manager;
     }
 }