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

package/src/App/AppProxy.ts

@@ -3,12 +3,18 @@ import { AppAttributes, AppEvents, Events, SETUP_APP_DELAY } from "../constants"
 import { AppContext } from "./AppContext";
 import { AppPageStateImpl } from "./AppPageStateImpl";
 import { appRegister } from "../Register";
-import { autorun } from "white-web-sdk";
+import { AppViewSync } from "./AppViewSync";
+import { autorun, reaction, toJS } from "white-web-sdk";
+import { boxEmitter } from "../BoxEmitter";
 import { BoxManagerNotFoundError } from "../Utils/error";
+import { calculateNextIndex } from "../Page";
+import { combine, Val } from "value-enhancer";
 import { debounce, get } from "lodash";
 import { emitter } from "../InternalEmitter";
 import { Fields } from "../AttributesDelegate";
 import { log } from "../Utils/log";
+import { SideEffectManager } from "side-effect-manager";
+import type { ICamera, ISize } from "../AttributesDelegate";
 import {
     entireScenes,
     getScenePath,
@@ -24,14 +30,11 @@ import type {
     setAppOptions,
     AppListenerKeys,
 } from "../index";
-import type { SceneState, View, SceneDefinition } from "white-web-sdk";
+import type { SceneState, View, SceneDefinition, Camera } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 import type { NetlessApp } from "../typings";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import type { PageRemoveService, PageState } from "../Page";
-import { calculateNextIndex } from "../Page";
-import { boxEmitter } from "../BoxEmitter";
-import { SideEffectManager } from "side-effect-manager";
 
 export type AppEmitter = Emittery<AppEmitterEvent>;
 
@@ -48,6 +51,7 @@ export class AppProxy implements PageRemoveService {
     private appProxies = this.manager.appProxies;
     private viewManager = this.manager.viewManager;
     private store = this.manager.store;
+    public uid = this.manager.uid;
 
     public isAddApp: boolean;
     private status: "normal" | "destroyed" = "normal";
@@ -60,6 +64,14 @@ export class AppProxy implements PageRemoveService {
 
     private sideEffectManager = new SideEffectManager();
 
+    public camera$ = new Val<ICamera | undefined>(undefined);
+    public size$ = new Val<ISize | undefined>(undefined);
+
+    private appViewSync?: AppViewSync;
+
+    public box$ = new Val<ReadonlyTeleBox | undefined>(undefined);
+    public view$ = new Val<View | undefined>(undefined);
+
     constructor(
         private params: BaseInsertParams,
         private manager: AppManager,
@@ -90,14 +102,45 @@ export class AppProxy implements PageRemoveService {
             view: this.view,
             notifyPageStateChange: this.notifyPageStateChange,
         });
+        this.sideEffectManager.add(() => () => this._pageState.destroy());
+        this.sideEffectManager.add(() =>
+            emitter.on("roomMembersChange", members => {
+                this.appEmitter.emit("roomMembersChange", members);
+            })
+        );
+        this.camera$.setValue(toJS(this.appAttributes.camera));
+        this.size$.setValue(toJS(this.appAttributes.size));
         this.sideEffectManager.add(() => {
-            return () => this._pageState.destroy();
+            return this.manager.refresher.add(`${this.id}-camera`, () => {
+                return reaction(
+                    () => this.appAttributes?.camera,
+                    camera => {
+                        if (camera && camera.id !== this.uid) {
+                            this.camera$.setValue(toJS(camera));
+                        }
+                    }
+                );
+            });
         });
         this.sideEffectManager.add(() => {
-            return emitter.on("roomMembersChange", members => {
-                this.appEmitter.emit("roomMembersChange", members);
+            return this.manager.refresher.add(`${this.id}-size`, () => {
+                return reaction(
+                    () => this.appAttributes?.size,
+                    size => {
+                        if (size && size.id !== this.uid) {
+                            this.size$.setValue(toJS(size));
+                        }
+                    }
+                );
             });
         });
+        combine([this.box$, this.view$]).subscribe(([box, view]) => {
+            if (box && view) {
+                const appViewSync = new AppViewSync(this);
+                this.appViewSync = appViewSync;
+                this.sideEffectManager.add(() => () => appViewSync.destroy());
+            }
+        });
     }
 
     public createAppDir() {
@@ -162,7 +205,7 @@ export class AppProxy implements PageRemoveService {
     }
 
     public setFullPath(path: string) {
-        this.manager.safeUpdateAttributes(["apps", this.id, Fields.FullPath], path);
+        this.store.updateAppAttributes(this.id, Fields.FullPath, path);
     }
 
     public async baseInsertApp(skipUpdate = false): Promise<{ appId: string; app: NetlessApp }> {
@@ -191,7 +234,7 @@ export class AppProxy implements PageRemoveService {
     }
 
     public get box(): ReadonlyTeleBox | undefined {
-        return this.boxManager?.getBox(this.id);
+        return this.box$.value;
     }
 
     private async setupApp(
@@ -225,13 +268,14 @@ export class AppProxy implements PageRemoveService {
                     this.fixMobileSize();
                 }, SETUP_APP_DELAY);
             });
-            this.boxManager?.createBox({
+            const box = this.boxManager?.createBox({
                 appId: appId,
                 app,
                 options,
                 canOperate: this.manager.canOperate,
                 smartPosition: this.isAddApp,
             });
+            this.box$.setValue(box);
             if (this.isAddApp && this.box) {
                 this.store.updateAppState(appId, AppAttributes.ZIndex, this.box.zIndex);
                 this.boxManager.focusBox({ appId }, false);
@@ -428,6 +472,7 @@ export class AppProxy implements PageRemoveService {
 
     private createView(): View {
         const view = this.viewManager.createView(this.id);
+        this.view$.setValue(view);
         this.setViewFocusScenePath();
         return view;
     }
@@ -481,6 +526,22 @@ export class AppProxy implements PageRemoveService {
         }
     }
 
+    public storeCamera = (camera: ICamera) => {
+        this.store.updateAppAttributes(this.id, Fields.Camera, camera);
+    };
+
+    public storeSize = (size: ISize) => {
+        this.store.updateAppAttributes(this.id, Fields.Size, size);
+    };
+
+    public moveCamera = (camera: Camera) => {
+        if (!this.camera$.value) {
+            return;
+        }
+        const nextCamera = { ...this.camera$.value, ...camera };
+        this.storeCamera(nextCamera);
+    };
+
     public async destroy(
         needCloseBox: boolean,
         cleanAttrs: boolean,
@@ -496,6 +557,7 @@ export class AppProxy implements PageRemoveService {
             console.error("[WindowManager]: notifyApp error", error.message, error.stack);
         }
         this.appEmitter.clearListeners();
+        this.sideEffectManager.flushAll();
         emitter.emit(`destroy-${this.id}` as any, { error });
         if (needCloseBox) {
             this.boxManager?.closeBox(this.id, skipUpdate);
@@ -514,7 +576,9 @@ export class AppProxy implements PageRemoveService {
         this.manager.refresher?.remove(this.stateKey);
         this.manager.refresher?.remove(`${this.id}-fullPath`);
         this._prevFullPath = undefined;
-        this.sideEffectManager.flushAll();
+        this.camera$.destroy();
+        this.size$.destroy();
+        this.box$.destroy();
     }
 
     public close(): Promise<void> {

package/src/App/AppViewSync.ts

@@ -0,0 +1,69 @@
+import { CameraSynchronizer } from "../View/CameraSynchronizer";
+import { SideEffectManager } from "side-effect-manager";
+import type { Camera, View } from "white-web-sdk";
+import type { AppProxy } from "./AppProxy";
+import { isEqual } from "lodash";
+
+export class AppViewSync {
+    private sem = new SideEffectManager();
+    private synchronizer: CameraSynchronizer;
+
+    constructor(private appProxy: AppProxy) {
+        this.synchronizer = new CameraSynchronizer((camera: Camera) => {
+            this.appProxy.storeCamera({
+                id: this.appProxy.uid,
+                ...camera,
+            });
+        });
+        this.bindView(appProxy.view);
+        this.sem.add(() => this.appProxy.camera$.subscribe(camera => {
+            const size = this.appProxy.size$.value;
+            if (camera && size) {
+                this.synchronizer.onRemoteUpdate(camera, size);
+            }
+        }));
+        const box = this.appProxy.box;
+        if (box && box.contentStageRect) {
+            this.synchronizer.setRect(box.contentStageRect);
+            this.sem.add(() =>
+                box._contentStageRect$.subscribe(rect => {
+                    if (rect) {
+                        this.synchronizer.setRect(rect);
+                    }
+                }),
+            );
+            if (!this.appProxy.size$.value) {
+                this.appProxy.storeSize({
+                    id: this.appProxy.uid,
+                    width: box.contentStageRect.width,
+                    height: box.contentStageRect.height,
+                });
+            }
+        }
+    }
+
+    public bindView = (view?: View) => {
+        if (!view) return;
+        this.synchronizer.setView(view);
+        this.sem.add(() => {
+            view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
+            return () =>
+                view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
+        });
+    };
+
+    private onCameraUpdatedByDevice = (camera: Camera) => {
+        this.synchronizer.onLocalCameraUpdate(camera);
+        const stage = this.appProxy.box?.contentStageRect;
+        if (stage) {
+            const size = { width: stage.width, height: stage.height, id: this.appProxy.uid };
+            if (!isEqual(size, this.appProxy.size$.value)) {
+                this.appProxy.storeSize(size);
+            }
+        }
+    };
+
+    public destroy() {
+        this.sem.flushAll();
+    }
+}

package/src/App/{WhiteBoardView.ts → WhiteboardView.ts}

@@ -5,11 +5,16 @@ import type { ReadonlyVal } from "value-enhancer";
 import type { AddPageParams, PageController, PageState } from "../Page";
 import type { AppProxy } from "./AppProxy";
 import type { AppContext } from "./AppContext";
+import type { Camera } from "white-web-sdk";
 
 export class WhiteBoardView implements PageController {
     public readonly pageState$: ReadonlyVal<PageState>;
 
-    constructor(protected appContext: AppContext, protected appProxy: AppProxy) {
+    constructor(
+        protected appContext: AppContext,
+        protected appProxy: AppProxy,
+        private removeViewWrapper: () => void
+    ) {
         const pageState$ = new Val<PageState>(appProxy.pageState);
         this.pageState$ = pageState$;
         appProxy.appEmitter.on("pageStateChange", pageState => {
@@ -17,10 +22,18 @@ export class WhiteBoardView implements PageController {
         });
     }
 
+    public get view() {
+        return this.appContext.view;
+    }
+
     public get pageState() {
         return this.pageState$.value;
     }
 
+    public moveCamera(camera: Camera) {
+        this.appProxy.moveCamera(camera);
+    }
+
     public nextPage = async (): Promise<boolean> => {
         const nextIndex = this.pageState.index + 1;
         return this.jumpPage(nextIndex);
@@ -65,4 +78,8 @@ export class WhiteBoardView implements PageController {
         }
         return this.appProxy.removeSceneByIndex(needRemoveIndex);
     };
+
+    public destroy() {
+        this.removeViewWrapper();
+    }
 }

package/src/App/index.ts

@@ -1,3 +1,3 @@
 export * from "./AppProxy";
 export * from "./AppContext";
-export * from "./WhiteBoardView";
+export * from "./WhiteboardView";

package/src/AppManager.ts

@@ -56,7 +56,7 @@ export class AppManager {
     public appStatus: Map<string, AppStatus> = new Map();
     public store = store;
     public mainViewProxy: MainViewProxy;
-    public refresher?: ReconnectRefresher;
+    public refresher: ReconnectRefresher;
     public isReplay = this.windowManger.isReplay;
     public mainViewScenesLength = 0;
 

package/src/AttributesDelegate.ts

@@ -18,6 +18,8 @@ export enum Fields {
     CursorState = "cursorState",
     FullPath = "fullPath",
     Registered = "registered",
+    Camera = "camera",
+    Size = "size",
 }
 
 export type Apps = {
@@ -39,9 +41,13 @@ export type StoreContext = {
     safeSetAttributes: (attributes: any) => void;
 }
 
-export type ICamera = Camera & { id: string };
+export type ICamera = Camera & { 
+    id: string; // room uid
+};
 
-export type ISize = Size & { id: string };
+export type ISize = Size & {
+    id: string; // room uid
+};
 
 export class AttributesDelegate {
 
@@ -108,6 +114,10 @@ export class AttributesDelegate {
         }
     }
 
+    public updateAppAttributes(appId: string, key: string, value: any) {
+        this.context.safeUpdateAttributes([Fields.Apps, appId, key], value);
+    }
+
     public cleanAppAttributes(id: string) {
         this.context.safeUpdateAttributes([Fields.Apps, id], undefined);
         this.context.safeSetAttributes({ [id]: undefined });
@@ -149,11 +159,11 @@ export class AttributesDelegate {
         this.context.safeSetAttributes({ _mainSceneIndex: index });
     }
 
-    public getMainViewCamera(): MainViewCamera {
+    public getMainViewCamera(): ICamera {
         return get(this.attributes, [Fields.MainViewCamera]);
     }
 
-    public getMainViewSize(): MainViewSize {
+    public getMainViewSize(): ISize {
         return get(this.attributes, [Fields.MainViewSize]);
     }
 
@@ -214,19 +224,6 @@ export class AttributesDelegate {
     }
 }
 
-export type MainViewSize = {
-    id: string;
-    width: number;
-    height: number;
-};
-
-export type MainViewCamera = {
-    id: string;
-    centerX: number;
-    centerY: number;
-    scale: number;
-};
-
 export type Cursors = {
     [key: string]: Cursor;
 };

package/src/BoxManager.ts

@@ -214,7 +214,7 @@ export class BoxManager {
         return this.teleBoxManager.stageRect;
     }
 
-    public createBox(params: CreateBoxParams): void {
+    public createBox(params: CreateBoxParams): ReadonlyTeleBox | undefined {
         if (!this.teleBoxManager) return;
         let { minwidth = MIN_WIDTH, minheight = MIN_HEIGHT } = params.app.config ?? {};
         const { width, height } = params.app.config ?? {};
@@ -237,8 +237,9 @@ export class BoxManager {
             height,
             id: params.appId,
         };
-        this.teleBoxManager.create(createBoxConfig, params.smartPosition);
+        const box = this.teleBoxManager.create(createBoxConfig, params.smartPosition);
         this.context.emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
+        return box;
     }
 
     public setupBoxManager(

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

@@ -2,13 +2,13 @@ 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";
+import type { ISize } from "../AttributesDelegate";
 
 export type SaveCamera = (camera: Camera) => void;
 
 export class CameraSynchronizer {
     protected remoteCamera?: Camera;
-    protected remoteSize?: MainViewSize;
+    protected remoteSize?: ISize;
     protected rect?: TeleBoxRect;
     protected view?: View;
 
@@ -26,7 +26,7 @@ export class CameraSynchronizer {
     }
 
     // 远端 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,27 +37,33 @@ export class CameraSynchronizer {
                 scale = this.rect.height / size.height;
             }
             const nextScale = camera.scale * scale;
-            const moveCamera = () =>  this.view?.moveCamera({
+            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 onLocalCameraUpdate(camera: Camera) {
         this.saveCamera(camera);
+        this.remoteCamera = camera;
     }
 
     // 本地 Size 更新, 先匹配 camera 到新的 size 然后再发送 camera 数据到远端
-    public onLocalSizeUpdate(size: Size) {
+    public onLocalSizeUpdate = (size: Size) => {
         if (this.rect && this.view) {
-            const scale = this.rect.width / size.width;
-            const nextScale = this.view.camera.scale * scale;
+            let scale: number;
+            if (size.width < size.height) {
+                scale = this.rect.width / size.width;
+            } else {
+                scale = this.rect.height / size.height;
+            }
+            const nextScale = this.view.camera.scale / scale;
             this.view.moveCamera({
                 scale: nextScale,
                 animationMode: AnimationMode.Immediately

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();
@@ -37,9 +37,7 @@ export class MainViewProxy {
         });
         this.sideEffectManager.add(() => {
             return emitter.on("startReconnect", () => {
-                if (!(this.mainView as any).didRelease) {
-                    this.mainView.release();
-                }
+                releaseView(this.mainView);
             });
         });
         const rect = this.manager.boxManager?.stageRect;
@@ -49,7 +47,7 @@ export class MainViewProxy {
         this.sideEffectManager.add(() => {
             return emitter.on("playgroundSizeChange", rect => {
                 this.synchronizer.setRect(rect);
-                this.synchronizer.onLocalSizeUpdate(rect);
+                // this.synchronizer.onLocalSizeUpdate(rect);
             });
         });
     }
@@ -122,7 +120,7 @@ export class MainViewProxy {
 
     public sizeChangeHandler = debounce((size: Size) => {
         if (size) {
-            this.synchronizer.onLocalSizeUpdate(size);
+            // this.synchronizer.onLocalSizeUpdate(size);
         }
     }, 30);
 
@@ -171,9 +169,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;

package/src/View/ViewSync.ts

@@ -0,0 +1,10 @@
+import type { Camera, Size } from "white-web-sdk";
+
+
+export interface ViewSync {
+    readonly camera: Camera;
+    readonly size: Size;
+
+    setCamera: (camera: Camera) => void;
+    setSize: (size: Size) => void;      
+}

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 = {

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