@netless/window-manager 0.4.67-beta.1 → 0.4.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.67-beta.1",
+  "version": "0.4.68",
   "description": "Multi-window mode for Netless Whiteboard",
   "author": "l1shen <lishen1635@gmail.com> (https://github.com/l1shen)",
   "license": "MIT",

package/src/App/AppProxy.ts

@@ -359,7 +359,7 @@ export class AppProxy implements PageRemoveService {
     }
 
     private appAttributesUpdateListener = (appId: string) => {
-        this.manager.refresher?.add(appId, () => {
+        this.manager.refresher.add(appId, () => {
             return autorun(() => {
                 const attrs = this.manager.attributes[appId];
                 if (attrs) {
@@ -367,7 +367,7 @@ export class AppProxy implements PageRemoveService {
                 }
             });
         });
-        this.manager.refresher?.add(this.stateKey, () => {
+        this.manager.refresher.add(this.stateKey, () => {
             return autorun(() => {
                 const appState = this.appAttributes?.state;
                 if (appState?.zIndex > 0 && appState.zIndex !== this.box?.zIndex) {
@@ -376,7 +376,7 @@ export class AppProxy implements PageRemoveService {
                 }
             });
         });
-        this.manager.refresher?.add(`${appId}-fullPath`, () => {
+        this.manager.refresher.add(`${appId}-fullPath`, () => {
             return autorun(() => {
                 const fullPath = this.appAttributes?.fullPath;
                 this.setFocusScenePathHandler(fullPath);
@@ -493,9 +493,9 @@ export class AppProxy implements PageRemoveService {
 
         this.viewManager.destroyView(this.id);
         this.manager.appStatus.delete(this.id);
-        this.manager.refresher?.remove(this.id);
-        this.manager.refresher?.remove(this.stateKey);
-        this.manager.refresher?.remove(`${this.id}-fullPath`);
+        this.manager.refresher.remove(this.id);
+        this.manager.refresher.remove(this.stateKey);
+        this.manager.refresher.remove(`${this.id}-fullPath`);
         this._prevFullPath = undefined;
     }
 

package/src/AppManager.ts

@@ -55,7 +55,7 @@ export class AppManager {
     public appStatus: Map<string, AppStatus> = new Map();
     public store = store;
     public mainViewProxy: MainViewProxy;
-    public refresher?: ReconnectRefresher;
+    public refresher: ReconnectRefresher;
     public isReplay = this.windowManger.isReplay;
     public mainViewScenesLength = 0;
 
@@ -91,15 +91,13 @@ export class AppManager {
         this.refresher.setRoom(this.room);
         this.refresher.setContext({ emitter: internalEmitter });
 
-        this.sideEffectManager.add(() => {
-            return () => {
-                this.appCreateQueue.destroy();
-                this.mainViewProxy.destroy();
-                this.refresher?.destroy();
-                this.viewManager.destroy();
-                this.boxManager?.destroy();
-                this.callbacksNode?.dispose();
-            };
+        this.sideEffectManager.addDisposer(() => {
+            this.appCreateQueue.destroy();
+            this.mainViewProxy.destroy();
+            this.refresher.destroy();
+            this.viewManager.destroy();
+            this.boxManager?.destroy();
+            this.callbacksNode?.dispose();
         });
 
         internalEmitter.once("onCreated").then(() => this.onCreated());
@@ -289,6 +287,14 @@ export class AppManager {
         return this.mainViewProxy.view;
     }
 
+    public get polling() {
+        return this.mainViewProxy.polling;
+    }
+
+    public set polling(b: boolean) {
+        this.mainViewProxy.polling = b;
+    }
+
     public get focusApp() {
         if (this.store.focus) {
             return this.appProxies.get(this.store.focus);
@@ -319,31 +325,31 @@ export class AppManager {
 
         this.addAppsChangeListener();
         this.addAppCloseListener();
-        this.refresher?.add("maximized", () => {
+        this.refresher.add("maximized", () => {
             return autorun(() => {
                 const maximized = this.attributes.maximized;
                 this.boxManager?.setMaximized(Boolean(maximized));
             });
         });
-        this.refresher?.add("minimized", () => {
+        this.refresher.add("minimized", () => {
             return autorun(() => {
                 const minimized = this.attributes.minimized;
                 this.onMinimized(minimized);
             });
         });
-        this.refresher?.add("mainViewIndex", () => {
+        this.refresher.add("mainViewIndex", () => {
             return autorun(() => {
                 const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
                 this.onMainViewIndexChange(mainSceneIndex);
             });
         });
-        this.refresher?.add("focusedChange", () => {
+        this.refresher.add("focusedChange", () => {
             return autorun(() => {
                 const focused = get(this.attributes, "focus");
                 this.onFocusChange(focused);
             });
         });
-        this.refresher?.add("registeredChange", () => {
+        this.refresher.add("registeredChange", () => {
             return autorun(() => {
                 const registered = get(this.attributes, Fields.Registered);
                 this.onRegisteredChange(registered);
@@ -402,7 +408,7 @@ export class AppManager {
     };
 
     public addAppsChangeListener = () => {
-        this.refresher?.add("apps", () => {
+        this.refresher.add("apps", () => {
             return safeListenPropsUpdated(
                 () => this.attributes.apps,
                 () => {
@@ -413,7 +419,7 @@ export class AppManager {
     };
 
     public addAppCloseListener = () => {
-        this.refresher?.add("appsClose", () => {
+        this.refresher.add("appsClose", () => {
             return onObjectRemoved(this.attributes.apps, () => {
                 this.onAppDelete(this.attributes.apps);
             });

package/src/View/MainView.ts

@@ -11,6 +11,9 @@ import type { AppManager } from "../AppManager";
 import { Events } from "../constants";
 
 export class MainViewProxy {
+    /** Refresh the view's camera in an interval of 1.5s. */
+    public polling = false;
+
     private scale?: number;
     private started = false;
     private mainViewIsAddListener = false;
@@ -45,8 +48,18 @@ export class MainViewProxy {
                 }
             });
         });
+        this.sideEffectManager.setInterval(this.syncCamera, 1500);
     }
 
+    // Guard function when the camera is not synced
+    private syncCamera = () => {
+        if (!this.polling || this.viewMode !== ViewMode.Broadcaster) return;
+        const { mainViewCamera } = this;
+        if (mainViewCamera && mainViewCamera.id !== this.manager.uid) {
+            this.moveCameraSizeByAttributes();
+        }
+    };
+
     private startListenWritableChange = () => {
         this.sideEffectManager.add(() => {
             return internalEmitter.on("writableChange", isWritable => {
@@ -93,7 +106,7 @@ export class MainViewProxy {
     }
 
     public addCameraReaction = () => {
-        this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
+        this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
     };
 
     public setCameraAndSize(): void {
@@ -280,8 +293,8 @@ export class MainViewProxy {
 
     public stop() {
         this.removeCameraListener();
-        this.manager.refresher?.remove(Fields.MainViewCamera);
-        this.manager.refresher?.remove(Fields.MainViewSize);
+        this.manager.refresher.remove(Fields.MainViewCamera);
+        this.manager.refresher.remove(Fields.MainViewSize);
         this.started = false;
     }
 

package/src/index.ts

@@ -141,6 +141,7 @@ export type MountParams = {
     prefersColorScheme?: TeleBoxColorScheme;
     applianceIcons?: ApplianceIcons;
     fullscreen?: boolean;
+    polling?: boolean;
 };
 
 export const reconnectRefresher = new ReconnectRefresher({ emitter: internalEmitter });
@@ -217,7 +218,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
         } else {
             await pRetry(
                 async count => {
-                    manager = (await room.getInvisiblePlugin(WindowManager.kind)) as WindowManager;
+                    manager = room.getInvisiblePlugin(WindowManager.kind) as WindowManager;
                     if (!manager) {
                         log(`manager is empty. retrying ${count}`);
                         throw new Error();
@@ -239,6 +240,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
 
         manager._fullscreen = params.fullscreen;
         manager.appManager = new AppManager(manager);
+        manager.appManager.polling = params.polling || false;
         manager._pageState = new PageStateImpl(manager.appManager);
         manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor), params.applianceIcons);
         if (containerSizeRatio) {
@@ -418,6 +420,9 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
             if (!params.kind || typeof params.kind !== "string") {
                 throw new Errors.ParamsInvalidError();
             }
+            if (params.src && typeof params.src === "string") {
+                appRegister.register({ kind: params.kind, src: params.src });
+            }
             const appImpl = await appRegister.appClasses.get(params.kind)?.();
             if (appImpl && appImpl.config?.singleton) {
                 if (this.appManager.appProxies.has(params.kind)) {
@@ -614,7 +619,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
 
     /**
      * app 本地自定义事件回调
-     * 
+     *
      * 返回一个用于撤销此监听的函数
      */
     public onAppEvent(kind: string, listener: (args: { kind: string, appId: string, type: string, value: any }) => void): () => void {
@@ -731,6 +736,16 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
         return this.appManager?.focusApp?.view || this.mainView;
     }
 
+    public get polling(): boolean {
+        return this.appManager?.polling || false;
+    }
+
+    public set polling(b: boolean) {
+        if (this.appManager) {
+            this.appManager.polling = b;
+        }
+    }
+
     public get mainViewSceneIndex(): number {
         return this._pageState?.index || 0;
     }
@@ -963,14 +978,14 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
        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();
+        this.appManager?.refresher.refresh();
     }
 
     public setContainerSizeRatio(ratio: number) {