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

package/src/App/AppProxy.ts

@@ -191,7 +191,6 @@ 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);
             });
@@ -225,14 +224,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}`);

package/src/BoxManager.ts

@@ -1,6 +1,6 @@
 import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce } from "lodash";
-import { TELE_BOX_STATE, TeleBoxCollector, TeleBoxManager } from "@netless/telebox-insider";
+import { TELE_BOX_STATE, TeleBoxManager } from "@netless/telebox-insider";
 import { WindowManager } from "./index";
 import type { BoxEmitterType } from "./BoxEmitter";
 import type { AddAppOptions, AppInitState } from "./index";
@@ -18,6 +18,7 @@ import type { NetlessApp } from "./typings";
 import type { View } from "white-web-sdk";
 import type { CallbacksType } from "./callback";
 import type { EmitterType } from "./InternalEmitter";
+import { SideEffectManager } from "side-effect-manager";
 
 export { TELE_BOX_STATE };
 
@@ -45,6 +46,7 @@ export type CreateTeleBoxManagerConfig = {
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     prefersColorScheme?: TeleBoxColorScheme;
+    stageRatio?: number;
 };
 
 export type BoxManagerContext = {
@@ -87,79 +89,93 @@ export const createBoxManager = (
 
 export class BoxManager {
     public teleBoxManager: TeleBoxManager;
+    protected sideEffectManager: SideEffectManager;
 
     constructor(
         private context: BoxManagerContext,
-        private createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
+        createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ) {
+        this.sideEffectManager = new SideEffectManager();
         const { emitter, callbacks, boxEmitter } = context;
         this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
-
-        // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
-        this.teleBoxManager._state$.reaction(state => {
-            callbacks.emit("boxStateChange", state);
-            emitter.emit("boxStateChange", state);
-        });
-
-        this.teleBoxManager._darkMode$.reaction(darkMode => {
-            callbacks.emit("darkModeChange", darkMode);
-        });
-        this.teleBoxManager._prefersColorScheme$.reaction(colorScheme => {
-            callbacks.emit("prefersColorSchemeChange", colorScheme);
-        });
-
-        // events.on 的值则会根据 skipUpdate 来决定是否触发回调
-        this.teleBoxManager.events.on("minimized", minimized => {
-            this.context.safeSetAttributes({ minimized });
-            if (minimized) {
-                this.context.cleanFocus();
-                this.blurAllBox();
-            } else {
-                const topBox = this.getTopBox();
-                if (topBox) {
-                    this.context.setAppFocus(topBox.id);
-                    this.focusBox({ appId: topBox.id }, false);
+        this.sideEffectManager.add(() => [
+            // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
+            this.teleBoxManager._state$.reaction(state => {
+                callbacks.emit("boxStateChange", state);
+                emitter.emit("boxStateChange", state);
+            }),
+            this.teleBoxManager._darkMode$.reaction(darkMode => {
+                callbacks.emit("darkModeChange", darkMode);
+            }),
+            this.teleBoxManager._prefersColorScheme$.reaction(colorScheme => {
+                callbacks.emit("prefersColorSchemeChange", colorScheme);
+            }),
+            this.teleBoxManager._minimized$.reaction((minimized, skipUpdate) => {
+                if (skipUpdate) {
+                    return;
                 }
-            }
-        });
-        this.teleBoxManager.events.on("maximized", maximized => {
-            this.context.safeSetAttributes({ maximized });
-        });
-        this.teleBoxManager.events.on("removed", boxes => {
-            boxes.forEach(box => {
-                boxEmitter.emit("close", { appId: box.id });
-            });
-        });
-        this.teleBoxManager.events.on(
-            "intrinsic_move",
-            debounce((box: ReadonlyTeleBox): void => {
-                boxEmitter.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
-            }, 50)
-        );
-        this.teleBoxManager.events.on(
-            "intrinsic_resize",
-            debounce((box: ReadonlyTeleBox): void => {
-                boxEmitter.emit("resize", {
-                    appId: box.id,
-                    width: box.intrinsicWidth,
-                    height: box.intrinsicHeight,
-                });
-            }, 200)
-        );
-        this.teleBoxManager.events.on("focused", box => {
-            if (box) {
-                if (this.canOperate) {
-                    boxEmitter.emit("focus", { appId: box.id });
+                this.context.safeSetAttributes({ minimized });
+                if (minimized) {
+                    this.context.cleanFocus();
+                    this.blurAllBox();
                 } else {
-                    this.teleBoxManager.blurBox(box.id);
+                    const topBox = this.getTopBox();
+                    if (topBox) {
+                        this.context.setAppFocus(topBox.id);
+                        this.focusBox({ appId: topBox.id }, false);
+                    }
                 }
-            }
-        });
-        this.teleBoxManager.events.on("z_index", box => {
-            this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
-        });
-        emitter.on("playgroundSizeChange", () => this.updateManagerRect());
-        emitter.on("updateManagerRect", () => this.updateManagerRect());
+            }),
+            this.teleBoxManager._maximized$.reaction((maximized, skipUpdate) => {
+                if (skipUpdate) {
+                    return;
+                }
+                this.context.safeSetAttributes({ maximized });
+            }),
+            this.teleBoxManager.events.on("removed", boxes => {
+                boxes.forEach(box => {
+                    boxEmitter.emit("close", { appId: box.id });
+                });
+            }),
+            this.teleBoxManager.events.on(
+                "intrinsic_move",
+                debounce((box: ReadonlyTeleBox): void => {
+                    boxEmitter.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
+                }, 50)
+            ),
+            this.teleBoxManager.events.on(
+                "intrinsic_resize",
+                debounce((box: ReadonlyTeleBox): void => {
+                    boxEmitter.emit("resize", {
+                        appId: box.id,
+                        width: box.intrinsicWidth,
+                        height: box.intrinsicHeight,
+                    });
+                }, 200)
+            ),
+            this.teleBoxManager.events.on("focused", box => {
+                if (box) {
+                    if (this.canOperate) {
+                        boxEmitter.emit("focus", { appId: box.id });
+                    } else {
+                        this.teleBoxManager.blurBox(box.id);
+                    }
+                }
+            }),
+            this.teleBoxManager.events.on("z_index", box => {
+                this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
+            }),
+            this.teleBoxManager._stageRect$.subscribe(stage => {
+                emitter.emit("playgroundSizeChange", stage);
+                this.context.notifyContainerRectUpdate(stage);
+            }),
+            emitter.on("writableChange", isWritable => {
+                this.teleBoxManager.setHighlightStage(isWritable);
+            }),
+            emitter.on("containerSizeRatioUpdate", ratio => {
+                this.teleBoxManager._stageRatio$.setValue(ratio);
+            }),
+        ]);
     }
 
     private get mainView() {
@@ -199,7 +215,7 @@ export class BoxManager {
         let { minwidth = MIN_WIDTH, minheight = MIN_HEIGHT } = params.app.config ?? {};
         const { width, height } = params.app.config ?? {};
         const title = params.options?.title || params.appId;
-        const rect = this.teleBoxManager.containerRect;
+        const rect = this.teleBoxManager.rootRect;
 
         if (minwidth > 1) {
             minwidth = minwidth / rect.width;
@@ -221,34 +237,13 @@ export class BoxManager {
         this.context.emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
     }
 
-    public setBoxInitState(appId: string): void {
-        const box = this.teleBoxManager.queryOne({ id: appId });
-        if (box) {
-            if (box.state === TELE_BOX_STATE.Maximized) {
-                this.context.boxEmitter.emit("resize", {
-                    appId: appId,
-                    x: box.x,
-                    y: box.y,
-                    width: box.intrinsicWidth,
-                    height: box.intrinsicHeight,
-                });
-            }
-        }
-    }
-
     public setupBoxManager(
         createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ): TeleBoxManager {
-        const root = WindowManager.wrapper ? WindowManager.wrapper : document.body;
-        const rect = root.getBoundingClientRect();
+        const root = WindowManager.playground;
         const initManagerState: TeleBoxManagerConfig = {
+            stageRatio: 3 / 4,
             root: root,
-            containerRect: {
-                x: 0,
-                y: 0,
-                width: rect.width,
-                height: rect.height,
-            },
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
         };
@@ -258,20 +253,16 @@ export class BoxManager {
             this.teleBoxManager.destroy();
         }
         this.teleBoxManager = manager;
-        const container = createTeleBoxManagerConfig?.collectorContainer || WindowManager.wrapper;
+        const container = createTeleBoxManagerConfig?.collectorContainer;
         if (container) {
-            this.setCollectorContainer(container);
+            this.teleBoxManager.collector.set$collector(container);
+        }
+        if (createTeleBoxManagerConfig?.collectorStyles) {
+            this.teleBoxManager.collector.setStyles(createTeleBoxManagerConfig.collectorStyles);
         }
         return manager;
     }
 
-    public setCollectorContainer(container: HTMLElement) {
-        const collector = new TeleBoxCollector({
-            styles: this.createTeleBoxManagerConfig?.collectorStyles,
-        }).mount(container);
-        this.teleBoxManager.setCollector(collector);
-    }
-
     public getBox(appId: string): ReadonlyTeleBox | undefined {
         return this.teleBoxManager.queryOne({ id: appId });
     }
@@ -324,15 +315,6 @@ export class BoxManager {
         }
     }
 
-    public updateManagerRect(): void {
-        const rect = this.mainView.divElement?.getBoundingClientRect();
-        if (rect && rect.width > 0 && rect.height > 0) {
-            const containerRect = { x: 0, y: 0, width: rect.width, height: rect.height };
-            this.teleBoxManager.setContainerRect(containerRect);
-            this.context.notifyContainerRectUpdate(this.teleBoxManager.containerRect);
-        }
-    }
-
     public moveBox({ appId, x, y }: MoveBoxParams): void {
         this.teleBoxManager.update(appId, { x, y }, true);
     }
@@ -404,7 +386,12 @@ export class BoxManager {
         this.teleBoxManager.update(id, { zIndex }, skipUpdate);
     }
 
+    public setRoot(root: HTMLElement) {
+        this.teleBoxManager._root$.setValue(root);
+    }
+
     public destroy() {
+        this.sideEffectManager.flushAll();
         this.teleBoxManager.destroy();
     }
 }

package/src/Cursor/index.ts

@@ -34,9 +34,9 @@ export class CursorManager {
 
     constructor(private manager: AppManager, private enableCursor: boolean, applianceIcons?: ApplianceIcons) {
         this.roomMembers = this.manager.room?.state.roomMembers;
-        const wrapper = WindowManager.wrapper;
-        if (wrapper) {
-            this.setupWrapper(wrapper);
+        const playground = WindowManager.playground;
+        if (playground) {
+            this.setupWrapper(playground);
         }
         this.sideEffectManager.add(() => {
             return emitter.on("cursorMove", this.onCursorMove);
@@ -65,7 +65,7 @@ export class CursorManager {
     private initCursorInstance = (uid: string) => {
         let cursorInstance = this.cursorInstances.get(uid);
         if (!cursorInstance) {
-            cursorInstance = new Cursor(this.manager, uid, this, WindowManager.wrapper);
+            cursorInstance = new Cursor(this.manager, uid, this, WindowManager.playground);
             this.cursorInstances.set(uid, cursorInstance);
         }
         return cursorInstance;
@@ -169,7 +169,7 @@ export class CursorManager {
 
     public updateContainerRect() {
         this.containerRect = WindowManager.container?.getBoundingClientRect();
-        this.wrapperRect = WindowManager.wrapper?.getBoundingClientRect();
+        this.wrapperRect = WindowManager.playground?.getBoundingClientRect();
     }
 
     public deleteCursor(uid: string) {

package/src/Helper.ts

@@ -2,36 +2,23 @@ import { getVersionNumber } from "./Utils/Common";
 import { REQUIRE_VERSION } from "./constants";
 import { WhiteVersion } from "white-web-sdk";
 import { WhiteWebSDKInvalidError } from "./Utils/error";
-import { WindowManager } from "./index";
 import type { Room } from "white-web-sdk";
 
 export const setupWrapper = (
     root: HTMLElement
 ): {
     playground: HTMLDivElement;
-    wrapper: HTMLDivElement;
-    sizer: HTMLDivElement;
     mainViewElement: HTMLDivElement;
 } => {
     const playground = document.createElement("div");
     playground.className = "netless-window-manager-playground";
 
-    const sizer = document.createElement("div");
-    sizer.className = "netless-window-manager-sizer";
-
-    const wrapper = document.createElement("div");
-    wrapper.className = "netless-window-manager-wrapper";
-
     const mainViewElement = document.createElement("div");
     mainViewElement.className = "netless-window-manager-main-view";
-
-    playground.appendChild(sizer);
-    sizer.appendChild(wrapper);
-    wrapper.appendChild(mainViewElement);
+    playground.appendChild(mainViewElement);
     root.appendChild(playground);
-    WindowManager.wrapper = wrapper;
 
-    return { playground, wrapper, sizer, mainViewElement };
+    return { playground, mainViewElement };
 };
 
 export const checkVersion = () => {

package/src/InternalEmitter.ts

@@ -1,9 +1,11 @@
 import Emittery from "emittery";
+import type { TeleBoxRect } from "@netless/telebox-insider";
 import type { AppInitState, CursorMovePayload } from "./index";
 
 export type RemoveSceneParams = {
-    scenePath: string, index?: number
-}
+    scenePath: string;
+    index?: number;
+};
 
 export type EmitterEvent = {
     onCreated: undefined;
@@ -14,14 +16,14 @@ export type EmitterEvent = {
     mainViewMounted: undefined;
     observerIdChange: number;
     boxStateChange: string;
-    playgroundSizeChange: DOMRect;
+    playgroundSizeChange: TeleBoxRect;
     startReconnect: undefined;
     onReconnected: undefined;
     removeScenes: RemoveSceneParams;
     cursorMove: CursorMovePayload;
     updateManagerRect: undefined;
     focusedChange: { focused: string | undefined; prev: string | undefined };
-    rootDirRemoved: undefined;  // 根目录整个被删除
+    rootDirRemoved: undefined; // 根目录整个被删除
     rootDirSceneRemoved: string; // 根目录下的场景被删除
     setReadonly: boolean;
     changePageState: undefined;

package/src/View/CameraSynchronizer.ts

@@ -0,0 +1,67 @@
+import { AnimationMode } from "white-web-sdk";
+import { delay, throttle } from "lodash";
+import type { TeleBoxRect } from "@netless/telebox-insider";
+import type { Camera, View, Size } from "white-web-sdk";
+import type { MainViewSize } from "../AttributesDelegate";
+
+export type SaveCamera = (camera: Camera) => void;
+
+export class CameraSynchronizer {
+    protected remoteCamera?: Camera;
+    protected remoteSize?: MainViewSize;
+    protected rect?: TeleBoxRect;
+    protected view?: View;
+
+    constructor(protected saveCamera: SaveCamera) {}
+
+    public setRect(rect: TeleBoxRect) {
+        this.rect = rect;
+        if (this.remoteCamera && this.remoteSize) {
+            this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
+        }
+    }
+
+    public setView(view: View) {
+        this.view = view;
+    }
+
+    // 远端 Camera 或者 size 更新
+    public onRemoteUpdate = throttle((camera: Camera, size: MainViewSize) => {
+        this.remoteCamera = camera;
+        this.remoteSize = size;
+        if (this.remoteSize && this.rect) {
+            let scale: number;
+            if (size.width < size.height) {
+                scale = this.rect.width / size.width;
+            } else {
+                scale = this.rect.height / size.height;
+            }
+            const nextScale = camera.scale * scale;
+            const moveCamera = () =>  this.view?.moveCamera({
+                centerX: camera.centerX,
+                centerY: camera.centerY,
+                scale: nextScale,
+                animationMode: AnimationMode.Immediately,
+            });
+            // TODO 直接调用 moveCamera 依然会出现 camera 错误的情况,这里暂时加一个 delay 保证 camera 是对的, 后续需要 SDK 进行修改
+            delay(moveCamera, 10);
+        }
+    }, 50);
+
+
+    public onLocalCameraUpdate(camera: Camera) {
+        this.saveCamera(camera);
+    }
+
+    // 本地 Size 更新, 先匹配 camera 到新的 size 然后再发送 camera 数据到远端
+    public onLocalSizeUpdate(size: Size) {
+        if (this.rect && this.view) {
+            const scale = this.rect.width / size.width;
+            const nextScale = this.view.camera.scale * scale;
+            this.view.moveCamera({
+                scale: nextScale,
+                animationMode: AnimationMode.Immediately
+            });
+        }
+    }
+}

package/src/View/MainView.ts

@@ -1,25 +1,29 @@
-import { AnimationMode, reaction } from "white-web-sdk";
+import { reaction } from "white-web-sdk";
 import { callbacks } from "../callback";
 import { createView } from "./ViewManager";
-import { debounce, get, isEmpty, isEqual } from "lodash";
+import { debounce, get, isEqual } from "lodash";
 import { emitter } from "../InternalEmitter";
+import { Events } from "../constants";
 import { Fields } from "../AttributesDelegate";
 import { setViewFocusScenePath } from "../Utils/Common";
 import { SideEffectManager } from "side-effect-manager";
 import type { Camera, Size, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
-import { Events } from "../constants";
+import { CameraSynchronizer } from "./CameraSynchronizer";
 
 export class MainViewProxy {
-    private scale?: number;
     private started = false;
     private mainViewIsAddListener = false;
     private mainView: View;
     private store = this.manager.store;
+    private synchronizer: CameraSynchronizer;
 
     private sideEffectManager = new SideEffectManager();
 
     constructor(private manager: AppManager) {
+        this.synchronizer = new CameraSynchronizer(
+            camera => this.store.setMainViewCamera({ ...camera, id: this.manager.uid })
+        );
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
         emitter.once("mainViewMounted").then(() => {
@@ -28,18 +32,24 @@ export class MainViewProxy {
             this.ensureCameraAndSize();
             this.startListenWritableChange();
         });
-        const playgroundSizeChangeListener = () => {
-            this.sizeChangeHandler(this.mainViewSize);
-        };
-        this.sideEffectManager.add(() => {
-            return emitter.on("playgroundSizeChange", playgroundSizeChangeListener);
-        });
         this.sideEffectManager.add(() => {
             return emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
         });
         this.sideEffectManager.add(() => {
             return emitter.on("startReconnect", () => {
-                this.mainView.release();
+                if (!(this.mainView as any).didRelease) {
+                    this.mainView.release();
+                }
+            });
+        });
+        const rect = this.manager.boxManager?.teleBoxManager.stageRect;
+        if (rect) {
+            this.synchronizer.setRect(rect);
+        }
+        this.sideEffectManager.add(() => {
+            return emitter.on("playgroundSizeChange", rect => {
+                this.synchronizer.setRect(rect);
+                this.synchronizer.onLocalSizeUpdate(rect);
             });
         });
     }
@@ -52,7 +62,7 @@ export class MainViewProxy {
                 }
             });
         });
-    }
+    };
 
     public ensureCameraAndSize() {
         if (!this.mainViewCamera || !this.mainViewSize) {
@@ -74,8 +84,7 @@ export class MainViewProxy {
     }
 
     private moveCameraSizeByAttributes() {
-        this.moveCameraToContian(this.mainViewSize);
-        this.moveCamera(this.mainViewCamera);
+        this.synchronizer.onRemoteUpdate(this.mainViewCamera, this.mainViewSize);
     }
 
     public start() {
@@ -91,9 +100,12 @@ export class MainViewProxy {
     };
 
     public setCameraAndSize(): void {
-        const camera = { ...this.mainView.camera, id: this.manager.uid };
-        const size = { ...this.mainView.size, id: this.manager.uid };
-        this.store.setMainViewCameraAndSize(camera, size);
+        const stageSize = this.getStageSize();
+        if (stageSize) {
+            const camera = { ...this.mainView.camera, id: this.manager.uid };
+            const size = { ...stageSize, id: this.manager.uid };
+            this.store.setMainViewCameraAndSize(camera, size);
+        }
     }
 
     private cameraReaction = () => {
@@ -101,8 +113,7 @@ export class MainViewProxy {
             () => this.mainViewCamera,
             camera => {
                 if (camera && camera.id !== this.manager.uid) {
-                    this.moveCameraToContian(this.mainViewSize);
-                    this.moveCamera(camera);
+                    this.synchronizer.onRemoteUpdate(camera, this.mainViewSize);
                 }
             },
             { fireImmediately: true }
@@ -111,8 +122,7 @@ export class MainViewProxy {
 
     public sizeChangeHandler = debounce((size: Size) => {
         if (size) {
-            this.moveCameraToContian(size);
-            this.moveCamera(this.mainViewCamera);
+            this.synchronizer.onLocalSizeUpdate(size);
         }
     }, 30);
 
@@ -122,7 +132,7 @@ export class MainViewProxy {
         if (size.id === this.manager.uid) {
             this.setCameraAndSize();
         }
-    }
+    };
 
     public get view(): View {
         return this.mainView;
@@ -138,6 +148,7 @@ export class MainViewProxy {
         if (mainViewScenePath) {
             setViewFocusScenePath(mainView, mainViewScenePath);
         }
+        this.synchronizer.setView(mainView);
         return mainView;
     }
 
@@ -172,12 +183,20 @@ export class MainViewProxy {
     }
 
     private onCameraUpdatedByDevice = (camera: Camera) => {
-        this.store.setMainViewCamera({ ...camera, id: this.manager.uid });
-        if (!isEqual(this.mainViewSize, { ...this.mainView.size, id: this.manager.uid })) {
-            this.setMainViewSize(this.view.size);
+        this.synchronizer.onLocalCameraUpdate(camera);
+        const size = this.getStageSize();
+        if (size && !isEqual(size, this.mainViewSize)) {
+            this.setMainViewSize(size);
         }
     };
 
+    private getStageSize(): Size | undefined {
+        const stage = this.manager.boxManager?.teleBoxManager.stageRect;
+        if (stage) {
+            return { width: stage.width, height: stage.height };
+        }
+    }
+
     public addMainViewListener(): void {
         if (this.mainViewIsAddListener) return;
         if (this.view.divElement) {
@@ -205,7 +224,7 @@ export class MainViewProxy {
         this.manager.boxManager?.blurAllBox();
     }
 
-    public setMainViewSize = debounce(size => {
+    public setMainViewSize = debounce((size: Size) => {
         this.store.setMainViewSize({ ...size, id: this.manager.uid });
     }, 50);
 
@@ -225,33 +244,6 @@ export class MainViewProxy {
         callbacks.emit("cameraStateChange", this.cameraState);
     };
 
-    public moveCameraToContian(size: Size): void {
-        if (!isEmpty(size)) {
-            this.view.moveCameraToContain({
-                width: size.width,
-                height: size.height,
-                originX: -size.width / 2,
-                originY: -size.height / 2,
-                animationMode: AnimationMode.Immediately,
-            });
-            this.scale = this.view.camera.scale;
-        }
-    }
-
-    public moveCamera(camera: Camera): void {
-        if (!isEmpty(camera)) {
-            if (isEqual(camera, this.view.camera)) return;
-            const { centerX, centerY, scale } = camera;
-            const needScale = scale * (this.scale || 1);
-            this.view.moveCamera({
-                centerX: centerX,
-                centerY: centerY,
-                scale: needScale,
-                animationMode: AnimationMode.Immediately,
-            });
-        }
-    }
-
     public stop() {
         this.removeCameraListener();
         this.manager.refresher?.remove(Fields.MainViewCamera);