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

package/src/Cursor/Cursor.ts

@@ -7,6 +7,7 @@ import type { RoomMember } from "white-web-sdk";
 import type { CursorManager } from "./index";
 import type { SvelteComponent } from "svelte";
 import type { AppManager } from "../AppManager";
+import type { TeleBoxRect } from "@netless/telebox-insider";
 
 export type Payload = {
     [key: string]: any;
@@ -50,18 +51,21 @@ export class Cursor {
         this.hide();
     };
 
-    private moveCursor(cursor: Position, rect: DOMRect, view: any) {
+    private moveCursor(cursor: Position, rect: TeleBoxRect, view: any) {
         const { x, y, type } = cursor;
         const point = view?.screen.convertPointToScreen(x, y);
         if (point) {
             let translateX = point.x - 2;
             let translateY = point.y - 18;
             if (type === "app") {
-                const wrapperRect = this.cursorManager.wrapperRect;
+                const wrapperRect = this.cursorManager.playgroundRect;
                 if (wrapperRect) {
                     translateX = translateX + rect.x - wrapperRect.x;
                     translateY = translateY + rect.y - wrapperRect.y;
                 }
+            } else {
+                translateX = translateX + rect.x;
+                translateY = translateY + rect.y;
             }
             if (point.x < 0 || point.x > rect.width || point.y < 0 || point.y > rect.height) {
                 this.component?.$set({ visible: false, x: translateX, y: translateY });

package/src/Cursor/index.ts

@@ -5,7 +5,7 @@ import { emitter } from "../InternalEmitter";
 import { SideEffectManager } from "side-effect-manager";
 import { throttle } from "lodash";
 import { WindowManager } from "../index";
-import type { CursorMovePayload , ApplianceIcons} from "../index";
+import type { CursorMovePayload , ApplianceIcons, TeleBoxRect } from "../index";
 import type { PositionType } from "../AttributesDelegate";
 import type { Point, RoomMember, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
@@ -23,7 +23,8 @@ export type MoveCursorParams = {
 };
 
 export class CursorManager {
-    public wrapperRect?: DOMRect;
+    public wrapperRect?: TeleBoxRect;
+    public playgroundRect?: DOMRect;
     public cursorInstances: Map<string, Cursor> = new Map();
     public roomMembers?: readonly RoomMember[];
     private mainViewElement?: HTMLDivElement;
@@ -88,8 +89,6 @@ export class CursorManager {
                 wrapper.removeEventListener("pointerleave", this.mouseLeaveListener);
             };
         });
-
-        this.wrapperRect = wrapper.getBoundingClientRect();
     }
 
     public setMainViewDivElement(div: HTMLDivElement) {
@@ -167,7 +166,8 @@ export class CursorManager {
     };
 
     public updateContainerRect() {
-        this.wrapperRect = WindowManager.playground?.getBoundingClientRect();
+        this.wrapperRect = this.manager.boxManager?.teleBoxManager.stageRect;
+        this.playgroundRect = WindowManager.playground?.getBoundingClientRect();
     }
 
     public deleteCursor(uid: string) {

package/src/Helper.ts

@@ -1,8 +1,10 @@
-import { getVersionNumber } from "./Utils/Common";
+import { getVersionNumber, wait } from "./Utils/Common";
+import { log } from "./Utils/log";
 import { REQUIRE_VERSION } from "./constants";
 import { WhiteVersion } from "white-web-sdk";
 import { WhiteWebSDKInvalidError } from "./Utils/error";
-import type { Room , RoomMember} from "white-web-sdk";
+import { WindowManager } from "./index";
+import type { Room, RoomMember } from "white-web-sdk";
 
 export const setupWrapper = (
     root: HTMLElement
@@ -40,4 +42,19 @@ export const serializeRoomMembers = (members: readonly RoomMember[]) => {
         uid: member.payload?.uid || "",
         ...member,
     }));
-}
+};
+
+export const createInvisiblePlugin = async (room: Room) => {
+    try {
+        const manager = (await room.createInvisiblePlugin(WindowManager, {})) as WindowManager;
+        return manager;
+    } catch (error) {
+        // 如果有两个用户同时调用 WindowManager.mount 有概率出现这个错误
+        if (error.message === `invisible plugin "WindowManager" exits`) {
+            await wait(200);
+            return room.getInvisiblePlugin(WindowManager.kind) as WindowManager;
+        } else {
+            log("createInvisiblePlugin failed", error);
+        }
+    }
+};

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

@@ -2,7 +2,7 @@ import pRetry from "p-retry";
 import { AppManager } from "./AppManager";
 import { appRegister } from "./Register";
 import { callbacks } from "./callback";
-import { checkVersion, setupWrapper } from "./Helper";
+import { checkVersion, createInvisiblePlugin, setupWrapper } from "./Helper";
 import { createBoxManager } from "./BoxManager";
 import { CursorManager } from "./Cursor";
 import { DEFAULT_CONTAINER_RATIO, Events, INIT_DIR, ROOT_DIR } from "./constants";
@@ -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;
@@ -268,8 +266,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         return manager;
     }
 
-    private static async initManager(room: Room): Promise<WindowManager> {
-        let manager = room.getInvisiblePlugin(WindowManager.kind) as WindowManager;
+    private static async initManager(room: Room): Promise<WindowManager | undefined> {
+        let manager = room.getInvisiblePlugin(WindowManager.kind) as WindowManager | undefined;
         if (!manager) {
             if (isRoom(room)) {
                 if (room.isWritable === false) {
@@ -278,18 +276,12 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
                     } catch (error) {
                         throw new Error("[WindowManger]: room must be switched to be writable");
                     }
-                    manager = (await room.createInvisiblePlugin(
-                        WindowManager,
-                        {}
-                    )) as WindowManager;
-                    manager.ensureAttributes();
+                    manager = await createInvisiblePlugin(room);
+                    manager?.ensureAttributes();
                     await wait(500);
                     await room.setWritable(false);
                 } else {
-                    manager = (await room.createInvisiblePlugin(
-                        WindowManager,
-                        {}
-                    )) as WindowManager;
+                    manager = await createInvisiblePlugin(room);
                 }
             }
         }
@@ -334,11 +326,13 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
                 );
                 if (this.boxManager && WindowManager.playground) {
                     this.boxManager.setRoot(WindowManager.playground);
+                    this.boxManager.mainViewElement$.setValue(mainViewElement);
                 }
                 this.bindMainView(mainViewElement, params.disableCameraTransform);
                 if (WindowManager.playground) {
                     this.cursorManager?.setupWrapper(WindowManager.playground);
                 }
+               
             }
         }
         emitter.emit("updateManagerRect");
@@ -661,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;
@@ -767,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 {

package/src/style.css

@@ -49,8 +49,7 @@
 }
 
 .netless-window-manager-main-view {
-    width: 100%;
-    height: 100%;
+    position: absolute;
 }
 
 
@@ -180,9 +179,6 @@
 }
 
 .window-manager-view-wrapper {
-    width: 100%;
-    height: 100%;
     position: absolute;
-    left: 0;
-    top: 0;
+    z-index: 1;
 }