@netless/window-manager 1.0.0-canary.22 → 1.0.0-canary.25

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

@@ -1,5 +1,5 @@
 import { AnimationMode } from "white-web-sdk";
-import { debounce, delay, isEqual, pick, throttle } from "lodash";
+import { isEqual, pick, throttle } from "lodash";
 import type { TeleBoxRect } from "@netless/telebox-insider";
 import type { Camera, View } from "white-web-sdk";
 import type { ICamera, ISize } from "../AttributesDelegate";
@@ -14,12 +14,12 @@ export class CameraSynchronizer {
 
     constructor(protected saveCamera: SaveCamera) {}
 
-    public setRect = debounce((rect: TeleBoxRect) => {
+    public setRect = (rect: TeleBoxRect) => {
         this.rect = rect;
         if (this.remoteCamera && this.remoteSize) {
             this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
         }
-    }, 10);
+    }
 
     public setView(view: View) {
         this.view = view;
@@ -37,22 +37,17 @@ export class CameraSynchronizer {
                 scale = this.rect.height / size.height;
             }
             const nextScale = camera.scale * scale;
-            const moveCamera = () => {
-                const config: Partial<Camera> & { animationMode: AnimationMode } = {
-                    scale: nextScale,
-                    animationMode: AnimationMode.Immediately,
-                }
-                if (camera.centerX !== null) {
-                    config.centerX = camera.centerX;
-                }
-                if (camera.centerY !== null) {
-                    config.centerY = camera.centerY;
-                }
-                this.view?.moveCamera(config);
+            const config: Partial<Camera> & { animationMode: AnimationMode } = {
+                scale: nextScale,
+                animationMode: AnimationMode.Immediately,
+            }
+            if (camera.centerX !== null) {
+                config.centerX = camera.centerX;
+            }
+            if (camera.centerY !== null) {
+                config.centerY = camera.centerY;
             }
-            moveCamera(); 
-            // TODO 直接调用 moveCamera 依然会出现 camera 错误的情况,这里暂时加一个 delay 保证 camera 是对的, 后续需要 SDK 进行修改
-            delay(moveCamera, 50);
+            this.view?.moveCamera(config);
         }
     }, 10);
 
@@ -62,14 +57,10 @@ export class CameraSynchronizer {
         if (this.rect && this.remoteCamera && needMoveCamera) {
             const scale = this.rect.width / size.width;
             const nextScale = this.remoteCamera.scale * scale;
-            const moveCamera = () => {
-                this.view?.moveCamera({
-                    scale: nextScale,
-                    animationMode: AnimationMode.Immediately,
-                })
-            };
-            moveCamera();
-            delay(moveCamera, 50);
+            this.view?.moveCamera({
+                scale: nextScale,
+                animationMode: AnimationMode.Immediately,
+            })
         }
     }
 

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";
@@ -268,8 +268,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 +278,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 +328,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");

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;
 }