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

package/src/App/AppProxy.ts

@@ -3,13 +3,13 @@ import { AppAttributes, AppEvents, Events, SETUP_APP_DELAY } from "../constants"
 import { AppContext } from "./AppContext";
 import { AppPageStateImpl } from "./AppPageStateImpl";
 import { appRegister } from "../Register";
-import { AppViewSync } from "./AppViewSync";
+import { ViewSync } from "../View/ViewSync"
 import { autorun, reaction, toJS } from "white-web-sdk";
 import { boxEmitter } from "../BoxEmitter";
-import { BoxManagerNotFoundError } from "../Utils/error";
+import { BoxManagerNotInitializeError } from "../Utils/error";
 import { calculateNextIndex } from "../Page";
-import { combine, Val } from "value-enhancer";
-import { debounce, get } from "lodash";
+import { combine, Val, ValManager } from "value-enhancer";
+import { debounce, get, isEqual, isUndefined, omitBy } from "lodash";
 import { emitter } from "../InternalEmitter";
 import { Fields } from "../AttributesDelegate";
 import { log } from "../Utils/log";
@@ -25,16 +25,17 @@ import {
 } from "../Utils/Common";
 import type {
     AppEmitterEvent,
-    AppInitState,
     BaseInsertParams,
     setAppOptions,
     AppListenerKeys,
 } from "../index";
-import type { SceneState, View, SceneDefinition, Camera } from "white-web-sdk";
+import type { SceneState, View, SceneDefinition,  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, TeleBox, TeleBoxRect } from "@netless/telebox-insider";
 import type { PageRemoveService, PageState } from "../Page";
+import type { AppState } from "./type";
+import { callbacks } from "../callback";
 
 export type AppEmitter = Emittery<AppEmitterEvent>;
 
@@ -54,23 +55,25 @@ export class AppProxy implements PageRemoveService {
     public uid = this.manager.uid;
 
     public isAddApp: boolean;
-    private status: "normal" | "destroyed" = "normal";
+    public status: "normal" | "destroyed" = "normal";
     private stateKey: string;
     public _pageState: AppPageStateImpl;
-    private _prevFullPath: string | undefined;
 
-    public appResult?: NetlessApp<any>;
-    public appContext?: AppContext<any, any>;
+    public appResult?: NetlessApp;
+    public appContext?: AppContext;
 
-    private sideEffectManager = new SideEffectManager();
+    public sideEffectManager = new SideEffectManager();
+    private valManager = new ValManager();
 
-    public camera$ = new Val<ICamera | undefined>(undefined);
-    public size$ = new Val<ISize | undefined>(undefined);
+    private fullPath$ = this.valManager.attach(new Val<string | undefined>(undefined));
+    private viewSync?: ViewSync;
 
-    private appViewSync?: AppViewSync;
-
-    public box$ = new Val<ReadonlyTeleBox | undefined>(undefined);
-    public view$ = new Val<View | undefined>(undefined);
+    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));
+    public syncCamera$ = this.valManager.attach(new Val<boolean>(true));
+    public whiteBoardViewCreated$ = this.valManager.attach(new Val<boolean>(false));
 
     constructor(
         private params: BaseInsertParams,
@@ -103,68 +106,107 @@ export class AppProxy implements PageRemoveService {
             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.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 this.manager.refresher.add(`${this.id}-size`, () => {
-                return reaction(
-                    () => this.appAttributes?.size,
-                    size => {
-                        if (size && size.id !== this.uid) {
-                            this.size$.setValue(toJS(size));
-                        }
+        this.addCameraReaction();
+        this.addSizeReaction();
+        this.sideEffectManager.add(() =>
+            emitter.on("memberStateChange", this.onMemberStateChange)
+        );
+        this.sideEffectManager.add(() => [
+            this.syncCamera$.subscribe(syncCamera => {
+                if (!syncCamera) {
+                    if (this.viewSync) {
+                        this.viewSync.destroy();
+                        this.viewSync = undefined;
+                        this.sideEffectManager.flush("camera");
+                        this.sideEffectManager.flush("size");
                     }
-                );
-            });
-        });
-        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,
-                    });
                 }
-                if (!this.size$.value && box.contentStageRect) {
-                    this.storeSize({
-                        id: this.uid,
-                        width: box.contentStageRect?.width,
-                        height: box.contentStageRect?.height,
-                    });
+            }),
+            this.whiteBoardViewCreated$.reaction(created => {
+                if (created && this.box) {
+                    if (!this.syncCamera$.value) return;
+                    combine([this.box$, this.view$]).subscribe(([box, view]) => {
+                        if (box && view) {
+                            if (!this.camera$.value) {
+                                this.storeCamera({
+                                    centerX: null,
+                                    centerY: null,
+                                    scale: 1,
+                                    id: this.uid,
+                                });
+                                this.camera$.setValue(toJS(this.appAttributes.camera));
+                            }
+                            if (!this.size$.value && box.stageRect) {
+                                const initialRect = this.computedInitialRect(box.stageRect);
+                                const width = initialRect?.width || box.stageRect.width;
+                                const height = initialRect?.height || box.stageRect.height;
+                                this.storeSize({
+                                    id: this.uid,
+                                    width,
+                                    height,
+                                });
+                                this.size$.setValue(toJS(this.appAttributes.size));
+                            }
+                            this.viewSync = new ViewSync({
+                                uid: this.uid,
+                                view$: this.view$,
+                                camera$: this.camera$,
+                                size$: this.size$,
+                                stageRect$: box._stageRect$,
+                                storeCamera: this.storeCamera,
+                                storeSize: this.storeSize
+                            });
+                            this.sideEffectManager.add(() => () => this.viewSync?.destroy());
+                            this.whiteBoardViewCreated$.destroy();
+                        }
+                    })
                 }
-                this.appViewSync = new AppViewSync(this);
-                this.sideEffectManager.add(() => () => this.appViewSync?.destroy());
+            }),
+            this.manager.members$.reaction(members => {
+                this.appEmitter.emit("roomMembersChange", members);
+            }),
+        ]);
+    }
+
+    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";
             }
-        });
-        this.sideEffectManager.add(() => emitter.on("memberStateChange", 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 {
-                if (this.appContext?._viewWrapper) {
-                    this.appContext._viewWrapper.style.pointerEvents = "auto";
-                }
+                return {
+                    width: width * 0.65,
+                    height: height * 0.65,
+                };
             }
-        }));
+        }
     }
 
     public createAppDir() {
@@ -194,7 +236,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 {
@@ -270,13 +312,13 @@ export class AppProxy implements PageRemoveService {
     ) {
         log("setupApp", appId, app, options);
         if (!this.boxManager) {
-            throw new BoxManagerNotFoundError();
+            throw new BoxManagerNotInitializeError();
         }
-        const context = new AppContext(this.manager, this.boxManager, appId, this, appOptions);
+        const context = new AppContext(this.manager, appId, this, appOptions);
         this.appContext = context;
         try {
             emitter.once(`${appId}${Events.WindowCreated}` as any).then(async () => {
-                let boxInitState: AppInitState | undefined;
+                let boxInitState: AppState | undefined;
                 if (!skipUpdate) {
                     boxInitState = this.getAppInitState(appId);
                     this.boxManager?.updateBoxState(boxInitState);
@@ -286,10 +328,19 @@ export class AppProxy implements PageRemoveService {
                 this.setViewFocusScenePath();
                 setTimeout(async () => {
                     // 延迟执行 setup, 防止初始化的属性没有更新成功
-                    const result = await app.setup(context);
-                    this.appResult = result;
-                    appRegister.notifyApp(this.kind, "created", { appId, result });
-                    this.fixMobileSize();
+                    try {
+                        const result = await app.setup(context);
+                        this.appResult = result;
+                        appRegister.notifyApp(this.kind, "created", { appId, result });
+                        this.fixMobileSize();
+                        if (this.isAddApp) {
+                            this.setupDone();
+                        }
+                    } catch (error) {
+                        console.error(error);
+                        this.setupFailed();
+                        this.destroy(false, true, true);
+                    }
                 }, SETUP_APP_DELAY);
             });
             const box = this.boxManager?.createBox({
@@ -298,11 +349,18 @@ export class AppProxy implements PageRemoveService {
                 options,
                 canOperate: this.manager.canOperate,
                 smartPosition: this.isAddApp,
-            });
+            }) as TeleBox;
+            const registerParams = appRegister.registered.get(this.kind);
+            if (registerParams?.contentStyles) {
+                box?.mountUserStyles(registerParams.contentStyles);
+            }
             this.box$.setValue(box);
             if (this.isAddApp && this.box) {
                 this.store.updateAppState(appId, AppAttributes.ZIndex, this.box.zIndex);
-                this.boxManager.focusBox({ appId }, false);
+                this.store.updateAppState(appId, AppAttributes.Size, {
+                    width: this.box.intrinsicWidth,
+                    height: this.box.intrinsicHeight,
+                });
             }
         } catch (error: any) {
             console.error(error);
@@ -314,12 +372,14 @@ export class AppProxy implements PageRemoveService {
     private fixMobileSize() {
         const box = this.boxManager?.getBox(this.id);
         if (box) {
-            this.boxManager?.resizeBox({
-                appId: this.id,
-                width: box.intrinsicWidth + 0.001,
-                height: box.intrinsicHeight + 0.001,
-                skipUpdate: true,
-            });
+            if (!box.minimized) {
+                this.boxManager?.resizeBox({
+                    appId: this.id,
+                    width: box.intrinsicWidth + 0.001,
+                    height: box.intrinsicHeight + 0.001,
+                    skipUpdate: true,
+                });
+            }
         }
     }
 
@@ -364,30 +424,18 @@ export class AppProxy implements PageRemoveService {
         }
     }
 
-    public getAppInitState = (id: string) => {
+    public getAppInitState = (id: string): AppState | undefined => {
         const attrs = this.store.getAppState(id);
         if (!attrs) return;
-        const position = attrs?.[AppAttributes.Position];
         const focus = this.store.focus;
-        const size = attrs?.[AppAttributes.Size];
-        const sceneIndex = attrs?.[AppAttributes.SceneIndex];
         const maximized = this.attributes?.["maximized"];
         const minimized = this.attributes?.["minimized"];
-        const zIndex = attrs?.zIndex;
-        let payload = { maximized, minimized, zIndex } as AppInitState;
-        if (position) {
-            payload = { ...payload, id: id, x: position.x, y: position.y };
-        }
+        let payload = { maximized, minimized, id } as AppState;
+        const state =  omitBy(attrs, isUndefined);
         if (focus === id) {
             payload = { ...payload, focus: true };
         }
-        if (size) {
-            payload = { ...payload, width: size.width, height: size.height };
-        }
-        if (sceneIndex) {
-            payload = { ...payload, sceneIndex };
-        }
-        return payload;
+        return  Object.assign(payload, state);;
     };
 
     public emitAppSceneStateChange(sceneState: SceneState) {
@@ -444,32 +492,34 @@ export class AppProxy implements PageRemoveService {
     }
 
     private appAttributesUpdateListener = (appId: string) => {
-        this.manager.refresher?.add(appId, () => {
-            return autorun(() => {
-                const attrs = this.manager.attributes[appId];
-                if (attrs) {
-                    this.appEmitter.emit("attributesUpdate", attrs);
-                }
-            });
-        });
-        this.manager.refresher?.add(this.stateKey, () => {
-            return autorun(() => {
-                const appState = this.appAttributes?.state;
-                if (appState?.zIndex > 0 && appState.zIndex !== this.box?.zIndex) {
-                    this.boxManager?.setZIndex(appId, appState.zIndex);
-                }
-            });
-        });
-        this.manager.refresher?.add(`${appId}-fullPath`, () => {
-            return autorun(() => {
-                const fullPath = this.appAttributes?.fullPath;
-                this.setFocusScenePathHandler(fullPath);
-                if (this._prevFullPath !== fullPath) {
-                    this.notifyPageStateChange();
-                    this._prevFullPath = fullPath;
-                }
-            });
-        });
+        this.sideEffectManager.add(() => [
+            this.manager.refresher.add(appId, () => {
+                return autorun(() => {
+                    const attrs = this.manager.attributes[appId];
+                    if (attrs) {
+                        this.appEmitter.emit("attributesUpdate", attrs);
+                    }
+                });
+            }),
+            this.manager.refresher.add(this.stateKey, () => {
+                return autorun(() => {
+                    const appState = this.appAttributes?.state;
+                    if (appState?.zIndex > 0 && appState.zIndex !== this.box?.zIndex) {
+                        this.boxManager?.setZIndex(appId, appState.zIndex);
+                    }
+                });
+            }),
+            this.manager.refresher.add(`${appId}-fullPath`, () => {
+                return autorun(() => {
+                    const fullPath = this.appAttributes?.fullPath;
+                    this.setFocusScenePathHandler(fullPath);
+                    if (this.fullPath$.value !== fullPath) {
+                        this.notifyPageStateChange();
+                        this.fullPath$.setValue(fullPath);
+                    }
+                });
+            }),
+        ]);
     };
 
     private setFocusScenePathHandler = debounce((fullPath: string | undefined) => {
@@ -487,6 +537,7 @@ export class AppProxy implements PageRemoveService {
     }
 
     public setViewFocusScenePath() {
+        if (this.status === "destroyed") return;
         const fullPath = this.getFullScenePath();
         if (fullPath && this.view) {
             setViewFocusScenePath(this.view, fullPath);
@@ -546,6 +597,7 @@ export class AppProxy implements PageRemoveService {
             const fullPath = this._pageState.getFullPath(index);
             if (fullPath) {
                 this.setFullPath(fullPath);
+                setScenePath(this.manager.room, fullPath);
             }
         }
     }
@@ -558,12 +610,22 @@ export class AppProxy implements PageRemoveService {
         this.store.updateAppAttributes(this.id, Fields.Size, size);
     };
 
-    public moveCamera = (camera: Camera) => {
+    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: Partial<ICamera>) => {
         if (!this.camera$.value) {
             return;
         }
-        const nextCamera = { ...this.camera$.value, ...camera };
+        const nextCamera = { ...this.camera$.value, ...camera, id: this.uid };
         this.storeCamera(nextCamera);
+        this.camera$.setValue(nextCamera);
     };
 
     public async destroy(
@@ -576,6 +638,7 @@ export class AppProxy implements PageRemoveService {
         this.status = "destroyed";
         try {
             await appRegister.notifyApp(this.kind, "destroy", { appId: this.id });
+            callbacks.emit("appClose", { appId: this.id, kind: this.kind, error });
             await this.appEmitter.emit("destroy", { error });
         } catch (error) {
             console.error("[WindowManager]: notifyApp error", error.message, error.stack);
@@ -596,13 +659,60 @@ export class AppProxy implements PageRemoveService {
 
         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.camera$.destroy();
-        this.size$.destroy();
-        this.box$.destroy();
+        this.valManager.destroy();
+    }
+
+    private addCameraReaction = () => {
+        this.sideEffectManager.add(() =>
+            this.manager.refresher.add(`${this.id}-camera`, () =>
+                reaction(
+                    () => this.appAttributes?.camera,
+                    camera => {
+                        if (camera) {
+                            const rawCamera = toJS(camera);
+                            if (!isEqual(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) {
+                            const rawSize = toJS(size);
+                            if (!isEqual(rawSize, this.size$.value)) {
+                                this.size$.setValue(rawSize);
+                            }
+                        }
+                    }
+                )
+            )
+        , "size");
+    }
+
+    public onFocus = () => {
+        this.setScenePath();
+    }
+
+    // 异步值设置完成通知其他端创建 app
+    private setupDone = () => {
+        this.store.updateAppAttributes(this.id, "setup", true);
+        this.manager.dispatchInternalEvent(Events.InvokeAttributesUpdateCallback);
+        if (this.boxManager && this.box) {
+            this.boxManager.focusBox({ appId: this.id }, false);
+        }
+    }
+
+    private setupFailed = () => {
+        this.store.cleanAppAttributes(this.id);
     }
 
     public close(): Promise<void> {

package/src/App/WhiteboardView.ts

@@ -1,36 +1,58 @@
 import { putScenes } from "../Utils/Common";
 import { Val } from "value-enhancer";
+import { pick } from "lodash";
 
 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";
+import type { Camera, View } from "white-web-sdk";
+import type { TeleBoxRect } from "@netless/telebox-insider";
+import type { ICamera, ISize } from "../AttributesDelegate";
+
+export type WhiteBoardViewCamera = Omit<ICamera, "id">;
+export type WhiteBoardViewRect = Omit<ISize, "id">;
 
 export class WhiteBoardView implements PageController {
     public readonly pageState$: ReadonlyVal<PageState>;
+    public readonly baseCamera$: ReadonlyVal<WhiteBoardViewCamera>;
+    public readonly baseRect$: ReadonlyVal<WhiteBoardViewRect | undefined>;
 
     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);
+        const baseRect$ = new Val<WhiteBoardViewRect | undefined>(appProxy.size$.value);
+        const pickCamera = (camera: Camera | ICamera) =>
+            pick(camera, ["centerX", "centerY", "scale"]);
+        const camera$ = new Val<WhiteBoardViewCamera>(pickCamera(this.view.camera));
+        this.baseRect$ = baseRect$;
         this.pageState$ = pageState$;
-        appProxy.appEmitter.on("pageStateChange", pageState => {
-            pageState$.setValue(pageState);
-        });
-    }
-
-    public get view() {
-        return this.appContext.view;
+        this.baseCamera$ = camera$;
+        this.appProxy.sideEffectManager.add(() => [
+            appProxy.appEmitter.on("pageStateChange", pageState => pageState$.setValue(pageState)),
+            appProxy.camera$.subscribe(camera => {
+                if (camera) {
+                    camera$.setValue(pickCamera(camera));
+                }
+            }),
+            appProxy.size$.subscribe(size => {
+                if (size) {
+                    baseRect$.setValue(pick(size, ["width", "height"]));
+                }
+            }),
+        ]);
+        view.disableCameraTransform = true;
     }
 
     public get pageState() {
         return this.pageState$.value;
     }
 
-    public moveCamera(camera: Camera) {
+    public moveCamera(camera: Partial<WhiteBoardViewCamera>) {
         this.appProxy.moveCamera(camera);
     }
 
@@ -58,11 +80,13 @@ export class WhiteBoardView implements PageController {
         const scene = params?.scene;
         const scenePath = this.appProxy.scenePath;
         if (!scenePath) return;
+        const scenes = Array.isArray(scene) ? scene : [scene || {}];
         if (after) {
             const nextIndex = this.pageState.index + 1;
-            putScenes(this.appContext.room, scenePath, [scene || {}], nextIndex);
+            
+            putScenes(this.appContext.room, scenePath, scenes, nextIndex);
         } else {
-            putScenes(this.appContext.room, scenePath, [scene || {}]);
+            putScenes(this.appContext.room, scenePath, scenes);
         }
     };
 
@@ -79,7 +103,7 @@ export class WhiteBoardView implements PageController {
         return this.appProxy.removeSceneByIndex(needRemoveIndex);
     };
 
-    public destroy() {
-        this.removeViewWrapper();
+    public setBaseRect(rect: Omit<TeleBoxRect, "x" | "y">) {
+        this.appProxy.updateSize(rect.width, rect.height);
     }
 }

package/src/App/index.ts

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

package/src/App/type.ts

@@ -0,0 +1,22 @@
+
+export type AppState = {
+    id: string;
+    focus?: boolean;
+    SceneIndex?: number;
+    draggable?: boolean;
+    position?: {
+        x: number;
+        y: number;
+    }
+    ratio?: number;
+    resizable?: boolean;
+    size?: {
+        width: number;
+        height: number;
+    }
+    stageRatio?: number;
+    visible?: boolean;
+    zIndex?: number;
+    maximized: boolean | null;
+    minimized: boolean | null;
+}