@netless/window-manager 0.4.32 → 1.0.0-canary.2

package/src/InternalEmitter.ts

@@ -1,9 +1,12 @@
 import Emittery from "emittery";
+import type { TeleBoxRect } from "@netless/telebox-insider";
 import type { AppInitState, CursorMovePayload } from "./index";
+import type { Member } from "./Helper";
 
 export type RemoveSceneParams = {
-    scenePath: string, index?: number
-}
+    scenePath: string;
+    index?: number;
+};
 
 export type EmitterEvent = {
     onCreated: undefined;
@@ -14,19 +17,20 @@ 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;
     writableChange: boolean;
     containerSizeRatioUpdate: number;
+    roomMembersChange: Member[];
 };
 
 export type EmitterType = Emittery<EmitterEvent>;

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

package/src/constants.ts

@@ -57,3 +57,5 @@ export const ROOT_DIR = "/";
 export const INIT_DIR = "/init";
 
 export const SETUP_APP_DELAY = 50;
+
+export const MAX_PAGE_SIZE = 500;

package/src/index.ts

@@ -3,7 +3,6 @@ import { AppManager } from "./AppManager";
 import { appRegister } from "./Register";
 import { callbacks } from "./callback";
 import { checkVersion, setupWrapper } from "./Helper";
-import { ContainerResizeObserver } from "./ContainerResizeObserver";
 import { createBoxManager } from "./BoxManager";
 import { CursorManager } from "./Cursor";
 import { DEFAULT_CONTAINER_RATIO, Events, INIT_DIR, ROOT_DIR } from "./constants";
@@ -145,7 +144,6 @@ export const reconnectRefresher = new ReconnectRefresher({ emitter });
 export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> implements PageController {
     public static kind = "WindowManager";
     public static displayer: Displayer;
-    public static wrapper?: HTMLElement;
     public static playground?: HTMLElement;
     public static container?: HTMLElement;
     public static debug = false;
@@ -168,7 +166,6 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     private boxManager?: BoxManager;
     private static params?: MountParams;
 
-    private containerResizeObserver?: ContainerResizeObserver;
     public containerSizeRatio = WindowManager.containerSizeRatio;
 
     constructor(context: InvisiblePluginContext) {
@@ -237,7 +234,13 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         if (containerSizeRatio) {
             manager.containerSizeRatio = containerSizeRatio;
         }
-
+        manager.boxManager = createBoxManager(manager, callbacks, emitter, boxEmitter, {
+            collectorContainer: params.collectorContainer,
+            collectorStyles: params.collectorStyles,
+            prefersColorScheme: params.prefersColorScheme,
+            stageRatio: params.containerSizeRatio,
+        });
+        manager.appManager?.setBoxManager(manager.boxManager);
         if (params.container) {
             manager.bindContainer(params.container);
         }
@@ -283,31 +286,19 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     }
 
     private static initContainer(
-        manager: WindowManager,
         container: HTMLElement,
-        chessboard: boolean | undefined,
         overwriteStyles: string | undefined
     ) {
         if (!WindowManager.container) {
             WindowManager.container = container;
         }
-        const { playground, wrapper, sizer, mainViewElement } = setupWrapper(container);
+        const { playground, mainViewElement } = setupWrapper(container);
         WindowManager.playground = playground;
-        if (chessboard) {
-            sizer.classList.add("netless-window-manager-chess-sizer");
-        }
         if (overwriteStyles) {
             const style = document.createElement("style");
             style.textContent = overwriteStyles;
             playground.appendChild(style);
         }
-        manager.containerResizeObserver = ContainerResizeObserver.create(
-            playground,
-            sizer,
-            wrapper,
-            emitter
-        );
-        WindowManager.wrapper = wrapper;
         return mainViewElement;
     }
 
@@ -327,24 +318,15 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             if (WindowManager.params) {
                 const params = WindowManager.params;
                 const mainViewElement = WindowManager.initContainer(
-                    this,
                     container,
-                    params.chessboard,
                     params.overwriteStyles
                 );
-                if (this.boxManager) {
-                    this.boxManager.destroy();
+                if (this.boxManager && WindowManager.playground) {
+                    this.boxManager.setRoot(WindowManager.playground);
                 }
-                const boxManager = createBoxManager(this, callbacks, emitter, boxEmitter, {
-                    collectorContainer: params.collectorContainer,
-                    collectorStyles: params.collectorStyles,
-                    prefersColorScheme: params.prefersColorScheme,
-                });
-                this.boxManager = boxManager;
-                this.appManager?.setBoxManager(boxManager);
                 this.bindMainView(mainViewElement, params.disableCameraTransform);
-                if (WindowManager.wrapper) {
-                    this.cursorManager?.setupWrapper(WindowManager.wrapper);
+                if (WindowManager.playground) {
+                    this.cursorManager?.setupWrapper(WindowManager.playground);
                 }
             }
         }
@@ -358,7 +340,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
 
     public bindCollectorContainer(container: HTMLElement) {
         if (WindowManager.isCreated && this.boxManager) {
-            this.boxManager.setCollectorContainer(container);
+            this.boxManager.setCollector(container);
         } else {
             if (WindowManager.params) {
                 WindowManager.params.collectorContainer = container;
@@ -802,11 +784,9 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     }
 
     private _destroy() {
-        this.containerResizeObserver?.disconnect();
         this.appManager?.destroy();
         this.cursorManager?.destroy();
         WindowManager.container = undefined;
-        WindowManager.wrapper = undefined;
         WindowManager.isCreated = false;
         if (WindowManager.playground) {
             WindowManager.playground.parentNode?.removeChild(WindowManager.playground);

package/src/typings.ts

@@ -13,6 +13,7 @@ import type {
 import type { AppContext } from "./App";
 import type { ReadonlyTeleBox, TeleBoxRect } from "@netless/telebox-insider";
 import type { PageState } from "./Page";
+import type { Member } from "./Helper";
 
 export interface NetlessApp<Attributes = any, MagixEventPayloads = any, AppOptions = any, SetupResult = any> {
     kind: string;
@@ -53,6 +54,7 @@ export type AppEmitterEvent<T = any> = {
     reconnected: void;
     seek: number;
     pageStateChange: PageState,
+    roomMembersChange: Member[];
 };
 
 export type RegisterEventData = {
@@ -79,8 +81,10 @@ export type AppListenerKeys = keyof AppEmitterEvent;
 export type ApplianceIcons = Partial<Record<ApplianceNames, string>>;
 
 export type { AppContext } from "./App/AppContext";
+export type { WhiteBoardView } from "./App";
 export type { ReadonlyTeleBox, TeleBoxRect };
 export type { SceneState, SceneDefinition, View, AnimationMode, Displayer, Room, Player };
 export type { Storage, StorageStateChangedEvent, StorageStateChangedListener } from "./App/Storage";
 export * from "./Page";
 export * from "./Utils/error";
+export type { Member } from "./Helper";

package/vite.config.js

@@ -39,7 +39,6 @@ export default defineConfig(({ mode }) => {
                 fileName: "index"
             },
             outDir: "dist",
-            sourcemap: true,
             rollupOptions: {
                 external: Object.keys({
                     ...omit(dependencies, ["@netless/telebox-insider"]),

package/dist/ContainerResizeObserver.d.ts

@@ -1,11 +0,0 @@
-import type { EmitterType } from "./InternalEmitter";
-export declare class ContainerResizeObserver {
-    private emitter;
-    private containerResizeObserver?;
-    private disposer?;
-    constructor(emitter: EmitterType);
-    static create(container: HTMLElement, sizer: HTMLElement, wrapper: HTMLDivElement, emitter: EmitterType): ContainerResizeObserver;
-    observePlaygroundSize(container: HTMLElement, sizer: HTMLElement, wrapper: HTMLDivElement): void;
-    updateSizer({ width, height }: DOMRectReadOnly, sizer: HTMLElement, wrapper: HTMLDivElement): void;
-    disconnect(): void;
-}