@netless/window-manager 0.4.35 → 0.4.36

package/docs/app-context.md

@@ -1,9 +1,13 @@
 ## AppContext
 
+    `AppContext` 是插件运行时传入的上下文
+    你可以通过此对象操作 APP 的 ui, 获取当前房间的状态, 以及订阅状态的变化
+
 - [api](#api)
     - [view](#view)
     - [page](#page)
     - [storage](#storage)
+- [ui(box)](#box)
 - [events](#events)
 - [Advanced](#Advanced)
 
@@ -234,6 +238,52 @@ manager.addApp({
   context.dispatchMagixEvent("click", { data: "data" });
   ```
 
+<h2>UI (box)</h2>
+
+    box 是白板为所有应用默认创建的 UI
+    应用所有可以操作的 UI 部分都在 box 范围内
+
+- **context.getBox()**
+
+    获取 box
+    返回类型: `ReadonlyTeleBox`
+
+- **box.mountStyles()**
+
+    挂载样式到 `box`
+    参数: `string | HTMLStyleElement`
+
+    ```js
+    const box = context.getBox();
+    box.mountStyles(`
+        .app-span {
+            color: red;
+        }
+    `)
+    ```
+
+- **box.mountContent()**
+
+    挂载元素到 `box`
+    参数: `HTMLElement`
+
+    ```js
+    const box = context.getBox();
+    const content = document.createElement("div");
+    box.mountContent(context);
+    ```
+
+- **box.mountFooter()**
+
+    挂载元素到 `box` 的 `footer`
+    参数: `HTMLElement`
+
+    ```js
+    const box = context.getBox();
+    const footer = document.createElement("div");
+    box.mountFooter(context);
+    ```
+
 <h2 id="events">events</h2>
 
 - **destroy**
@@ -284,6 +334,29 @@ manager.addApp({
         // { index: 0, length: 1 }
     });
     ```
+- **roomStageChange**
+
+    房间的状态变化时触发\
+    比如当教具切换时
+
+    ```js
+    context.emitter.on("roomStageChange", stage => {
+        if (state.memberState) {
+            console.log("appliance change to", state.memberState.currentApplianceName);
+        }
+    });
+    ```
+
+    或者是当前房间人数变化时
+
+    ```js
+     context.emitter.on("roomStageChange", stage => {
+        if (state.roomMembers) {
+            console.log("current room members change", state.roomMembers);
+        }
+    });
+    ```
+    详细状态的介绍请参考 https://developer.netless.link/javascript-zh/home/business-state-management
 
 <h2 id="Advanced">Advanced</h2>
 

package/docs/custom-max-bar.md

@@ -0,0 +1,31 @@
+## 如何自定义最大化 `titleBar`
+
+获取并订阅所有的 `box`
+
+```js
+manager.boxManager.teleboxManager.boxes$.subscribe(boxes => {
+    // boxes 为所有的窗口，当窗口添加和删除时都会触发
+})
+```
+
+切换 `box` 的 `focus`
+```js
+manager.boxManager.teleBoxManager.focusBox(box)
+```
+
+关闭某个 `box`
+```js
+manager.boxManager.teleBoxManager.remove(box)
+```
+
+切换最大化状态
+```js
+manager.boxManager.teleBoxManager.setMaximized(false)
+manager.boxManager.teleBoxManager.setMaximized(true)
+```
+
+切换最小化状态
+```js
+manager.boxManager.teleBoxManager.setMinimized(true)
+manager.boxManager.teleBoxManager.setMaximized(false)
+```

package/package.json

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

package/src/BoxManager.ts

@@ -120,6 +120,14 @@ export class BoxManager {
                     this.context.setAppFocus(topBox.id);
                     this.focusBox({ appId: topBox.id }, false);
                 }
+                // ppt 在最小化后刷新恢复正常大小，拿不到正确的宽高，需要手动触发一下窗口的 resize
+                setTimeout(() => {
+                    this.teleBoxManager.boxes.forEach(box => {
+                        const width = box.width;
+                        const height = box.height;
+                        box._size$.setValue({ width: width + 0.001, height:  height + 0.001 }, true);
+                    });
+                }, 100);
             }
         });
         this.teleBoxManager.events.on("maximized", maximized => {