@netless/window-manager 0.3.8-canary.3 → 0.3.10-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.3.8-canary.3",
+  "version": "0.3.10-canary.0",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -24,7 +24,7 @@
     "@juggle/resize-observer": "^3.3.1",
     "@netless/app-docs-viewer": "^0.1.21",
     "@netless/app-media-player": "0.1.0-beta.5",
-    "@netless/telebox-insider": "0.2.6",
+    "@netless/telebox-insider": "0.2.7",
     "emittery": "^0.9.2",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.1",
@@ -56,6 +56,6 @@
     "typescript": "^4.3.5",
     "video.js": "^7.14.3",
     "vite": "^2.5.3",
-    "white-web-sdk": "^2.15.8"
+    "white-web-sdk": "^2.15.12"
   }
 }

package/src/AppManager.ts

@@ -160,7 +160,7 @@ export class AppManager {
         const ids = Object.keys(apps);
         this.appProxies.forEach((appProxy, id) => {
             if (!ids.includes(id)) {
-                appProxy.destroy(true, false);
+                appProxy.destroy(true, false, true);
             }
         });
     };
@@ -202,10 +202,11 @@ export class AppManager {
 
     private afterAddApp(appProxy: AppProxy | undefined) {
         if (appProxy && appProxy.box) {
+            const box = appProxy.box;
             emitter.emit("move", {
                 appId: appProxy.id,
-                x: appProxy.box?.x,
-                y: appProxy.box?.y,
+                x: box?.intrinsicX,
+                y: box?.intrinsicY,
             });
         }
         if (this.boxManager.minimized) {
@@ -216,7 +217,7 @@ export class AppManager {
     public async closeApp(appId: string) {
         const appProxy = this.appProxies.get(appId);
         if (appProxy) {
-            appProxy.destroy(true, true);
+            appProxy.destroy(true, true, false);
         }
     }
 
@@ -414,10 +415,12 @@ export class AppManager {
         }
     }
 
-    public notifyReconnected() {
-        this.appProxies.forEach(appProxy => {
-            appProxy.onReconnected();
+    public async notifyReconnected() {
+        const appProxies = Array.from(this.appProxies.values());
+        const reconnected = appProxies.map(appProxy => {
+            return appProxy.onReconnected();
         });
+        await Promise.all(reconnected);
     }
 
     public notifyContainerRectUpdate(rect: TeleBoxRect) {
@@ -441,7 +444,7 @@ export class AppManager {
         emitter.clearListeners();
         if (this.appProxies.size) {
             this.appProxies.forEach(appProxy => {
-                appProxy.destroy(true, false);
+                appProxy.destroy(true, false, true);
             });
         }
         this.viewManager.destroy();

package/src/AppProxy.ts

@@ -101,7 +101,10 @@ export class AppProxy extends Base {
         this.manager.safeUpdateAttributes(["apps", this.id, Fields.FullPath], path);
     }
 
-    public async baseInsertApp(focus?: boolean): Promise<{ appId: string; app: NetlessApp }> {
+    public async baseInsertApp(
+        skipUpdate = false,
+        focus?: boolean
+    ): Promise<{ appId: string; app: NetlessApp }> {
         const params = this.params;
         if (!params.kind) {
             throw new Error("[WindowManager]: kind require");
@@ -109,7 +112,7 @@ export class AppProxy extends Base {
         const appImpl = await appRegister.appClasses.get(params.kind)?.();
         const appParams = appRegister.registered.get(params.kind);
         if (appImpl) {
-            await this.setupApp(this.id, appImpl, params.options, appParams?.appOptions);
+            await this.setupApp(this.id, skipUpdate, appImpl, params.options, appParams?.appOptions);
         } else {
             throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
         }
@@ -139,6 +142,7 @@ export class AppProxy extends Base {
 
     private async setupApp(
         appId: string,
+        skipUpdate: boolean,
         app: NetlessApp,
         options?: setAppOptions,
         appOptions?: any
@@ -147,8 +151,11 @@ export class AppProxy extends Base {
         const context = new AppContext(this.manager, appId, this, appOptions);
         try {
             emitter.once(`${appId}${Events.WindowCreated}` as any).then(async () => {
-                const boxInitState = this.getAppInitState(appId);
-                this.boxManager.updateBoxState(boxInitState);
+                let boxInitState: AppInitState | undefined;
+                if (!skipUpdate) {
+                    boxInitState = this.getAppInitState(appId);
+                    this.boxManager.updateBoxState(boxInitState);
+                }
                 this.appEmitter.onAny(this.appListener);
                 this.appAttributesUpdateListener(appId);
                 this.setViewFocusScenePath();
@@ -204,10 +211,12 @@ export class AppProxy extends Base {
 
     public async onReconnected() {
         this.appEmitter.emit("reconnected", undefined);
-        await this.destroy(true, false);
+        const currentAppState = this.getAppInitState(this.id);
+        await this.destroy(true, false, true);
         const params = this.params;
         const appProxy = new AppProxy(params, this.manager, this.id, this.isAddApp);
-        await appProxy.baseInsertApp(this.store.focus === this.id);
+        await appProxy.baseInsertApp(true, this.store.focus === this.id);
+        this.boxManager.updateBoxState(currentAppState);
     }
 
     public switchToWritable() {
@@ -236,8 +245,8 @@ export class AppProxy extends Base {
         const focus = this.store.focus;
         const size = attrs?.[AppAttributes.Size];
         const sceneIndex = attrs?.[AppAttributes.SceneIndex];
-        const maximized = this.manager.attributes?.["maximized"];
-        const minimized = this.manager.attributes?.["minimized"];
+        const maximized = this.attributes?.["maximized"];
+        const minimized = this.attributes?.["minimized"];
         let payload = { maximized, minimized } as AppInitState;
         if (position) {
             payload = { ...payload, id: id, x: position.x, y: position.y };
@@ -289,7 +298,7 @@ export class AppProxy extends Base {
                 }
                 case AppEvents.destroy: {
                     if (this.status === "destroyed") return;
-                    this.destroy(true, data?.error);
+                    this.destroy(true, false, true, data?.error);
                     if (data?.error) {
                         console.error(data?.error);
                     }
@@ -340,7 +349,12 @@ export class AppProxy extends Base {
         return view;
     }
 
-    public async destroy(needCloseBox: boolean, cleanAttrs: boolean, error?: Error) {
+    public async destroy(
+        needCloseBox: boolean,
+        cleanAttrs: boolean,
+        skipUpdate: boolean,
+        error?: Error
+    ) {
         if (this.status === "destroyed") return;
         this.status = "destroyed";
         await appRegister.notifyApp(this.kind, "destroy", { appId: this.id });
@@ -348,7 +362,7 @@ export class AppProxy extends Base {
         this.appEmitter.clearListeners();
         emitter.emit(`destroy-${this.id}` as any, { error });
         if (needCloseBox) {
-            this.boxManager.closeBox(this.id);
+            this.boxManager.closeBox(this.id, skipUpdate);
         }
         if (cleanAttrs) {
             this.store.cleanAppAttributes(this.id);
@@ -362,6 +376,6 @@ export class AppProxy extends Base {
     }
 
     public close(): Promise<void> {
-        return this.destroy(true, true);
+        return this.destroy(true, true, false);
     }
 }

package/src/BoxManager.ts

@@ -188,8 +188,8 @@ export class BoxManager {
         return this.teleBoxManager.queryOne({ id: appId });
     }
 
-    public closeBox(appId: string): ReadonlyTeleBox | undefined {
-        return this.teleBoxManager.remove(appId);
+    public closeBox(appId: string, skipUpdate = false): ReadonlyTeleBox | undefined {
+        return this.teleBoxManager.remove(appId, skipUpdate);
     }
 
     public boxIsFocus(appId: string): boolean | undefined {

package/src/MainView.ts

@@ -1,9 +1,10 @@
-import { AnimationMode, reaction, ViewVisionMode } from 'white-web-sdk';
-import { Base } from './Base';
-import { callbacks, emitter } from './index';
-import { debounce, isEmpty, isEqual } from 'lodash';
-import { Fields } from './AttributesDelegate';
-import { notifyMainViewModeChange, setViewFocusScenePath, setViewMode } from './Utils/Common';
+import { AnimationMode, reaction, ViewVisionMode } 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 type { Camera, Size, View } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 
@@ -24,7 +25,7 @@ export class MainViewProxy extends Base {
             setTimeout(() => {
                 this.start();
             }, 200); // 等待 mainView 挂载完毕再进行监听，否则会触发不必要的 onSizeUpdated
-        })
+        });
     }
 
     private get mainViewCamera() {
@@ -50,7 +51,7 @@ export class MainViewProxy extends Base {
     }
 
     public setCameraAndSize(): void {
-        this.store.setMainViewCamera({ ...this.mainView.camera, id: this.context.uid  });
+        this.store.setMainViewCamera({ ...this.mainView.camera, id: this.context.uid });
         this.store.setMainViewSize({ ...this.mainView.size, id: this.context.uid });
     }
 
@@ -65,8 +66,8 @@ export class MainViewProxy extends Base {
             {
                 fireImmediately: true,
             }
-        )
-    }
+        );
+    };
 
     private sizeReaction = () => {
         return reaction(
@@ -80,15 +81,15 @@ export class MainViewProxy extends Base {
             {
                 fireImmediately: true,
             }
-        )
-    }
+        );
+    };
 
     public get view(): View {
         return this.mainView;
     }
 
     public createMainView(): View {
-        const mainView = this.manager.displayer.views.createView();
+        const mainView = createView(this.manager.displayer);
         mainView.callbacks.on("onSizeUpdated", () => {
             this.context.updateManagerRect();
         });
@@ -103,11 +104,11 @@ export class MainViewProxy extends Base {
     }
 
     private cameraListener = (camera: Camera) => {
-        this.store.setMainViewCamera({ ...camera, id: this.context.uid});
+        this.store.setMainViewCamera({ ...camera, id: this.context.uid });
         if (this.store.getMainViewSize()?.id !== this.context.uid) {
             this.setMainViewSize(this.view.size);
         }
-    }
+    };
 
     public addMainViewListener(): void {
         if (this.mainViewIsAddListener) return;
@@ -138,7 +139,7 @@ export class MainViewProxy extends Base {
 
     private sizeListener = (size: Size) => {
         this.setMainViewSize(size);
-    }
+    };
 
     public setMainViewSize = debounce(size => {
         this.store.setMainViewSize({ ...size, id: this.context.uid });

package/src/index.ts

@@ -1,28 +1,28 @@
-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 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 { CursorManager } from "./Cursor";
+import { DEFAULT_CONTAINER_RATIO, REQUIRE_VERSION } from "./constants";
+import { Fields } from "./AttributesDelegate";
+import { initDb } from "./Register/storage";
+import { isNull, isObject } from "lodash";
+import { log } from "./Utils/log";
+import { replaceRoomFunction } from "./Utils/RoomHacker";
+import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
+import { setupWrapper } from "./ViewManager";
+import "./style.css";
+import "@netless/telebox-insider/dist/style.css";
 import {
     addEmitterOnceListener,
     ensureValidScenePath,
     getVersionNumber,
     isValidScenePath,
-    wait
-    } from './Utils/Common';
-import { AppManager } from './AppManager';
-import { appRegister } from './Register';
-import { CursorManager } from './Cursor';
-import { DEFAULT_CONTAINER_RATIO, REQUIRE_VERSION } from './constants';
-import { Fields } from './AttributesDelegate';
-import { initDb } from './Register/storage';
-import { isNull, isObject } from 'lodash';
-import { log } from './Utils/log';
-import { replaceRoomFunction } from './Utils/RoomHacker';
-import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
-import { setupWrapper } from './ViewManager';
-import './style.css';
-import '@netless/telebox-insider/dist/style.css';
-import type { TELE_BOX_STATE } from './BoxManager';
+    wait,
+} from "./Utils/Common";
+import type { TELE_BOX_STATE } from "./BoxManager";
 import {
     AppCreateError,
     AppManagerNotInitError,
@@ -50,7 +50,8 @@ import type {
     CameraBound,
     Point,
     Rectangle,
-    ViewVisionMode} from "white-web-sdk";
+    ViewVisionMode,
+} from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
 import type { NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxState } from "@netless/telebox-insider";
@@ -122,18 +123,18 @@ export type AppInitState = {
 };
 
 export type EmitterEvent = {
-    onCreated: undefined,
-    InitReplay: AppInitState,
-    move: { appId: string, x: number, y: number },
-    focus: { appId: string },
-    close: { appId: string },
-    resize: { appId: string, width: number, height: number, x?: number, y?: number },
-    error: Error,
-    seek: number,
-    mainViewMounted: undefined,
+    onCreated: undefined;
+    InitReplay: AppInitState;
+    move: { appId: string; x: number; y: number };
+    focus: { appId: string };
+    close: { appId: string };
+    resize: { appId: string; width: number; height: number; x?: number; y?: number };
+    error: Error;
+    seek: number;
+    mainViewMounted: undefined;
     observerIdChange: number;
     boxStateChange: string;
-}
+};
 
 export const emitter: Emittery<EmitterEvent> = new Emittery();
 
@@ -169,7 +170,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
     private static isCreated = false;
 
-    public version = "0.3.8-canary.3";
+    public version = "0.3.10-canary.0";
 
     public appListeners?: AppListeners;
 
@@ -272,13 +273,16 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
                 throw new Error("[WindowManager]: init InvisiblePlugin failed");
             }
         } else {
-            await pRetry(async (count) => {
-                manager = await this.initManager(room);
-                if (!manager) {
-                    log(`manager is empty. retrying ${count}`)
-                    throw new Error();
-                }
-            }, { retries: 10 });
+            await pRetry(
+                async count => {
+                    manager = await this.initManager(room);
+                    if (!manager) {
+                        log(`manager is empty. retrying ${count}`);
+                        throw new Error();
+                    }
+                },
+                { retries: 10 }
+            );
         }
 
         if (containerSizeRatio) {
@@ -327,12 +331,18 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
                     } catch (error) {
                         throw new Error("[WindowManger]: room must be switched to be writable");
                     }
-                    manager = (await room.createInvisiblePlugin(WindowManager, {})) as WindowManager;
+                    manager = (await room.createInvisiblePlugin(
+                        WindowManager,
+                        {}
+                    )) as WindowManager;
                     manager.ensureAttributes();
                     await wait(500);
                     await room.setWritable(false);
                 } else {
-                    manager = (await room.createInvisiblePlugin(WindowManager, {})) as WindowManager;
+                    manager = (await room.createInvisiblePlugin(
+                        WindowManager,
+                        {}
+                    )) as WindowManager;
                 }
             }
         }
@@ -342,7 +352,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     /**
      * 注册插件
      */
-     public static register<AppOptions = any, SetupResult = any, Attributes = any>(
+    public static register<AppOptions = any, SetupResult = any, Attributes = any>(
         params: RegisterParams<AppOptions, SetupResult, Attributes>
     ): Promise<void> {
         return appRegister.register(params);
@@ -406,7 +416,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
                 }
             }
             if (scenePath && scenes === undefined) {
-                this.room?.putScenes(scenePath, [{}])
+                this.room?.putScenes(scenePath, [{}]);
             }
         }
         return isDynamicPPT;
@@ -532,13 +542,18 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return this.appManager?.closeApp(appId);
     }
 
-    public moveCamera(camera: Partial<Camera> & { animationMode?: AnimationMode | undefined }): void {
+    public moveCamera(
+        camera: Partial<Camera> & { animationMode?: AnimationMode | undefined }
+    ): void {
         this.mainView.moveCamera(camera);
     }
 
-    public moveCameraToContain(rectangle: Rectangle & Readonly<{
-        animationMode?: AnimationMode;
-    }>): void {
+    public moveCameraToContain(
+        rectangle: Rectangle &
+            Readonly<{
+                animationMode?: AnimationMode;
+            }>
+    ): void {
         this.mainView.moveCameraToContain(rectangle);
     }
 

package/src/viewManager.ts

@@ -3,7 +3,7 @@ import { callbacks, WindowManager } from "./index";
 import { reaction, ViewVisionMode } from "white-web-sdk";
 import { SET_SCENEPATH_DELAY } from "./constants";
 import { notifyMainViewModeChange, setScenePath, setViewMode } from "./Utils/Common";
-import type { View } from "white-web-sdk";
+import type { View, Displayer } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 
 export class ViewManager extends Base {
@@ -44,7 +44,7 @@ export class ViewManager extends Base {
     }
 
     public createView(appId: string): View {
-        const view = this.displayer.views.createView();
+        const view = createView(this.displayer);
         setViewMode(view, ViewVisionMode.Freedom);
         this.views.set(appId, view);
         return view;
@@ -134,6 +134,19 @@ export class ViewManager extends Base {
     }
 }
 
+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,
+    });
+};
+
 export const setupWrapper = (
     root: HTMLElement
 ): {