@netless/window-manager 1.0.0-canary.2 → 1.0.0-canary.22

package/src/App/AppContext.ts

@@ -17,7 +17,6 @@ import type {
 } 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 { AppManager } from "../AppManager";
 import type { AppProxy } from "./AppProxy";
@@ -26,11 +25,15 @@ import type {
     MagixEventDispatcher,
     MagixEventRemoveListener,
 } from "./MagixEvent";
-import { WhiteBoardView } from "./WhiteBoardView";
+import { WhiteBoardView } from "./WhiteboardView";
 import { findMemberByUid } from "../Helper";
 import { MAX_PAGE_SIZE } from "../constants";
-import { putScenes } from "../Utils/Common";
-import { isNumber } from "lodash";
+import { isBoolean, isNumber } from "lodash";
+
+export type CreateWhiteBoardViewParams = {
+    size?: number;
+    syncCamera?: boolean;
+}
 
 export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOptions = any> {
     public readonly emitter: Emittery<AppEmitterEvent<TAttributes>>;
@@ -49,11 +52,11 @@ 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 whiteBoardView?: WhiteBoardView;
+    public _viewWrapper?: HTMLElement;
 
     constructor(
         private manager: AppManager,
-        private boxManager: BoxManager,
         public appId: string,
         private appProxy: AppProxy,
         private appOptions?: TAppOptions | (() => TAppOptions)
@@ -62,9 +65,13 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         this.isAddApp = appProxy.isAddApp;
     }
 
-    public get displayer(){
+    public get displayer() {
         return this.manager.displayer;
-    };
+    }
+
+    public get destroyed() {
+        return this.appProxy.status === "destroyed";
+    }
 
     /** @deprecated Use context.storage.state instead. */
     public getAttributes = (): TAttributes | undefined => {
@@ -84,7 +91,7 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         return this.appProxy.view;
     };
 
-    public createWhiteBoardView = (size?: number): WhiteBoardView => {
+    public createWhiteBoardView = (params?: CreateWhiteBoardViewParams): WhiteBoardView => {
         if (this.whiteBoardView) {
             return this.whiteBoardView;
         }
@@ -92,13 +99,31 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         if (!view) {
             view = this.appProxy.createAppDir();
         }
-        view.divElement = this.box.$content as HTMLDivElement;
-        this.initPageSize(size);
-        this.whiteBoardView = new WhiteBoardView(this, this.appProxy);
+        if (params) {
+            if (isBoolean(params.syncCamera)) {
+                this.appProxy.syncCamera$.setValue(params.syncCamera);
+            }
+        }
+        const viewWrapper = document.createElement("div");
+        this._viewWrapper = viewWrapper;
+        viewWrapper.className = "window-manager-view-wrapper";
+        this.box.$content.parentElement?.appendChild(viewWrapper);
+        view.divElement = viewWrapper;
+        this.appProxy.fireMemberStateChange();
+        if (this.isAddApp) {
+            this.ensurePageSize(params?.size);
+        }
+        this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, this.ensurePageSize);
+        this.appProxy.sideEffectManager.add(() => {
+            return () => {
+                this.whiteBoardView = undefined;
+            }
+        });
+        this.appProxy.whiteBoardViewCreated$.setValue(true);
         return this.whiteBoardView;
     }
 
-    private initPageSize = (size?: number) => {
+    private ensurePageSize = (size?: number) => {
         if (!isNumber(size)) return;
         if (!this.appProxy.scenePath) return;
         if (this.appProxy.pageState.length >= size) return;
@@ -106,25 +131,22 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
             throw Error(`[WindowManager]: size ${size} muse be in range [1, ${MAX_PAGE_SIZE}]`);
         }
         const needInsert = size - this.appProxy.pageState.length;
-        const startPageNumber = this.appProxy.pageState.length;
-        const scenes = new Array(needInsert).fill({}).map((_, index) => {
-            return { name: `${startPageNumber + index + 1}` };
-        });
-        putScenes(this.room, this.appProxy.scenePath, scenes);
+        const scenes = new Array(needInsert).fill({});
+        this.room?.putScenes(this.appProxy.scenePath, scenes);
     }
 
     public getInitScenePath = () => {
-        return this.manager.getAppInitPath(this.appId);
+        return this.appProxy.scenePath;
     };
 
     /** Get App writable status. */
     public get isWritable(): boolean {
-        return this.manager.canOperate;
+        return this.manager.canOperate && !this.destroyed;
     };
 
     /** Get the App Window UI box. */
     public get box(): ReadonlyTeleBox {
-        const box = this.boxManager.getBox(this.appId);
+        const box = this.appProxy.box$.value;
         if (box) {
             return box;
         } else {

package/src/App/AppProxy.ts

@@ -3,12 +3,18 @@ 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 { ViewSync } from "../View/ViewSync"
+import { autorun, reaction, toJS } from "white-web-sdk";
+import { boxEmitter } from "../BoxEmitter";
 import { BoxManagerNotFoundError } from "../Utils/error";
-import { debounce, get } from "lodash";
+import { calculateNextIndex } from "../Page";
+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";
+import { SideEffectManager } from "side-effect-manager";
+import type { ICamera, ISize } from "../AttributesDelegate";
 import {
     entireScenes,
     getScenePath,
@@ -19,19 +25,16 @@ import {
 } from "../Utils/Common";
 import type {
     AppEmitterEvent,
-    AppInitState,
     BaseInsertParams,
     setAppOptions,
     AppListenerKeys,
 } from "../index";
-import type { SceneState, View, SceneDefinition } 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, TeleBoxRect } from "@netless/telebox-insider";
 import type { PageRemoveService, PageState } from "../Page";
-import { calculateNextIndex } from "../Page";
-import { boxEmitter } from "../BoxEmitter";
-import { SideEffectManager } from "side-effect-manager";
+import type { AppState } from "./type";
 
 export type AppEmitter = Emittery<AppEmitterEvent>;
 
@@ -48,17 +51,28 @@ 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;
     public _pageState: AppPageStateImpl;
-    private _prevFullPath: string | undefined;
 
-    public appResult?: NetlessApp<any>;
-    public appContext?: AppContext<any, any>;
+    public appResult?: NetlessApp;
+    public appContext?: AppContext;
+
+    public sideEffectManager = new SideEffectManager();
+    private valManager = new ValManager();
 
-    private sideEffectManager = new SideEffectManager();
+    private fullPath$ = this.valManager.attach(new Val<string | undefined>(undefined));
+    private viewSync?: ViewSync;
+
+    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,
@@ -90,14 +104,110 @@ export class AppProxy implements PageRemoveService {
             view: this.view,
             notifyPageStateChange: this.notifyPageStateChange,
         });
-        this.sideEffectManager.add(() => {
-            return () => this._pageState.destroy();
-        });
-        this.sideEffectManager.add(() => {
-            return emitter.on("roomMembersChange", members => {
+        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(() =>
+            emitter.on("memberStateChange", this.onMemberStateChange)
+        );
+        this.sideEffectManager.add(() => [
+            this.syncCamera$.reaction(syncCamera => {
+                if (!syncCamera) {
+                    if (this.viewSync) {
+                        this.viewSync.destroy();
+                        this.viewSync = undefined;
+                        this.sideEffectManager.flush("camera");
+                        this.sideEffectManager.flush("size");
+                    }
+                }
+            }),
+            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.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.viewSync = new ViewSync({
+                                uid: this.uid,
+                                view$: this.view$,
+                                camera$: this.camera$,
+                                size$: this.size$,
+                                stageRect$: box._contentStageRect$,
+                                storeCamera: this.storeCamera,
+                                storeSize: this.storeSize
+                            });
+                            this.sideEffectManager.add(() => () => this.viewSync?.destroy());
+                            this.whiteBoardViewCreated$.destroy();
+                        }
+                    })
+                }
+            })
+        ]);
+    }
+
+    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() {
@@ -127,7 +237,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 {
@@ -162,7 +272,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 }> {
@@ -191,7 +301,7 @@ export class AppProxy implements PageRemoveService {
     }
 
     public get box(): ReadonlyTeleBox | undefined {
-        return this.boxManager?.getBox(this.id);
+        return this.box$.value;
     }
 
     private async setupApp(
@@ -205,11 +315,11 @@ export class AppProxy implements PageRemoveService {
         if (!this.boxManager) {
             throw new BoxManagerNotFoundError();
         }
-        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);
@@ -225,13 +335,14 @@ export class AppProxy implements PageRemoveService {
                     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);
@@ -246,12 +357,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,
+                });
+            }
         }
     }
 
@@ -296,30 +409,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) {
@@ -376,32 +477,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) => {
@@ -428,6 +531,7 @@ export class AppProxy implements PageRemoveService {
 
     private createView(): View {
         const view = this.viewManager.createView(this.id);
+        this.view$.setValue(view);
         this.setViewFocusScenePath();
         return view;
     }
@@ -477,10 +581,37 @@ export class AppProxy implements PageRemoveService {
             const fullPath = this._pageState.getFullPath(index);
             if (fullPath) {
                 this.setFullPath(fullPath);
+                setScenePath(this.manager.room, fullPath);
             }
         }
     }
 
+    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: Partial<ICamera>) => {
+        if (!this.camera$.value) {
+            return;
+        }
+        const nextCamera = { ...this.camera$.value, ...camera, id: this.uid };
+        this.storeCamera(nextCamera);
+        this.camera$.setValue(nextCamera);
+    };
+
     public async destroy(
         needCloseBox: boolean,
         cleanAttrs: boolean,
@@ -496,6 +627,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);
@@ -510,11 +642,47 @@ 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.sideEffectManager.flushAll();
+        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();
     }
 
     public close(): Promise<void> {

package/src/App/{WhiteBoardView.ts → WhiteboardView.ts}

@@ -1,26 +1,56 @@
 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 { View } from "white-web-sdk";
+import type { TeleBoxRect } from "@netless/telebox-insider";
+import type { ICamera } from "../AttributesDelegate";
+
+export type WhiteBoardViewCamera = Omit<ICamera, "scale" | "id">;
 
 export class WhiteBoardView implements PageController {
     public readonly pageState$: ReadonlyVal<PageState>;
+    public readonly camera$: ReadonlyVal<WhiteBoardViewCamera>;
 
-    constructor(protected appContext: AppContext, protected appProxy: AppProxy) {
+    constructor(
+        public view: View,
+        protected appContext: AppContext,
+        protected appProxy: AppProxy,
+        public ensureSize: (size: number) => void
+    ) {
         const pageState$ = new Val<PageState>(appProxy.pageState);
         this.pageState$ = pageState$;
-        appProxy.appEmitter.on("pageStateChange", pageState => {
-            pageState$.setValue(pageState);
-        });
+        this.appProxy.sideEffectManager.add(() =>
+            appProxy.appEmitter.on("pageStateChange", pageState => {
+                pageState$.setValue(pageState);
+            })
+        );
+        const camera$ = new Val<WhiteBoardViewCamera>(
+            pick(this.view.camera, ["centerX", "centerY"])
+        );
+        this.camera$ = camera$;
+        this.appProxy.sideEffectManager.add(() =>
+            appProxy.camera$.subscribe(camera => {
+                if (camera) {
+                    camera$.setValue(pick(camera, ["centerX", "centerY"]));
+                }
+            })
+        );
+        view.disableCameraTransform = true;
     }
 
     public get pageState() {
         return this.pageState$.value;
     }
 
+    public moveCamera(camera: Partial<WhiteBoardViewCamera>) {
+        this.appProxy.moveCamera(camera);
+    }
+
     public nextPage = async (): Promise<boolean> => {
         const nextIndex = this.pageState.index + 1;
         return this.jumpPage(nextIndex);
@@ -65,4 +95,8 @@ export class WhiteBoardView implements PageController {
         }
         return this.appProxy.removeSceneByIndex(needRemoveIndex);
     };
+
+    public setRect(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 "./WhiteboardView";
+export * from "./type";