@netless/window-manager 1.0.0-canary.25 → 1.0.0-canary.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.25",
+  "version": "1.0.0-canary.26",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/App/AppProxy.ts

@@ -345,6 +345,10 @@ export class AppProxy implements PageRemoveService {
             this.box$.setValue(box);
             if (this.isAddApp && this.box) {
                 this.store.updateAppState(appId, AppAttributes.ZIndex, this.box.zIndex);
+                this.store.updateAppState(appId, AppAttributes.Size, {
+                    width: this.box.intrinsicWidth,
+                    height: this.box.intrinsicHeight,
+                });
                 this.boxManager.focusBox({ appId }, false);
             }
         } catch (error: any) {

package/src/App/WhiteboardView.ts

@@ -10,11 +10,11 @@ import type { View } from "white-web-sdk";
 import type { TeleBoxRect } from "@netless/telebox-insider";
 import type { ICamera } from "../AttributesDelegate";
 
-export type WhiteBoardViewCamera = Omit<ICamera, "scale" | "id">;
+export type WhiteBoardViewCamera = Omit<ICamera, "id">;
 
 export class WhiteBoardView implements PageController {
     public readonly pageState$: ReadonlyVal<PageState>;
-    public readonly camera$: ReadonlyVal<WhiteBoardViewCamera>;
+    public readonly baseCamera$: ReadonlyVal<WhiteBoardViewCamera>;
 
     constructor(
         public view: View,
@@ -30,13 +30,13 @@ export class WhiteBoardView implements PageController {
             })
         );
         const camera$ = new Val<WhiteBoardViewCamera>(
-            pick(this.view.camera, ["centerX", "centerY"])
+            pick(this.view.camera, ["centerX", "centerY", "scale"])
         );
-        this.camera$ = camera$;
+        this.baseCamera$ = camera$;
         this.appProxy.sideEffectManager.add(() =>
             appProxy.camera$.subscribe(camera => {
                 if (camera) {
-                    camera$.setValue(pick(camera, ["centerX", "centerY"]));
+                    camera$.setValue(pick(camera, ["centerX", "centerY", "scale"]));
                 }
             })
         );
@@ -96,7 +96,7 @@ export class WhiteBoardView implements PageController {
         return this.appProxy.removeSceneByIndex(needRemoveIndex);
     };
 
-    public setRect(rect: Omit<TeleBoxRect, "x" | "y">) {
+    public setBaseRect(rect: Omit<TeleBoxRect, "x" | "y">) {
         this.appProxy.updateSize(rect.width, rect.height);
     }
 }

package/src/AppListener.ts

@@ -1,9 +1,8 @@
 import { callbacks } from "./callback";
 import { emitter } from "./InternalEmitter";
 import { Events, MagixEventName } from "./constants";
-import { isEqual, omit } from "lodash";
 import { setViewFocusScenePath } from "./Utils/Common";
-import type { AnimationMode, Camera, Event } from "white-web-sdk";
+import type { Event } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 import type { TeleBoxState } from "@netless/telebox-insider";
 
@@ -50,14 +49,6 @@ export class AppListeners {
                     this.setMainViewScenePathHandler(data.payload);
                     break;
                 }
-                case Events.MoveCamera: {
-                    this.moveCameraHandler(data.payload);
-                    break;
-                }
-                case Events.MoveCameraToContain: {
-                    this.moveCameraToContainHandler(data.payload);
-                    break;
-                }
                 case Events.CursorMove: {
                     this.cursorMoveHandler(data.payload);
                     break;
@@ -102,17 +93,6 @@ export class AppListeners {
         callbacks.emit("mainViewScenePathChange", nextScenePath);
     };
 
-    private moveCameraHandler = (
-        payload: Camera & { animationMode?: AnimationMode | undefined }
-    ) => {
-        if (isEqual(omit(payload, ["animationMode"]), { ...this.manager.mainView.camera })) return;
-        this.manager.mainView.moveCamera(payload);
-    };
-
-    private moveCameraToContainHandler = (payload: any) => {
-        this.manager.mainView.moveCameraToContain(payload);
-    };
-
     private cursorMoveHandler = (payload: any) => {
         emitter.emit("cursorMove", payload);
     };

package/src/AppManager.ts

@@ -409,7 +409,7 @@ export class AppManager {
     };
 
     public addAppsChangeListener = () => {
-        this.refresher?.add("apps", () => {
+        this.refresher.add("apps", () => {
             return safeListenPropsUpdated(
                 () => this.attributes.apps,
                 () => {
@@ -800,6 +800,7 @@ export class AppManager {
     }
 
     public async onReconnected() {
+        this.attributesUpdateCallback(this.attributes.apps);
         const appProxies = Array.from(this.appProxies.values());
         const reconnected = appProxies.map(appProxy => {
             return appProxy.onReconnected();

package/src/View/CameraSynchronizer.ts

@@ -39,7 +39,7 @@ export class CameraSynchronizer {
             const nextScale = camera.scale * scale;
             const config: Partial<Camera> & { animationMode: AnimationMode } = {
                 scale: nextScale,
-                animationMode: AnimationMode.Immediately,
+                animationMode: AnimationMode.Continuous,
             }
             if (camera.centerX !== null) {
                 config.centerX = camera.centerX;
@@ -59,7 +59,7 @@ export class CameraSynchronizer {
             const nextScale = this.remoteCamera.scale * scale;
             this.view?.moveCamera({
                 scale: nextScale,
-                animationMode: AnimationMode.Immediately,
+                animationMode: AnimationMode.Continuous,
             })
         }
     }

package/src/View/MainView.ts

@@ -4,7 +4,7 @@ import { debounce, get, isEqual } from "lodash";
 import { emitter } from "../InternalEmitter";
 import { Events } from "../constants";
 import { Fields } from "../AttributesDelegate";
-import { reaction, toJS } from "white-web-sdk";
+import { AnimationMode, reaction, toJS } from "white-web-sdk";
 import { releaseView, setScenePath, setViewFocusScenePath } from "../Utils/Common";
 import { SideEffectManager } from "side-effect-manager";
 import { Val } from "value-enhancer";
@@ -211,12 +211,14 @@ 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();
     }

package/src/constants.ts

@@ -10,8 +10,6 @@ export enum Events {
     SetMainViewSceneIndex = "SetMainViewSceneIndex",
     SetAppFocusIndex = "SetAppFocusIndex",
     SwitchViewsToFreedom = "SwitchViewsToFreedom",
-    MoveCamera = "MoveCamera",
-    MoveCameraToContain = "MoveCameraToContain",
     CursorMove = "CursorMove",
     RootDirRemoved = "RootDirRemoved",
     Refresh = "Refresh",

package/src/index.ts

@@ -10,7 +10,7 @@ import { emitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
-import { isEqual, isNull, isObject, omit, isNumber } from "lodash";
+import { isEqual, isNull, isObject, isNumber } from "lodash";
 import { log } from "./Utils/log";
 import { PageStateImpl } from "./PageState";
 import { ReconnectRefresher } from "./ReconnectRefresher";
@@ -27,6 +27,8 @@ import {
     putScenes,
     wait,
 } from "./Utils/Common";
+import { boxEmitter } from "./BoxEmitter";
+import { Val } from "value-enhancer";
 import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
 import * as Errors from "./Utils/error";
 import type { Apps, Position , ICamera, ISize } from "./AttributesDelegate";
@@ -37,15 +39,13 @@ import type {
     Room,
     InvisiblePluginContext,
     Camera,
-    AnimationMode,
     CameraBound,
     Point,
-    Rectangle,
     CameraState,
     Player,
     ImageInformation,
     SceneState,
-} from "white-web-sdk";
+ Rectangle} from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
 import type { ApplianceIcons, NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxColorScheme, TeleBoxState } from "@netless/telebox-insider";
@@ -53,8 +53,6 @@ import type { AppProxy } from "./App";
 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;
@@ -657,6 +655,22 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
     }
 
+    public get baseCamera$() {
+        if (this.appManager) {
+            return this.appManager.mainViewProxy.camera$;
+        } else {
+            throw new Errors.AppManagerNotInitError();
+        }
+    }
+
+    public get baseSize$() {
+        if (this.appManager) {
+            return this.appManager.mainViewProxy.size$;
+        } else {
+            throw new Errors.AppManagerNotInitError();
+        }
+    }
+
     public get cameraState(): CameraState {
         if (this.appManager) {
             return this.appManager.mainViewProxy.cameraState;
@@ -763,30 +777,31 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         return this.appManager?.closeApp(appId);
     }
 
-    public moveCamera(
-        camera: Partial<Camera> & { animationMode?: AnimationMode | undefined }
-    ): void {
-        const pureCamera = omit(camera, ["animationMode"]);
+    public moveCamera(camera: Partial<Camera> ): void {
         const mainViewCamera = { ...this.mainView.camera };
-        if (isEqual({ ...mainViewCamera, ...pureCamera }, mainViewCamera)) return;
-        this.mainView.moveCamera(camera);
-        this.appManager?.dispatchInternalEvent(Events.MoveCamera, camera);
-        setTimeout(() => {
-            this.appManager?.mainViewProxy.storeCurrentCamera();
-        }, 500);
-    }
-
-    public moveCameraToContain(
-        rectangle: Rectangle &
-            Readonly<{
-                animationMode?: AnimationMode;
-            }>
-    ): void {
-        this.mainView.moveCameraToContain(rectangle);
-        this.appManager?.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
-        setTimeout(() => {
-            this.appManager?.mainViewProxy.storeCurrentCamera();
-        }, 500);
+        const nextCamera = { ...mainViewCamera, ...camera };
+        if (isEqual(nextCamera, mainViewCamera)) return;
+        if (!this.appManager) return;
+        this.appManager.mainViewProxy.storeCamera({
+            id: this.appManager.uid,
+            ...nextCamera
+        });
+    }
+
+    public moveCameraToContain(rectangle: Rectangle): void {
+        if (!this.appManager) return;
+        const mainViewSize = this.appManager.mainViewProxy.size$.value;
+        if (mainViewSize) {
+            const wScale = mainViewSize.width / rectangle.width;
+            const hScale = mainViewSize.height / rectangle.height;
+            const nextScale = Math.min(wScale, hScale);
+            this.appManager.mainViewProxy.storeCamera({
+                id: this.appManager.uid,
+                scale: nextScale,
+                centerX: rectangle.originX,
+                centerY: rectangle.originY,
+            });
+        }
     }
 
     public convertToPointInWorld(point: Point): Point {