@netless/window-manager 0.4.12 → 0.4.15

package/docs/advanced.md

@@ -5,6 +5,7 @@
   - [清屏](#clean-current-scene)
   - [判断是否打开某种 APP](#has-kind)
   - [页面控制器](#page-control)
+  - [视角](#view-mode)
 
 
 <h3 id="redo-undo">撤销重做</h3>
@@ -87,4 +88,16 @@ manager.emitter.on("pageStateChange", state => {
 manager.nextPage()
 manager.prevPage()
 manager.addPage()
-```
+```
+
+<br>
+
+<h3 id="view-mode">视角跟随</h3>
+
+`ViewMode` 有 `broadcaster` `freedom` 两种模式
+
+可写权限默认进去为 `broadcaster` 并且互相操作并跟随视角
+
+当 `room` 设置 `Writable` 为 `false` 时此时只能跟随视角并不能广播视角
+
+在 `room` 的 `isWritable` 设置为 `false` 后想重新跟随视角可以通过设置为 `broadcaster` 跟随

package/docs/app-context.md

@@ -0,0 +1,111 @@
+## AppContext
+
+- [api](#api)
+- [events](#events)
+
+<h2 id="api">API</h2>
+
+### appId
+
+插入 `app` 时生成的唯一 ID
+
+```ts
+const appId = context.appId
+```
+
+### getDisplayer
+
+在默认情况下 `Displayer` 为白板的 `room` 实例
+
+回放时则为 `Player` 实例
+
+```ts
+const displayer = context.getDisplayer()
+
+assert(displayer, room) // 互动房间
+assert(displayer, player) // 回放房间
+```
+
+### getScenes
+
+`scenes` 在 `addApp` 时传入 `scenePath` 会由 `WindowManager` 创建
+
+```ts
+const scenes = context.getScenes()
+```
+
+### getView
+
+`View` 为白板中一块可标注部分
+
+```ts
+const view = context.getView()
+```
+
+### getIsWritable
+
+获取当前状态是否可写
+
+```ts
+// isWritable === (room.isWritable && box.readonly)
+const isWritable = context.getIsWritable()
+```
+
+### getBox
+
+获取当前 app 的 box
+
+```ts
+const box = context.getBox()
+
+box.$content // box 的 main element
+box.$footer
+```
+
+### setScenePath
+
+切换当前 `view` 的 `scenePath`
+
+```ts
+context.setScenePath("/page/2")
+```
+
+### mountView
+
+挂载 view 到指定 dom
+
+```ts
+context.mountView(ref)
+```
+
+<h2 id="events">events</h2>
+
+### destroy
+
+app 被关闭时发送的事件
+
+```ts
+context.emitter.on("destroy", () => {
+    // release your listeners
+})
+```
+
+### writableChange
+
+白板可写状态切换时触发
+
+```ts
+context.emitter.on("writableChange", isWritable => {
+    //
+})
+```
+
+### focus
+
+当前 app 获得焦点或者失去焦点时触发
+
+```ts
+context.emitter.on("focus", focus => {
+    //
+})
+```

package/docs/develop-app.md

@@ -1,5 +1,7 @@
 # 开发自定义 APP
 
+- [AppContext](./app-context.md)
+
 ## official apps https://github.com/netless-io/netless-app
 
 <br>

package/package.json

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

package/src/AppListener.ts

@@ -55,6 +55,10 @@ export class AppListeners {
                     this.cursorMoveHandler(data.payload);
                     break;
                 }
+                case Events.RootDirRemoved: {
+                    this.rootDirRemovedHandler();
+                    break;
+                }
                 default:
                     break;
             }
@@ -93,4 +97,8 @@ export class AppListeners {
     private cursorMoveHandler = (payload: any) => {
         emitter.emit("cursorMove", payload);
     };
+
+    private rootDirRemovedHandler = () => {
+        this.manager.onRootDirRemoved();
+    };
 }

package/src/AppManager.ts

@@ -109,10 +109,8 @@ export class AppManager {
     private onRemoveScenes = (scenePath: string) => {
         // 如果移除根目录就把 scenePath 设置为初始值
         if (scenePath === ROOT_DIR) {
-            this.setMainViewScenePath(INIT_DIR);
-            this.createRootDirScenesCallback();
             this.onRootDirRemoved();
-            emitter.emit("rootDirRemoved");
+            this.dispatchInternalEvent(Events.RootDirRemoved);
             return;
         }
         // 如果移除的 path 跟 MainViewScenePath 相同就取当前目录的当前 index
@@ -129,7 +127,10 @@ export class AppManager {
      * 根目录被删除时所有的 scene 都会被删除.
      * 所以需要关掉所有开启了 view 的 app
      */
-    private onRootDirRemoved() {
+    public onRootDirRemoved() {
+        this.setMainViewScenePath(INIT_DIR);
+        this.createRootDirScenesCallback();
+
         this.appProxies.forEach(appProxy => {
             if (appProxy.view) {
                 this.closeApp(appProxy.id);
@@ -137,6 +138,8 @@ export class AppManager {
         });
         // 删除了根目录的 scenes 之后 mainview 需要重新绑定, 否则主白板会不能渲染
         this.mainViewProxy.rebind();
+
+        emitter.emit("rootDirRemoved");
     }
 
     private onReadonlyChanged = () => {
@@ -274,34 +277,13 @@ export class AppManager {
         this.refresher?.add("mainViewIndex", () => {
             return autorun(() => {
                 const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
-                if (mainSceneIndex !== undefined && this._prevSceneIndex !== mainSceneIndex) {
-                    callbacks.emit("mainViewSceneIndexChange", mainSceneIndex);
-                    emitter.emit("changePageState");
-                    if (this.callbacksNode) {
-                        this.updateSceneState(this.callbacksNode);
-                    }
-                    this._prevSceneIndex = mainSceneIndex;
-                }
+                this.onMainViewIndexChange(mainSceneIndex);
             });
         });
         this.refresher?.add("focusedChange", () => {
             return autorun(() => {
                 const focused = get(this.attributes, "focus");
-                if (this._prevFocused !== focused) {
-                    callbacks.emit("focusedChange", focused);
-                    emitter.emit("focusedChange", { focused, prev: this._prevFocused });
-                    this._prevFocused = focused;
-                    if (focused !== undefined) {
-                        this.boxManager?.focusBox({ appId: focused });
-                        // 确保 focus 修改的时候, appProxy 已经创建
-                        setTimeout(() => {
-                            const appProxy = this.appProxies.get(focused);
-                            if (appProxy) {
-                                appRegister.notifyApp(appProxy.kind, "focus", { appId: focused });
-                            }
-                        }, 0);
-                    }
-                }
+                this.onFocusChange(focused);
             });
         });
         this.refresher?.add("registeredChange", () => {
@@ -329,6 +311,35 @@ export class AppManager {
         });
     }
 
+    private onMainViewIndexChange = (index: number) => {
+        if (index !== undefined && this._prevSceneIndex !== index) {
+            callbacks.emit("mainViewSceneIndexChange", index);
+            emitter.emit("changePageState");
+            if (this.callbacksNode) {
+                this.updateSceneState(this.callbacksNode);
+            }
+            this._prevSceneIndex = index;
+        }
+    }
+
+    private onFocusChange = (focused: string | undefined) => {
+        if (this._prevFocused !== focused) {
+            callbacks.emit("focusedChange", focused);
+            emitter.emit("focusedChange", { focused, prev: this._prevFocused });
+            this._prevFocused = focused;
+            if (focused !== undefined) {
+                this.boxManager?.focusBox({ appId: focused });
+                // 确保 focus 修改的时候, appProxy 已经创建
+                setTimeout(() => {
+                    const appProxy = this.appProxies.get(focused);
+                    if (appProxy) {
+                        appRegister.notifyApp(appProxy.kind, "focus", { appId: focused });
+                    }
+                }, 0);
+            }
+        }
+    }
+
     /**
      * 插件更新 attributes 时的回调
      *
@@ -717,7 +728,7 @@ export class AppManager {
         });
     }
 
-    public dispatchInternalEvent(event: Events, payload: any) {
+    public dispatchInternalEvent(event: Events, payload?: any) {
         this.safeDispatchMagixEvent(MagixEventName, {
             eventName: event,
             payload: payload,

package/src/ScenePath/index.ts

@@ -0,0 +1,47 @@
+import type { ScenesCallbacks, ScenesCallbacksNode } from "white-web-sdk";
+import type { AppManager } from "../AppManager";
+
+export class ScenesCallbackManager {
+    
+    private nodes: Map<string, ScenesCallbacksNode> = new Map();
+
+    constructor(private manager: AppManager) {}
+
+    public createNode(path: string, callbacks?: Partial<ScenesCallbacks>): ScenesCallbacksNode | null {
+        const node = this.manager.displayer.createScenesCallback(path, callbacks);
+        if (node) {
+            this.nodes.set(path, node);
+        }
+        return node;
+    }
+
+    public getScenes(path: string) {
+        const node = this.nodes.get(path);
+        return node?.scenes;
+    }
+
+    public getScenesOnce(path: string) {
+        let node = this.nodes.get(path);
+        if (!node) {
+            const created = this.createNode(path);
+            if (created) {
+                node = created;
+            }
+        }
+        const scenes = node?.scenes;
+        this.removeNode(path);
+        return scenes;
+    }
+
+    public removeNode(path: string) {
+        const node = this.nodes.get(path);
+        if (node) {
+            node.dispose();
+            this.nodes.delete(path);
+        }
+    }
+
+    public destroy(): void {
+        this.nodes.forEach(node => node.dispose());
+    }
+}

package/src/View/MainView.ts

@@ -22,7 +22,6 @@ export class MainViewProxy {
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
         emitter.once("mainViewMounted").then(() => {
-            this.addMainViewListener();
             setTimeout(() => {
                 this.start();
                 if (!this.mainViewCamera || !this.mainViewSize) {
@@ -55,6 +54,7 @@ export class MainViewProxy {
     public start() {
         if (this.started) return;
         this.sizeChangeHandler(this.mainViewSize);
+        this.addMainViewListener();
         this.addCameraListener();
         this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
         this.started = true;
@@ -143,6 +143,7 @@ export class MainViewProxy {
             this.view.divElement.removeEventListener("click", this.mainViewClickListener);
             this.view.divElement.removeEventListener("touchend", this.mainViewClickListener);
         }
+        this.mainViewIsAddListener = false;
     }
 
     private mainViewClickListener = () => {

package/src/constants.ts

@@ -13,6 +13,7 @@ export enum Events {
     MoveCamera = "MoveCamera",
     MoveCameraToContain = "MoveCameraToContain",
     CursorMove = "CursorMove",
+    RootDirRemoved = "RootDirRemoved",
 }
 
 export const MagixEventName = "__WindowManger";

package/src/index.ts

@@ -553,9 +553,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
      * 设置 ViewMode
      */
     public setViewMode(mode: ViewMode): void {
-        if (!this.canOperate) return;
         if (mode === ViewMode.Broadcaster) {
-            this.appManager?.mainViewProxy.setCameraAndSize();
+            if (this.canOperate) {
+                this.appManager?.mainViewProxy.setCameraAndSize();
+            }
             this.appManager?.mainViewProxy.start();
         }
         if (mode === ViewMode.Freedom) {