@netless/window-manager 0.4.20 → 0.4.23

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.20",
+  "version": "0.4.23",
   "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) {
@@ -571,6 +585,7 @@ export class AppManager {
         } else {
             this.mainView.disableCameraTransform = true;
         }
+        emitter.emit("writableChange", isWritable);
     };
 
     public safeSetAttributes(attributes: any) {
@@ -731,7 +746,7 @@ export class AppManager {
 
     public updateRootDirRemoving = (removing: boolean) => {
         this.rootDirRemoving = removing;
-    }
+    };
 
     public dispatchInternalEvent(event: Events, payload?: any) {
         this.safeDispatchMagixEvent(MagixEventName, {

package/src/AttributesDelegate.ts

@@ -38,6 +38,11 @@ export type StoreContext = {
     safeUpdateAttributes: (keys: string[], value: any) => void;
     safeSetAttributes: (attributes: any) => void;
 }
+
+export type ICamera = Camera & { id: string };
+
+export type ISize = Size & { id: string };
+
 export class AttributesDelegate {
 
     constructor(private context: StoreContext) {}
@@ -152,14 +157,21 @@ export class AttributesDelegate {
         return get(this.attributes, [Fields.MainViewSize]);
     }
 
-    public setMainViewCamera(camera: (Camera & { id: string }) | undefined) {
+    public setMainViewCamera(camera: ICamera) {
         this.context.safeSetAttributes({ [Fields.MainViewCamera]: { ...camera } });
     }
 
-    public setMainViewSize(size: (Size & { id: string }) | undefined) {
+    public setMainViewSize(size: ISize) {
         this.context.safeSetAttributes({ [Fields.MainViewSize]: { ...size } });
     }
 
+    public setMainViewCameraAndSize(camera: ICamera, size: ISize) {
+        this.context.safeSetAttributes({
+            [Fields.MainViewCamera]: { ...camera },
+            [Fields.MainViewSize]: { ...size },
+        });
+    }
+
     public setAppFocus = (appId: string, focus: boolean) => {
         if (focus) {
             this.context.safeSetAttributes({ [Fields.Focus]: appId });

package/src/InternalEmitter.ts

@@ -24,6 +24,7 @@ export type EmitterEvent = {
     rootDirRemoved: undefined;
     setReadonly: boolean;
     changePageState: undefined;
+    writableChange: boolean;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;

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,10 @@ 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();
+            this.ensureCameraAndSize();
+            this.startListenWritableChange();
         });
         const playgroundSizeChangeListener = () => {
             this.sizeChangeHandler(this.mainViewSize);
@@ -39,6 +37,23 @@ export class MainViewProxy {
         });
     }
 
+    private startListenWritableChange = () => {
+        this.sideEffectManager.add(() => {
+            return emitter.on("writableChange", isWritable => {
+                if (isWritable) {
+                    this.ensureCameraAndSize();
+                }
+            });
+        });
+    }
+
+    public ensureCameraAndSize() {
+        if (!this.mainViewCamera || !this.mainViewSize) {
+            this.manager.dispatchInternalEvent(Events.InitMainViewCamera);
+            this.setCameraAndSize();
+        }
+    }
+
     private get mainViewCamera() {
         return this.store.getMainViewCamera();
     }
@@ -56,13 +71,18 @@ 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 });
+        const camera = { ...this.mainView.camera, id: this.manager.uid };
+        const size = { ...this.mainView.size, id: this.manager.uid };
+        this.store.setMainViewCameraAndSize(camera, size);
     }
 
     private cameraReaction = () => {
@@ -74,9 +94,7 @@ export class MainViewProxy {
                     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://");