@netless/window-manager 1.0.0-canary.3 → 1.0.0-canary.32

package/src/View/CameraSynchronizer.ts

@@ -1,20 +1,20 @@
 import { AnimationMode } from "white-web-sdk";
-import { delay, throttle } from "lodash";
+import { isEqual, pick, throttle } from "lodash";
 import type { TeleBoxRect } from "@netless/telebox-insider";
-import type { Camera, View, Size } from "white-web-sdk";
-import type { MainViewSize } from "../AttributesDelegate";
+import type { Camera, View } from "white-web-sdk";
+import type { ICamera, ISize } from "../AttributesDelegate";
 
-export type SaveCamera = (camera: Camera) => void;
+export type SaveCamera = (camera: ICamera) => void;
 
 export class CameraSynchronizer {
-    protected remoteCamera?: Camera;
-    protected remoteSize?: MainViewSize;
+    public remoteCamera?: ICamera;
+    public remoteSize?: ISize;
     protected rect?: TeleBoxRect;
     protected view?: View;
 
     constructor(protected saveCamera: SaveCamera) {}
 
-    public setRect(rect: TeleBoxRect) {
+    public setRect = (rect: TeleBoxRect) => {
         this.rect = rect;
         if (this.remoteCamera && this.remoteSize) {
             this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
@@ -26,42 +26,45 @@ export class CameraSynchronizer {
     }
 
     // 远端 Camera 或者 size 更新
-    public onRemoteUpdate = throttle((camera: Camera, size: MainViewSize) => {
+    public onRemoteUpdate = throttle((camera: ICamera, size: ISize) => {
         this.remoteCamera = camera;
         this.remoteSize = size;
         if (this.remoteSize && this.rect) {
-            let scale: number;
-            if (size.width < size.height) {
-                scale = this.rect.width / size.width;
-            } else {
-                scale = this.rect.height / size.height;
-            }
-            const nextScale = camera.scale * scale;
-            const moveCamera = () =>  this.view?.moveCamera({
-                centerX: camera.centerX,
-                centerY: camera.centerY,
+            const wScale = this.rect.width / size.width;
+            const hScale = this.rect.height / size.height;
+            const nextScale = camera.scale * Math.min(wScale, hScale);
+            const config: Partial<Camera> & { animationMode: AnimationMode } = {
                 scale: nextScale,
-                animationMode: AnimationMode.Immediately,
-            });
-            // TODO 直接调用 moveCamera 依然会出现 camera 错误的情况,这里暂时加一个 delay 保证 camera 是对的, 后续需要 SDK 进行修改
-            delay(moveCamera, 10);
+                animationMode: AnimationMode.Continuous,
+            }
+            if (camera.centerX !== null) {
+                config.centerX = camera.centerX;
+            }
+            if (camera.centerY !== null) {
+                config.centerY = camera.centerY;
+            }
+            this.moveCamera(config);
         }
-    }, 50);
+    }, 10);
 
+    public onRemoteSizeUpdate(size: ISize) {
+        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;
+            this.moveCamera({
+                scale: nextScale,
+            })
+        }
+    }
 
-    public onLocalCameraUpdate(camera: Camera) {
+    public onLocalCameraUpdate(camera: ICamera) {
         this.saveCamera(camera);
+        this.remoteCamera = camera;
     }
 
-    // 本地 Size 更新, 先匹配 camera 到新的 size 然后再发送 camera 数据到远端
-    public onLocalSizeUpdate(size: Size) {
-        if (this.rect && this.view) {
-            const scale = this.rect.width / size.width;
-            const nextScale = this.view.camera.scale * scale;
-            this.view.moveCamera({
-                scale: nextScale,
-                animationMode: AnimationMode.Immediately
-            });
-        }
+    private moveCamera(camera: Partial<Camera>) {
+        this.view?.moveCamera({ ...camera, animationMode: AnimationMode.Continuous });
     }
 }

package/src/View/MainView.ts

@@ -1,73 +1,96 @@
-import { reaction } from "white-web-sdk";
 import { callbacks } from "../callback";
 import { createView } from "./ViewManager";
 import { debounce, get, isEqual } from "lodash";
 import { emitter } from "../InternalEmitter";
 import { Events } from "../constants";
 import { Fields } from "../AttributesDelegate";
-import { 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";
-import { CameraSynchronizer } from "./CameraSynchronizer";
 
 export class MainViewProxy {
     private started = false;
     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", () => {
-                if (!(this.mainView as any).didRelease) {
-                    this.mainView.release();
+        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);
                 }
+            }
+        }));
+    }
+
+    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,
             });
-        });
-        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);
-            });
-        });
-    }
+    };
 
     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
+                });
+            }
         }
     }
 
@@ -83,55 +106,73 @@ 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.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 {
@@ -148,7 +189,7 @@ export class MainViewProxy {
         if (mainViewScenePath) {
             setViewFocusScenePath(mainView, mainViewScenePath);
         }
-        this.synchronizer.setView(mainView);
+        this.view$.setValue(mainView);
         return mainView;
     }
 
@@ -170,33 +211,18 @@ export class MainViewProxy {
     public rebind(): void {
         const divElement = this.mainView.divElement;
         const disableCameraTransform = this.mainView.disableCameraTransform;
+        const camera = { ...this.mainView.camera };
         this.stop();
-        if (!this.didRelease) {
-            this.mainView.release();
-        }
+        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) {
@@ -229,13 +255,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);
     }
@@ -246,12 +270,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

@@ -0,0 +1,110 @@
+import { ViewMode, AnimationMode } 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: 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);
+            }
+        });
+        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.context.camera$.subscribe((camera, skipUpdate) => {
+                const size = this.context.size$.value;
+                if (camera && size && !skipUpdate) {
+                    this.synchronizer.onRemoteUpdate(camera, size);
+                }
+            }),
+            this.context.size$.subscribe(size => {
+                if (size) {
+                    this.synchronizer.onRemoteSizeUpdate(size);
+                }
+            }),
+            this.context.stageRect$.subscribe(rect => {
+                if (rect) {
+                    this.synchronizer.setRect(rect);
+                }
+            })
+        ]);
+        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();
+            }
+        });
+    }
+
+    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;
+        this.synchronizer.onLocalCameraUpdate({ ...camera, id: this.context.uid });
+        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/callback.ts

@@ -20,6 +20,7 @@ export type PublicEvent = {
     ready: undefined; // 所有 APP 创建完毕时触发
     sceneStateChange: SceneState;
     pageStateChange: PageState;
+    appClose: { appId: string; kind: string, error?: Error };
 };
 
 export type CallbacksType = Emittery<PublicEvent>;

package/src/constants.ts

@@ -5,18 +5,16 @@ 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",
 }
 
 export const MagixEventName = "__WindowManger";
@@ -27,6 +25,11 @@ export enum AppAttributes {
     Position = "position",
     SceneIndex = "SceneIndex",
     ZIndex = "zIndex",
+    Visible = "visible",
+    Ratio = "ratio",
+    StageRatio = "stageRatio",
+    Draggable = "draggable",
+    Resizable = "resizable",
 }
 
 export enum AppEvents {