@netless/window-manager 1.0.0-canary.5 → 1.0.0-canary.52

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 { releaseView, setViewFocusScenePath } from "../Utils/Common";
+import { AnimationMode, reaction, toJS } from "white-web-sdk";
+import { releaseView, setScenePath, 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,56 +18,89 @@ 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();
             this.ensureCameraAndSize();
             this.startListenWritableChange();
         });
-        this.sideEffectManager.add(() => {
-            return emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
-        });
-        this.sideEffectManager.add(() => {
-            return emitter.on("startReconnect", () => {
+        this.sideEffectManager.add(() => [
+            emitter.on("startReconnect", () => {
                 releaseView(this.mainView);
-            });
+            }),
+        ]);
+        this.createViewSync();
+        this.sideEffectManager.add(() => emitter.on("focusedChange", ({ focused }) => {
+            if (focused === undefined) {
+                const scenePath = this.store.getMainViewScenePath();
+                if (scenePath) {
+                    setScenePath(this.manager.room, scenePath);
+                }
+            }
+        }));
+        this.camera$.reaction(camera => {
+            if (camera) {
+                callbacks.emit("baseCameraChange", camera);
+            }
         });
-        const rect = this.manager.boxManager?.stageRect;
-        if (rect) {
-            this.synchronizer.setRect(rect);
-        }
-        this.sideEffectManager.add(() => {
-            return emitter.on("playgroundSizeChange", rect => {
-                this.synchronizer.setRect(rect);
-                // this.synchronizer.onLocalSizeUpdate(rect);
-            });
+        this.size$.reaction(size => {
+            if (size) {
+                callbacks.emit("baseSizeChange", size);
+            }
         });
     }
 
+    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(() => {
-            return emitter.on("writableChange", isWritable => {
+        this.sideEffectManager.add(() =>
+            emitter.on("writableChange", isWritable => {
                 if (isWritable) {
                     this.ensureCameraAndSize();
                 }
-            });
-        });
+            })
+        );
     };
 
     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
+                });
+            }
         }
     }
 
@@ -81,55 +116,74 @@ export class MainViewProxy {
         return get(this.view, ["didRelease"]);
     }
 
-    private moveCameraSizeByAttributes() {
-        this.synchronizer.onRemoteUpdate(this.mainViewCamera, this.mainViewSize);
-    }
-
     public start() {
         if (this.started) return;
-        this.sizeChangeHandler(this.mainViewSize);
+        this.removeCameraListener();
         this.addCameraListener();
         this.addCameraReaction();
         this.started = true;
     }
 
     public addCameraReaction = () => {
-        this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
+        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 sizeChangeHandler = debounce((size: Size) => {
-        if (size) {
-            // this.synchronizer.onLocalSizeUpdate(size);
-        }
-    }, 30);
-
-    public onUpdateContainerSizeRatio = () => {
-        const size = this.store.getMainViewSize();
-        this.sizeChangeHandler(size);
-        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 {
@@ -146,7 +200,7 @@ export class MainViewProxy {
         if (mainViewScenePath) {
             setViewFocusScenePath(mainView, mainViewScenePath);
         }
-        this.synchronizer.setView(mainView);
+        this.view$.setValue(mainView);
         return mainView;
     }
 
@@ -168,31 +222,18 @@ export class MainViewProxy {
     public rebind(): void {
         const divElement = this.mainView.divElement;
         const disableCameraTransform = this.mainView.disableCameraTransform;
+        const camera = { ...this.mainView.camera };
         this.stop();
         releaseView(this.mainView);
         this.removeMainViewListener();
         this.mainView = this.createMainView();
         this.mainView.disableCameraTransform = disableCameraTransform;
         this.mainView.divElement = divElement;
+        this.mainView.moveCamera({ ...camera, animationMode: AnimationMode.Immediately });
         this.addMainViewListener();
         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) {
@@ -225,13 +266,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);
     }
@@ -241,13 +280,15 @@ export class MainViewProxy {
     };
 
     public stop() {
-        this.removeCameraListener();
-        this.manager.refresher?.remove(Fields.MainViewCamera);
-        this.manager.refresher?.remove(Fields.MainViewSize);
+        this.manager.refresher.remove(Fields.MainViewCamera);
+        this.manager.refresher.remove(Fields.MainViewSize);
         this.started = false;
     }
 
     public destroy() {
+        this.camera$.destroy();
+        this.size$.destroy();
+        this.view$.destroy();
         this.removeMainViewListener();
         this.stop();
         this.sideEffectManager.flushAll();

package/src/View/ViewSync.ts

@@ -1,10 +1,127 @@
-import type { Camera, Size } from "white-web-sdk";
+import { ViewMode, AnimationMode } from "white-web-sdk";
+import { CameraSynchronizer, computedMinScale } from "./CameraSynchronizer";
+import { combine } from "value-enhancer";
+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>;
 
-export interface ViewSync {
-    readonly camera: Camera;
-    readonly size: Size;
+    stageRect$: ReadonlyVal<TeleBoxRect>;
 
-    setCamera: (camera: Camera) => void;
-    setSize: (size: Size) => void;      
+    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 = this.createSynchronizer();
+        this.bindView(this.context.view$.value);
+        this.sem.add(() => [
+            this.subscribeView(),
+            this.subscribeCamera(),
+            this.subscribeSize(),
+            this.subscribeStageRect(),
+        ]);
+        const camera$size$ = combine([this.context.camera$, this.context.size$]);
+        camera$size$.reaction(([camera, size]) => {
+            if (camera && size) {
+                this.synchronizer.onRemoteUpdate(camera, size);
+                camera$size$.destroy();
+            }
+        });
+    }
+
+    private createSynchronizer = () => {
+        return new CameraSynchronizer((camera: ICamera) => {
+            this.context.camera$.setValue(camera, true);
+            const notStoreCamera =
+                this.context.viewMode$ && this.context.viewMode$.value === ViewMode.Freedom;
+            if (notStoreCamera) {
+                return;
+            } else {
+                this.context.storeCamera(camera);
+            }
+        });
+    }
+
+    private subscribeView = () => {
+        return 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);
+        });
+    }
+
+    private subscribeCamera = () => {
+        return this.context.camera$.subscribe((camera, skipUpdate) => {
+            if (skipUpdate) return;
+            const size = this.context.size$.value;
+            if (camera && size) {
+                this.synchronizer.onRemoteUpdate(camera, size);
+            }
+        });
+    }
+
+    private subscribeSize = () => {
+        return this.context.size$.subscribe(size => {
+            if (size) {
+                this.synchronizer.onRemoteSizeUpdate(size);
+            }
+        });
+    }
+
+    private subscribeStageRect = () => {
+        return this.context.stageRect$.subscribe(rect => {
+            if (rect) {
+                this.synchronizer.setRect(rect);
+            }
+        });
+    }
+
+    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) => {
+        if (!camera) return;
+        if (this.context.size$.value && this.context.stageRect$.value) {
+            // 始终以远端的 size 为标准, 设置到 attributes 时根据尺寸的大小还原回去
+            const diffScale = computedMinScale(this.context.size$.value, this.context.stageRect$.value);
+            const remoteScale = camera.scale / diffScale;
+            this.synchronizer.onLocalCameraUpdate({ ...camera, scale: remoteScale, id: this.context.uid });
+        }
+    };
+
+    public destroy() {
+        this.sem.flushAll();
+    }
 }

package/src/callback.ts

@@ -1,8 +1,9 @@
 import Emittery from "emittery";
-import type { TeleBoxColorScheme, TELE_BOX_STATE } from "@netless/telebox-insider";
+import type { TeleBoxColorScheme, TeleBoxFullscreen, TELE_BOX_STATE } from "@netless/telebox-insider";
 import type { CameraState, SceneState, ViewVisionMode } from "white-web-sdk";
 import type { LoadAppEvent } from "./Register";
 import type { PageState } from "./Page";
+import type { ICamera, ISize } from "./AttributesDelegate";
 
 export type PublicEvent = {
     mainViewModeChange: ViewVisionMode;
@@ -20,6 +21,10 @@ export type PublicEvent = {
     ready: undefined; // 所有 APP 创建完毕时触发
     sceneStateChange: SceneState;
     pageStateChange: PageState;
+    appClose: { appId: string; kind: string, error?: Error };
+    baseCameraChange: ICamera;
+    baseSizeChange: ISize;
+    fullscreenChange: TeleBoxFullscreen;
 };
 
 export type CallbacksType = Emittery<PublicEvent>;

package/src/constants.ts

@@ -5,18 +5,18 @@ export enum Events {
     AppBoxStateChange = "AppBoxStateChange",
     GetAttributes = "GetAttributes",
     UpdateWindowManagerWrapper = "UpdateWindowManagerWrapper",
-    InitReplay = "InitReplay",
     WindowCreated = "WindowCreated",
     SetMainViewScenePath = "SetMainViewScenePath",
     SetMainViewSceneIndex = "SetMainViewSceneIndex",
     SetAppFocusIndex = "SetAppFocusIndex",
     SwitchViewsToFreedom = "SwitchViewsToFreedom",
-    MoveCamera = "MoveCamera",
-    MoveCameraToContain = "MoveCameraToContain",
     CursorMove = "CursorMove",
     RootDirRemoved = "RootDirRemoved",
     Refresh = "Refresh",
     InitMainViewCamera = "InitMainViewCamera",
+    InvokeAttributesUpdateCallback = "InvokeAttributesUpdateCallback",
+    MoveCamera = "MoveCamera",
+    MoveCameraToContain = "moveCameraToContain",
 }
 
 export const MagixEventName = "__WindowManger";
@@ -27,6 +27,11 @@ export enum AppAttributes {
     Position = "position",
     SceneIndex = "SceneIndex",
     ZIndex = "zIndex",
+    Visible = "visible",
+    Ratio = "ratio",
+    StageRatio = "stageRatio",
+    Draggable = "draggable",
+    Resizable = "resizable",
 }
 
 export enum AppEvents {