@netless/window-manager 0.4.0-canary.1 → 0.4.0-canary.10

package/src/Utils/Common.ts

@@ -1,7 +1,7 @@
-import { appRegister } from '../Register';
-import { debounce } from 'lodash';
-import { emitter } from '../index';
-import { v4 } from 'uuid';
+import { appRegister } from "../Register";
+import { debounce } from "lodash";
+import { emitter } from "../index";
+import { v4 } from "uuid";
 import type { PublicEvent } from "../index";
 import type { Displayer, ViewVisionMode, Room, View } from "white-web-sdk";
 import type Emittery from "emittery";
@@ -26,7 +26,21 @@ export const setScenePath = (room: Room | undefined, scenePath: string) => {
             room.setScenePath(scenePath);
         }
     }
-}
+};
+
+export const getScenePath = (
+    room: Room | undefined,
+    dir: string | undefined,
+    index: number
+): string | undefined => {
+    if (room && dir) {
+        const scenes = entireScenes(room);
+        const scene = scenes[dir]?.[index];
+        if (scene) {
+            return `${dir}/${scene.name}`;
+        }
+    }
+};
 
 export const setViewMode = (view: View, mode: ViewVisionMode) => {
     if (!(view as any).didRelease && view.mode !== mode) {
@@ -44,7 +58,7 @@ export const emitError = (error: Error) => {
 
 export const addEmitterOnceListener = (event: any, listener: any) => {
     emitter.once(event).then(listener);
-}
+};
 
 export const notifyMainViewModeChange = debounce(
     (callbacks: Emittery<PublicEvent>, mode: ViewVisionMode) => {
@@ -53,9 +67,10 @@ export const notifyMainViewModeChange = debounce(
     200
 );
 
-export const makeValidScenePath = (displayer: Displayer, scenePath: string) => {
-    const scenes = displayer.entireScenes()[scenePath];
-    const firstSceneName = scenes[0].name;
+export const makeValidScenePath = (displayer: Displayer, scenePath: string, index = 0) => {
+    const scenes = entireScenes(displayer)[scenePath];
+    if (!scenes) return;
+    const firstSceneName = scenes[index].name;
     if (scenePath === "/") {
         return `/${firstSceneName}`;
     } else {
@@ -63,9 +78,13 @@ export const makeValidScenePath = (displayer: Displayer, scenePath: string) => {
     }
 };
 
+export const entireScenes = (displayer: Displayer) => {
+    return displayer.entireScenes();
+};
+
 export const isValidScenePath = (scenePath: string) => {
     return scenePath.startsWith("/");
-}
+};
 
 export const ensureValidScenePath = (scenePath: string) => {
     if (scenePath.endsWith("/")) {
@@ -73,11 +92,14 @@ export const ensureValidScenePath = (scenePath: string) => {
     } else {
         return scenePath;
     }
-}
+};
 
 export const getVersionNumber = (version: string) => {
-    const versionString = version.split(".").map(s => s.padStart(2, "0")).join("");
+    const versionString = version
+        .split(".")
+        .map(s => s.padStart(2, "0"))
+        .join("");
     return parseInt(versionString);
 };
 
-export const wait = (time: number) => new Promise((resolve) => setTimeout(resolve, time));
+export const wait = (time: number) => new Promise(resolve => setTimeout(resolve, time));

package/src/Utils/Reactive.ts

@@ -1,5 +1,6 @@
 import { listenUpdated, unlistenUpdated, reaction, UpdateEventKind } from "white-web-sdk";
 import type { AkkoObjectUpdatedProperty , AkkoObjectUpdatedListener } from "white-web-sdk";
+import { isObject } from "lodash";
 
 // 兼容 13 和 14 版本 SDK
 export const onObjectByEvent = (event: UpdateEventKind) => {
@@ -30,7 +31,8 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
 
 export const safeListenPropsUpdated = <T>(
     getProps: () => T,
-    callback: AkkoObjectUpdatedListener<T>
+    callback: AkkoObjectUpdatedListener<T>,
+    onDestroyed?: (props: unknown) => void
   ) => {
     let disposeListenUpdated: (() => void) | null = null;
     const disposeReaction = reaction(
@@ -41,8 +43,12 @@ export const safeListenPropsUpdated = <T>(
           disposeListenUpdated = null;
         }
         const props = getProps();
-        disposeListenUpdated = () => unlistenUpdated(props, callback);
-        listenUpdated(props, callback);
+        if (isObject(props)) {
+          disposeListenUpdated = () => unlistenUpdated(props, callback);
+          listenUpdated(props, callback);
+        } else {
+          onDestroyed?.(props);
+        }
       },
       { fireImmediately: true }
     );

package/src/Utils/RoomHacker.ts

@@ -29,6 +29,18 @@ export const replaceRoomFunction = (room: Room, manager: WindowManager) => {
             },
         });
 
+        Object.defineProperty(room, "canUndoSteps", {
+            get() {
+                return manager.mainView.canUndoSteps;
+            }
+        });
+
+        Object.defineProperty(room, "canRedoSteps", {
+            get() {
+                return manager.mainView.canRedoSteps;
+            }
+        });
+
         room.moveCamera = (camera: Camera) => manager.mainView.moveCamera(camera);
         room.moveCameraToContain = (...args) => manager.moveCameraToContain(...args);
         room.convertToPointInWorld = (...args) => manager.mainView.convertToPointInWorld(...args);
@@ -36,6 +48,9 @@ export const replaceRoomFunction = (room: Room, manager: WindowManager) => {
         room.scenePreview = (...args) => manager.mainView.scenePreview(...args);
         room.fillSceneSnapshot = (...args) => manager.mainView.fillSceneSnapshot(...args);
         room.generateScreenshot = (...args) => manager.mainView.generateScreenshot(...args);
+        room.setMemberState = (...args) => manager.mainView.setMemberState(...args);
+        room.redo = () => manager.mainView.redo();
+        room.undo = () => manager.mainView.undo();
     }
 
 };

package/src/{MainView.ts → View/MainView.ts}

@@ -1,17 +1,16 @@
-import { AnimationMode, reaction, ViewVisionMode } from "white-web-sdk";
-import { Base } from "./Base";
-import { callbacks, emitter } from "./index";
+import { AnimationMode, reaction } from "white-web-sdk";
+import { Base } from "../Base";
+import { callbacks, emitter } from "../index";
 import { createView } from "./ViewManager";
 import { debounce, isEmpty, isEqual } from "lodash";
-import { Fields } from "./AttributesDelegate";
-import { notifyMainViewModeChange, setViewFocusScenePath, setViewMode } from "./Utils/Common";
+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 type { AppManager } from "../AppManager";
 
 export class MainViewProxy extends Base {
     private scale?: number;
-    private cameraStore = this.manager.cameraStore;
     private started = false;
     private mainViewIsAddListener = false;
     private mainView: View;
@@ -23,8 +22,8 @@ export class MainViewProxy extends Base {
         super(manager);
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
-        this.cameraStore.register(this.viewId, this.mainView);
         emitter.once("mainViewMounted").then(() => {
+            this.addMainViewListener();
             setTimeout(() => {
                 this.start();
                 if (!this.mainViewCamera || !this.mainViewSize) {
@@ -34,7 +33,7 @@ export class MainViewProxy extends Base {
         });
         const playgroundSizeChangeListener = () => {
             this.sizeChangeHandler(this.mainViewSize);
-        }
+        };
         this.sideEffectManager.add(() => {
             emitter.on("playgroundSizeChange", playgroundSizeChangeListener);
             return () => emitter.off("playgroundSizeChange", playgroundSizeChangeListener);
@@ -103,9 +102,6 @@ export class MainViewProxy extends Base {
         if (mainViewScenePath) {
             setViewFocusScenePath(mainView, mainViewScenePath);
         }
-        if (!this.store.focus) {
-            this.switchViewModeToWriter();
-        }
         return mainView;
     }
 
@@ -138,7 +134,6 @@ export class MainViewProxy extends Base {
 
     public async mainViewClickHandler(): Promise<void> {
         if (!this.manager.canOperate) return;
-        if (this.view.mode === ViewVisionMode.Writable) return;
         this.store.cleanFocus();
         this.context.blurFocusBox();
     }
@@ -163,17 +158,6 @@ export class MainViewProxy extends Base {
         callbacks.emit("cameraStateChange", this.cameraState);
     };
 
-    public switchViewModeToWriter(): void {
-        if (!this.manager.canOperate) return;
-        if (this.view) {
-            if (this.view.mode === ViewVisionMode.Writable) return;
-            this.cameraStore.switchView(this.viewId, this.mainView, () => {
-                notifyMainViewModeChange(callbacks, ViewVisionMode.Writable);
-                setViewMode(this.view, ViewVisionMode.Writable);
-            });
-        }
-    }
-
     public moveCameraToContian(size: Size): void {
         if (!isEmpty(size)) {
             this.view.moveCameraToContain({
@@ -202,6 +186,7 @@ export class MainViewProxy extends Base {
     }
 
     public stop() {
+        this.removeMainViewListener();
         this.removeCameraListener();
         this.manager.refresher?.remove(Fields.MainViewCamera);
         this.manager.refresher?.remove(Fields.MainViewSize);
@@ -210,7 +195,6 @@ export class MainViewProxy extends Base {
 
     public destroy() {
         this.stop();
-        this.cameraStore.unregister(this.viewId, this.mainView);
         this.sideEffectManager.flushAll();
     }
 }

package/src/View/ViewManager.ts

@@ -0,0 +1,53 @@
+import type { View , Displayer} from "white-web-sdk";
+
+export class ViewManager {
+    public views: Map<string, View> = new Map();
+
+    constructor(private displayer: Displayer) {}
+
+    public createView(id: string): View {
+        const view = createView(this.displayer);
+        this.views.set(id, view);
+        return view;
+    }
+
+    public getView(id: string): View | undefined {
+        return this.views.get(id);
+    }
+
+    public destroyView(id: string): void {
+        const view = this.views.get(id);
+        if (view) {
+            view.release();
+            this.views.delete(id);
+        }
+    }
+
+    public setViewScenePath(id: string, scenePath: string): void {
+        const view = this.views.get(id);
+        if (view) {
+            view.focusScenePath = scenePath;
+        }
+    }
+
+    public destroy() {
+        this.views.forEach(view => {
+            view.release();
+        });
+        this.views.clear();
+    }
+}
+
+
+export const createView = (displayer: Displayer): View => {
+    const view = displayer.views.createView();
+    setDefaultCameraBound(view);
+    return view;
+};
+
+export const setDefaultCameraBound = (view: View) => {
+    view.setCameraBound({
+        maxContentMode: () => 10,
+        minContentMode: () => 0.1,
+    });
+};

package/src/constants.ts

@@ -37,13 +37,11 @@ export enum CursorState {
     Normal = "normal",
 }
 
-export const REQUIRE_VERSION = "2.13.16";
+export const REQUIRE_VERSION = "2.16.0";
 
 export const MIN_WIDTH = 340 / 720;
 export const MIN_HEIGHT = 340 / 720;
 
 export const SET_SCENEPATH_DELAY = 100; // 设置 scenePath 的延迟事件
 
-export const DEFAULT_COLLECTOR_STYLE = { right: "10px", bottom: "15px", position: "absolute" };
-
 export const DEFAULT_CONTAINER_RATIO = 9 / 16;

package/src/index.ts

@@ -1,9 +1,8 @@
-import AppDocsViewer from "@netless/app-docs-viewer";
-import AppMediaPlayer, { setOptions } from "@netless/app-media-player";
 import Emittery from "emittery";
 import pRetry from "p-retry";
 import { AppManager } from "./AppManager";
 import { appRegister } from "./Register";
+import { ContainerResizeObserver } from "./ContainerResizeObserver";
 import { createBoxManager } from "./BoxManager";
 import { CursorManager } from "./Cursor";
 import { DEFAULT_CONTAINER_RATIO, Events, REQUIRE_VERSION } from "./constants";
@@ -11,9 +10,10 @@ import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { isNull, isObject } from "lodash";
 import { log } from "./Utils/log";
+import { ReconnectRefresher } from "./ReconnectRefresher";
 import { replaceRoomFunction } from "./Utils/RoomHacker";
-import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
-import { setupWrapper } from "./ViewManager";
+import { setupBuiltin } from "./BuiltinApps";
+import { setupWrapper } from "./Helper";
 import "./style.css";
 import "@netless/telebox-insider/dist/style.css";
 import {
@@ -59,8 +59,6 @@ import type { NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxColorScheme, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./AppProxy";
 
-const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
-
 export type WindowMangerAttributes = {
     modelValue?: string;
     boxState: TELE_BOX_STATE;
@@ -81,14 +79,14 @@ export type AddAppOptions = {
 
 export type setAppOptions = AddAppOptions & { appOptions?: any };
 
-export type AddAppParams = {
+export type AddAppParams<TAttributes = any> = {
     kind: string;
     // app 地址(本地 app 不需要传)
     src?: string;
     // 窗口配置
     options?: AddAppOptions;
     // 初始化 attributes
-    attributes?: any;
+    attributes?: TAttributes;
 };
 
 export type BaseInsertParams = {
@@ -139,6 +137,7 @@ export type EmitterEvent = {
     observerIdChange: number;
     boxStateChange: string;
     playgroundSizeChange: DOMRect;
+    onReconnected: void;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;
@@ -150,6 +149,8 @@ export type PublicEvent = {
     darkModeChange: boolean;
     prefersColorSchemeChange: TeleBoxColorScheme;
     cameraStateChange: CameraState;
+    mainViewScenePathChange: string;
+    mainViewSceneIndexChange: number;
 };
 
 export type MountParams = {
@@ -171,6 +172,8 @@ export type MountParams = {
 export type CallbacksType = Emittery<PublicEvent>;
 export const callbacks: CallbacksType = new Emittery();
 
+export const reconnectRefresher = new ReconnectRefresher({ emitter });
+
 export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static kind = "WindowManager";
     public static displayer: Displayer;
@@ -181,7 +184,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
     private static isCreated = false;
 
-    public version = "0.4.0-canary.1";
+    public version = __APP_VERSION__;
 
     public appListeners?: AppListeners;
 
@@ -195,6 +198,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     private boxManager?: BoxManager;
     private static params?: MountParams;
 
+    private containerResizeObserver?: ContainerResizeObserver;
+
     constructor(context: InvisiblePluginContext) {
         super(context);
         WindowManager.displayer = context.displayer;
@@ -214,15 +219,16 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             if (room.phase !== RoomPhase.Connected) {
                 throw new Error("[WindowManager]: Room only Connected can be mount");
             }
+            if (room.phase === RoomPhase.Connected) {
+                // redo undo 需要设置这个属性
+                room.disableSerialization = false;
+            }
         }
         if (WindowManager.isCreated) {
             throw new Error("[WindowManager]: Already created cannot be created again");
         }
         let manager = await this.initManager(room);
         this.debug = Boolean(debug);
-        if (this.debug) {
-            setOptions({ verbose: true });
-        }
         log("Already insert room", manager);
 
         if (isRoom(this.displayer)) {
@@ -254,7 +260,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         }
 
         if (params.container) {
-            manager.bindContainer(params.container, params.collectorContainer);
+            manager.bindContainer(params.container);
         }
 
         replaceRoomFunction(room, manager);
@@ -316,12 +322,17 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             style.textContent = overwriteStyles;
             playground.appendChild(style);
         }
-        manager.observePlaygroundSize(playground, sizer, wrapper);
+        manager.containerResizeObserver = ContainerResizeObserver.create(
+            playground,
+            sizer,
+            wrapper,
+            emitter
+        );
         WindowManager.wrapper = wrapper;
         return mainViewElement;
     }
 
-    public bindContainer(container: HTMLElement, collectorContainer?: HTMLElement) {
+    public bindContainer(container: HTMLElement) {
         if (WindowManager.isCreated && WindowManager.container) {
             if (WindowManager.container.firstChild) {
                 container.appendChild(WindowManager.container.firstChild);
@@ -336,7 +347,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
                     params.overwriteStyles
                 );
                 const boxManager = createBoxManager(this, callbacks, emitter, {
-                    collectorContainer: collectorContainer,
+                    collectorContainer: params.collectorContainer,
                     collectorStyles: params.collectorStyles,
                     prefersColorScheme: params.prefersColorScheme,
                 });
@@ -355,6 +366,16 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         WindowManager.container = container;
     }
 
+    public bindCollectorContainer(container: HTMLElement) {
+        if (WindowManager.isCreated && this.boxManager) {
+            this.boxManager.setCollectorContainer(container);
+        } else {
+            if (WindowManager.params) {
+                WindowManager.params.collectorContainer = container;
+            }
+        }
+    }
+
     /**
      * 注册插件
      */
@@ -364,21 +385,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return appRegister.register(params);
     }
 
-    public static setCollectorContainer(container: HTMLElement) {
-        const manager = this.displayer.getInvisiblePlugin(this.kind) as WindowManager;
-        if (this.isCreated && manager) {
-            manager.boxManager?.setCollectorContainer(container);
-        } else {
-            if (this.params) {
-                this.params.collectorContainer = container;
-            }
-        }
-    }
-
     /**
      * 创建一个 app 至白板
      */
-    public async addApp(params: AddAppParams): Promise<string | undefined> {
+    public async addApp<T = any>(params: AddAppParams<T>): Promise<string | undefined> {
         if (this.appManager) {
             if (!params.kind || typeof params.kind !== "string") {
                 throw new ParamsInvalidError();
@@ -475,10 +485,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
      * 设置所有 app 的 readonly 模式
      */
     public setReadonly(readonly: boolean): void {
-        if (this.room?.isWritable) {
-            this.readonly = readonly;
-            this.appManager?.boxManager?.setReadonly(readonly);
-        }
+        this.readonly = readonly;
+        this.boxManager?.setReadonly(readonly);
     }
 
     /**
@@ -558,6 +566,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         }
     }
 
+    public get focused(): string | undefined {
+        return this.attributes.focus;
+    }
+
     /**
      * 查询所有的 App
      */
@@ -698,62 +710,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             }
         }
     }
-
-    private containerResizeObserver?: ResizeObserver;
-
-    private observePlaygroundSize(
-        container: HTMLElement,
-        sizer: HTMLElement,
-        wrapper: HTMLDivElement
-    ) {
-        this.updateSizer(container.getBoundingClientRect(), sizer, wrapper);
-
-        this.containerResizeObserver = new ResizeObserver(entries => {
-            const containerRect = entries[0]?.contentRect;
-            if (containerRect) {
-                this.updateSizer(containerRect, sizer, wrapper);
-                this.cursorManager?.updateContainerRect();
-                this.boxManager?.updateManagerRect();
-                emitter.emit("playgroundSizeChange", containerRect);
-            }
-        });
-
-        this.containerResizeObserver.observe(container);
-    }
-
-    private updateSizer(
-        { width, height }: DOMRectReadOnly,
-        sizer: HTMLElement,
-        wrapper: HTMLDivElement
-    ) {
-        if (width && height) {
-            if (height / width > WindowManager.containerSizeRatio) {
-                height = width * WindowManager.containerSizeRatio;
-                sizer.classList.toggle("netless-window-manager-sizer-horizontal", true);
-            } else {
-                width = height / WindowManager.containerSizeRatio;
-                sizer.classList.toggle("netless-window-manager-sizer-horizontal", false);
-            }
-            wrapper.style.width = `${width}px`;
-            wrapper.style.height = `${height}px`;
-        }
-    }
 }
 
-WindowManager.register({
-    kind: AppDocsViewer.kind,
-    src: AppDocsViewer,
-});
-WindowManager.register({
-    kind: AppMediaPlayer.kind,
-    src: AppMediaPlayer,
-});
-
-export const BuiltinApps = {
-    DocsViewer: AppDocsViewer.kind as string,
-    MediaPlayer: AppMediaPlayer.kind as string,
-};
+setupBuiltin();
 
 export * from "./typings";
 
-export { WhiteWindowSDK } from "./sdk";
+export { BuiltinApps } from "./BuiltinApps";

package/src/shim.d.ts

@@ -4,3 +4,7 @@ declare module "*.svelte" {
     const app: SvelteComponent;
     export default app;
 }
+
+declare global {
+    const __APP_VERSION__: string;
+  }

package/src/style.css

@@ -167,3 +167,9 @@
     display: flex;
     justify-content: center;
 }
+
+.telebox-collector {
+    position: absolute;
+    right: 10px;
+    bottom: 15px;
+}

package/src/typings.ts

@@ -76,3 +76,4 @@ export type AppListenerKeys = keyof AppEmitterEvent;
 export type { AppContext } from "./AppContext";
 export type { ReadonlyTeleBox, TeleBoxRect };
 export type { SceneState, SceneDefinition, View, AnimationMode, Displayer, Room, Player };
+export type { Storage, StorageStateChangedEvent, StorageStateChangedListener } from "./App/Storage";

package/vite.config.js

@@ -1,13 +1,16 @@
 import path from "path";
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
-import { dependencies ,peerDependencies } from "./package.json"
+import { dependencies ,peerDependencies, version } from "./package.json"
 
 
 export default defineConfig(({ mode }) => {
     const isProd = mode === "production";
 
     return {
+        define: {
+            __APP_VERSION__: JSON.stringify(version),
+        },
         plugins: [
             svelte({
                 emitCss: false,

package/dist/Utils/CameraStore.d.ts

@@ -1,15 +0,0 @@
-import type { Camera, View } from "white-web-sdk";
-export declare class CameraStore {
-    private cameras;
-    private listeners;
-    setCamera(id: string, camera: Camera): void;
-    getCamera(id: string): Camera | undefined;
-    deleteCamera(id: string): void;
-    recoverCamera(id: string, view?: View): void;
-    register(id: string, view: View): void;
-    unregister(id: string, view?: View): void;
-    private onListener;
-    private offListener;
-    switchView(id: string, view: View | undefined, callback: () => void): Promise<void>;
-    private getOrCreateListener;
-}

package/dist/ViewManager.d.ts

@@ -1,29 +0,0 @@
-import { Base } from "./Base";
-import type { View, Displayer } from "white-web-sdk";
-import type { AppManager } from "./AppManager";
-export declare class ViewManager extends Base {
-    private views;
-    private timer?;
-    private appTimer?;
-    private mainViewProxy;
-    private displayer;
-    constructor(manager: AppManager);
-    get currentScenePath(): string;
-    get mainView(): View;
-    createView(appId: string): View;
-    destroyView(appId: string): void;
-    private releaseView;
-    getView(appId: string): View | undefined;
-    switchMainViewToWriter(): Promise<boolean> | undefined;
-    freedomAllViews(): void;
-    switchAppToWriter(id: string): void;
-    destroy(): void;
-}
-export declare const createView: (displayer: Displayer) => View;
-export declare const setDefaultCameraBound: (view: View) => void;
-export declare const setupWrapper: (root: HTMLElement) => {
-    playground: HTMLDivElement;
-    wrapper: HTMLDivElement;
-    sizer: HTMLDivElement;
-    mainViewElement: HTMLDivElement;
-};