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

package/src/App/AppContext.ts

@@ -1,4 +1,5 @@
 import { BoxNotCreatedError } from "../Utils/error";
+import { putScenes } from "../Utils/Common";
 import { Storage } from "./Storage";
 import {
     autorun,
@@ -13,12 +14,12 @@ import type {
     Room,
     SceneDefinition,
     View,
-    EventListener as WhiteEventListener
+    EventListener as WhiteEventListener,
 } from "white-web-sdk";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import type Emittery from "emittery";
 import type { BoxManager } from "../BoxManager";
-import type { AppEmitterEvent, Member } from "../index";
+import type { AppEmitterEvent } from "../index";
 import type { AppManager } from "../AppManager";
 import type { AppProxy } from "./AppProxy";
 import type {
@@ -26,12 +27,13 @@ import type {
     MagixEventDispatcher,
     MagixEventRemoveListener,
 } from "./MagixEvent";
-import { WhiteBoardView } from "./WhiteboardView";
-import { findMemberByUid } from "../Helper";
-import { MAX_PAGE_SIZE } from "../constants";
-import { isNumber } from "lodash";
+import type { AddPageParams, PageController, PageState } from "../Page";
+import { internalEmitter } from "../InternalEmitter";
+import { callbacks } from "../callback";
 
-export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOptions = any> {
+export class AppContext<TAttributes extends {} = any, TMagixEventPayloads = any, TAppOptions = any>
+    implements PageController
+{
     public readonly emitter: Emittery<AppEmitterEvent<TAttributes>>;
     public readonly mobxUtils = {
         autorun,
@@ -48,8 +50,6 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     private store = this.manager.store;
     public readonly isAddApp: boolean;
     public readonly isReplay = this.manager.isReplay;
-    private whiteBoardView?: WhiteBoardView;
-    public _viewWrapper?: HTMLElement;
 
     constructor(
         private manager: AppManager,
@@ -62,13 +62,9 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         this.isAddApp = appProxy.isAddApp;
     }
 
-    public get displayer() {
+    public getDisplayer = () => {
         return this.manager.displayer;
-    }
-
-    public get destroyed() {
-        return this.appProxy.status === "destroyed";
-    }
+    };
 
     /** @deprecated Use context.storage.state instead. */
     public getAttributes = (): TAttributes | undefined => {
@@ -84,57 +80,33 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         }
     };
 
-    public get view(): View | undefined {
+    public getView = (): View | undefined => {
         return this.appProxy.view;
     };
 
-    public createWhiteBoardView = (size?: number): WhiteBoardView => {
-        if (this.whiteBoardView) {
-            return this.whiteBoardView;
-        }
-        let view = this.view;
-        if (!view) {
-            view = this.appProxy.createAppDir();
-        }
-        const viewWrapper = document.createElement("div");
-        this._viewWrapper = viewWrapper;
-        viewWrapper.className = "window-manager-view-wrapper";
-        this.box.$content.parentElement?.appendChild(viewWrapper);
-        const removeViewWrapper = () => {
-            this.box.$content.parentElement?.removeChild(viewWrapper);
-            this._viewWrapper = undefined;
+    public mountView = (dom: HTMLElement): void => {
+        const view = this.getView();
+        if (view) {
+            view.divElement = dom as HTMLDivElement;
+            setTimeout(() => {
+                // 渲染需要时间，延迟 refresh
+                this.getRoom()?.refreshViewSize();
+                callbacks.emit("onAppViewMounted", { appId: this.appId, view });
+            }, 1000);
         }
-        view.divElement = viewWrapper;
-        if (this.isAddApp) {
-            this.ensurePageSize(size);
-        }
-        this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, removeViewWrapper, this.ensurePageSize);
-        return this.whiteBoardView;
-    }
-
-    private ensurePageSize = (size?: number) => {
-        if (!isNumber(size)) return;
-        if (!this.appProxy.scenePath) return;
-        if (this.appProxy.pageState.length >= size) return;
-        if (size <= 0 || size >= MAX_PAGE_SIZE) {
-            throw Error(`[WindowManager]: size ${size} muse be in range [1, ${MAX_PAGE_SIZE}]`);
-        }
-        const needInsert = size - this.appProxy.pageState.length;
-        const scenes = new Array(needInsert).fill({});
-        this.room?.putScenes(this.appProxy.scenePath, scenes);
-    }
+    };
 
     public getInitScenePath = () => {
         return this.manager.getAppInitPath(this.appId);
     };
 
     /** Get App writable status. */
-    public get isWritable(): boolean {
+    public getIsWritable = (): boolean => {
         return this.manager.canOperate;
     };
 
     /** Get the App Window UI box. */
-    public get box(): ReadonlyTeleBox {
+    public getBox = (): ReadonlyTeleBox => {
         const box = this.boxManager.getBox(this.appId);
         if (box) {
             return box;
@@ -143,25 +115,10 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         }
     };
 
-    public get room(): Room | undefined {
+    public getRoom = (): Room | undefined => {
         return this.manager.room;
     };
 
-    public get members() {
-        return this.manager.members;
-    }
-
-    public get memberState(): Member {
-        const self = findMemberByUid(this.room, this.manager.uid);
-        if (!self) {
-            throw new Error(`Member ${this.manager.uid} not found.`);
-        }
-        return {
-            uid: this.manager.uid,
-            ...self,
-        }
-    }
-
     /** @deprecated Use context.storage.setState instead. */
     public setAttributes = (attributes: TAttributes) => {
         this.manager.safeSetAttributes({ [this.appId]: attributes });
@@ -174,12 +131,11 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         }
     };
 
-    /** @deprecated Use Pages api instead. */
     public setScenePath = async (scenePath: string): Promise<void> => {
         if (!this.appProxy.box) return;
         this.appProxy.setFullPath(scenePath);
         // 兼容 15 版本 SDK 的切页
-        this.room?.setScenePath(scenePath);
+        this.getRoom()?.setScenePath(scenePath);
     };
 
     /** Get the local App options. */
@@ -205,7 +161,10 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
      * @param defaultState Default state for initial storage creation.
      * @returns
      */
-    public createStorage = <TState>(storeId: string, defaultState?: TState): Storage<TState> => {
+    public createStorage = <TState extends {}>(
+        storeId: string,
+        defaultState?: TState
+    ): Storage<TState> => {
         const storage = new Storage(this, storeId, defaultState);
         this.emitter.on("destroy", () => {
             storage.destroy();
@@ -243,4 +202,78 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     public removeMagixEventListener = this.manager.displayer.removeMagixEventListener.bind(
         this.manager.displayer
     ) as MagixEventRemoveListener<TMagixEventPayloads>;
+
+    /** PageController  */
+    public nextPage = async (): Promise<boolean> => {
+        const nextIndex = this.pageState.index + 1;
+        if (nextIndex > this.pageState.length - 1) {
+            console.warn("[WindowManager] nextPage: index out of range");
+            return false;
+        }
+        this.appProxy.setSceneIndex(nextIndex);
+        return true;
+    };
+
+    public jumpPage = async (index: number): Promise<boolean> => {
+        if (!(0 <= index && index < this.pageState.length)) {
+            console.warn("[WindowManager] nextPage: index out of range");
+            return false;
+        }
+        this.appProxy.setSceneIndex(index);
+        return true;
+    };
+
+    public prevPage = async (): Promise<boolean> => {
+        const nextIndex = this.pageState.index - 1;
+        if (nextIndex < 0) {
+            console.warn("[WindowManager] prevPage: index out of range");
+            return false;
+        }
+        this.appProxy.setSceneIndex(nextIndex);
+        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.manager.room, scenePath, [scene || {}], nextIndex);
+        } else {
+            putScenes(this.manager.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 get pageState(): PageState {
+        return this.appProxy.pageState;
+    }
+
+    public get kind(): string {
+        return this.appProxy.kind;
+    }
+
+    /** Dispatch a local event to `manager.onAppEvent()`. */
+    public dispatchAppEvent(type: string, value?: any): void {
+        internalEmitter.emit(`custom-${this.kind}` as any, {
+            kind: this.kind,
+            appId: this.appId,
+            type,
+            value,
+        });
+    }
 }

package/src/App/AppPageStateImpl.ts

@@ -9,15 +9,11 @@ export type AppPageStateParams = {
 };
 
 export class AppPageStateImpl {
-    public sceneNode: ScenesCallbacksNode | null = null;
-    private scenePath?: string;
-    private view?: View;
+    private sceneNode: ScenesCallbacksNode | null = null;
 
     constructor(private params: AppPageStateParams) {
         const { displayer, scenePath } = this.params;
-        this.view = this.params.view;
         if (scenePath) {
-            this.scenePath = scenePath;
             this.sceneNode = displayer.createScenesCallback(scenePath, {
                 onAddScene: this.onSceneChange,
                 onRemoveScene: this.onSceneChange,
@@ -25,39 +21,24 @@ export class AppPageStateImpl {
         }
     }
 
-    public createSceneNode = (scenePath: string) => {
-        this.scenePath = scenePath;
-        if (this.sceneNode) {
-            this.sceneNode.dispose();
-        }
-        this.sceneNode = this.params.displayer.createScenesCallback(scenePath, {
-            onAddScene: this.onSceneChange,
-            onRemoveScene: this.onSceneChange,
-        });
-        return this.sceneNode;
-    }
-
-    public setView(view: View) {
-        this.view = view;
-    }
-
-    private onSceneChange = () => {
+    private onSceneChange = (node: ScenesCallbacksNode) => {
+        this.sceneNode = node;
         this.params.notifyPageStateChange();
     };
 
     public getFullPath(index: number) {
         const scenes = this.sceneNode?.scenes;
-        if (this.scenePath && scenes) {
+        if (this.params.scenePath && scenes) {
             const name = scenes[index];
             if (name) {
-                return `${this.scenePath}/${name}`;
+                return `${this.params.scenePath}/${name}`;
             }
         }
     }
 
     public toObject(): PageState {
         return {
-            index: this.view?.focusSceneIndex || 0,
+            index: this.params.view?.focusSceneIndex || 0,
             length: this.sceneNode?.scenes.length || 0,
         };
     }