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

package/src/App/AppProxy.ts

@@ -3,15 +3,22 @@ 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, ValManager } 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,
+    putScenes,
     removeScenes,
     setScenePath,
     setViewFocusScenePath,
@@ -23,13 +30,11 @@ import type {
     setAppOptions,
     AppListenerKeys,
 } from "../index";
-import type { SceneState, View, SceneDefinition } from "white-web-sdk";
+import type { SceneState, View, SceneDefinition, Camera , MemberState} from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 import type { NetlessApp } from "../typings";
-import type { ReadonlyTeleBox } from "@netless/telebox-insider";
+import type { ReadonlyTeleBox, TeleBoxRect } from "@netless/telebox-insider";
 import type { PageRemoveService, PageState } from "../Page";
-import { calculateNextIndex } from "../Page";
-import { boxEmitter } from "../BoxEmitter";
 
 export type AppEmitter = Emittery<AppEmitterEvent>;
 
@@ -37,6 +42,7 @@ export class AppProxy implements PageRemoveService {
     public kind: string;
     public id: string;
     public scenePath?: string;
+    private appScenePath: string;
     public appEmitter: AppEmitter;
     public scenes?: SceneDefinition[];
 
@@ -45,16 +51,27 @@ 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";
+    public status: "normal" | "destroyed" = "normal";
     private stateKey: string;
-    private _pageState: AppPageStateImpl;
-    private _prevFullPath: string | undefined;
+    public _pageState: AppPageStateImpl;
 
     public appResult?: NetlessApp<any>;
     public appContext?: AppContext<any, any>;
 
+    private sideEffectManager = new SideEffectManager();
+    private valManager = new ValManager();
+
+    private fullPath$ = this.valManager.attach(new Val<string | undefined>(undefined));
+    private appViewSync?: AppViewSync;
+
+    public camera$ = this.valManager.attach(new Val<ICamera | undefined>(undefined));
+    public size$ = this.valManager.attach(new Val<ISize | undefined>(undefined));
+    public box$ = this.valManager.attach(new Val<ReadonlyTeleBox | undefined>(undefined));
+    public view$ = this.valManager.attach(new Val<View | undefined>(undefined));
+
     constructor(
         private params: BaseInsertParams,
         private manager: AppManager,
@@ -63,6 +80,7 @@ export class AppProxy implements PageRemoveService {
     ) {
         this.kind = params.kind;
         this.id = appId;
+        this.appScenePath = `/${this.id}-app-dir`;
         this.stateKey = `${this.id}_state`;
         this.appProxies.set(this.id, this);
         this.appEmitter = new Emittery();
@@ -75,12 +93,109 @@ export class AppProxy implements PageRemoveService {
             // 只有传入了 scenePath 的 App 才会创建 View
             this.createView();
         }
+        if (!this.scenePath) {
+            this.scenePath = this.appScenePath;
+        }
         this._pageState = new AppPageStateImpl({
             displayer: this.manager.displayer,
             scenePath: this.scenePath,
             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.addCameraReaction();
+        this.addSizeReaction();
+        this.sideEffectManager.add(() =>
+            combine([this.box$, this.view$]).subscribe(([box, view]) => {
+                if (box && view) {
+                    if (!this.camera$.value) {
+                        this.storeCamera({
+                            centerX: 0,
+                            centerY: 0,
+                            scale: 1,
+                            id: this.uid,
+                        });
+                        this.camera$.setValue(toJS(this.appAttributes.camera));
+                    }
+                    if (!this.size$.value && box.contentStageRect) {
+                        const initialRect = this.computedInitialRect(box.contentStageRect);
+                        const width = initialRect?.width || box.contentStageRect.width;
+                        const height = initialRect?.height || box.contentStageRect.height;
+                        this.storeSize({
+                            id: this.uid,
+                            width,
+                            height,
+                        });
+                        this.size$.setValue(toJS(this.appAttributes.size));
+                    }
+                    this.appViewSync = new AppViewSync(this);
+                    this.sideEffectManager.add(() => () => this.appViewSync?.destroy());
+                }
+            })
+        );
+        this.sideEffectManager.add(() =>
+            emitter.on("memberStateChange", this.onMemberStateChange)
+        );
+    }
+
+    public fireMemberStateChange = () => {
+        if (this.manager.room) {
+            this.onMemberStateChange(this.manager.room.state.memberState);
+        }
+    }
+
+    private onMemberStateChange = (memberState: MemberState) => {
+        // clicker 教具把事件穿透给下层
+        const needPointerEventsNone = memberState.currentApplianceName === "clicker";
+        if (needPointerEventsNone) {
+            if (this.appContext?._viewWrapper) {
+                this.appContext._viewWrapper.style.pointerEvents = "none";
+            }
+        } else {
+            if (this.appContext?._viewWrapper) {
+                this.appContext._viewWrapper.style.pointerEvents = "auto";
+            }
+        }
+    }
+
+    private computedInitialRect = (boxRect: TeleBoxRect) => {
+        const managerRect = this.manager.boxManager?.stageRect;
+        if (managerRect) {
+            const { width, height } = managerRect;
+            const boxRatio = boxRect.height / boxRect.width;
+            if (height < 480) {
+                return {
+                    width: 480 / boxRatio,
+                    height: 480,
+                };
+            } else {
+                return {
+                    width: width * 0.65,
+                    height: height * 0.65,
+                };
+            }
+        }
+    }
+
+    public createAppDir() {
+        const scenePath = this.scenePath || this.appScenePath;
+        const sceneNode = this._pageState.createSceneNode(scenePath);
+        if (!sceneNode) {
+            putScenes(this.manager.room, scenePath, [{ name: "1" }]);
+            this._pageState.createSceneNode(scenePath);
+            this.setSceneIndex(0);
+        }
+        this.scenes = entireScenes(this.manager.displayer)[scenePath];
+        const view = this.createView();
+        this._pageState.setView(view);
+        return view;
     }
 
     private initScenes() {
@@ -96,7 +211,7 @@ export class AppProxy implements PageRemoveService {
     }
 
     public get view(): View | undefined {
-        return this.manager.viewManager.getView(this.id);
+        return this.view$.value;
     }
 
     public get viewIndex(): number | undefined {
@@ -131,7 +246,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 }> {
@@ -160,7 +275,7 @@ export class AppProxy implements PageRemoveService {
     }
 
     public get box(): ReadonlyTeleBox | undefined {
-        return this.boxManager?.getBox(this.id);
+        return this.box$.value;
     }
 
     private async setupApp(
@@ -191,17 +306,17 @@ export class AppProxy implements PageRemoveService {
                     const result = await app.setup(context);
                     this.appResult = result;
                     appRegister.notifyApp(this.kind, "created", { appId, result });
-                    this.afterSetupApp(boxInitState);
                     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);
@@ -225,14 +340,6 @@ export class AppProxy implements PageRemoveService {
         }
     }
 
-    private afterSetupApp(boxInitState: AppInitState | undefined): void {
-        if (boxInitState) {
-            if (!boxInitState?.x || !boxInitState.y) {
-                this.boxManager?.setBoxInitState(this.id);
-            }
-        }
-    }
-
     public async onSeek(time: number) {
         this.appEmitter.emit("seek", time).catch(err => {
             console.log(`[WindowManager]: emit seek error: ${err.message}`);
@@ -354,7 +461,7 @@ export class AppProxy implements PageRemoveService {
     }
 
     private appAttributesUpdateListener = (appId: string) => {
-        this.manager.refresher?.add(appId, () => {
+        this.manager.refresher.add(appId, () => {
             return autorun(() => {
                 const attrs = this.manager.attributes[appId];
                 if (attrs) {
@@ -362,7 +469,7 @@ export class AppProxy implements PageRemoveService {
                 }
             });
         });
-        this.manager.refresher?.add(this.stateKey, () => {
+        this.manager.refresher.add(this.stateKey, () => {
             return autorun(() => {
                 const appState = this.appAttributes?.state;
                 if (appState?.zIndex > 0 && appState.zIndex !== this.box?.zIndex) {
@@ -370,13 +477,13 @@ export class AppProxy implements PageRemoveService {
                 }
             });
         });
-        this.manager.refresher?.add(`${appId}-fullPath`, () => {
+        this.manager.refresher.add(`${appId}-fullPath`, () => {
             return autorun(() => {
                 const fullPath = this.appAttributes?.fullPath;
                 this.setFocusScenePathHandler(fullPath);
-                if (this._prevFullPath !== fullPath) {
+                if (this.fullPath$.value !== fullPath) {
                     this.notifyPageStateChange();
-                    this._prevFullPath = fullPath;
+                    this.fullPath$.setValue(fullPath);
                 }
             });
         });
@@ -404,14 +511,17 @@ export class AppProxy implements PageRemoveService {
         return fullPath;
     }
 
-    private async createView(): Promise<View> {
-        const view = await this.viewManager.createView(this.id);
+    private createView(): View {
+        const view = this.viewManager.createView(this.id);
+        this.view$.setValue(view);
         this.setViewFocusScenePath();
         return view;
     }
 
     public notifyPageStateChange = debounce(() => {
-        this.appEmitter.emit("pageStateChange", this.pageState);
+        if (this.pageState) {
+            this.appEmitter.emit("pageStateChange", this.pageState);
+        }
     }, 50);
 
     public get pageState(): PageState {
@@ -421,7 +531,7 @@ export class AppProxy implements PageRemoveService {
     // PageRemoveService
     public async removeSceneByIndex(index: number) {
         const scenePath = this._pageState.getFullPath(index);
-        if (scenePath) {
+        if (scenePath && this.pageState) {
             const nextIndex = calculateNextIndex(index, this.pageState);
             // 只修改 focus path 不修改 FullPath
             this.setSceneIndexWithoutSync(nextIndex);
@@ -457,6 +567,31 @@ 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 updateSize = (width: number, height: number) => {
+        const iSize = {
+            id: this.manager.uid,
+            width, height
+        }
+        this.store.updateAppAttributes(this.id, Fields.Size, iSize);
+        this.size$.setValue(iSize);
+    }
+
+    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,
@@ -472,6 +607,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);
@@ -483,14 +619,49 @@ export class AppProxy implements PageRemoveService {
             }
         }
         this.appProxies.delete(this.id);
-        this._pageState.destroy();
 
         this.viewManager.destroyView(this.id);
         this.manager.appStatus.delete(this.id);
-        this.manager.refresher?.remove(this.id);
-        this.manager.refresher?.remove(this.stateKey);
-        this.manager.refresher?.remove(`${this.id}-fullPath`);
-        this._prevFullPath = undefined;
+        this.manager.refresher.remove(this.id);
+        this.manager.refresher.remove(this.stateKey);
+        this.manager.refresher.remove(`${this.id}-fullPath`);
+        this.valManager.destroy();
+    }
+
+    private addCameraReaction = () => {
+        this.sideEffectManager.add(() =>
+            this.manager.refresher.add(`${this.id}-camera`, () =>
+                reaction(
+                    () => this.appAttributes?.camera,
+                    camera => {
+                        if (camera && camera.id !== this.uid) {
+                            const rawCamera = toJS(camera);
+                            if (rawCamera !== this.camera$.value) {
+                                this.camera$.setValue(rawCamera);
+                            }
+                        }
+                    }
+                )
+            )
+        , "camera");
+    }
+
+    private addSizeReaction = () => {
+        this.sideEffectManager.add(() =>
+            this.manager.refresher.add(`${this.id}-size`, () =>
+                reaction(
+                    () => this.appAttributes?.size,
+                    size => {
+                        if (size && size.id !== this.uid) {
+                            const rawSize = toJS(size);
+                            if (this.size$.value !== rawSize) {
+                                this.size$.setValue(rawSize);
+                            }
+                        }
+                    }
+                )
+            )
+        , "size");
     }
 
     public close(): Promise<void> {

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