@netless/window-manager 0.4.19 → 0.4.22

package/dist/typings.d.ts

@@ -73,3 +73,4 @@ export type { AppContext } from "./App/AppContext";
 export type { ReadonlyTeleBox, TeleBoxRect };
 export type { SceneState, SceneDefinition, View, AnimationMode, Displayer, Room, Player };
 export type { Storage, StorageStateChangedEvent, StorageStateChangedListener } from "./App/Storage";
+export * from "./Page";

package/docs/api.md

@@ -27,6 +27,7 @@
     - [`nextPage`](#nextPage)
     - [`prevPage`](#prevPage)
     - [`addPage`](#addPage)
+    - [`refresh`](#refresh)
   - [实例属性](#prototypes)
   - [事件回调](#events)
 
@@ -212,6 +213,13 @@ manager.addPage({ after: true }) // 在当前页后添加一页
 manager.addPage({ scene: { name: "page2" } }) // 传入 page 信息
 ```
 
+<h3 id="refresh">refresh</h3>
+
+> 刷新 `manager` 的内部状态, 用于从其他房间 `copy` `attributes`
+
+```ts
+manager.refresh()
+```
 
 <br>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.19",
+  "version": "0.4.22",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",

package/src/AppListener.ts

@@ -59,6 +59,14 @@ export class AppListeners {
                     this.rootDirRemovedHandler();
                     break;
                 }
+                case Events.Refresh: {
+                    this.refreshHandler();
+                    break;
+                }
+                case Events.InitMainViewCamera: {
+                    this.initMainViewCameraHandler();
+                    break;
+                }
                 default:
                     break;
             }
@@ -103,4 +111,12 @@ export class AppListeners {
         this.manager.mainViewProxy.rebind();
         emitter.emit("rootDirRemoved");
     }
+
+    private refreshHandler = () => {
+        this.manager.windowManger._refresh();
+    }
+
+    private initMainViewCameraHandler = () => {
+        this.manager.mainViewProxy.addCameraReaction();
+    }
 }

package/src/AppManager.ts

@@ -5,9 +5,9 @@ import { AppProxy } from "./App";
 import { appRegister } from "./Register";
 import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
 import { callbacks } from "./callback";
+import { debounce, get, isInteger, orderBy } from "lodash";
 import { emitter } from "./InternalEmitter";
 import { Fields, store } from "./AttributesDelegate";
-import { get, isInteger, orderBy } from "lodash";
 import { log } from "./Utils/log";
 import { MainViewProxy } from "./View/MainView";
 import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
@@ -132,7 +132,7 @@ export class AppManager {
     public async onRootDirRemoved(needClose = true) {
         this.setMainViewScenePath(INIT_DIR);
         this.createRootDirScenesCallback();
-        
+
         for (const [id, appProxy] of this.appProxies.entries()) {
             if (appProxy.view) {
                 await this.closeApp(id, needClose);
@@ -251,19 +251,9 @@ export class AppManager {
         await this.attributesUpdateCallback(this.attributes.apps);
         emitter.emit("updateManagerRect");
         emitter.onAny(this.boxEventListener);
-        this.refresher?.add("apps", () => {
-            return safeListenPropsUpdated(
-                () => this.attributes.apps,
-                () => {
-                    this.attributesUpdateCallback(this.attributes.apps);
-                }
-            );
-        });
-        this.refresher?.add("appsClose", () => {
-            return onObjectRemoved(this.attributes.apps, () => {
-                this.onAppDelete(this.attributes.apps);
-            });
-        });
+
+        this.addAppsChangeListener();
+        this.addAppCloseListener();
         this.refresher?.add("maximized", () => {
             return autorun(() => {
                 const maximized = this.attributes.maximized;
@@ -313,6 +303,25 @@ export class AppManager {
         });
     }
 
+    public addAppsChangeListener = () => {
+        this.refresher?.add("apps", () => {
+            return safeListenPropsUpdated(
+                () => this.attributes.apps,
+                () => {
+                    this.attributesUpdateCallback(this.attributes.apps);
+                }
+            );
+        });
+    };
+
+    public addAppCloseListener = () => {
+        this.refresher?.add("appsClose", () => {
+            return onObjectRemoved(this.attributes.apps, () => {
+                this.onAppDelete(this.attributes.apps);
+            });
+        });
+    };
+
     private onMainViewIndexChange = (index: number) => {
         if (index !== undefined && this._prevSceneIndex !== index) {
             callbacks.emit("mainViewSceneIndexChange", index);
@@ -322,7 +331,7 @@ export class AppManager {
             }
             this._prevSceneIndex = index;
         }
-    }
+    };
 
     private onFocusChange = (focused: string | undefined) => {
         if (this._prevFocused !== focused) {
@@ -340,7 +349,12 @@ export class AppManager {
                 }, 0);
             }
         }
-    }
+    };
+
+    public attributesUpdateCallback = debounce(
+        (apps: any) => this._attributesUpdateCallback(apps),
+        100
+    );
 
     /**
      * 插件更新 attributes 时的回调
@@ -348,7 +362,7 @@ export class AppManager {
      * @param {*} attributes
      * @memberof WindowManager
      */
-    public async attributesUpdateCallback(apps: any) {
+    public async _attributesUpdateCallback(apps: any) {
         if (apps && WindowManager.container) {
             const appIds = Object.keys(apps);
             if (appIds.length === 0) {
@@ -731,7 +745,7 @@ export class AppManager {
 
     public updateRootDirRemoving = (removing: boolean) => {
         this.rootDirRemoving = removing;
-    }
+    };
 
     public dispatchInternalEvent(event: Events, payload?: any) {
         this.safeDispatchMagixEvent(MagixEventName, {

package/src/ReconnectRefresher.ts

@@ -36,6 +36,10 @@ export class ReconnectRefresher {
     };
 
     private onReconnected = debounce(() => {
+        this._onReconnected();
+    }, 3000);
+
+    private _onReconnected = () => {
         log("onReconnected refresh reactors");
         this.releaseDisposers();
         this.reactors.forEach((func, id) => {
@@ -44,7 +48,7 @@ export class ReconnectRefresher {
             }
         });
         this.ctx.emitter.emit("onReconnected", undefined);
-    }, 3000);
+    }
 
     private releaseDisposers() {
         this.disposers.forEach(disposer => {
@@ -55,7 +59,15 @@ export class ReconnectRefresher {
         this.disposers.clear();
     }
 
+    public refresh() {
+        this._onReconnected();
+    }
+
     public add(id: string, func: any) {
+        const disposer = this.disposers.get(id);
+        if (disposer && isFunction(disposer)) {
+            disposer();
+        }
         if (isFunction(func)) {
             this.reactors.set(id, func);
             this.disposers.set(id, func());

package/src/View/MainView.ts

@@ -8,6 +8,7 @@ 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";
 
 export class MainViewProxy {
     private scale?: number;
@@ -22,13 +23,12 @@ export class MainViewProxy {
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
         emitter.once("mainViewMounted").then(() => {
-            setTimeout(() => {
-                this.addMainViewListener();
-                this.start();
-                if (!this.mainViewCamera || !this.mainViewSize) {
-                    this.setCameraAndSize();
-                }
-            }, 200); // 等待 mainView 挂载完毕再进行监听，否则会触发不必要的 onSizeUpdated
+            this.addMainViewListener();
+            this.start();
+            if (!this.mainViewCamera || !this.mainViewSize) {
+                manager.dispatchInternalEvent(Events.InitMainViewCamera)
+                this.setCameraAndSize();
+            }
         });
         const playgroundSizeChangeListener = () => {
             this.sizeChangeHandler(this.mainViewSize);
@@ -56,10 +56,14 @@ export class MainViewProxy {
         if (this.started) return;
         this.sizeChangeHandler(this.mainViewSize);
         this.addCameraListener();
-        this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
+        this.addCameraReaction();
         this.started = true;
     }
 
+    public addCameraReaction = () => {
+        this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
+    }
+
     public setCameraAndSize(): void {
         this.store.setMainViewCamera({ ...this.mainView.camera, id: this.manager.uid });
         this.store.setMainViewSize({ ...this.mainView.size, id: this.manager.uid });
@@ -73,10 +77,7 @@ export class MainViewProxy {
                     this.moveCameraToContian(this.mainViewSize);
                     this.moveCamera(camera);
                 }
-            },
-            {
-                fireImmediately: true,
-            }
+            }, { fireImmediately: true }
         );
     };
 

package/src/constants.ts

@@ -14,6 +14,8 @@ export enum Events {
     MoveCameraToContain = "MoveCameraToContain",
     CursorMove = "CursorMove",
     RootDirRemoved = "RootDirRemoved",
+    Refresh = "Refresh",
+    InitMainViewCamera = "InitMainViewCamera",
 }
 
 export const MagixEventName = "__WindowManger";

package/src/index.ts

@@ -332,6 +332,9 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
                     params.chessboard,
                     params.overwriteStyles
                 );
+                if (this.boxManager) {
+                    this.boxManager.destroy();
+                }
                 const boxManager = createBoxManager(this, callbacks, emitter, {
                     collectorContainer: params.collectorContainer,
                     collectorStyles: params.collectorStyles,
@@ -876,6 +879,20 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         return this.focusedView?.lockImages(locked);
     }
 
+    public refresh() {
+       this._refresh();
+       this.appManager?.dispatchInternalEvent(Events.Refresh);
+    }
+    
+    /** @inner */
+    public _refresh() {
+        this.appManager?.mainViewProxy.rebind();
+        if (WindowManager.container) {
+            this.bindContainer(WindowManager.container);
+        }
+        this.appManager?.refresher?.refresh();
+    }
+
     private isDynamicPPT(scenes: SceneDefinition[]) {
         const sceneSrc = scenes[0]?.ppt?.src;
         return sceneSrc?.startsWith("pptx://");

package/src/typings.ts

@@ -79,3 +79,4 @@ export type { AppContext } from "./App/AppContext";
 export type { ReadonlyTeleBox, TeleBoxRect };
 export type { SceneState, SceneDefinition, View, AnimationMode, Displayer, Room, Player };
 export type { Storage, StorageStateChangedEvent, StorageStateChangedListener } from "./App/Storage";
+export * from "./Page";