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

package/src/App/AppViewSync.ts

@@ -0,0 +1,73 @@
+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";
+import { combine } from "value-enhancer";
+
+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);
+            }
+        }));
+        this.sem.add(() => this.appProxy.size$.subscribe(size => {
+            if (size) {
+                this.synchronizer.onRemoteSizeUpdate(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);
+                    }
+                }),
+            );
+        }
+        this.sem.add(() => combine([this.appProxy.camera$, this.appProxy.size$]).subscribe(([camera, size]) => {
+            if (camera && size) {
+                this.synchronizer.onRemoteUpdate(camera, size);
+            }
+        }));
+    }
+
+    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/Storage/index.ts

@@ -37,7 +37,7 @@ export class Storage<TState extends Record<string, any> = any> implements Storag
     this._state = {} as TState;
     const rawState = this._getRawState(this._state);
 
-    if (this._context.getIsWritable()) {
+    if (this._context.isWritable) {
       if (this.id === null) {
         if (context.isAddApp && defaultState) {
             this.setState(defaultState);
@@ -115,7 +115,7 @@ export class Storage<TState extends Record<string, any> = any> implements Storag
       return;
     }
 
-    if (!this._context.getIsWritable()) {
+    if (!this._context.isWritable) {
       console.error(new Error(`Cannot setState on Storage "${this.id}" without writable access`), state);
       return;
     }
@@ -165,7 +165,7 @@ export class Storage<TState extends Record<string, any> = any> implements Storag
       return;
     }
 
-    if (!this._context.getIsWritable()) {
+    if (!this._context.isWritable) {
       console.error(new Error(`Cannot empty Storage "${this.id}" without writable access.`));
       return;
     }
@@ -181,7 +181,7 @@ export class Storage<TState extends Record<string, any> = any> implements Storag
       throw new Error(`Cannot delete main Storage`);
     }
 
-    if (!this._context.getIsWritable()) {
+    if (!this._context.isWritable) {
       console.error(new Error(`Cannot delete Storage "${this.id}" without writable access.`));
       return;
     }

package/src/App/WhiteboardView.ts

@@ -0,0 +1,89 @@
+import { putScenes } from "../Utils/Common";
+import { Val } from "value-enhancer";
+
+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, View } from "white-web-sdk";
+import type { TeleBoxRect } from "@netless/telebox-insider";
+
+export class WhiteBoardView implements PageController {
+    public readonly pageState$: ReadonlyVal<PageState>;
+
+    constructor(
+        public view: View,
+        protected appContext: AppContext,
+        protected appProxy: AppProxy,
+        private removeViewWrapper: () => void,
+        public ensureSize: (size: number) => void
+    ) {
+        const pageState$ = new Val<PageState>(appProxy.pageState);
+        this.pageState$ = pageState$;
+        appProxy.appEmitter.on("pageStateChange", pageState => {
+            pageState$.setValue(pageState);
+        });
+    }
+
+    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);
+    };
+
+    public prevPage = async (): Promise<boolean> => {
+        const nextIndex = this.pageState.index - 1;
+        return this.jumpPage(nextIndex);
+    };
+
+    public jumpPage = async (index: number): Promise<boolean> => {
+        if (index < 0 || index >= this.pageState.length) {
+            console.warn(`[WindowManager]: index ${index} out of range`);
+            return false;
+        }
+        this.appProxy.setSceneIndex(index);
+        return true;
+    };
+
+    public addPage = async (params?: AddPageParams) => {
+        const after = params?.after;
+        const scene = params?.scene;
+        const scenePath = this.appProxy.scenePath;
+        if (!scenePath) return;
+        if (after) {
+            const nextIndex = this.pageState.index + 1;
+            putScenes(this.appContext.room, scenePath, [scene || {}], nextIndex);
+        } else {
+            putScenes(this.appContext.room, scenePath, [scene || {}]);
+        }
+    };
+
+    public removePage = async (index?: number): Promise<boolean> => {
+        const needRemoveIndex = index === undefined ? this.pageState.index : index;
+        if (this.pageState.length === 1) {
+            console.warn(`[WindowManager]: can not remove the last page`);
+            return false;
+        }
+        if (needRemoveIndex < 0 || needRemoveIndex >= this.pageState.length) {
+            console.warn(`[WindowManager]: page index ${index} out of range`);
+            return false;
+        }
+        return this.appProxy.removeSceneByIndex(needRemoveIndex);
+    };
+
+    public setRect(rect: Omit<TeleBoxRect, "x" | "y">) {
+        this.appProxy.updateSize(rect.width, rect.height);
+    }
+
+    public destroy() {
+        this.pageState$.destroy();
+        this.removeViewWrapper();
+    }
+}

package/src/App/index.ts

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

package/src/AppManager.ts

@@ -3,7 +3,7 @@ import { AppCreateQueue } from "./Utils/AppCreateQueue";
 import { AppListeners } from "./AppListener";
 import { AppProxy } from "./App";
 import { appRegister } from "./Register";
-import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
+import { autorun, isPlayer, isRoom, ScenePathType, toJS } from "white-web-sdk";
 import { boxEmitter } from "./BoxEmitter";
 import { calculateNextIndex } from "./Page";
 import { callbacks } from "./callback";
@@ -15,8 +15,10 @@ import { MainViewProxy } from "./View/MainView";
 import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
 import { reconnectRefresher, WindowManager } from "./index";
 import { RedoUndo } from "./RedoUndo";
+import { serializeRoomMembers } from "./Helper";
 import { SideEffectManager } from "side-effect-manager";
 import { ViewManager } from "./View/ViewManager";
+import { Val } from "value-enhancer";
 import type { SyncRegisterAppPayload } from "./Register";
 import type { RemoveSceneParams } from "./InternalEmitter";
 import {
@@ -33,10 +35,10 @@ import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
 import type {
     Displayer,
-    DisplayerState,
     Room,
     ScenesCallbacksNode,
     SceneState,
+    RoomState,
 } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
 import type {
@@ -46,7 +48,7 @@ import type {
     BoxResizePayload,
     BoxStateChangePayload,
 } from "./BoxEmitter";
-
+import type { Member } from "./Helper";
 
 export class AppManager {
     public displayer: Displayer;
@@ -55,17 +57,17 @@ 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;
 
     private appListeners: AppListeners;
     public boxManager?: BoxManager;
 
-    private _prevSceneIndex: number | undefined;
-    private _prevFocused: string | undefined;
     private callbacksNode: ScenesCallbacksNode | null = null;
     private appCreateQueue = new AppCreateQueue();
+    private sceneIndex$ = new Val<number | undefined>(undefined);
+    private focused$ = new Val<string | undefined>(undefined);
 
     private sideEffectManager = new SideEffectManager();
 
@@ -299,6 +301,10 @@ export class AppManager {
         return this.room?.uid || "";
     }
 
+    public get members(): Member[] {
+        return serializeRoomMembers(this.displayer.state.roomMembers);
+    }
+
     public getMainViewSceneDir() {
         const scenePath = this.store.getMainViewScenePath();
         if (scenePath) {
@@ -319,31 +325,31 @@ export class AppManager {
 
         this.addAppsChangeListener();
         this.addAppCloseListener();
-        this.refresher?.add("maximized", () => {
+        this.refresher.add("maximized", () => {
             return autorun(() => {
                 const maximized = this.attributes.maximized;
                 this.boxManager?.setMaximized(Boolean(maximized));
             });
         });
-        this.refresher?.add("minimized", () => {
+        this.refresher.add("minimized", () => {
             return autorun(() => {
                 const minimized = this.attributes.minimized;
                 this.onMinimized(minimized);
             });
         });
-        this.refresher?.add("mainViewIndex", () => {
+        this.refresher.add("mainViewIndex", () => {
             return autorun(() => {
                 const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
                 this.onMainViewIndexChange(mainSceneIndex);
             });
         });
-        this.refresher?.add("focusedChange", () => {
+        this.refresher.add("focusedChange", () => {
             return autorun(() => {
                 const focused = get(this.attributes, "focus");
                 this.onFocusChange(focused);
             });
         });
-        this.refresher?.add("registeredChange", () => {
+        this.refresher.add("registeredChange", () => {
             return autorun(() => {
                 const registered = get(this.attributes, Fields.Registered);
                 this.onRegisteredChange(registered);
@@ -356,7 +362,7 @@ export class AppManager {
         }
         this.displayerWritableListener(!this.room?.isWritable);
         this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
-        this._prevFocused = this.attributes.focus;
+        this.focused$.setValue(this.attributes.focus);
 
         this.sideEffectManager.add(() => {
             const redoUndo = new RedoUndo({
@@ -421,21 +427,21 @@ export class AppManager {
     };
 
     private onMainViewIndexChange = (index: number) => {
-        if (index !== undefined && this._prevSceneIndex !== index) {
+        if (index !== undefined && this.sceneIndex$.value !== index) {
             callbacks.emit("mainViewSceneIndexChange", index);
             emitter.emit("changePageState");
             if (this.callbacksNode) {
                 this.updateSceneState(this.callbacksNode);
             }
-            this._prevSceneIndex = index;
+            this.sceneIndex$.setValue(index);
         }
     };
 
     private onFocusChange = (focused: string | undefined) => {
-        if (this._prevFocused !== focused) {
+        if (this.focused$.value !== focused) {
             callbacks.emit("focusedChange", focused);
-            emitter.emit("focusedChange", { focused, prev: this._prevFocused });
-            this._prevFocused = focused;
+            emitter.emit("focusedChange", { focused, prev: this.focused$.value });
+            this.focused$.setValue(focused);
             if (focused !== undefined) {
                 this.boxManager?.focusBox({ appId: focused });
                 // 确保 focus 修改的时候, appProxy 已经创建
@@ -646,7 +652,7 @@ export class AppManager {
         }
     }
 
-    private displayerStateListener = (state: Partial<DisplayerState>) => {
+    private displayerStateListener = (state: Partial<RoomState>) => {
         const sceneState = state.sceneState;
         if (sceneState) {
             const scenePath = sceneState.scenePath;
@@ -660,7 +666,13 @@ export class AppManager {
         this.appProxies.forEach(appProxy => {
             appProxy.appEmitter.emit("roomStateChange", state);
         });
+        if (state.roomMembers) {
+            emitter.emit("roomMembersChange", this.members);
+        }
         emitter.emit("observerIdChange", this.displayer.observerId);
+        if (state.memberState) {
+            emitter.emit("memberStateChange", toJS(state.memberState));
+        }
     };
 
     public displayerWritableListener = (isReadonly: boolean) => {
@@ -676,12 +688,9 @@ export class AppManager {
             appProxy.emitAppIsWritableChange();
         });
         if (isWritable === true) {
-            this.mainView.disableCameraTransform = false;
             if (this.room && this.room.disableSerialization === true) {
                 this.room.disableSerialization = false;
             }
-        } else {
-            this.mainView.disableCameraTransform = true;
         }
         emitter.emit("writableChange", isWritable);
     };
@@ -823,7 +832,7 @@ export class AppManager {
         }
         callbacks.clearListeners();
         this.sideEffectManager.flushAll();
-        this._prevFocused = undefined;
-        this._prevSceneIndex = undefined;
+        this.sceneIndex$.destroy();
+        this.focused$.destroy();
     }
 }

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

@@ -47,11 +47,11 @@ export type CreateTeleBoxManagerConfig = {
     collectorStyles?: Partial<CSSStyleDeclaration>;
     prefersColorScheme?: TeleBoxColorScheme;
     stageRatio?: number;
+    highlightStage?: boolean;
 };
 
 export type BoxManagerContext = {
     safeSetAttributes: (attributes: any) => void;
-    getMainView: () => View;
     updateAppState: (appId: string, field: AppAttributes, value: any) => void;
     emitter: EmitterType;
     boxEmitter: BoxEmitterType;
@@ -72,7 +72,6 @@ export const createBoxManager = (
     return new BoxManager(
         {
             safeSetAttributes: (attributes: any) => manager.safeSetAttributes(attributes),
-            getMainView: () => manager.mainView,
             updateAppState: (...args) => manager.appManager?.store.updateAppState(...args),
             canOperate: () => manager.canOperate,
             notifyContainerRectUpdate: (rect: TeleBoxRect) =>
@@ -178,10 +177,6 @@ export class BoxManager {
         ]);
     }
 
-    private get mainView() {
-        return this.context.getMainView();
-    }
-
     private get canOperate() {
         return this.context.canOperate();
     }
@@ -210,7 +205,11 @@ export class BoxManager {
         return this.teleBoxManager.boxes.length;
     }
 
-    public createBox(params: CreateBoxParams): void {
+    public get stageRect() {
+        return this.teleBoxManager.stageRect;
+    }
+
+    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 ?? {};
@@ -233,8 +232,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(
@@ -242,10 +242,11 @@ export class BoxManager {
     ): TeleBoxManager {
         const root = WindowManager.playground;
         const initManagerState: TeleBoxManagerConfig = {
-            stageRatio: 3 / 4,
+            stageRatio: createTeleBoxManagerConfig?.stageRatio,
             root: root,
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
+            highlightStage: createTeleBoxManagerConfig?.highlightStage,
         };
 
         const manager = new TeleBoxManager(initManagerState);
@@ -390,6 +391,10 @@ export class BoxManager {
         this.teleBoxManager._root$.setValue(root);
     }
 
+    public setCollector(collector: HTMLElement) {
+        this.teleBoxManager.collector.set$collector(collector);
+    }
+
     public destroy() {
         this.sideEffectManager.flushAll();
         this.teleBoxManager.destroy();

package/src/Helper.ts

@@ -2,7 +2,7 @@ import { getVersionNumber } from "./Utils/Common";
 import { REQUIRE_VERSION } from "./constants";
 import { WhiteVersion } from "white-web-sdk";
 import { WhiteWebSDKInvalidError } from "./Utils/error";
-import type { Room } from "white-web-sdk";
+import type { Room , RoomMember} from "white-web-sdk";
 
 export const setupWrapper = (
     root: HTMLElement
@@ -32,3 +32,12 @@ export const findMemberByUid = (room: Room | undefined, uid: string) => {
     const roomMembers = room?.state.roomMembers;
     return roomMembers?.find(member => member.payload?.uid === uid);
 };
+
+export type Member = RoomMember & { uid: string };
+
+export const serializeRoomMembers = (members: readonly RoomMember[]) => {
+    return members.map(member => ({
+        uid: member.payload?.uid || "",
+        ...member,
+    }));
+}

package/src/InternalEmitter.ts

@@ -1,6 +1,8 @@
 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;
@@ -29,6 +31,8 @@ export type EmitterEvent = {
     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) {