@netless/window-manager 0.4.35 → 0.4.38

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.38",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/BoxManager.ts

@@ -108,6 +108,18 @@ export class BoxManager {
             callbacks.emit("prefersColorSchemeChange", colorScheme);
         });
 
+        // ppt 在最小化后刷新恢复正常大小，拿不到正确的宽高，需要手动触发一下窗口的 resize
+        this.teleBoxManager._minimized$.reaction(minimized => {
+            if (!minimized) {
+                setTimeout(() => {
+                    const offset = 0.001 * (Math.random() > 0.5 ? 1 : -1);
+                    this.teleBoxManager.boxes.forEach(box => {
+                        box.resize(box.intrinsicWidth + offset, box.intrinsicHeight + offset, true);
+                    });
+                }, 400);
+            }
+        });
+
         // events.on 的值则会根据 skipUpdate 来决定是否触发回调
         this.teleBoxManager.events.on("minimized", minimized => {
             this.context.safeSetAttributes({ minimized });

package/src/View/MainView.ts

@@ -39,7 +39,9 @@ export class MainViewProxy {
         });
         this.sideEffectManager.add(() => {
             return emitter.on("startReconnect", () => {
-                this.mainView.release();
+                if (!this.didRelease) {
+                    this.mainView.release();
+                }
             });
         });
     }
@@ -119,9 +121,6 @@ export class MainViewProxy {
     public onUpdateContainerSizeRatio = () => {
         const size = this.store.getMainViewSize();
         this.sizeChangeHandler(size);
-        if (size.id === this.manager.uid) {
-            this.setCameraAndSize();
-        }
     }
 
     public get view(): View {