@netless/window-manager 1.0.0-canary.6 → 1.0.0-canary.61

package/src/App/AppContext.ts

@@ -1,5 +1,4 @@
 import { BoxNotCreatedError } from "../Utils/error";
-import { Storage } from "./Storage";
 import {
     autorun,
     listenDisposed,
@@ -7,17 +6,18 @@ import {
     reaction,
     unlistenDisposed,
     unlistenUpdated,
-    toJS,
+    toJS
 } from "white-web-sdk";
+import { Storage } from "@netless/synced-store";
 import type {
     Room,
     SceneDefinition,
     View,
-    EventListener as WhiteEventListener
+    EventListener as WhiteEventListener,
+    Player
 } from "white-web-sdk";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import type Emittery from "emittery";
-import type { BoxManager } from "../BoxManager";
 import type { AppEmitterEvent, Member } from "../index";
 import type { AppManager } from "../AppManager";
 import type { AppProxy } from "./AppProxy";
@@ -29,10 +29,15 @@ import type {
 import { WhiteBoardView } from "./WhiteboardView";
 import { findMemberByUid } from "../Helper";
 import { MAX_PAGE_SIZE } from "../constants";
-import { putScenes } from "../Utils/Common";
-import { isNumber } from "lodash";
+import { isBoolean, isNumber } from "lodash";
+import { Val } from "value-enhancer";
 
-export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOptions = any> {
+export type CreateWhiteBoardViewParams = {
+    size?: number;
+    syncCamera?: boolean;
+}
+
+export class AppContext<TAttributes extends Record<string, any> = any, TMagixEventPayloads = any, TAppOptions = any> {
     public readonly emitter: Emittery<AppEmitterEvent<TAttributes>>;
     public readonly mobxUtils = {
         autorun,
@@ -49,12 +54,11 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     private store = this.manager.store;
     public readonly isAddApp: boolean;
     public readonly isReplay = this.manager.isReplay;
-    private whiteBoardView?: WhiteBoardView;
+    public whiteBoardView?: WhiteBoardView;
     public _viewWrapper?: HTMLElement;
 
     constructor(
         private manager: AppManager,
-        private boxManager: BoxManager,
         public appId: string,
         private appProxy: AppProxy,
         private appOptions?: TAppOptions | (() => TAppOptions)
@@ -63,9 +67,17 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         this.isAddApp = appProxy.isAddApp;
     }
 
-    public get displayer(){
+    public get displayer() {
         return this.manager.displayer;
-    };
+    }
+
+    public get destroyed() {
+        return this.appProxy.status === "destroyed";
+    }
+
+    public get attributes(): TAttributes {
+        return this.appProxy.attributes;
+    }
 
     /** @deprecated Use context.storage.state instead. */
     public getAttributes = (): TAttributes | undefined => {
@@ -85,7 +97,16 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         return this.appProxy.view;
     };
 
-    public createWhiteBoardView = (size?: number): WhiteBoardView => {
+    public get now(): number {
+        if (this.isReplay) {
+            const player = this.displayer as Player;
+            return player.beginTimestamp + player.progressTime;
+        } else {
+            return (this.displayer as Room).calibrationTimestamp;
+        }
+    }
+
+    public createWhiteBoardView = (params?: CreateWhiteBoardViewParams): WhiteBoardView => {
         if (this.whiteBoardView) {
             return this.whiteBoardView;
         }
@@ -93,23 +114,39 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         if (!view) {
             view = this.appProxy.createAppDir();
         }
+        if (params) {
+            if (isBoolean(params.syncCamera)) {
+                this.appProxy.syncCamera$.setValue(params.syncCamera);
+            }
+        }
         const viewWrapper = document.createElement("div");
         this._viewWrapper = viewWrapper;
         viewWrapper.className = "window-manager-view-wrapper";
-        this.box.$content.parentElement?.appendChild(viewWrapper);
-        const removeViewWrapper = () => {
-            this.box.$content.parentElement?.removeChild(viewWrapper);
-            this._viewWrapper = undefined;
-        }
+        this.box.$main.appendChild(viewWrapper);
         view.divElement = viewWrapper;
+        this.appProxy.fireMemberStateChange();
         if (this.isAddApp) {
-            this.initPageSize(size);
+            this.ensurePageSize(params?.size);
         }
-        this.whiteBoardView = new WhiteBoardView(this, this.appProxy, removeViewWrapper);
+        this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, this.ensurePageSize);
+        this.appProxy.sideEffectManager.add(() => [
+            this.box._stageRect$.subscribe(rect => {
+                viewWrapper.style.left = `${rect.x}px`;
+                viewWrapper.style.top = `${rect.y}px`;
+                viewWrapper.style.width = `${rect.width}px`;
+                viewWrapper.style.height = `${rect.height}px`;
+            }),
+            () => {
+                return () => {
+                    this.whiteBoardView = undefined;
+                }
+            }
+        ]);
+        this.appProxy.whiteBoardViewCreated$.setValue(true);
         return this.whiteBoardView;
     }
 
-    private initPageSize = (size?: number) => {
+    private ensurePageSize = (size?: number) => {
         if (!isNumber(size)) return;
         if (!this.appProxy.scenePath) return;
         if (this.appProxy.pageState.length >= size) return;
@@ -117,25 +154,22 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
             throw Error(`[WindowManager]: size ${size} muse be in range [1, ${MAX_PAGE_SIZE}]`);
         }
         const needInsert = size - this.appProxy.pageState.length;
-        const startPageNumber = this.appProxy.pageState.length;
-        const scenes = new Array(needInsert).fill({}).map((_, index) => {
-            return { name: `${startPageNumber + index + 1}` };
-        });
-        putScenes(this.room, this.appProxy.scenePath, scenes);
+        const scenes = new Array(needInsert).fill({});
+        this.room?.putScenes(this.appProxy.scenePath, scenes);
     }
 
     public getInitScenePath = () => {
-        return this.manager.getAppInitPath(this.appId);
+        return this.appProxy.scenePath;
     };
 
     /** Get App writable status. */
     public get isWritable(): boolean {
-        return this.manager.canOperate;
+        return this.manager.canOperate && !this.destroyed;
     };
 
     /** Get the App Window UI box. */
     public get box(): ReadonlyTeleBox {
-        const box = this.boxManager.getBox(this.appId);
+        const box = this.appProxy.box$.value;
         if (box) {
             return box;
         } else {
@@ -147,14 +181,15 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         return this.manager.room;
     };
 
-    public get members() {
-        return this.manager.members;
+    public get members(): Member[] {
+        return this.manager.members$.value;
     }
 
-    public get memberState(): Member {
+    //** currentMember is undefined in read-only and replay mode. */
+    public get currentMember(): Member | undefined {
         const self = findMemberByUid(this.room, this.manager.uid);
         if (!self) {
-            throw new Error(`Member ${this.manager.uid} not found.`);
+            return undefined;
         }
         return {
             uid: this.manager.uid,
@@ -189,26 +224,26 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
             : this.appOptions;
     };
 
-    private _storage?: Storage<TAttributes>;
-
-    /** Main Storage for attributes. */
-    public get storage(): Storage<TAttributes> {
-        if (!this._storage) {
-            this._storage = new Storage(this);
-        }
-        return this._storage;
-    }
-
     /**
      * Create separated storages for flexible state management.
-     * @param storeId Namespace for the storage. Storages of the same namespace share the same data.
+     * @param namespace Namespace for the storage. Storages of the same namespace share the same data.
      * @param defaultState Default state for initial storage creation.
      * @returns
      */
-    public createStorage = <TState>(storeId: string, defaultState?: TState): Storage<TState> => {
-        const storage = new Storage(this, storeId, defaultState);
+    public createStorage = <TState extends Record<string, any>>(namespace: string, defaultState?: TState): Storage<TState> => {
+        const isWritable$ = new Val(this.isWritable);
+        const plugin$ = new Val(this.manager.windowManger);
+        const storage = new Storage({
+            plugin$,
+            isWritable$,
+            namespace,
+            defaultState: defaultState
+        });
+        this.emitter.on("writableChange", writable => {
+            isWritable$.setValue(writable);
+        })
         this.emitter.on("destroy", () => {
-            storage.destroy();
+            storage.disconnect();
         });
         return storage;
     };