@netless/window-manager 1.0.0-canary.9 → 1.0.0

package/src/App/AppProxy.ts

@@ -3,22 +3,15 @@ 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 { autorun, reaction, toJS } from "white-web-sdk";
-import { boxEmitter } from "../BoxEmitter";
+import { autorun } from "white-web-sdk";
 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 { internalEmitter } 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,
@@ -30,11 +23,14 @@ import type {
     setAppOptions,
     AppListenerKeys,
 } from "../index";
-import type { SceneState, View, SceneDefinition, Camera , MemberState} from "white-web-sdk";
+import type { SceneState, View, SceneDefinition } 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 { callbacks } from "../callback";
 
 export type AppEmitter = Emittery<AppEmitterEvent>;
 
@@ -42,7 +38,6 @@ export class AppProxy implements PageRemoveService {
     public kind: string;
     public id: string;
     public scenePath?: string;
-    private appScenePath: string;
     public appEmitter: AppEmitter;
     public scenes?: SceneDefinition[];
 
@@ -51,27 +46,16 @@ 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;
-    public status: "normal" | "destroyed" = "normal";
+    private status: "normal" | "destroyed" = "normal";
     private stateKey: string;
-    public _pageState: AppPageStateImpl;
+    private _pageState: AppPageStateImpl;
+    private _prevFullPath: string | undefined;
 
     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,
@@ -80,7 +64,6 @@ 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();
@@ -93,87 +76,12 @@ 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) {
-                        this.storeSize({
-                            id: this.uid,
-                            width: box.contentStageRect?.width,
-                            height: box.contentStageRect?.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";
-            }
-        }
-    }
-
-    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() {
@@ -189,7 +97,7 @@ export class AppProxy implements PageRemoveService {
     }
 
     public get view(): View | undefined {
-        return this.view$.value;
+        return this.manager.viewManager.getView(this.id);
     }
 
     public get viewIndex(): number | undefined {
@@ -224,7 +132,7 @@ export class AppProxy implements PageRemoveService {
     }
 
     public setFullPath(path: string) {
-        this.store.updateAppAttributes(this.id, Fields.FullPath, path);
+        this.manager.safeUpdateAttributes(["apps", this.id, Fields.FullPath], path);
     }
 
     public async baseInsertApp(skipUpdate = false): Promise<{ appId: string; app: NetlessApp }> {
@@ -245,7 +153,7 @@ export class AppProxy implements PageRemoveService {
         } else {
             throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
         }
-        emitter.emit("updateManagerRect");
+        internalEmitter.emit("updateManagerRect");
         return {
             appId: this.id,
             app: appImpl,
@@ -253,7 +161,7 @@ export class AppProxy implements PageRemoveService {
     }
 
     public get box(): ReadonlyTeleBox | undefined {
-        return this.box$.value;
+        return this.boxManager?.getBox(this.id);
     }
 
     private async setupApp(
@@ -270,7 +178,7 @@ export class AppProxy implements PageRemoveService {
         const context = new AppContext(this.manager, this.boxManager, appId, this, appOptions);
         this.appContext = context;
         try {
-            emitter.once(`${appId}${Events.WindowCreated}` as any).then(async () => {
+            internalEmitter.once(`${appId}${Events.WindowCreated}` as any).then(async () => {
                 let boxInitState: AppInitState | undefined;
                 if (!skipUpdate) {
                     boxInitState = this.getAppInitState(appId);
@@ -281,22 +189,28 @@ export class AppProxy implements PageRemoveService {
                 this.setViewFocusScenePath();
                 setTimeout(async () => {
                     // 延迟执行 setup, 防止初始化的属性没有更新成功
+                    console.log("setup app", app);
                     const result = await app.setup(context);
                     this.appResult = result;
                     appRegister.notifyApp(this.kind, "created", { appId, result });
+                    this.afterSetupApp(boxInitState);
                     this.fixMobileSize();
+                    callbacks.emit("onAppSetup", appId);
                 }, SETUP_APP_DELAY);
             });
-            const box = this.boxManager?.createBox({
+            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.store.updateAppState(appId, AppAttributes.Size, {
+                    width: this.box.intrinsicWidth,
+                    height: this.box.intrinsicHeight,
+                });
                 this.boxManager.focusBox({ appId }, false);
             }
         } catch (error: any) {
@@ -318,6 +232,14 @@ 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}`);
@@ -452,6 +374,7 @@ export class AppProxy implements PageRemoveService {
                 const appState = this.appAttributes?.state;
                 if (appState?.zIndex > 0 && appState.zIndex !== this.box?.zIndex) {
                     this.boxManager?.setZIndex(appId, appState.zIndex);
+                    this.boxManager?.focusBox({ appId });
                 }
             });
         });
@@ -459,9 +382,9 @@ export class AppProxy implements PageRemoveService {
             return autorun(() => {
                 const fullPath = this.appAttributes?.fullPath;
                 this.setFocusScenePathHandler(fullPath);
-                if (this.fullPath$.value !== fullPath) {
+                if (this._prevFullPath !== fullPath) {
                     this.notifyPageStateChange();
-                    this.fullPath$.setValue(fullPath);
+                    this._prevFullPath = fullPath;
                 }
             });
         });
@@ -470,6 +393,7 @@ export class AppProxy implements PageRemoveService {
     private setFocusScenePathHandler = debounce((fullPath: string | undefined) => {
         if (this.view && fullPath && fullPath !== this.view?.focusScenePath) {
             setViewFocusScenePath(this.view, fullPath);
+            callbacks.emit("onAppScenePathChange", { appId: this.id, view: this.view });
         }
     }, 50);
 
@@ -489,17 +413,14 @@ export class AppProxy implements PageRemoveService {
         return fullPath;
     }
 
-    private createView(): View {
-        const view = this.viewManager.createView(this.id);
-        this.view$.setValue(view);
+    private async createView(): Promise<View> {
+        const view = await this.viewManager.createView(this.id);
         this.setViewFocusScenePath();
         return view;
     }
 
     public notifyPageStateChange = debounce(() => {
-        if (this.pageState) {
-            this.appEmitter.emit("pageStateChange", this.pageState);
-        }
+        this.appEmitter.emit("pageStateChange", this.pageState);
     }, 50);
 
     public get pageState(): PageState {
@@ -509,7 +430,7 @@ export class AppProxy implements PageRemoveService {
     // PageRemoveService
     public async removeSceneByIndex(index: number) {
         const scenePath = this._pageState.getFullPath(index);
-        if (scenePath && this.pageState) {
+        if (scenePath) {
             const nextIndex = calculateNextIndex(index, this.pageState);
             // 只修改 focus path 不修改 FullPath
             this.setSceneIndexWithoutSync(nextIndex);
@@ -545,22 +466,6 @@ 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,
@@ -576,8 +481,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 });
+        internalEmitter.emit(`destroy-${this.id}` as any, { error });
         if (needCloseBox) {
             this.boxManager?.closeBox(this.id, skipUpdate);
         }
@@ -588,43 +492,14 @@ 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.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) {
-                            this.camera$.setValue(toJS(camera));
-                        }
-                    }
-                )
-            )
-        , "camera");
-    }
-
-    private addSizeReaction = () => {
-        this.sideEffectManager.add(() =>
-            this.manager.refresher.add(`${this.id}-size`, () =>
-                reaction(
-                    () => this.appAttributes?.size,
-                    size => {
-                        if (size && size.id !== this.uid) {
-                            this.size$.setValue(toJS(size));
-                        }
-                    }
-                )
-            )
-        , "size");
+        this._prevFullPath = undefined;
     }
 
     public close(): Promise<void> {

package/src/App/MagixEvent/index.ts

@@ -1,68 +1,68 @@
 import type {
-  MagixEventListenerOptions as WhiteMagixListenerOptions,
-  Event as WhiteEvent,
-  EventPhase as WhiteEventPhase,
-  Scope as WhiteScope,
+    MagixEventListenerOptions as WhiteMagixListenerOptions,
+    Event as WhiteEvent,
+    EventPhase as WhiteEventPhase,
+    Scope as WhiteScope,
 } from "white-web-sdk";
 
 export interface MagixEventListenerOptions extends WhiteMagixListenerOptions {
-  /**
-   * Rapid emitted callbacks will be slowed down to this interval (in ms).
-   */
-  fireInterval?: number;
-  /**
-   * If `true`, sent events will reach self-listeners after committed to server.
-   * Otherwise the events will reach self-listeners immediately.
-   */
-  fireSelfEventAfterCommit?: boolean;
+    /**
+     * Rapid emitted callbacks will be slowed down to this interval (in ms).
+     */
+    fireInterval?: number;
+    /**
+     * If `true`, sent events will reach self-listeners after committed to server.
+     * Otherwise the events will reach self-listeners immediately.
+     */
+    fireSelfEventAfterCommit?: boolean;
 }
 
 export interface MagixEventMessage<
-  TPayloads = any,
-  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+    TPayloads = any,
+    TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
 > extends Omit<WhiteEvent, "scope" | "phase"> {
-  /** Event name */
-  event: TEvent;
-  /** Event Payload */
-  payload: TPayloads[TEvent];
-  /** Whiteboard ID of the client who dispatched the event. It will be AdminObserverId for system events. */
-  authorId: number;
-  scope: `${WhiteScope}`;
-  phase: `${WhiteEventPhase}`;
+    /** Event name */
+    event: TEvent;
+    /** Event Payload */
+    payload: TPayloads[TEvent];
+    /** Whiteboard ID of the client who dispatched the event. It will be AdminObserverId for system events. */
+    authorId: number;
+    scope: `${WhiteScope}`;
+    phase: `${WhiteEventPhase}`;
 }
 
 export type MagixEventTypes<TPayloads = any> = Extract<keyof TPayloads, string>;
 
 export type MagixEventPayload<
-  TPayloads = any,
-  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+    TPayloads = any,
+    TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
 > = TPayloads[TEvent];
 
 export type MagixEventDispatcher<TPayloads = any> = <
-  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+    TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
 >(
-  event: TEvent,
-  payload: TPayloads[TEvent]
+    event: TEvent,
+    payload: TPayloads[TEvent]
 ) => void;
 
 export type MagixEventHandler<
-  TPayloads = any,
-  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+    TPayloads = any,
+    TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
 > = (message: MagixEventMessage<TPayloads, TEvent>) => void;
 
-export type MagixEventListenerDisposer = () => void
+export type MagixEventListenerDisposer = () => void;
 
 export type MagixEventAddListener<TPayloads = any> = <
-  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+    TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
 >(
-  event: TEvent,
-  handler: MagixEventHandler<TPayloads, TEvent>,
-  options?: MagixEventListenerOptions | undefined
+    event: TEvent,
+    handler: MagixEventHandler<TPayloads, TEvent>,
+    options?: MagixEventListenerOptions | undefined
 ) => MagixEventListenerDisposer;
 
 export type MagixEventRemoveListener<TPayloads = any> = <
-  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+    TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
 >(
-  event: TEvent,
-  handler?: MagixEventHandler<TPayloads, TEvent>
+    event: TEvent,
+    handler?: MagixEventHandler<TPayloads, TEvent>
 ) => void;

package/src/App/Storage/StorageEvent.ts

@@ -1,21 +1,21 @@
 export type StorageEventListener<T> = (event: T) => void;
 
 export class StorageEvent<TMessage> {
-  listeners = new Set<StorageEventListener<TMessage>>();
+    listeners = new Set<StorageEventListener<TMessage>>();
 
-  get length(): number {
-    return this.listeners.size;
-  }
+    get length(): number {
+        return this.listeners.size;
+    }
 
-  dispatch(message: TMessage): void {
-    this.listeners.forEach(callback => callback(message));
-  }
+    dispatch(message: TMessage): void {
+        this.listeners.forEach(callback => callback(message));
+    }
 
-  addListener(listener: StorageEventListener<TMessage>): void {
-    this.listeners.add(listener);
-  }
+    addListener(listener: StorageEventListener<TMessage>): void {
+        this.listeners.add(listener);
+    }
 
-  removeListener(listener: StorageEventListener<TMessage>): void {
-    this.listeners.delete(listener);
-  }
+    removeListener(listener: StorageEventListener<TMessage>): void {
+        this.listeners.delete(listener);
+    }
 }