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

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, Rectangle, 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,12 @@ 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;
+    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.35",
+  "version": "1.0.0-canary.36",
   "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/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/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/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,8 +9,8 @@ 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 { isEqual, isNull, isObject, isNumber } from "lodash";
+import { AnimationMode, InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
+import { isEqual, isNull, isObject, isNumber, isEmpty } from "lodash";
 import { log } from "./Utils/log";
 import { PageStateImpl } from "./PageState";
 import { ReconnectRefresher } from "./ReconnectRefresher";
@@ -44,14 +44,17 @@ import type {
     Player,
     ImageInformation,
     SceneState,
- Rectangle} from "white-web-sdk";
+    Rectangle,
+    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 +149,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,30 +799,86 @@ 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
-        });
+        if (camera.animationMode === AnimationMode.Immediately) {
+            this.appManager.mainViewProxy.storeCamera({
+                id: this.appManager.uid,
+                ...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): void {
+    public moveCameraToContain(rectangle: Rectangle & { animationMode?: AnimationMode }): 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({
+        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,
-                scale: nextScale,
-                centerX: rectangle.originX,
-                centerY: rectangle.originY,
+                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);
         }
     }