@netless/window-manager 1.0.0-canary.13 → 1.0.0-canary.16

package/src/View/CameraSynchronizer.ts

@@ -1,5 +1,5 @@
 import { AnimationMode } from "white-web-sdk";
-import { debounce, delay, throttle } from "lodash";
+import { debounce, delay, isEqual, pick, throttle } from "lodash";
 import type { TeleBoxRect } from "@netless/telebox-insider";
 import type { Camera, View } from "white-web-sdk";
 import type { ISize } from "../AttributesDelegate";
@@ -37,7 +37,6 @@ export class CameraSynchronizer {
                 scale = this.rect.height / size.height;
             }
             const nextScale = camera.scale * scale;
-
             const moveCamera = () => {
                 this.view?.moveCamera({
                     centerX: camera.centerX,
@@ -46,26 +45,29 @@ export class CameraSynchronizer {
                     animationMode: AnimationMode.Immediately,
                 });
             }
-            moveCamera();
+            moveCamera(); 
             // TODO 直接调用 moveCamera 依然会出现 camera 错误的情况,这里暂时加一个 delay 保证 camera 是对的, 后续需要 SDK 进行修改
             delay(moveCamera, 50);
         }
     }, 10);
 
     public onRemoteSizeUpdate(size: ISize) {
-        if (this.rect) {
-            const nextScale = this.rect.width / size.width;
+        this.remoteSize = size;
+        const needMoveCamera = !isEqual(pick(this.rect, ["width", "height"]), pick(size, ["width", "height"]));
+        if (this.rect && this.remoteCamera && needMoveCamera) {
+            const scale = this.rect.width / size.width;
+            const nextScale = this.remoteCamera.scale * scale;
             const moveCamera = () => {
                 this.view?.moveCamera({
                     scale: nextScale,
                     animationMode: AnimationMode.Immediately,
                 })
             };
+            moveCamera();
             delay(moveCamera, 50);
         }
     }
 
-
     public onLocalCameraUpdate(camera: Camera) {
         this.saveCamera(camera);
         this.remoteCamera = camera;

package/src/View/MainView.ts

@@ -1,14 +1,16 @@
 import { callbacks } from "../callback";
-import { CameraSynchronizer } from "./CameraSynchronizer";
 import { createView } from "./ViewManager";
 import { debounce, get, isEqual } from "lodash";
 import { emitter } from "../InternalEmitter";
 import { Events } from "../constants";
 import { Fields } from "../AttributesDelegate";
-import { reaction } from "white-web-sdk";
+import { reaction, toJS } from "white-web-sdk";
 import { releaseView, setViewFocusScenePath } from "../Utils/Common";
 import { SideEffectManager } from "side-effect-manager";
-import type { Camera, Size, View } from "white-web-sdk";
+import { Val } from "value-enhancer";
+import { ViewSync } from "./ViewSync";
+import type { ICamera, ISize } from "../AttributesDelegate";
+import type { Size, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 
 export class MainViewProxy {
@@ -16,16 +18,17 @@ export class MainViewProxy {
     private mainViewIsAddListener = false;
     private mainView: View;
     private store = this.manager.store;
-    private synchronizer: CameraSynchronizer;
 
     private sideEffectManager = new SideEffectManager();
 
+    public camera$ = new Val<ICamera | undefined>(undefined);
+    public size$ = new Val<ISize | undefined>(undefined);
+    public view$ = new Val<View | undefined>(undefined);
+
+    public viewSync?: ViewSync;
+
     constructor(private manager: AppManager) {
-        this.synchronizer = new CameraSynchronizer(camera =>
-            this.store.setMainViewCamera({ ...camera, id: this.manager.uid })
-        );
         this.mainView = this.createMainView();
-        this.moveCameraSizeByAttributes();
         emitter.once("mainViewMounted").then(() => {
             this.addMainViewListener();
             this.start();
@@ -33,20 +36,28 @@ export class MainViewProxy {
             this.startListenWritableChange();
         });
         this.sideEffectManager.add(() => [
-            emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio),
             emitter.on("startReconnect", () => {
                 releaseView(this.mainView);
             }),
-            emitter.on("playgroundSizeChange", rect => {
-                this.synchronizer.setRect(rect);
-            })
         ]);
-        const rect = this.manager.boxManager?.stageRect;
-        if (rect) {
-            this.synchronizer.setRect(rect);
-        }
+        this.createViewSync();
     }
 
+    public createViewSync = () => {
+        if (this.manager.boxManager && !this.viewSync) {
+            this.viewSync = new ViewSync({
+                uid: this.manager.uid,
+                view$: this.view$,
+                camera$: this.camera$,
+                size$: this.size$,
+                stageRect$: this.manager.boxManager?.stageRect$,
+                viewMode$: this.manager.windowManger.viewMode$,
+                storeCamera: this.storeCamera,
+                storeSize: this.storeSize,
+            });
+        }
+    };
+
     private startListenWritableChange = () => {
         this.sideEffectManager.add(() =>
             emitter.on("writableChange", isWritable => {
@@ -60,7 +71,18 @@ export class MainViewProxy {
     public ensureCameraAndSize() {
         if (!this.mainViewCamera || !this.mainViewSize) {
             this.manager.dispatchInternalEvent(Events.InitMainViewCamera);
-            this.setCameraAndSize();
+            this.storeCamera({
+                id: this.manager.uid,
+                ...this.view.camera
+            });
+            const stageRect = this.manager.boxManager?.stageRect;
+            if (stageRect && !this.mainViewSize) {
+                this.storeSize({
+                    id: this.manager.uid,
+                    width: stageRect.width,
+                    height: stageRect.height
+                });
+            }
         }
     }
 
@@ -76,10 +98,6 @@ export class MainViewProxy {
         return get(this.view, ["didRelease"]);
     }
 
-    private moveCameraSizeByAttributes() {
-        this.synchronizer.onRemoteUpdate(this.mainViewCamera, this.mainViewSize);
-    }
-
     public start() {
         if (this.started) return;
         this.addCameraListener();
@@ -89,34 +107,64 @@ export class MainViewProxy {
 
     public addCameraReaction = () => {
         this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
+        this.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
     };
 
-    public setCameraAndSize(): void {
-        const stageSize = this.getStageSize();
-        if (stageSize) {
-            const camera = { ...this.mainView.camera, id: this.manager.uid };
-            const size = { ...stageSize, id: this.manager.uid };
-            this.store.setMainViewCameraAndSize(camera, size);
+    public storeCurrentCamera = () => {
+        const iCamera = this.view.camera;
+        this.storeCamera({
+            id: this.manager.uid,
+            ...iCamera
+        });
+    }
+
+    public storeCurrentSize = () => {
+        const rect = this.manager.boxManager?.stageRect;
+        if (rect) {
+            this.storeSize({
+                id: this.manager.uid,
+                width: rect.width,
+                height: rect.height
+            });
         }
     }
 
+    public storeCamera = (camera: ICamera) => {
+        this.store.setMainViewCamera(camera);
+    };
+
+    public storeSize = (size: ISize) => {
+        this.store.setMainViewSize(size);
+    };
+
     private cameraReaction = () => {
         return reaction(
             () => this.mainViewCamera,
             camera => {
-                if (camera && camera.id !== this.manager.uid) {
-                    this.synchronizer.onRemoteUpdate(camera, this.mainViewSize);
+                if (camera) {
+                    const rawCamera = toJS(camera);
+                    if (!isEqual(rawCamera, this.camera$.value)) {
+                        this.camera$.setValue(rawCamera);
+                    }
                 }
             },
             { fireImmediately: true }
         );
     };
 
-    public onUpdateContainerSizeRatio = () => {
-        const size = this.store.getMainViewSize();
-        if (size.id === this.manager.uid) {
-            this.setCameraAndSize();
-        }
+    private sizeReaction = () => {
+        return reaction(
+            () => this.mainViewSize,
+            size => {
+                if (size) {
+                    const rawSize = toJS(size);
+                    if (!isEqual(rawSize, this.size$.value)) {
+                        this.size$.setValue(rawSize);
+                    }
+                }
+            },
+            { fireImmediately: true }
+        );
     };
 
     public get view(): View {
@@ -133,7 +181,7 @@ export class MainViewProxy {
         if (mainViewScenePath) {
             setViewFocusScenePath(mainView, mainViewScenePath);
         }
-        this.synchronizer.setView(mainView);
+        this.view$.setValue(mainView);
         return mainView;
     }
 
@@ -165,21 +213,6 @@ export class MainViewProxy {
         this.start();
     }
 
-    private onCameraUpdatedByDevice = (camera: Camera) => {
-        this.synchronizer.onLocalCameraUpdate(camera);
-        const size = this.getStageSize();
-        if (size && !isEqual(size, this.mainViewSize)) {
-            this.setMainViewSize(size);
-        }
-    };
-
-    private getStageSize(): Size | undefined {
-        const stage = this.manager.boxManager?.stageRect;
-        if (stage) {
-            return { width: stage.width, height: stage.height };
-        }
-    }
-
     public addMainViewListener(): void {
         if (this.mainViewIsAddListener) return;
         if (this.view.divElement) {
@@ -212,13 +245,11 @@ export class MainViewProxy {
     }, 50);
 
     private addCameraListener() {
-        this.view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
         this.view.callbacks.on("onCameraUpdated", this.onCameraOrSizeUpdated);
         this.view.callbacks.on("onSizeUpdated", this.onCameraOrSizeUpdated);
     }
 
     private removeCameraListener() {
-        this.view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
         this.view.callbacks.off("onCameraUpdated", this.onCameraOrSizeUpdated);
         this.view.callbacks.off("onSizeUpdated", this.onCameraOrSizeUpdated);
     }
@@ -235,6 +266,9 @@ export class MainViewProxy {
     }
 
     public destroy() {
+        this.camera$.destroy();
+        this.size$.destroy();
+        this.view$.destroy();
         this.removeMainViewListener();
         this.stop();
         this.sideEffectManager.flushAll();

package/src/View/ViewSync.ts

@@ -0,0 +1,121 @@
+import { AnimationMode, ViewMode } from "white-web-sdk";
+import { CameraSynchronizer } from "./CameraSynchronizer";
+import { combine } from "value-enhancer";
+import { isEqual } from "lodash";
+import { SideEffectManager } from "side-effect-manager";
+import type { Camera, View } from "white-web-sdk";
+import type { Val, ReadonlyVal } from "value-enhancer";
+import type { ICamera, ISize } from "../AttributesDelegate";
+import type { TeleBoxRect } from "@netless/telebox-insider";
+
+export type ViewSyncContext = {
+    uid: string;
+    // 远端 camera
+    camera$: Val<ICamera | undefined, boolean>;
+    // 远端 size
+    size$: Val<ISize | undefined>;
+
+    stageRect$: ReadonlyVal<TeleBoxRect>;
+
+    viewMode$?: Val<ViewMode>;
+
+    storeCamera: (camera: ICamera) => void;
+
+    storeSize: (size: ISize) => void;
+
+    view$: Val<View | undefined>;
+};
+
+export class ViewSync {
+    private sem = new SideEffectManager();
+    private synchronizer: CameraSynchronizer;
+
+    constructor(private context: ViewSyncContext) {
+        this.synchronizer = new CameraSynchronizer((camera: Camera) => {
+            const iCamera = {
+                id: this.context.uid,
+                ...camera,
+            }
+            this.context.camera$.setValue(iCamera, true);
+            const notStoreCamera = this.context.viewMode$ && this.context.viewMode$.value === ViewMode.Freedom;
+            if (notStoreCamera) {
+                return;
+            } else {
+                this.context.storeCamera(iCamera);
+            }
+        });
+        this.bindView(this.context.view$.value);
+        this.sem.add(() =>
+            this.context.view$.subscribe(view => {
+                const currentCamera = this.context.camera$.value;
+                if (currentCamera && this.context.size$.value) {
+                    view?.moveCamera({
+                        scale: 1,
+                        animationMode: AnimationMode.Immediately,
+                    });
+                    this.synchronizer.onRemoteUpdate(currentCamera, this.context.size$.value);
+                }   
+              
+                this.bindView(view);
+            })
+        );
+        this.sem.add(() =>
+            this.context.camera$.subscribe((camera, skipUpdate) => {
+                const size = this.context.size$.value;
+                if (camera && size && !skipUpdate) {
+                    this.synchronizer.onRemoteUpdate(camera, size);
+                }
+            })
+        );
+        this.sem.add(() =>
+            this.context.size$.subscribe(size => {
+                if (size) {
+                    this.synchronizer.onRemoteSizeUpdate(size);
+                }
+            })
+        );
+        if (this.context.stageRect$.value) {
+            this.synchronizer.setRect(this.context.stageRect$.value);
+            this.sem.add(() =>
+                this.context.stageRect$.subscribe(rect => {
+                    if (rect) {
+                        this.synchronizer.setRect(rect);
+                    }
+                })
+            );
+        }
+        const camera$size$ = combine([this.context.camera$, this.context.size$]);
+        camera$size$.subscribe(([camera, size]) => {
+            if (camera && size) {
+                this.synchronizer.onRemoteUpdate(camera, size);
+                camera$size$.destroy();
+            }
+        });
+    }
+
+    public bindView = (view?: View) => {
+        if (!view) return;
+        this.synchronizer.setView(view);
+        this.sem.flush("view");
+        this.sem.add(() => {
+            view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
+            return () =>
+                view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
+        }, "view");
+    };
+
+    private onCameraUpdatedByDevice = (camera: Camera) => {
+        this.synchronizer.onLocalCameraUpdate(camera);
+        const stage = this.context.stageRect$.value;
+        if (stage) {
+            const size = { width: stage.width, height: stage.height, id: this.context.uid };
+            if (!isEqual(size, this.context.size$.value)) {
+                this.context.storeSize(size);
+            }
+        }
+    };
+
+    public destroy() {
+        this.sem.flushAll();
+    }
+}

package/src/index.ts

@@ -54,6 +54,7 @@ import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
 import type { PageController, AddPageParams, PageState } from "./Page";
 import { boxEmitter } from "./BoxEmitter";
+import { Val } from "value-enhancer";
 
 export type WindowMangerAttributes = {
     modelValue?: string;
@@ -162,6 +163,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     public appManager?: AppManager;
     public cursorManager?: CursorManager;
     public viewMode = ViewMode.Broadcaster;
+    public viewMode$ = new Val<ViewMode>(ViewMode.Broadcaster);
     public isReplay = isPlayer(this.displayer);
     private _pageState?: PageStateImpl;
 
@@ -592,16 +594,19 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
      * 设置 ViewMode
      */
     public setViewMode(mode: ViewMode): void {
+        log("setViewMode", mode);
+        const mainViewProxy = this.appManager?.mainViewProxy;
         if (mode === ViewMode.Broadcaster) {
             if (this.canOperate) {
-                this.appManager?.mainViewProxy.setCameraAndSize();
+                mainViewProxy?.storeCurrentCamera();
             }
-            this.appManager?.mainViewProxy.start();
+            mainViewProxy?.start();
         }
         if (mode === ViewMode.Freedom) {
-            this.appManager?.mainViewProxy.stop();
+            mainViewProxy?.stop();
         }
         this.viewMode = mode;
+        this.viewMode$.setValue(mode);
     }
 
     public setBoxState(boxState: TeleBoxState): void {
@@ -764,7 +769,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         this.mainView.moveCamera(camera);
         this.appManager?.dispatchInternalEvent(Events.MoveCamera, camera);
         setTimeout(() => {
-            this.appManager?.mainViewProxy.setCameraAndSize();
+            this.appManager?.mainViewProxy.storeCurrentCamera();
         }, 500);
     }
 
@@ -777,7 +782,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         this.mainView.moveCameraToContain(rectangle);
         this.appManager?.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
         setTimeout(() => {
-            this.appManager?.mainViewProxy.setCameraAndSize();
+            this.appManager?.mainViewProxy.storeCurrentCamera();
         }, 500);
     }
 

package/src/style.css

@@ -180,7 +180,6 @@
 }
 
 .window-manager-view-wrapper {
-    z-index: 5000;
     width: 100%;
     height: 100%;
     position: absolute;

package/dist/App/AppViewSync.d.ts

@@ -1,11 +0,0 @@
-import type { View } from "white-web-sdk";
-import type { AppProxy } from "./AppProxy";
-export declare class AppViewSync {
-    private appProxy;
-    private sem;
-    private synchronizer;
-    constructor(appProxy: AppProxy);
-    bindView: (view?: View | undefined) => void;
-    private onCameraUpdatedByDevice;
-    destroy(): void;
-}

package/src/App/AppViewSync.ts

@@ -1,73 +0,0 @@
-import { CameraSynchronizer } from "../View/CameraSynchronizer";
-import { SideEffectManager } from "side-effect-manager";
-import type { Camera, View } from "white-web-sdk";
-import type { AppProxy } from "./AppProxy";
-import { isEqual } from "lodash";
-import { combine } from "value-enhancer";
-
-export class AppViewSync {
-    private sem = new SideEffectManager();
-    private synchronizer: CameraSynchronizer;
-
-    constructor(private appProxy: AppProxy) {
-        this.synchronizer = new CameraSynchronizer((camera: Camera) => {
-            this.appProxy.storeCamera({
-                id: this.appProxy.uid,
-                ...camera,
-            });
-        });
-        this.bindView(appProxy.view);
-        this.sem.add(() => this.appProxy.camera$.subscribe(camera => {
-            const size = this.appProxy.size$.value;
-            if (camera && size) {
-                this.synchronizer.onRemoteUpdate(camera, size);
-            }
-        }));
-        this.sem.add(() => this.appProxy.size$.subscribe(size => {
-            if (size) {
-                this.synchronizer.onRemoteSizeUpdate(size);
-            }
-        }));
-        const box = this.appProxy.box;
-        if (box && box.contentStageRect) {
-            this.synchronizer.setRect(box.contentStageRect);
-            this.sem.add(() =>
-                box._contentStageRect$.subscribe(rect => {
-                    if (rect) {
-                        this.synchronizer.setRect(rect);
-                    }
-                }),
-            );
-        }
-        this.sem.add(() => combine([this.appProxy.camera$, this.appProxy.size$]).subscribe(([camera, size]) => {
-            if (camera && size) {
-                this.synchronizer.onRemoteUpdate(camera, size);
-            }
-        }));
-    }
-
-    public bindView = (view?: View) => {
-        if (!view) return;
-        this.synchronizer.setView(view);
-        this.sem.add(() => {
-            view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
-            return () =>
-                view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
-        });
-    };
-
-    private onCameraUpdatedByDevice = (camera: Camera) => {
-        this.synchronizer.onLocalCameraUpdate(camera);
-        const stage = this.appProxy.box?.contentStageRect;
-        if (stage) {
-            const size = { width: stage.width, height: stage.height, id: this.appProxy.uid };
-            if (!isEqual(size, this.appProxy.size$.value)) {
-                this.appProxy.storeSize(size);
-            }
-        }
-    };
-
-    public destroy() {
-        this.sem.flushAll();
-    }
-}