@netless/window-manager 1.0.0-canary.37 → 1.0.0-canary.38

package/dist/src/index.d.ts

@@ -5,7 +5,7 @@ import { ReconnectRefresher } from "./ReconnectRefresher";
 import { Val } from "value-enhancer";
 import type { TELE_BOX_STATE } from "./BoxManager";
 import type { Apps, Position, ICamera, ISize } from "./AttributesDelegate";
-import type { Displayer, SceneDefinition, View, Room, InvisiblePluginContext, Camera, CameraBound, Point, CameraState, Player, ImageInformation, SceneState, Rectangle, Size } from "white-web-sdk";
+import type { Displayer, SceneDefinition, View, Room, InvisiblePluginContext, Camera, CameraBound, Point, CameraState, Player, ImageInformation, SceneState, Size } from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
 import type { ApplianceIcons, NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxColorScheme, TeleBoxFullscreen, TeleBoxManagerThemeConfig, TeleBoxState } from "@netless/telebox-insider";
@@ -233,9 +233,6 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     moveCamera(camera: Partial<Camera> & {
         animationMode?: AnimationMode;
     }): void;
-    moveCameraToContain(rectangle: Rectangle & {
-        animationMode?: AnimationMode;
-    }): void;
     convertToPointInWorld(point: Point): Point;
     setCameraBound(cameraBound: CameraBound): void;
     onDestroy(): void;

package/package.json

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

package/src/View/CameraSynchronizer.ts

@@ -48,11 +48,14 @@ export class CameraSynchronizer {
         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,
-            })
+            if (!this.view) return;
+            const currentCamera = this.view.camera;
+            this.view?.moveCameraToContain({
+                width: size.width,
+                height: size.height,
+                originX: currentCamera.centerX - (size.width / 2),
+                originY: currentCamera.centerY - (size.height / 2),
+            });
         }
     }
 

package/src/View/ViewSync.ts

@@ -1,4 +1,4 @@
-import { ViewMode, AnimationMode, 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";

package/src/index.ts

@@ -10,7 +10,7 @@ import { emitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { AnimationMode, InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
-import { isEqual, isNull, isObject, isNumber, isEmpty } from "lodash";
+import { isEqual, isNull, isObject, isNumber } from "lodash";
 import { log } from "./Utils/log";
 import { PageStateImpl } from "./PageState";
 import { ReconnectRefresher } from "./ReconnectRefresher";
@@ -44,7 +44,6 @@ import type {
     Player,
     ImageInformation,
     SceneState,
-    Rectangle,
     Size
 } from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
@@ -835,52 +834,64 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
     }
 
-    public moveCameraToContain(rectangle: Rectangle & { animationMode?: AnimationMode }): void {
-        if (!this.appManager) return;
-        const camera: Partial<Camera> = {};
-        if (isNumber(rectangle.originX)) {
-            camera.centerX = rectangle.originX;
-        }
-        if (isNumber(rectangle.originY)) {
-            camera.centerY = rectangle.originY;
-        }
-        if (rectangle.animationMode === AnimationMode.Immediately) {
-            this.appManager.mainViewProxy.storeSize({
-                id: this.appManager.uid,
-                width: rectangle.width,
-                height: rectangle.height,
-            });
-            this.mainView.moveCameraToContain(rectangle);
-            if (!isEmpty(camera) && this.appManager.mainViewProxy.camera$.value) {
-                this.appManager.mainViewProxy.storeCamera({
-                    ...this.appManager.mainViewProxy.camera$.value,
-                    id: this.appManager.uid,
-                    centerX: this.mainView.camera.centerX,
-                    centerY: this.mainView.camera.centerY
-                });
-            }
-        } else {
-            this.appManager.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
-            this.mainView.moveCameraToContain(rectangle);
-            setTimeout(() => {
-                if (!this.appManager) return;
-                this.appManager.mainViewProxy.storeSize({
-                    id: this.appManager.uid,
-                    width: rectangle.width,
-                    height: rectangle.height,
-                });
-
-                if (!isEmpty(camera) && this.appManager.mainViewProxy.camera$.value) {
-                    this.appManager.mainViewProxy.storeCamera({
-                        ...this.appManager.mainViewProxy.camera$.value,
-                        id: this.appManager.uid,
-                        centerX: this.mainView.camera.centerX,
-                        centerY: this.mainView.camera.centerY
-                    });
-                }
-            }, 200);
-        }
-    }
+    // public moveCameraToContain(rectangle: Rectangle & { animationMode?: AnimationMode }): void {
+    //     this.setBaseSize(rectangle);
+    //     const centerX = rectangle.originX + (rectangle.width / 2);
+    //     const centerY = rectangle.originY + (rectangle.height / 2);
+    //     setTimeout(() => {
+    //         this.moveCamera({ centerX, centerY, animationMode: rectangle.animationMode });
+    //     }, 500);
+    //     // if (!this.appManager) return;
+    //     // const camera: Partial<Camera> = {};
+    //     // if (isNumber(rectangle.originX)) {
+    //     //     camera.centerX = rectangle.originX;
+    //     // }
+    //     // if (isNumber(rectangle.originY)) {
+    //     //     camera.centerY = rectangle.originY;
+    //     // }
+    //     // if (rectangle.animationMode === AnimationMode.Immediately) {
+    //     //     this.appManager.mainViewProxy.storeSize({
+    //     //         id: this.appManager.uid,
+    //     //         width: rectangle.width,
+    //     //         height: rectangle.height,
+    //     //     });
+    //     //     this.mainView.moveCameraToContain(rectangle);
+    //     //     if (!isEmpty(camera) && this.appManager.mainViewProxy.camera$.value) {
+    //     //         this.appManager.mainViewProxy.storeCamera({
+    //     //             ...this.appManager.mainViewProxy.camera$.value,
+    //     //             id: this.appManager.uid,
+    //     //             centerX: this.mainView.camera.centerX,
+    //     //             centerY: this.mainView.camera.centerY
+    //     //         });
+    //     //     }
+    //     // } else {
+    //     //     this.appManager.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
+    //     //     this.mainView.moveCameraToContain(rectangle);
+    //     //     if (!this.baseCamera) return;
+    //     //     const remoteSize = rectangle;
+    //     //     const currentSize = this.boxManager?.stageRect;
+    //     //     if (!currentSize) return;
+    //     //     const nextScale = this.baseCamera.scale * computedMinScale(remoteSize, currentSize);
+    //     //     setTimeout(() => {
+    //     //         if (!this.appManager) return;
+    //     //         this.appManager.mainViewProxy.storeSize({
+    //     //             id: this.appManager.uid,
+    //     //             width: rectangle.width,
+    //     //             height: rectangle.height,
+    //     //         });
+
+    //     //         if (!isEmpty(camera) && this.appManager.mainViewProxy.camera$.value) {
+    //     //             this.appManager.mainViewProxy.storeCamera({
+    //     //                 ...this.appManager.mainViewProxy.camera$.value,
+    //     //                 id: this.appManager.uid,
+    //     //                 centerX: this.mainView.camera.centerX,
+    //     //                 centerY: this.mainView.camera.centerY,
+    //     //                 scale: nextScale
+    //     //             });
+    //     //         }
+    //     //     }, 500);
+    //     // }
+    // }
 
     public convertToPointInWorld(point: Point): Point {
         return this.mainView.convertToPointInWorld(point);