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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.0-canary.0",
+  "version": "0.4.0-canary.1",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -28,6 +28,7 @@
     "emittery": "^0.9.2",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.1",
+    "side-effect-manager": "^0.1.5",
     "uuid": "^7.0.3",
     "video.js": ">=7"
   },

package/src/AppListener.ts

@@ -46,6 +46,10 @@ export class AppListeners {
                     this.setMainViewScenePathHandler(data.payload);
                     break;
                 }
+                case Events.MoveCameraToContain: {
+                    this.moveCameraToContainHandler(data.payload);
+                    break;
+                }
                 default:
                     break;
             }
@@ -72,4 +76,8 @@ export class AppListeners {
     private setMainViewScenePathHandler = ({ nextScenePath }: { nextScenePath: string }) => {
         setViewFocusScenePath(this.manager.mainView, nextScenePath);
     }
+
+    private moveCameraToContainHandler = (payload: any) => {
+        this.manager.mainView.moveCameraToContain(payload);
+    }
 }

package/src/AppManager.ts

@@ -34,7 +34,7 @@ export class AppManager {
         this.displayer = windowManger.displayer;
         this.store.setContext({
             getAttributes: () => this.attributes,
-            safeSetAttributes: (attributes) => this.safeSetAttributes(attributes),
+            safeSetAttributes: attributes => this.safeSetAttributes(attributes),
             safeUpdateAttributes: (keys, val) => this.safeUpdateAttributes(keys, val),
         });
         this.cameraStore = new CameraStore();
@@ -44,7 +44,9 @@ export class AppManager {
         this.displayer.callbacks.on(this.eventName, this.displayerStateListener);
         this.appListeners.addListeners();
 
-        this.refresher = new ReconnectRefresher(this.room, this);
+        this.refresher = new ReconnectRefresher(this.room, {
+            notifyReconnected: () => this.notifyReconnected(),
+        });
 
         emitter.once("onCreated").then(() => this.onCreated());
 
@@ -116,11 +118,11 @@ export class AppManager {
     public async attributesUpdateCallback(apps: any) {
         if (apps && WindowManager.container) {
             const appIds = Object.keys(apps);
-            const appsWithCreatedAt = appIds.map(appId =>  {
+            const appsWithCreatedAt = appIds.map(appId => {
                 return {
                     id: appId,
                     createdAt: apps[appId].createdAt,
-                }
+                };
             });
             for (const { id } of sortBy(appsWithCreatedAt, "createdAt")) {
                 if (!this.appProxies.has(id) && !this.appStatus.has(id)) {

package/src/AppProxy.ts

@@ -42,7 +42,7 @@ export class AppProxy extends Base {
     public isAddApp: boolean;
     private status: "normal" | "destroyed" = "normal";
     private stateKey: string;
-    private setupResult?: any;
+    private appResult?: NetlessApp<any>;
     private appContext?: AppContext<any, any>;
 
     constructor(
@@ -171,7 +171,7 @@ export class AppProxy extends Base {
                 setTimeout(async () => {
                     // 延迟执行 setup, 防止初始化的属性没有更新成功
                     const result = await app.setup(context);
-                    this.setupResult = result;
+                    this.appResult = result;
                     appRegister.notifyApp(app.kind, "created", { appId, result });
                     this.afterSetupApp(boxInitState);
                     this.fixMobileSize();

package/src/BoxManager.ts

@@ -143,7 +143,6 @@ export class BoxManager {
             callbacks.emit("prefersColorSchemeChange", colorScheme);
         });
         this.teleBoxManager.events.on("z_index", box => {
-            console.log("on z_index", box.id, box.zIndex);
             this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
         });
     }

package/src/MainView.ts

@@ -5,6 +5,7 @@ import { createView } from "./ViewManager";
 import { debounce, isEmpty, isEqual } from "lodash";
 import { Fields } from "./AttributesDelegate";
 import { notifyMainViewModeChange, setViewFocusScenePath, setViewMode } from "./Utils/Common";
+import { SideEffectManager } from "side-effect-manager";
 import type { Camera, Size, View } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 
@@ -16,6 +17,8 @@ export class MainViewProxy extends Base {
     private mainView: View;
     private viewId = "mainView";
 
+    private sideEffectManager = new SideEffectManager();
+
     constructor(manager: AppManager) {
         super(manager);
         this.mainView = this.createMainView();
@@ -29,8 +32,12 @@ export class MainViewProxy extends Base {
                 }
             }, 200); // 等待 mainView 挂载完毕再进行监听，否则会触发不必要的 onSizeUpdated
         });
-        emitter.on("playgroundSizeChange", () => {
+        const playgroundSizeChangeListener = () => {
             this.sizeChangeHandler(this.mainViewSize);
+        }
+        this.sideEffectManager.add(() => {
+            emitter.on("playgroundSizeChange", playgroundSizeChangeListener);
+            return () => emitter.off("playgroundSizeChange", playgroundSizeChangeListener);
         });
     }
 
@@ -75,7 +82,7 @@ export class MainViewProxy extends Base {
         );
     };
 
-    private sizeChangeHandler =  debounce((size: Size) => {
+    private sizeChangeHandler = debounce((size: Size) => {
         if (size) {
             this.moveCameraToContian(size);
             this.moveCamera(this.mainViewCamera);
@@ -104,7 +111,7 @@ export class MainViewProxy extends Base {
 
     private onCameraUpdatedByDevice = (camera: Camera) => {
         this.store.setMainViewCamera({ ...camera, id: this.context.uid });
-        if (!isEqual(this.mainViewSize, {...this.mainView.size, id: this.context.uid})) {
+        if (!isEqual(this.mainViewSize, { ...this.mainView.size, id: this.context.uid })) {
             this.setMainViewSize(this.view.size);
         }
     };
@@ -204,5 +211,6 @@ export class MainViewProxy extends Base {
     public destroy() {
         this.stop();
         this.cameraStore.unregister(this.viewId, this.mainView);
+        this.sideEffectManager.flushAll();
     }
 }

package/src/ReconnectRefresher.ts

@@ -2,7 +2,10 @@ import { isFunction, debounce } from "lodash";
 import { log } from "./Utils/log";
 import { RoomPhase } from "white-web-sdk";
 import type { Room } from "white-web-sdk";
-import type { AppManager } from "./AppManager";
+
+export type ReconnectRefresherContext = {
+    notifyReconnected: () => void;
+}
 
 // 白板重连之后会刷新所有的对象，导致 listener 失效, 所以这里在重连之后重新对所有对象进行监听
 export class ReconnectRefresher {
@@ -11,7 +14,7 @@ export class ReconnectRefresher {
     private reactors: Map<string, any> = new Map();
     private disposers: Map<string, any> = new Map();
 
-    constructor(room: Room | undefined, private manager: AppManager) {
+    constructor(room: Room | undefined, private ctx: ReconnectRefresherContext) {
         this.room = room;
         this.phase = room?.phase;
         room?.callbacks.on("onPhaseChanged", this.onPhaseChanged);
@@ -32,7 +35,7 @@ export class ReconnectRefresher {
                 this.disposers.set(id, func());
             }
         });
-        this.manager.notifyReconnected();
+        this.ctx.notifyReconnected();
     }, 3000);
 
     private releaseDisposers() {

package/src/constants.ts

@@ -10,6 +10,7 @@ export enum Events {
     SetMainViewScenePath = "SetMainViewScenePath",
     SetMainViewSceneIndex = "SetMainViewSceneIndex",
     SwitchViewsToFreedom = "SwitchViewsToFreedom",
+    MoveCameraToContain = "MoveCameraToContain"
 }
 
 export const MagixEventName = "__WindowManger";

package/src/index.ts

@@ -6,7 +6,7 @@ import { AppManager } from "./AppManager";
 import { appRegister } from "./Register";
 import { createBoxManager } from "./BoxManager";
 import { CursorManager } from "./Cursor";
-import { DEFAULT_CONTAINER_RATIO, REQUIRE_VERSION } from "./constants";
+import { DEFAULT_CONTAINER_RATIO, Events, REQUIRE_VERSION } from "./constants";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { isNull, isObject } from "lodash";
@@ -181,7 +181,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
     private static isCreated = false;
 
-    public version = "0.4.0-canary.0";
+    public version = "0.4.0-canary.1";
 
     public appListeners?: AppListeners;
 
@@ -317,34 +317,42 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             playground.appendChild(style);
         }
         manager.observePlaygroundSize(playground, sizer, wrapper);
+        WindowManager.wrapper = wrapper;
         return mainViewElement;
     }
 
     public bindContainer(container: HTMLElement, collectorContainer?: HTMLElement) {
-        if (WindowManager.params) {
-            const params = WindowManager.params;
-            const mainViewElement = WindowManager.initContainer(
-                this,
-                container,
-                params.chessboard,
-                params.overwriteStyles
-            );
-            const boxManager = createBoxManager(this, callbacks, emitter, {
-                collectorContainer: collectorContainer,
-                collectorStyles: params.collectorStyles,
-                prefersColorScheme: params.prefersColorScheme,
-            });
-            this.boxManager = boxManager;
-            this.appManager?.setBoxManager(boxManager);
-            this.bindMainView(mainViewElement, params.disableCameraTransform);
-            this.boxManager.updateManagerRect();
-            this.appManager?.refresh();
-            this.appManager?.resetMaximized();
-            this.appManager?.resetMinimized();
-            if (WindowManager.wrapper) {
-                this.cursorManager?.setupWrapper(WindowManager.wrapper);
+        if (WindowManager.isCreated && WindowManager.container) {
+            if (WindowManager.container.firstChild) {
+                container.appendChild(WindowManager.container.firstChild);
+            }
+        } else {
+            if (WindowManager.params) {
+                const params = WindowManager.params;
+                const mainViewElement = WindowManager.initContainer(
+                    this,
+                    container,
+                    params.chessboard,
+                    params.overwriteStyles
+                );
+                const boxManager = createBoxManager(this, callbacks, emitter, {
+                    collectorContainer: collectorContainer,
+                    collectorStyles: params.collectorStyles,
+                    prefersColorScheme: params.prefersColorScheme,
+                });
+                this.boxManager = boxManager;
+                this.appManager?.setBoxManager(boxManager);
+                this.bindMainView(mainViewElement, params.disableCameraTransform);
+                if (WindowManager.wrapper) {
+                    this.cursorManager?.setupWrapper(WindowManager.wrapper);
+                }
             }
         }
+        this.boxManager?.updateManagerRect();
+        this.appManager?.refresh();
+        this.appManager?.resetMaximized();
+        this.appManager?.resetMinimized();
+        WindowManager.container = container;
     }
 
     /**
@@ -356,15 +364,6 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return appRegister.register(params);
     }
 
-    public static setContainer(container: HTMLElement) {
-        if (this.isCreated && WindowManager.container) {
-            if (WindowManager.container.firstChild) {
-                container.appendChild(WindowManager.container.firstChild);
-            }
-        }
-        WindowManager.container = container;
-    }
-
     public static setCollectorContainer(container: HTMLElement) {
         const manager = this.displayer.getInvisiblePlugin(this.kind) as WindowManager;
         if (this.isCreated && manager) {
@@ -593,6 +592,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             }>
     ): void {
         this.mainView.moveCameraToContain(rectangle);
+        this.appManager?.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
+        setTimeout(() => {
+            this.appManager?.mainViewProxy.setCameraAndSize();
+        }, 1000);
     }
 
     public convertToPointInWorld(point: Point): Point {