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

package/src/InternalEmitter.ts

@@ -1,9 +1,13 @@
 import Emittery from "emittery";
+import type { TeleBoxRect } from "@netless/telebox-insider";
 import type { AppInitState, CursorMovePayload } from "./index";
+import type { Member } from "./Helper";
+import type { MemberState } from "white-web-sdk";
 
 export type RemoveSceneParams = {
-    scenePath: string, index?: number
-}
+    scenePath: string;
+    index?: number;
+};
 
 export type EmitterEvent = {
     onCreated: undefined;
@@ -14,19 +18,21 @@ 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[];
+    memberStateChange: MemberState;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;

package/src/Page/PageController.ts

@@ -13,6 +13,7 @@ export type PageState = {
 export interface PageController {
     nextPage: () => Promise<boolean>;
     prevPage: () => Promise<boolean>;
+    jumpPage: (index: number) => Promise<boolean>;
     addPage: (params?: AddPageParams) => Promise<void>;
     removePage: (index: number) => Promise<boolean>;
     pageState: PageState;

package/src/ReconnectRefresher.ts

@@ -88,6 +88,7 @@ export class ReconnectRefresher {
             this.reactors.set(id, func);
             this.disposers.set(id, func());
         }
+        return () => this.remove(id);
     }
 
     public remove(id: string) {

package/src/Utils/Common.ts

@@ -30,6 +30,12 @@ export const setViewSceneIndex = (view: View, index: number) => {
     }
 };
 
+export const releaseView = (view: View) => {
+    if (!(view as any).didRelease) {
+        view.release();
+    }
+}
+
 export const setScenePath = (room: Room | undefined, scenePath: string) => {
     if (room && room.isWritable) {
         if (room.state.sceneState.scenePath !== scenePath) {

package/src/View/CameraSynchronizer.ts

@@ -0,0 +1,72 @@
+import { AnimationMode } from "white-web-sdk";
+import { debounce, delay, throttle } from "lodash";
+import type { TeleBoxRect } from "@netless/telebox-insider";
+import type { Camera, View } from "white-web-sdk";
+import type { ISize } from "../AttributesDelegate";
+
+export type SaveCamera = (camera: Camera) => void;
+
+export class CameraSynchronizer {
+    public remoteCamera?: Camera;
+    public remoteSize?: ISize;
+    protected rect?: TeleBoxRect;
+    protected view?: View;
+
+    constructor(protected saveCamera: SaveCamera) {}
+
+    public setRect = debounce((rect: TeleBoxRect) => {
+        this.rect = rect;
+        if (this.remoteCamera && this.remoteSize) {
+            this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
+        }
+    }, 50);
+
+    public setView(view: View) {
+        this.view = view;
+    }
+
+    // 远端 Camera 或者 size 更新
+    public onRemoteUpdate = throttle((camera: Camera, size: ISize) => {
+        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, 50);
+        }
+    }, 50);
+
+    public onRemoteSizeUpdate(size: ISize) {
+        if (this.rect) {
+            const nextScale = this.rect.width / size.width;
+            const moveCamera = () => {
+                this.view?.moveCamera({
+                    scale: nextScale,
+                    animationMode: AnimationMode.Immediately,
+                })
+            };
+            delay(moveCamera, 50);
+        }
+    }
+
+
+    public onLocalCameraUpdate(camera: Camera) {
+        this.saveCamera(camera);
+        this.remoteCamera = camera;
+    }
+}

package/src/View/MainView.ts

@@ -1,25 +1,29 @@
-import { AnimationMode, reaction } from "white-web-sdk";
 import { callbacks } from "../callback";
+import { CameraSynchronizer } from "./CameraSynchronizer";
 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 { reaction } from "white-web-sdk";
+import { releaseView, 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";
 
 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,31 +32,30 @@ 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();
-            });
-        });
+        this.sideEffectManager.add(() => [
+            emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio),
+            emitter.on("startReconnect", () => {
+                releaseView(this.mainView);
+            }),
+            emitter.on("playgroundSizeChange", rect => {
+                this.synchronizer.setRect(rect);
+            })
+        ]);
+        const rect = this.manager.boxManager?.stageRect;
+        if (rect) {
+            this.synchronizer.setRect(rect);
+        }
     }
 
     private startListenWritableChange = () => {
-        this.sideEffectManager.add(() => {
-            return emitter.on("writableChange", isWritable => {
+        this.sideEffectManager.add(() =>
+            emitter.on("writableChange", isWritable => {
                 if (isWritable) {
                     this.ensureCameraAndSize();
                 }
-            });
-        });
-    }
+            })
+        );
+    };
 
     public ensureCameraAndSize() {
         if (!this.mainViewCamera || !this.mainViewSize) {
@@ -74,26 +77,27 @@ export class MainViewProxy {
     }
 
     private moveCameraSizeByAttributes() {
-        this.moveCameraToContian(this.mainViewSize);
-        this.moveCamera(this.mainViewCamera);
+        this.synchronizer.onRemoteUpdate(this.mainViewCamera, this.mainViewSize);
     }
 
     public start() {
         if (this.started) return;
-        this.sizeChangeHandler(this.mainViewSize);
         this.addCameraListener();
         this.addCameraReaction();
         this.started = true;
     }
 
     public addCameraReaction = () => {
-        this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
+        this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
     };
 
     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,28 +105,19 @@ 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 }
         );
     };
 
-    public sizeChangeHandler = debounce((size: Size) => {
-        if (size) {
-            this.moveCameraToContian(size);
-            this.moveCamera(this.mainViewCamera);
-        }
-    }, 30);
-
     public onUpdateContainerSizeRatio = () => {
         const size = this.store.getMainViewSize();
-        this.sizeChangeHandler(size);
         if (size.id === this.manager.uid) {
             this.setCameraAndSize();
         }
-    }
+    };
 
     public get view(): View {
         return this.mainView;
@@ -138,6 +133,7 @@ export class MainViewProxy {
         if (mainViewScenePath) {
             setViewFocusScenePath(mainView, mainViewScenePath);
         }
+        this.synchronizer.setView(mainView);
         return mainView;
     }
 
@@ -160,9 +156,7 @@ export class MainViewProxy {
         const divElement = this.mainView.divElement;
         const disableCameraTransform = this.mainView.disableCameraTransform;
         this.stop();
-        if (!this.didRelease) {
-            this.mainView.release();
-        }
+        releaseView(this.mainView);
         this.removeMainViewListener();
         this.mainView = this.createMainView();
         this.mainView.disableCameraTransform = disableCameraTransform;
@@ -172,12 +166,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 +207,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,37 +227,10 @@ 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);
-        this.manager.refresher?.remove(Fields.MainViewSize);
+        this.manager.refresher.remove(Fields.MainViewCamera);
+        this.manager.refresher.remove(Fields.MainViewSize);
         this.started = false;
     }
 

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";
@@ -30,7 +29,7 @@ import {
 } from "./Utils/Common";
 import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
 import * as Errors from "./Utils/error";
-import type { Apps, Position } from "./AttributesDelegate";
+import type { Apps, Position , ICamera, ISize } from "./AttributesDelegate";
 import type {
     Displayer,
     SceneDefinition,
@@ -105,6 +104,8 @@ export type AppSyncAttributes = {
     isDynamicPPT?: boolean;
     fullPath?: string;
     createdAt?: number;
+    camera?: ICamera;
+    size?: ISize;
 };
 
 export type AppInitState = {
@@ -128,8 +129,8 @@ export type MountParams = {
     container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
-    /** 显示 PS 透明背景，默认 true */
-    chessboard?: boolean;
+    /** 是否高亮显示同步区域, 默认为 true */
+    highlightStage?: boolean;
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     overwriteStyles?: string;
@@ -145,7 +146,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 +168,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 +236,14 @@ 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,
+            highlightStage: params.highlightStage
+        });
+        manager.appManager?.setBoxManager(manager.boxManager);
         if (params.container) {
             manager.bindContainer(params.container);
         }
@@ -283,31 +289,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 +321,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 +343,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;
@@ -520,6 +505,18 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
     }
 
+    public async jumpPage(index: number): Promise<boolean> {
+        if (!this.appManager) {
+            return false;
+        }
+        if (index < 0 || index >= this.pageState.length) {
+            console.warn(`[WindowManager]: index ${index} out of range`);
+            return false;
+        }
+        await this.appManager.setMainViewSceneIndex(index);
+        return true;
+    }
+
     public async addPage(params?: AddPageParams): Promise<void> {
         if (this.appManager) {
             const after = params?.after;
@@ -802,11 +799,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/style.css

@@ -178,3 +178,12 @@
     right: 10px;
     bottom: 15px;
 }
+
+.window-manager-view-wrapper {
+    z-index: 5000;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+}

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