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

package/src/viewManager.ts

@@ -1,73 +1,55 @@
-import { callbacks, WindowManager } from "./index";
-import { debounce } from "lodash";
-import { SET_SCENEPATH_DELAY } from "./constants";
+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 { TELE_BOX_STATE } from "@netless/telebox-insider";
-import { ViewVisionMode, reaction } from "white-web-sdk";
-import type { Camera, Displayer, Size, View } from "white-web-sdk";
+import type { Displayer, View } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 import type { CameraStore } from "./Utils/CameraStore";
 
-export class ViewManager {
-    public mainView: View;
+export class ViewManager extends Base {
     private views: Map<string, View> = new Map();
-    private mainViewIsAddListener = false;
-    private delegate = this.manager.delegate;
     private timer?: number;
+    private mainViewProxy = this.manager.mainViewProxy;
 
     constructor(
         private displayer: Displayer,
-        private manager: AppManager,
+        manager: AppManager,
         private cameraStore: CameraStore
     ) {
-        this.mainView = this.createMainView();
-        this.addMainViewCameraListener();
+        super(manager);
         setTimeout(() => { // 延迟初始化 focus 的 reaction
             this.manager.refresher?.add("focus", () => {
                 return reaction(
-                    () => this.manager.delegate.focus,
+                    () => this.store.focus,
                     focus => {
                         if (focus) {
                             this.switchAppToWriter(focus);
                         } else {
                             this.switchMainViewToWriter();
+                            this.manager.boxManager.blurFocusBox();
                         }
                     },
                     { fireImmediately: true }
                 )
             });
-        }, 100)
+        }, 100);
     }
 
     public get currentScenePath(): string {
         return this.displayer.state.sceneState.scenePath;
     }
 
-    public createMainView(): View {
-        const mainView = this.displayer.views.createView();
-        this.cameraStore.setCamera("mainView", mainView.camera);
-        mainView.callbacks.on("onSizeUpdated", () => {
-            this.manager.boxManager.updateManagerRect();
-        });
-        const mainViewScenePath = this.manager.delegate.getMainViewScenePath();
-        if (mainViewScenePath) {
-            setViewFocusScenePath(mainView, mainViewScenePath);
-        }
-        if (!this.delegate.focus) {
-            this.switchMainViewModeToWriter();
-        }
-        return mainView;
+    public get mainView(): View {
+        return this.mainViewProxy.view;
     }
 
-    public setMainViewSize = debounce(size => {
-        this.manager.delegate.setMainViewSize({ ...size });
-    }, 200);
-
     public createView(appId: string): View {
         const view = this.displayer.views.createView();
         this.cameraStore.setCamera(appId, view.camera);
@@ -94,76 +76,20 @@ export class ViewManager {
         return this.views.get(appId);
     }
 
-    private addMainViewCameraListener() {
-        this.mainView.callbacks.on("onCameraUpdated", this.mainViewCameraListener);
-    }
-
-    private removeMainViewCameraListener() {
-        this.mainView.callbacks.off("onCameraUpdated", this.mainViewCameraListener);
-    }
-
-    public switchMainViewToFreedom(): void {
-        this.manager.delegate.setMainViewFocusPath();
-        notifyMainViewModeChange(callbacks, ViewVisionMode.Freedom);
-        setViewMode(this.mainView, ViewVisionMode.Freedom);
-    }
-
-    public switchMainViewModeToWriter(): void {
-        if (!this.manager.canOperate) return;
-        if (this.mainView) {
-            if (this.mainView.mode === ViewVisionMode.Writable) return;
-            notifyMainViewModeChange(callbacks, ViewVisionMode.Writable);
-            setViewMode(this.mainView, ViewVisionMode.Writable);
-        }
-    }
-
-    public addMainViewListener(): void {
-        if (this.mainViewIsAddListener) return;
-        if (this.mainView.divElement) {
-            this.mainView.divElement.addEventListener("click", this.mainViewClickListener);
-            this.mainView.divElement.addEventListener("touchend", this.mainViewClickListener);
-            this.mainViewIsAddListener = true;
-        }
-    }
-
-    public removeMainViewListener(): void {
-        if (this.mainView.divElement) {
-            this.mainView.divElement.removeEventListener("click", this.mainViewClickListener);
-            this.mainView.divElement.removeEventListener("touchend", this.mainViewClickListener);
-        }
-    }
-
-    private mainViewClickListener = () => {
-        this.mainViewClickHandler();
-    };
-
-    public async mainViewClickHandler(): Promise<void> {
-        if (!this.manager.canOperate) return;
-        if (this.mainView.mode === ViewVisionMode.Writable) return;
-        this.manager.delegate.cleanFocus();
-        this.manager.boxManager.blurFocusBox();
-    }
-
-    private mainViewCameraListener = (camera: Camera) => {
-        this.cameraStore.setCamera("mainView", camera);
-    };
-
     public switchMainViewToWriter(): Promise<boolean> | undefined {
         if (this.timer) {
             clearTimeout(this.timer);
         }
         if (this.mainView.mode === ViewVisionMode.Writable) return;
+        this.freedomAllViews();
         return new Promise((resolve, reject) => {
             this.timer = window.setTimeout(() => {
                 try {
-                    const mainViewScenePath = this.manager.delegate.getMainViewScenePath();
+                    const mainViewScenePath = this.store.getMainViewScenePath();
                     if (mainViewScenePath) {
                         this.freedomAllViews();
-                        this.removeMainViewCameraListener();
                         setScenePath(this.manager.room, mainViewScenePath);
-                        this.switchMainViewModeToWriter();
-                        this.manager.cameraStore.recoverCamera("mainView", this.mainView);
-                        this.addMainViewCameraListener();
+                        this.mainViewProxy.switchViewModeToWriter();
                     }
                     resolve(true);
                 } catch (error) {
@@ -174,25 +100,18 @@ export class ViewManager {
     }
 
     public refreshViews(): void {
-        const focus = this.manager.delegate.focus;
+        const focus = this.store.focus;
         this.setMainViewFocusScenePath();
         if (focus) {
             const appProxy = this.manager.appProxies.get(focus);
-            if (appProxy) {
-                if (appProxy.view?.mode === ViewVisionMode.Writable) return;
-                appProxy.removeCameraListener();
-                appProxy.switchToWritable();
-                appProxy.recoverCamera();
-                appProxy.addCameraListener();
-            }
+            appProxy?.switchToWritable();
         } else {
-            if (this.manager.mainView.mode === ViewVisionMode.Writable) return;
             this.switchMainViewToWriter();
         }
     }
 
     public setMainViewFocusScenePath() {
-        const mainViewScenePath = this.manager.delegate.getMainViewScenePath();
+        const mainViewScenePath = this.store.getMainViewScenePath();
         if (mainViewScenePath) {
             setViewFocusScenePath(this.manager.mainView, mainViewScenePath);
         }
@@ -209,8 +128,8 @@ export class ViewManager {
             notifyMainViewModeChange(callbacks, ViewVisionMode.Freedom);
             this.mainView.mode = ViewVisionMode.Freedom;
         }
-        if (!this.manager.viewManager.mainView.focusScenePath) {
-            this.manager.delegate.setMainViewFocusPath();
+        if (!this.mainView.focusScenePath) {
+            this.store.setMainViewFocusPath();
         }
     }
 
@@ -220,22 +139,19 @@ export class ViewManager {
         setTimeout(() => {
             const appProxy = this.manager.appProxies.get(id);
             if (appProxy) {
-                const boxState = this.manager.delegate.getBoxState();
+                const boxState = this.store.getBoxState();
                 if (boxState && boxState === TELE_BOX_STATE.Minimized) {
                     return;
                 }
-                appProxy.removeCameraListener();
                 appProxy.setScenePath();
                 appProxy.switchToWritable();
-                appProxy.recoverCamera();
-                appProxy.addCameraListener();
                 appProxy.focusBox();
             }
         }, SET_SCENEPATH_DELAY);
     }
 
     public destroy(): void {
-        this.removeMainViewListener();
+        this.mainViewProxy.removeMainViewListener();
         if (WindowManager.wrapper) {
             WindowManager.wrapper.parentNode?.removeChild(WindowManager.wrapper);
             WindowManager.wrapper = undefined;