@netless/window-manager 1.0.0-canary.0 → 1.0.0-canary.11

package/src/View/CameraSynchronizer.ts

@@ -1,32 +1,32 @@
 import { AnimationMode } from "white-web-sdk";
-import { delay, throttle } from "lodash";
+import { debounce, 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";
+import type { Camera, View } from "white-web-sdk";
+import type { ISize } from "../AttributesDelegate";
 
 export type SaveCamera = (camera: Camera) => void;
 
 export class CameraSynchronizer {
-    protected remoteCamera?: Camera;
-    protected remoteSize?: MainViewSize;
+    public remoteCamera?: Camera;
+    public remoteSize?: ISize;
     protected rect?: TeleBoxRect;
     protected view?: View;
 
     constructor(protected saveCamera: SaveCamera) {}
 
-    public setRect(rect: TeleBoxRect) {
+    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: MainViewSize) => {
+    public onRemoteUpdate = throttle((camera: Camera, size: ISize) => {
         this.remoteCamera = camera;
         this.remoteSize = size;
         if (this.remoteSize && this.rect) {
@@ -37,31 +37,36 @@ export class CameraSynchronizer {
                 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,
-            });
+
+            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);
+            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);
-    }
-
-    // 本地 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
-            });
-        }
+        this.remoteCamera = camera;
     }
 }

package/src/View/MainView.ts

@@ -1,15 +1,15 @@
-import { reaction } from "white-web-sdk";
 import { callbacks } from "../callback";
+import { CameraSynchronizer } from "./CameraSynchronizer";
 import { createView } from "./ViewManager";
 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 { CameraSynchronizer } from "./CameraSynchronizer";
 
 export class MainViewProxy {
     private started = false;
@@ -21,8 +21,8 @@ export class MainViewProxy {
     private sideEffectManager = new SideEffectManager();
 
     constructor(private manager: AppManager) {
-        this.synchronizer = new CameraSynchronizer(
-            camera => this.store.setMainViewCamera({ ...camera, id: this.manager.uid })
+        this.synchronizer = new CameraSynchronizer(camera =>
+            this.store.setMainViewCamera({ ...camera, id: this.manager.uid })
         );
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
@@ -32,36 +32,29 @@ export class MainViewProxy {
             this.ensureCameraAndSize();
             this.startListenWritableChange();
         });
-        this.sideEffectManager.add(() => {
-            return emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
-        });
-        this.sideEffectManager.add(() => {
-            return emitter.on("startReconnect", () => {
-                if (!(this.mainView as any).didRelease) {
-                    this.mainView.release();
-                }
-            });
-        });
-        const rect = this.manager.boxManager?.teleBoxManager.stageRect;
+        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);
         }
-        this.sideEffectManager.add(() => {
-            return emitter.on("playgroundSizeChange", rect => {
-                this.synchronizer.setRect(rect);
-                this.synchronizer.onLocalSizeUpdate(rect);
-            });
-        });
     }
 
     private startListenWritableChange = () => {
-        this.sideEffectManager.add(() => {
-            return emitter.on("writableChange", isWritable => {
+        this.sideEffectManager.add(() =>
+            emitter.on("writableChange", isWritable => {
                 if (isWritable) {
                     this.ensureCameraAndSize();
                 }
-            });
-        });
+            })
+        );
     };
 
     public ensureCameraAndSize() {
@@ -89,14 +82,13 @@ export class MainViewProxy {
 
     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 {
@@ -120,15 +112,8 @@ export class MainViewProxy {
         );
     };
 
-    public sizeChangeHandler = debounce((size: Size) => {
-        if (size) {
-            this.synchronizer.onLocalSizeUpdate(size);
-        }
-    }, 30);
-
     public onUpdateContainerSizeRatio = () => {
         const size = this.store.getMainViewSize();
-        this.sizeChangeHandler(size);
         if (size.id === this.manager.uid) {
             this.setCameraAndSize();
         }
@@ -171,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;
@@ -191,7 +174,7 @@ export class MainViewProxy {
     };
 
     private getStageSize(): Size | undefined {
-        const stage = this.manager.boxManager?.teleBoxManager.stageRect;
+        const stage = this.manager.boxManager?.stageRect;
         if (stage) {
             return { width: stage.width, height: stage.height };
         }
@@ -246,8 +229,8 @@ export class MainViewProxy {
 
     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

@@ -29,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,
@@ -104,6 +104,8 @@ export type AppSyncAttributes = {
     isDynamicPPT?: boolean;
     fullPath?: string;
     createdAt?: number;
+    camera?: ICamera;
+    size?: ISize;
 };
 
 export type AppInitState = {
@@ -127,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;
@@ -238,7 +240,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             collectorContainer: params.collectorContainer,
             collectorStyles: params.collectorStyles,
             prefersColorScheme: params.prefersColorScheme,
-            stageRatio: params.containerSizeRatio,
+            stageRatio: containerSizeRatio,
+            highlightStage: params.highlightStage
         });
         manager.appManager?.setBoxManager(manager.boxManager);
         if (params.container) {
@@ -340,7 +343,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
 
     public bindCollectorContainer(container: HTMLElement) {
         if (WindowManager.isCreated && this.boxManager) {
-            this.boxManager.teleBoxManager.collector.set$collector(container)
+            this.boxManager.setCollector(container);
         } else {
             if (WindowManager.params) {
                 WindowManager.params.collectorContainer = container;
@@ -502,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;

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