@netless/window-manager 1.0.0-canary.36 → 1.0.0-canary.39

package/dist/src/Utils/error.d.ts

@@ -19,7 +19,7 @@ export declare class BoxNotCreatedError extends Error {
 export declare class InvalidScenePath extends Error {
     message: string;
 }
-export declare class BoxManagerNotFoundError extends Error {
+export declare class BoxManagerNotInitializeError extends Error {
     message: string;
 }
 export declare class BindContainerRoomPhaseInvalidError extends Error {

package/dist/src/callback.d.ts

@@ -1,9 +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 { ICamera, ISize } from "./AttributesDelegate";
+import type { ICamera, ISize } from "./AttributesDelegate";
 export declare type PublicEvent = {
     mainViewModeChange: ViewVisionMode;
     boxStateChange: `${TELE_BOX_STATE}`;
@@ -27,6 +27,7 @@ export declare type PublicEvent = {
     };
     baseCameraChange: ICamera;
     baseSizeChange: ISize;
+    fullscreenChange: TeleBoxFullscreen;
 };
 export declare type CallbacksType = Emittery<PublicEvent>;
 export declare const callbacks: CallbacksType;

package/dist/src/index.d.ts

@@ -5,10 +5,10 @@ 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";
+import type { TeleBoxColorScheme, TeleBoxFullscreen, TeleBoxManager, TeleBoxManagerThemeConfig, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
@@ -218,6 +218,7 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     get canUndoSteps(): number;
     get sceneState(): SceneState;
     get pageState(): PageState;
+    get teleboxManager(): TeleBoxManager;
     /**
      * 查询所有的 App
      */
@@ -230,12 +231,9 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
      * 关闭 APP
      */
     closeApp(appId: string): Promise<void>;
-    moveCamera(camera: Partial<Camera> & {
+    moveCamera: import("lodash").DebouncedFunc<(camera: Partial<Camera> & {
         animationMode?: AnimationMode;
-    }): void;
-    moveCameraToContain(rectangle: Rectangle & {
-        animationMode?: AnimationMode;
-    }): void;
+    }) => 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.36",
+  "version": "1.0.0-canary.39",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/telebox-insider": "1.0.0-alpha.33",
+    "@netless/telebox-insider": "1.0.0-alpha.34",
     "emittery": "^0.11.0",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.2",

package/src/App/AppProxy.ts

@@ -6,7 +6,7 @@ import { appRegister } from "../Register";
 import { ViewSync } from "../View/ViewSync"
 import { autorun, reaction, toJS } from "white-web-sdk";
 import { boxEmitter } from "../BoxEmitter";
-import { BoxManagerNotFoundError } from "../Utils/error";
+import { BoxManagerNotInitializeError } from "../Utils/error";
 import { calculateNextIndex } from "../Page";
 import { combine, Val, ValManager } from "value-enhancer";
 import { debounce, get, isEqual, isUndefined, omitBy } from "lodash";
@@ -312,7 +312,7 @@ export class AppProxy implements PageRemoveService {
     ) {
         log("setupApp", appId, app, options);
         if (!this.boxManager) {
-            throw new BoxManagerNotFoundError();
+            throw new BoxManagerNotInitializeError();
         }
         const context = new AppContext(this.manager, appId, this, appOptions);
         this.appContext = context;

package/src/AppManager.ts

@@ -472,16 +472,25 @@ export class AppManager {
             if (appIds.length === 0) {
                 this.appCreateQueue.emitReady();
             }
-            const appsWithCreatedAt = appIds.map(appId => {
+            let appsWithCreatedAt = appIds.map(appId => {
                 if (apps[appId].setup) {
                     return {
                         id: appId,
                         createdAt: apps[appId].createdAt,
                     };
                 } else {
-                    return {}
+                    return {};
                 }
             });
+            // 兼容 1.0 之前版本的回放, 回放时直接过判断 setup 直接创建 app
+            if (this.isReplay) {
+                appsWithCreatedAt = appIds.map(appId => {
+                    return {
+                        id: appId,
+                        createdAt: apps[appId].createdAt,
+                    };
+                });
+            }
             for (const { id } of orderBy(appsWithCreatedAt, "createdAt", "asc")) {
                 if (id && !this.appProxies.has(id) && !this.appStatus.has(id)) {
                     const app = apps[id];

package/src/BoxManager.ts

@@ -14,8 +14,9 @@ import type {
     TeleBoxColorScheme,
     TeleBoxRect,
     TeleBoxConfig,
-    TeleBoxFullscreen
-, TeleBoxManagerThemeConfig } from "@netless/telebox-insider";
+    TeleBoxFullscreen,
+    TeleBoxManagerThemeConfig,
+} from "@netless/telebox-insider";
 import type Emittery from "emittery";
 import type { NetlessApp } from "./typings";
 import type { View } from "white-web-sdk";
@@ -179,6 +180,9 @@ export class BoxManager {
             emitter.on("containerSizeRatioUpdate", ratio => {
                 this.teleBoxManager._stageRatio$.setValue(ratio);
             }),
+            this.teleBoxManager._fullscreen$.reaction(fullscreen => {
+                callbacks.emit("fullscreenChange", fullscreen);
+            }),
         ]);
     }
 

package/src/Utils/error.ts

@@ -31,8 +31,8 @@ export class InvalidScenePath extends Error {
     override message = `[WindowManager]: ScenePath should start with "/"`;
 }
 
-export class BoxManagerNotFoundError extends Error {
-    override message = "[WindowManager]: boxManager not found";
+export class BoxManagerNotInitializeError extends Error {
+    override message = "[WindowManager]: boxManager need initialize";
 }
 
 export class BindContainerRoomPhaseInvalidError extends Error {

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/callback.ts

@@ -1,9 +1,9 @@
 import Emittery from "emittery";
-import type { TeleBoxColorScheme, TELE_BOX_STATE } from "@netless/telebox-insider";
-import type { Camera, CameraState, SceneState, Size, ViewVisionMode } from "white-web-sdk";
+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 { ICamera, ISize } from "./AttributesDelegate";
+import type { ICamera, ISize } from "./AttributesDelegate";
 
 export type PublicEvent = {
     mainViewModeChange: ViewVisionMode;
@@ -24,6 +24,7 @@ export type PublicEvent = {
     appClose: { appId: string; kind: string, error?: Error };
     baseCameraChange: ICamera;
     baseSizeChange: ISize;
+    fullscreenChange: TeleBoxFullscreen;
 };
 
 export type CallbacksType = Emittery<PublicEvent>;

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, debounce } from "lodash";
 import { log } from "./Utils/log";
 import { PageStateImpl } from "./PageState";
 import { ReconnectRefresher } from "./ReconnectRefresher";
@@ -44,12 +44,11 @@ import type {
     Player,
     ImageInformation,
     SceneState,
-    Rectangle,
     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";
+import type { TeleBoxColorScheme, TeleBoxFullscreen, TeleBoxManager, TeleBoxManagerThemeConfig, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
@@ -778,6 +777,13 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
     }
 
+    public get teleboxManager(): TeleBoxManager {
+        if (!this.boxManager) {
+            throw new Errors.BoxManagerNotInitializeError();
+        }
+        return this.boxManager.teleBoxManager;
+    }
+
     /**
      * 查询所有的 App
      */
@@ -799,7 +805,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         return this.appManager?.closeApp(appId);
     }
 
-    public moveCamera(camera: Partial<Camera> & { animationMode?: AnimationMode } ): void {
+    public moveCamera = debounce((camera: Partial<Camera> & { animationMode?: AnimationMode } ): void => {
         const mainViewCamera = { ...this.mainView.camera };
         const nextCamera = { ...mainViewCamera, ...camera };
         if (isEqual(nextCamera, mainViewCamera)) return;
@@ -833,54 +839,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
                 });
             }, 200);
         }
-    }
-
-    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);
-        }
-    }
+    }, 200);
 
     public convertToPointInWorld(point: Point): Point {
         return this.mainView.convertToPointInWorld(point);
@@ -1033,6 +992,14 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
 
     public setBaseSize(size: Size) {
         this.appManager?.mainViewProxy.setMainViewSize(size);
+        setTimeout(() => {
+            if (!this.appManager || !this.appManager.mainViewProxy.camera$.value) return;
+            this.appManager.mainViewProxy.storeCamera({
+                ...this.appManager.mainViewProxy.camera$.value,
+                id: this.appManager.uid,
+                scale: 1
+            });
+        }, 500);
     }
 
     public createPPTHandler() {