@netless/window-manager 0.4.10 → 0.4.11-canary.0

package/docs/develop-app.md

@@ -69,10 +69,14 @@ const Counter: NetlessApp<{ count: number }> = {
         decButton.addEventListener("click", decButtonOnClick);
         $content.appendChild(decButton);
 
-        const event1Disposer = context.addMagixEventListener(`${context.appId}_event1`, msg => {
+            // 监听事件
+        const event1Disposer = context.addMagixEventListener("event1", msg => {
             console.log("event1", msg);
         });
 
+        // 向打开 app 的其他人发送消息
+        context.dispatchMagixEvent("event1", { count: 10 });
+
         // 应用销毁时, 注意清理掉监听器
         context.emitter.on("destroy", () => {
             incButton.removeEventListener("click", incButtonOnClick);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.10",
+  "version": "0.4.11-canary.0",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -31,7 +31,7 @@
     "video.js": ">=7"
   },
   "devDependencies": {
-    "@netless/app-docs-viewer": "^0.2.6",
+    "@netless/app-docs-viewer": "^0.2.8",
     "@netless/app-media-player": "0.1.0-beta.5",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",

package/src/AppContext.ts

@@ -165,7 +165,8 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     /** Dispatch events to other clients (and self). */
     public dispatchMagixEvent: MagixEventDispatcher<TMagixEventPayloads> = (...args) => {
         // can't dispatch events on replay mode
-        return this.manager.room?.dispatchMagixEvent(...args);
+        const appScopeEvent = `${this.appId}:${args[0]}`;
+        return this.manager.room?.dispatchMagixEvent(appScopeEvent, args[1]);
     };
 
     /** Listen to events from others clients (and self messages). */
@@ -174,9 +175,17 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         handler,
         options
     ) => {
-        this.manager.displayer.addMagixEventListener(event, handler as WhiteEventListener, options);
+        const appScopeEvent = `${this.appId}:${event}`;
+        this.manager.displayer.addMagixEventListener(
+            appScopeEvent,
+            handler as WhiteEventListener,
+            options
+        );
         return () =>
-            this.manager.displayer.removeMagixEventListener(event, handler as WhiteEventListener);
+            this.manager.displayer.removeMagixEventListener(
+                appScopeEvent,
+                handler as WhiteEventListener
+            );
     };
 
     /** Remove a Magix event listener. */

package/src/AppManager.ts

@@ -6,6 +6,7 @@ import { appRegister } from "./Register";
 import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
 import { callbacks } from "./callback";
 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";
@@ -13,8 +14,8 @@ import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
 import { reconnectRefresher, WindowManager } from "./index";
 import { RedoUndo } from "./RedoUndo";
 import { SideEffectManager } from "side-effect-manager";
-import { store } from "./AttributesDelegate";
 import { ViewManager } from "./View/ViewManager";
+import type { SyncRegisterAppPayload } from "./Register";
 import type { EmitterEvent } from "./InternalEmitter";
 import {
     entireScenes,
@@ -34,6 +35,7 @@ import type {
     SceneState,
 } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
+
 export class AppManager {
     public displayer: Displayer;
     public viewManager: ViewManager;
@@ -97,6 +99,10 @@ export class AppManager {
         emitter.on("setReadonly", this.onReadonlyChanged);
 
         this.createRootDirScenesCallback();
+
+        appRegister.setSyncRegisterApp(payload => {
+            this.safeUpdateAttributes([Fields.Registered, payload.kind], payload);
+        });
     }
 
     private onRemoveScenes = (scenePath: string) => {
@@ -113,7 +119,7 @@ export class AppManager {
                 this.setMainViewScenePath(ROOT_DIR);
             }
         }
-    }
+    };
 
     /**
      * 根目录被删除时所有的 scene 都会被删除.
@@ -133,7 +139,7 @@ export class AppManager {
         this.appProxies.forEach(appProxy => {
             appProxy.emitAppIsWritableChange();
         });
-    }
+    };
 
     private onPlayerSeek = (time: number) => {
         this.appProxies.forEach(appProxy => {
@@ -141,7 +147,7 @@ export class AppManager {
         });
         this.attributesUpdateCallback(this.attributes.apps);
         this.onAppDelete(this.attributes.apps);
-    }
+    };
 
     private createRootDirScenesCallback = () => {
         let isRecreate = false;
@@ -250,14 +256,7 @@ export class AppManager {
         this.refresher?.add("minimized", () => {
             return autorun(() => {
                 const minimized = this.attributes.minimized;
-                if (this.boxManager?.minimized !== minimized) {
-                    if (minimized === true) {
-                        this.boxManager?.blurAllBox();
-                    }
-                    setTimeout(() => {
-                        this.boxManager?.setMinimized(Boolean(minimized));
-                    }, 0);
-                }
+                this.onMinimized(minimized);
             });
         });
         this.refresher?.add("mainViewIndex", () => {
@@ -292,6 +291,12 @@ export class AppManager {
                 }
             });
         });
+        this.refresher?.add("registeredChange", () => {
+            return autorun(() => {
+                const registered = get(this.attributes, Fields.Registered);
+                this.onRegisteredChange(registered);
+            });
+        });
         if (!this.attributes.apps || Object.keys(this.attributes.apps).length === 0) {
             const mainScenePath = this.store.getMainViewScenePath();
             if (!mainScenePath) return;
@@ -362,6 +367,30 @@ export class AppManager {
         }
     }
 
+    private onRegisteredChange = (registered: Record<string, SyncRegisterAppPayload>) => {
+        if (!registered) return;
+        Object.entries(registered).forEach(([kind, payload]) => {
+            if (!appRegister.appClasses.has(kind)) {
+                appRegister.register({
+                    kind,
+                    src: payload.src,
+                    name: payload.name,
+                });
+            }
+        });
+    };
+
+    private onMinimized = (minimized: boolean | undefined) => {
+        if (this.boxManager?.minimized !== minimized) {
+            if (minimized === true) {
+                this.boxManager?.blurAllBox();
+            }
+            setTimeout(() => {
+                this.boxManager?.setMinimized(Boolean(minimized));
+            }, 0);
+        }
+    }
+
     public refresh() {
         this.attributesUpdateCallback(this.attributes.apps);
     }

package/src/AttributesDelegate.ts

@@ -17,6 +17,7 @@ export enum Fields {
     Position = "position",
     CursorState = "cursorState",
     FullPath = "fullPath",
+    Registered = "registered",
 }
 
 export type Apps = {

package/src/Register/index.ts

@@ -8,12 +8,25 @@ export type LoadAppEvent = {
     reason?: string;
 };
 
+export type SyncRegisterAppPayload =  { kind: string, src: string, name: string | undefined };
+export type SyncRegisterApp = (payload: SyncRegisterAppPayload) => void;
+
 class AppRegister {
     public kindEmitters: Map<string, Emittery<RegisterEvents>> = new Map();
     public registered: Map<string, RegisterParams> = new Map();
     public appClassesCache: Map<string, Promise<NetlessApp>> = new Map();
     public appClasses: Map<string, () => Promise<NetlessApp>> = new Map();
 
+    private syncRegisterApp: SyncRegisterApp | null = null;
+
+    public setSyncRegisterApp(fn: SyncRegisterApp) {
+        this.syncRegisterApp = fn;
+    }
+
+    public onSyncRegisterAppChange = (payload: SyncRegisterAppPayload) => {
+        this.register({ kind: payload.kind, src: payload.src });
+    }
+
     public async register(params: RegisterParams): Promise<void> {
         this.appClassesCache.delete(params.kind);
         this.registered.set(params.kind, params);
@@ -23,7 +36,7 @@ class AppRegister {
 
         if (typeof srcOrAppOrFunction === "string") {
             downloadApp = async () => {
-                let appClass = (await loadApp(srcOrAppOrFunction, params.kind)) as any;
+                let appClass = (await loadApp(srcOrAppOrFunction, params.kind, params.name)) as any;
                 if (appClass) {
                     if (appClass.__esModule) {
                         appClass = appClass.default;
@@ -35,6 +48,9 @@ class AppRegister {
                     );
                 }
             };
+            if (this.syncRegisterApp) {
+                this.syncRegisterApp({ kind: params.kind, src: srcOrAppOrFunction, name: params.name });
+            }
         } else if (typeof srcOrAppOrFunction === "function") {
             downloadApp = srcOrAppOrFunction;
         } else {
@@ -58,6 +74,17 @@ class AppRegister {
         }
     }
 
+    public unregister(kind: string) {
+        this.appClasses.delete(kind);
+        this.appClassesCache.delete(kind);
+        this.registered.delete(kind);
+        const kindEmitter = this.kindEmitters.get(kind);
+        if (kindEmitter) {
+            kindEmitter.clearListeners();
+            this.kindEmitters.delete(kind);
+        }
+    }
+
     public async notifyApp<T extends keyof RegisterEvents>(
         kind: string,
         event: T,

package/src/index.ts

@@ -368,6 +368,13 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return appRegister.register(params);
     }
 
+    /**
+     * 注销插件
+     */
+    public static unregister(kind: string) {
+        return appRegister.unregister(kind);
+    }
+
     /**
      * 创建一个 app 至白板
      */
@@ -856,6 +863,9 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             if (!this.attributes["_mainSceneIndex"]) {
                 this.safeSetAttributes({ _mainSceneIndex: 0 });
             }
+            if (!this.attributes[Fields.Registered]) {
+                this.safeSetAttributes({ [Fields.Registered]: {} });
+            }
         }
     }
 }