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

package/dist/src/AppListener.d.ts

@@ -16,4 +16,6 @@ export declare class AppListeners {
     private refreshHandler;
     private initMainViewCameraHandler;
     private setAppFocusViewIndexHandler;
+    private moveCameraHandler;
+    private moveCameraToContainHandler;
 }

package/dist/src/BoxManager.d.ts

@@ -4,7 +4,7 @@ import { TELE_BOX_STATE, TeleBoxManager } from "@netless/telebox-insider";
 import { WindowManager } from "./index";
 import type { BoxEmitterType } from "./BoxEmitter";
 import type { AddAppOptions } from "./index";
-import type { TeleBoxManagerUpdateConfig, ReadonlyTeleBox, TeleBoxColorScheme, TeleBoxRect, TeleBoxConfig, TeleBoxFullscreen } from "@netless/telebox-insider";
+import type { TeleBoxManagerUpdateConfig, ReadonlyTeleBox, TeleBoxColorScheme, TeleBoxRect, TeleBoxConfig, TeleBoxFullscreen, TeleBoxManagerThemeConfig } from "@netless/telebox-insider";
 import type Emittery from "emittery";
 import type { NetlessApp } from "./typings";
 import type { View } from "white-web-sdk";
@@ -48,6 +48,9 @@ export declare type CreateTeleBoxManagerConfig = {
     containerStyle?: string;
     stageStyle?: string;
     fullscreen?: TeleBoxFullscreen;
+    defaultBoxBodyStyle?: string | null;
+    defaultBoxStageStyle?: string | null;
+    theme?: TeleBoxManagerThemeConfig;
 };
 export declare type BoxManagerContext = {
     safeSetAttributes: (attributes: any) => void;

package/dist/src/callback.d.ts

@@ -3,6 +3,7 @@ import type { TeleBoxColorScheme, TELE_BOX_STATE } from "@netless/telebox-inside
 import type { CameraState, SceneState, ViewVisionMode } from "white-web-sdk";
 import type { LoadAppEvent } from "./Register";
 import type { PageState } from "./Page";
+import { ICamera, ISize } from "./AttributesDelegate";
 export declare type PublicEvent = {
     mainViewModeChange: ViewVisionMode;
     boxStateChange: `${TELE_BOX_STATE}`;
@@ -24,6 +25,8 @@ export declare type PublicEvent = {
         kind: string;
         error?: Error;
     };
+    baseCameraChange: ICamera;
+    baseSizeChange: ISize;
 };
 export declare type CallbacksType = Emittery<PublicEvent>;
 export declare const callbacks: CallbacksType;

package/dist/src/constants.d.ts

@@ -14,7 +14,9 @@ export declare enum Events {
     RootDirRemoved = "RootDirRemoved",
     Refresh = "Refresh",
     InitMainViewCamera = "InitMainViewCamera",
-    InvokeAttributesUpdateCallback = "InvokeAttributesUpdateCallback"
+    InvokeAttributesUpdateCallback = "InvokeAttributesUpdateCallback",
+    MoveCamera = "MoveCamera",
+    MoveCameraToContain = "moveCameraToContain"
 }
 export declare const MagixEventName = "__WindowManger";
 export declare const EnsureReconnectEvent = "__WindowMangerEnsureReconnected__";

package/dist/src/index.d.ts

@@ -1,14 +1,14 @@
 import { AppManager } from "./AppManager";
 import { CursorManager } from "./Cursor";
-import { InvisiblePlugin, Size, ViewMode } from "white-web-sdk";
+import { AnimationMode, InvisiblePlugin, ViewMode } from "white-web-sdk";
 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 } 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, TeleBoxState } from "@netless/telebox-insider";
+import type { TeleBoxColorScheme, TeleBoxFullscreen, TeleBoxManagerThemeConfig, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
@@ -97,6 +97,12 @@ export declare type MountParams = {
     prefersColorScheme?: TeleBoxColorScheme;
     applianceIcons?: ApplianceIcons;
     fullscreen?: TeleBoxFullscreen;
+    /** Custom `style` attribute value for content area of all boxes. Can be overwritten by box. */
+    defaultBoxBodyStyle?: string | null;
+    /** Custom `style` attribute value for stage area of all boxes. Can be overwritten by box. */
+    defaultBoxStageStyle?: string | null;
+    /** Theme variable */
+    theme?: TeleBoxManagerThemeConfig;
 };
 export declare const reconnectRefresher: ReconnectRefresher;
 export declare class WindowManager extends InvisiblePlugin<WindowMangerAttributes> implements PageController {
@@ -224,8 +230,9 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
      * 关闭 APP
      */
     closeApp(appId: string): Promise<void>;
-    moveCamera(camera: Partial<Camera>): void;
-    moveCameraToContain(rectangle: Rectangle): void;
+    moveCamera(camera: Partial<Camera> & {
+        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.35",
+  "version": "1.0.0-canary.38",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/AppListener.ts

@@ -2,9 +2,10 @@ import { callbacks } from "./callback";
 import { emitter } from "./InternalEmitter";
 import { Events, MagixEventName } from "./constants";
 import { setViewFocusScenePath } from "./Utils/Common";
-import type { Event } from "white-web-sdk";
+import type { AnimationMode, Camera, Event, Rectangle } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 import type { TeleBoxState } from "@netless/telebox-insider";
+import { computedMinScale } from "./View/CameraSynchronizer";
 
 type SetAppFocusIndex = {
     type: "main" | "app";
@@ -73,6 +74,14 @@ export class AppListeners {
                     this.manager.attributesUpdateCallback(this.manager.attributes.apps);
                     break;
                 }
+                case Events.MoveCamera: {
+                    this.moveCameraHandler(data.payload);
+                    break;
+                }
+                case Events.MoveCameraToContain: {
+                    this.moveCameraToContainHandler(data.payload);
+                    break;
+                }
                 default:
                     break;
             }
@@ -125,4 +134,20 @@ export class AppListeners {
             }
         }
     }
+
+    private moveCameraHandler = (payload: Camera) => {
+        const cameraPayload = payload;
+        if (payload.scale) {
+            const remoteSize = this.manager.mainViewProxy.size$.value;
+            const currentSize = this.manager.boxManager?.stageRect;
+            if (remoteSize && currentSize) {
+                cameraPayload.scale = payload.scale * computedMinScale(remoteSize, currentSize);
+            }
+        }
+        this.manager.mainView.moveCamera(cameraPayload);
+    }
+
+    private moveCameraToContainHandler = (payload: Rectangle & { animationMode?: AnimationMode }) => {
+        this.manager.mainView.moveCameraToContain(payload);
+    }
 }

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

@@ -15,7 +15,7 @@ import type {
     TeleBoxRect,
     TeleBoxConfig,
     TeleBoxFullscreen
-} from "@netless/telebox-insider";
+, TeleBoxManagerThemeConfig } from "@netless/telebox-insider";
 import type Emittery from "emittery";
 import type { NetlessApp } from "./typings";
 import type { View } from "white-web-sdk";
@@ -53,6 +53,9 @@ export type CreateTeleBoxManagerConfig = {
     containerStyle?: string;
     stageStyle?: string;
     fullscreen?: TeleBoxFullscreen;
+    defaultBoxBodyStyle?: string | null;
+    defaultBoxStageStyle?: string | null;
+    theme?: TeleBoxManagerThemeConfig;
 };
 
 export type BoxManagerContext = {
@@ -268,6 +271,18 @@ export class BoxManager {
             initManagerState.fullscreen = createTeleBoxManagerConfig.fullscreen;
         }
 
+        if (createTeleBoxManagerConfig?.defaultBoxBodyStyle !== undefined) {
+            initManagerState.defaultBoxBodyStyle = createTeleBoxManagerConfig.defaultBoxBodyStyle;
+        }
+
+        if (createTeleBoxManagerConfig?.defaultBoxStageStyle !== undefined) {
+            initManagerState.defaultBoxStageStyle = createTeleBoxManagerConfig.defaultBoxStageStyle;
+        }
+
+        if (createTeleBoxManagerConfig?.theme) {
+            initManagerState.theme = createTeleBoxManagerConfig.theme;
+        }
+
         const manager = new TeleBoxManager(initManagerState);
         if (this.teleBoxManager) {
             this.teleBoxManager.destroy();

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

@@ -49,6 +49,16 @@ export class MainViewProxy {
                 }
             }
         }));
+        this.camera$.reaction(camera => {
+            if (camera) {
+                callbacks.emit("baseCameraChange", camera);
+            }
+        });
+        this.size$.reaction(size => {
+            if (size) {
+                callbacks.emit("baseSizeChange", size);
+            }
+        });
     }
 
     public createViewSync = () => {

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

package/src/constants.ts

@@ -15,6 +15,8 @@ export enum Events {
     Refresh = "Refresh",
     InitMainViewCamera = "InitMainViewCamera",
     InvokeAttributesUpdateCallback = "InvokeAttributesUpdateCallback",
+    MoveCamera = "MoveCamera",
+    MoveCameraToContain = "moveCameraToContain",
 }
 
 export const MagixEventName = "__WindowManger";

package/src/index.ts

@@ -9,7 +9,7 @@ import { DEFAULT_CONTAINER_RATIO, Events, INIT_DIR, ROOT_DIR } from "./constants
 import { emitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
-import { InvisiblePlugin, isPlayer, isRoom, RoomPhase, Size, ViewMode } from "white-web-sdk";
+import { AnimationMode, InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
 import { isEqual, isNull, isObject, isNumber } from "lodash";
 import { log } from "./Utils/log";
 import { PageStateImpl } from "./PageState";
@@ -44,14 +44,16 @@ import type {
     Player,
     ImageInformation,
     SceneState,
- Rectangle} from "white-web-sdk";
+    Size
+} from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
 import type { ApplianceIcons, NetlessApp, RegisterParams } from "./typings";
-import type { TeleBoxColorScheme, TeleBoxFullscreen, TeleBoxState } from "@netless/telebox-insider";
+import type { TeleBoxColorScheme, TeleBoxFullscreen, TeleBoxManagerThemeConfig, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
 import type { PageController, AddPageParams, PageState } from "./Page";
+import { computedMinScale } from "./View/CameraSynchronizer";
 
 export type WindowMangerAttributes = {
     modelValue?: string;
@@ -146,6 +148,12 @@ export type MountParams = {
     prefersColorScheme?: TeleBoxColorScheme;
     applianceIcons?: ApplianceIcons;
     fullscreen?: TeleBoxFullscreen;
+    /** Custom `style` attribute value for content area of all boxes. Can be overwritten by box. */
+    defaultBoxBodyStyle?: string | null;
+    /** Custom `style` attribute value for stage area of all boxes. Can be overwritten by box. */
+    defaultBoxStageStyle?: string | null;
+    /** Theme variable */
+    theme?: TeleBoxManagerThemeConfig;
 };
 
 export const reconnectRefresher = new ReconnectRefresher({ emitter });
@@ -790,33 +798,101 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         return this.appManager?.closeApp(appId);
     }
 
-    public moveCamera(camera: Partial<Camera> ): void {
+    public moveCamera(camera: Partial<Camera> & { animationMode?: AnimationMode } ): void {
         const mainViewCamera = { ...this.mainView.camera };
         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);
+        if (camera.animationMode === AnimationMode.Immediately) {
             this.appManager.mainViewProxy.storeCamera({
                 id: this.appManager.uid,
-                scale: nextScale,
-                centerX: rectangle.originX,
-                centerY: rectangle.originY,
+                ...nextCamera
             });
+        } else {
+            const remoteCamera = this.appManager.mainViewProxy.size$.value;
+            const currentSize = this.boxManager?.stageRect;
+            let nextScale;
+            if (camera.scale &&  remoteCamera && currentSize) {
+                nextScale = camera.scale * computedMinScale(remoteCamera, currentSize);
+            }
+            if (nextScale) {
+                this.mainView.moveCamera({
+                    ...camera,
+                    scale: nextScale,
+                });
+            } else {
+                this.mainView.moveCamera(camera);
+            }
+            this.appManager.dispatchInternalEvent(Events.MoveCamera, camera);
+            setTimeout(() => {
+                if (!this.appManager) return;
+                this.appManager.mainViewProxy.storeCamera({
+                    id: this.appManager.uid,
+                    ...nextCamera
+                });
+            }, 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);
     }