@netless/window-manager 0.4.31 → 1.0.0-canary.1

package/src/Cursor/Cursor.ts

@@ -1,5 +1,4 @@
 import App from "./Cursor.svelte";
-import { ApplianceMap } from "./icons";
 import { ApplianceNames } from "white-web-sdk";
 import { findMemberByUid } from "../Helper";
 import { omit } from "lodash";
@@ -159,8 +158,9 @@ export class Cursor {
 
     private getIcon() {
         if (this.member) {
-            const applianceSrc = ApplianceMap[this.memberApplianceName || ApplianceNames.shape];
-            return applianceSrc || ApplianceMap[ApplianceNames.shape];
+            const icons = this.cursorManager.applianceIcons;
+            const applianceSrc = icons[this.memberApplianceName || ApplianceNames.shape];
+            return applianceSrc || icons[ApplianceNames.shape];
         }
     }
 

package/src/Cursor/index.ts

@@ -5,10 +5,11 @@ import { emitter } from "../InternalEmitter";
 import { SideEffectManager } from "side-effect-manager";
 import { throttle } from "lodash";
 import { WindowManager } from "../index";
-import type { CursorMovePayload } from "../index";
+import type { CursorMovePayload , ApplianceIcons} from "../index";
 import type { PositionType } from "../AttributesDelegate";
 import type { Point, RoomMember, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
+import { ApplianceMap } from "./icons";
 
 export type EventType = {
     type: PositionType;
@@ -20,6 +21,7 @@ export type MoveCursorParams = {
     x: number;
     y: number;
 };
+
 export class CursorManager {
     public containerRect?: DOMRect;
     public wrapperRect?: DOMRect;
@@ -28,12 +30,13 @@ export class CursorManager {
     private mainViewElement?: HTMLDivElement;
     private sideEffectManager = new SideEffectManager();
     private store = this.manager.store;
+    public applianceIcons: ApplianceIcons = ApplianceMap;
 
-    constructor(private manager: AppManager, private enableCursor: boolean) {
+    constructor(private manager: AppManager, private enableCursor: boolean, applianceIcons?: ApplianceIcons) {
         this.roomMembers = this.manager.room?.state.roomMembers;
-        const wrapper = WindowManager.wrapper;
-        if (wrapper) {
-            this.setupWrapper(wrapper);
+        const playground = WindowManager.playground;
+        if (playground) {
+            this.setupWrapper(playground);
         }
         this.sideEffectManager.add(() => {
             return emitter.on("cursorMove", this.onCursorMove);
@@ -42,6 +45,9 @@ export class CursorManager {
         this.sideEffectManager.add(() => {
             return emitter.on("playgroundSizeChange", () => this.updateContainerRect());
         });
+        if (applianceIcons) {
+            this.applianceIcons = { ...ApplianceMap, ...applianceIcons };
+        }
     }
 
     private onCursorMove = (payload: CursorMovePayload) => {
@@ -59,7 +65,7 @@ export class CursorManager {
     private initCursorInstance = (uid: string) => {
         let cursorInstance = this.cursorInstances.get(uid);
         if (!cursorInstance) {
-            cursorInstance = new Cursor(this.manager, uid, this, WindowManager.wrapper);
+            cursorInstance = new Cursor(this.manager, uid, this, WindowManager.playground);
             this.cursorInstances.set(uid, cursorInstance);
         }
         return cursorInstance;
@@ -163,7 +169,7 @@ export class CursorManager {
 
     public updateContainerRect() {
         this.containerRect = WindowManager.container?.getBoundingClientRect();
-        this.wrapperRect = WindowManager.wrapper?.getBoundingClientRect();
+        this.wrapperRect = WindowManager.playground?.getBoundingClientRect();
     }
 
     public deleteCursor(uid: string) {

package/src/Helper.ts

@@ -2,36 +2,23 @@ import { getVersionNumber } from "./Utils/Common";
 import { REQUIRE_VERSION } from "./constants";
 import { WhiteVersion } from "white-web-sdk";
 import { WhiteWebSDKInvalidError } from "./Utils/error";
-import { WindowManager } from "./index";
 import type { Room } from "white-web-sdk";
 
 export const setupWrapper = (
     root: HTMLElement
 ): {
     playground: HTMLDivElement;
-    wrapper: HTMLDivElement;
-    sizer: HTMLDivElement;
     mainViewElement: HTMLDivElement;
 } => {
     const playground = document.createElement("div");
     playground.className = "netless-window-manager-playground";
 
-    const sizer = document.createElement("div");
-    sizer.className = "netless-window-manager-sizer";
-
-    const wrapper = document.createElement("div");
-    wrapper.className = "netless-window-manager-wrapper";
-
     const mainViewElement = document.createElement("div");
     mainViewElement.className = "netless-window-manager-main-view";
-
-    playground.appendChild(sizer);
-    sizer.appendChild(wrapper);
-    wrapper.appendChild(mainViewElement);
+    playground.appendChild(mainViewElement);
     root.appendChild(playground);
-    WindowManager.wrapper = wrapper;
 
-    return { playground, wrapper, sizer, mainViewElement };
+    return { playground, mainViewElement };
 };
 
 export const checkVersion = () => {

package/src/InternalEmitter.ts

@@ -1,9 +1,11 @@
 import Emittery from "emittery";
+import type { TeleBoxRect } from "@netless/telebox-insider";
 import type { AppInitState, CursorMovePayload } from "./index";
 
 export type RemoveSceneParams = {
-    scenePath: string, index?: number
-}
+    scenePath: string;
+    index?: number;
+};
 
 export type EmitterEvent = {
     onCreated: undefined;
@@ -14,14 +16,14 @@ export type EmitterEvent = {
     mainViewMounted: undefined;
     observerIdChange: number;
     boxStateChange: string;
-    playgroundSizeChange: DOMRect;
+    playgroundSizeChange: TeleBoxRect;
     startReconnect: undefined;
     onReconnected: undefined;
     removeScenes: RemoveSceneParams;
     cursorMove: CursorMovePayload;
     updateManagerRect: undefined;
     focusedChange: { focused: string | undefined; prev: string | undefined };
-    rootDirRemoved: undefined;  // 根目录整个被删除
+    rootDirRemoved: undefined; // 根目录整个被删除
     rootDirSceneRemoved: string; // 根目录下的场景被删除
     setReadonly: boolean;
     changePageState: undefined;

package/src/View/CameraSynchronizer.ts

@@ -0,0 +1,67 @@
+import { AnimationMode } from "white-web-sdk";
+import { delay, throttle } from "lodash";
+import type { TeleBoxRect } from "@netless/telebox-insider";
+import type { Camera, View, Size } from "white-web-sdk";
+import type { MainViewSize } from "../AttributesDelegate";
+
+export type SaveCamera = (camera: Camera) => void;
+
+export class CameraSynchronizer {
+    protected remoteCamera?: Camera;
+    protected remoteSize?: MainViewSize;
+    protected rect?: TeleBoxRect;
+    protected view?: View;
+
+    constructor(protected saveCamera: SaveCamera) {}
+
+    public setRect(rect: TeleBoxRect) {
+        this.rect = rect;
+        if (this.remoteCamera && this.remoteSize) {
+            this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
+        }
+    }
+
+    public setView(view: View) {
+        this.view = view;
+    }
+
+    // 远端 Camera 或者 size 更新
+    public onRemoteUpdate = throttle((camera: Camera, size: MainViewSize) => {
+        this.remoteCamera = camera;
+        this.remoteSize = size;
+        if (this.remoteSize && this.rect) {
+            let scale: number;
+            if (size.width < size.height) {
+                scale = this.rect.width / size.width;
+            } else {
+                scale = this.rect.height / size.height;
+            }
+            const nextScale = camera.scale * scale;
+            const moveCamera = () =>  this.view?.moveCamera({
+                centerX: camera.centerX,
+                centerY: camera.centerY,
+                scale: nextScale,
+                animationMode: AnimationMode.Immediately,
+            });
+            // TODO 直接调用 moveCamera 依然会出现 camera 错误的情况,这里暂时加一个 delay 保证 camera 是对的, 后续需要 SDK 进行修改
+            delay(moveCamera, 10);
+        }
+    }, 50);
+
+
+    public onLocalCameraUpdate(camera: Camera) {
+        this.saveCamera(camera);
+    }
+
+    // 本地 Size 更新, 先匹配 camera 到新的 size 然后再发送 camera 数据到远端
+    public onLocalSizeUpdate(size: Size) {
+        if (this.rect && this.view) {
+            const scale = this.rect.width / size.width;
+            const nextScale = this.view.camera.scale * scale;
+            this.view.moveCamera({
+                scale: nextScale,
+                animationMode: AnimationMode.Immediately
+            });
+        }
+    }
+}

package/src/View/MainView.ts

@@ -1,25 +1,29 @@
-import { AnimationMode, reaction } from "white-web-sdk";
+import { reaction } from "white-web-sdk";
 import { callbacks } from "../callback";
 import { createView } from "./ViewManager";
-import { debounce, get, isEmpty, isEqual } from "lodash";
+import { debounce, get, isEqual } from "lodash";
 import { emitter } from "../InternalEmitter";
+import { Events } from "../constants";
 import { Fields } from "../AttributesDelegate";
 import { setViewFocusScenePath } from "../Utils/Common";
 import { SideEffectManager } from "side-effect-manager";
 import type { Camera, Size, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
-import { Events } from "../constants";
+import { CameraSynchronizer } from "./CameraSynchronizer";
 
 export class MainViewProxy {
-    private scale?: number;
     private started = false;
     private mainViewIsAddListener = false;
     private mainView: View;
     private store = this.manager.store;
+    private synchronizer: CameraSynchronizer;
 
     private sideEffectManager = new SideEffectManager();
 
     constructor(private manager: AppManager) {
+        this.synchronizer = new CameraSynchronizer(
+            camera => this.store.setMainViewCamera({ ...camera, id: this.manager.uid })
+        );
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
         emitter.once("mainViewMounted").then(() => {
@@ -28,18 +32,24 @@ export class MainViewProxy {
             this.ensureCameraAndSize();
             this.startListenWritableChange();
         });
-        const playgroundSizeChangeListener = () => {
-            this.sizeChangeHandler(this.mainViewSize);
-        };
-        this.sideEffectManager.add(() => {
-            return emitter.on("playgroundSizeChange", playgroundSizeChangeListener);
-        });
         this.sideEffectManager.add(() => {
             return emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
         });
         this.sideEffectManager.add(() => {
             return emitter.on("startReconnect", () => {
-                this.mainView.release();
+                if (!(this.mainView as any).didRelease) {
+                    this.mainView.release();
+                }
+            });
+        });
+        const rect = this.manager.boxManager?.stageRect;
+        if (rect) {
+            this.synchronizer.setRect(rect);
+        }
+        this.sideEffectManager.add(() => {
+            return emitter.on("playgroundSizeChange", rect => {
+                this.synchronizer.setRect(rect);
+                this.synchronizer.onLocalSizeUpdate(rect);
             });
         });
     }
@@ -52,7 +62,7 @@ export class MainViewProxy {
                 }
             });
         });
-    }
+    };
 
     public ensureCameraAndSize() {
         if (!this.mainViewCamera || !this.mainViewSize) {
@@ -74,8 +84,7 @@ export class MainViewProxy {
     }
 
     private moveCameraSizeByAttributes() {
-        this.moveCameraToContian(this.mainViewSize);
-        this.moveCamera(this.mainViewCamera);
+        this.synchronizer.onRemoteUpdate(this.mainViewCamera, this.mainViewSize);
     }
 
     public start() {
@@ -91,9 +100,12 @@ export class MainViewProxy {
     };
 
     public setCameraAndSize(): void {
-        const camera = { ...this.mainView.camera, id: this.manager.uid };
-        const size = { ...this.mainView.size, id: this.manager.uid };
-        this.store.setMainViewCameraAndSize(camera, size);
+        const stageSize = this.getStageSize();
+        if (stageSize) {
+            const camera = { ...this.mainView.camera, id: this.manager.uid };
+            const size = { ...stageSize, id: this.manager.uid };
+            this.store.setMainViewCameraAndSize(camera, size);
+        }
     }
 
     private cameraReaction = () => {
@@ -101,8 +113,7 @@ export class MainViewProxy {
             () => this.mainViewCamera,
             camera => {
                 if (camera && camera.id !== this.manager.uid) {
-                    this.moveCameraToContian(this.mainViewSize);
-                    this.moveCamera(camera);
+                    this.synchronizer.onRemoteUpdate(camera, this.mainViewSize);
                 }
             },
             { fireImmediately: true }
@@ -111,8 +122,7 @@ export class MainViewProxy {
 
     public sizeChangeHandler = debounce((size: Size) => {
         if (size) {
-            this.moveCameraToContian(size);
-            this.moveCamera(this.mainViewCamera);
+            this.synchronizer.onLocalSizeUpdate(size);
         }
     }, 30);
 
@@ -122,7 +132,7 @@ export class MainViewProxy {
         if (size.id === this.manager.uid) {
             this.setCameraAndSize();
         }
-    }
+    };
 
     public get view(): View {
         return this.mainView;
@@ -138,6 +148,7 @@ export class MainViewProxy {
         if (mainViewScenePath) {
             setViewFocusScenePath(mainView, mainViewScenePath);
         }
+        this.synchronizer.setView(mainView);
         return mainView;
     }
 
@@ -172,12 +183,20 @@ export class MainViewProxy {
     }
 
     private onCameraUpdatedByDevice = (camera: Camera) => {
-        this.store.setMainViewCamera({ ...camera, id: this.manager.uid });
-        if (!isEqual(this.mainViewSize, { ...this.mainView.size, id: this.manager.uid })) {
-            this.setMainViewSize(this.view.size);
+        this.synchronizer.onLocalCameraUpdate(camera);
+        const size = this.getStageSize();
+        if (size && !isEqual(size, this.mainViewSize)) {
+            this.setMainViewSize(size);
         }
     };
 
+    private getStageSize(): Size | undefined {
+        const stage = this.manager.boxManager?.stageRect;
+        if (stage) {
+            return { width: stage.width, height: stage.height };
+        }
+    }
+
     public addMainViewListener(): void {
         if (this.mainViewIsAddListener) return;
         if (this.view.divElement) {
@@ -205,7 +224,7 @@ export class MainViewProxy {
         this.manager.boxManager?.blurAllBox();
     }
 
-    public setMainViewSize = debounce(size => {
+    public setMainViewSize = debounce((size: Size) => {
         this.store.setMainViewSize({ ...size, id: this.manager.uid });
     }, 50);
 
@@ -225,33 +244,6 @@ export class MainViewProxy {
         callbacks.emit("cameraStateChange", this.cameraState);
     };
 
-    public moveCameraToContian(size: Size): void {
-        if (!isEmpty(size)) {
-            this.view.moveCameraToContain({
-                width: size.width,
-                height: size.height,
-                originX: -size.width / 2,
-                originY: -size.height / 2,
-                animationMode: AnimationMode.Immediately,
-            });
-            this.scale = this.view.camera.scale;
-        }
-    }
-
-    public moveCamera(camera: Camera): void {
-        if (!isEmpty(camera)) {
-            if (isEqual(camera, this.view.camera)) return;
-            const { centerX, centerY, scale } = camera;
-            const needScale = scale * (this.scale || 1);
-            this.view.moveCamera({
-                centerX: centerX,
-                centerY: centerY,
-                scale: needScale,
-                animationMode: AnimationMode.Immediately,
-            });
-        }
-    }
-
     public stop() {
         this.removeCameraListener();
         this.manager.refresher?.remove(Fields.MainViewCamera);