@netless/window-manager 1.0.0-canary.22 → 1.0.0-canary.23

package/docs/app-context.md

@@ -75,7 +75,7 @@
     ```
 
     ```ts
-    const view = context.createWhiteBoardView(10); // 生成带有 10 页的白板
+    const view = context.createWhiteBoardView({ size: 10 }); // 生成带有 10 页的白板
     ```
 
 - **WhiteBoardView**
@@ -148,6 +148,18 @@
         console.log("pageStateChange", pageState)
     })
     ```
+  - **setRect**
+
+    设置白板的显示的宽高\
+    在不同分辨率下会保证所有打开的窗口都能完整显示这个区域
+
+    ```ts
+    const view = context.createWhiteBoardView();
+    // 此方法建议只在插入时设置一次
+    if (context.isAddApp) {
+        view.setRect({ width: 500, height: 500 })
+    }
+    ```
 
 <h3 id="storage">storage</h3>
 
@@ -301,6 +313,44 @@
 
     类型: `ReadonlyTeleBox`
 
+- **mountStyles()**
+
+    挂载样式到 `box` 上
+
+    参数: `string | HTMLStyleElement`
+
+    ```ts
+    box.mountStyles(`
+        .hello-world-app span {
+            color: red;
+        }
+    `);
+    ```
+
+- **mountContent()**
+
+    挂载元素到 `box` 中\
+    推荐使用 `mountStage` 方法挂载元素到 `stage` 中
+
+    参数: `HTMLElement`
+
+    ```ts
+    const app = document.createElement("div");
+    box.mountContent(app);
+    ```
+
+- **mountStage()**
+
+    挂载元素到 `box` 的 `contentStage` 中\
+    如无特殊情况, 推荐把所有内容挂载到 `stage` 中
+
+    参数: `HTMLElement`
+
+    ```ts
+    const app = document.createElement("div");
+    box.mountStage(app);
+    ```
+
 - **contentStageRect**
 
     可同步区域\
@@ -324,7 +374,43 @@
     订阅 `contextStateRect` 的变化
 
     ```ts
-    box._contentStageRect$.subscribe(rect => {
+    box.onValChanged("contentStageRect", rect => {
         console.log("contentStageRect changed", rect);
     });
-    ```
+    ```
+
+- **highlightStage**
+
+    是否高亮 `stage` 区域\
+    默认为 `true`
+
+    类型: `boolean`
+
+- **setHighlightStage()**
+
+    参数: `boolean`
+
+
+- **$content**
+
+    应用窗口的内容区域
+
+    类型: `HTMLElement`
+
+- **$footer**
+
+    应用窗口的底部区域
+
+    类型: `HTMLElement`
+
+- **resizable**
+
+    是否可以改变窗口大小
+
+    类型: `boolean`
+
+- **draggable**
+
+    窗口是否可以拖动
+
+    类型: `boolean`

package/package.json

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

package/src/View/CameraSynchronizer.ts

@@ -1,5 +1,5 @@
 import { AnimationMode } from "white-web-sdk";
-import { debounce, delay, isEqual, pick, throttle } from "lodash";
+import { isEqual, pick, throttle } from "lodash";
 import type { TeleBoxRect } from "@netless/telebox-insider";
 import type { Camera, View } from "white-web-sdk";
 import type { ICamera, ISize } from "../AttributesDelegate";
@@ -14,12 +14,12 @@ export class CameraSynchronizer {
 
     constructor(protected saveCamera: SaveCamera) {}
 
-    public setRect = debounce((rect: TeleBoxRect) => {
+    public setRect = (rect: TeleBoxRect) => {
         this.rect = rect;
         if (this.remoteCamera && this.remoteSize) {
             this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
         }
-    }, 10);
+    }
 
     public setView(view: View) {
         this.view = view;
@@ -37,22 +37,17 @@ export class CameraSynchronizer {
                 scale = this.rect.height / size.height;
             }
             const nextScale = camera.scale * scale;
-            const moveCamera = () => {
-                const config: Partial<Camera> & { animationMode: AnimationMode } = {
-                    scale: nextScale,
-                    animationMode: AnimationMode.Immediately,
-                }
-                if (camera.centerX !== null) {
-                    config.centerX = camera.centerX;
-                }
-                if (camera.centerY !== null) {
-                    config.centerY = camera.centerY;
-                }
-                this.view?.moveCamera(config);
+            const config: Partial<Camera> & { animationMode: AnimationMode } = {
+                scale: nextScale,
+                animationMode: AnimationMode.Immediately,
+            }
+            if (camera.centerX !== null) {
+                config.centerX = camera.centerX;
+            }
+            if (camera.centerY !== null) {
+                config.centerY = camera.centerY;
             }
-            moveCamera(); 
-            // TODO 直接调用 moveCamera 依然会出现 camera 错误的情况,这里暂时加一个 delay 保证 camera 是对的, 后续需要 SDK 进行修改
-            delay(moveCamera, 50);
+            this.view?.moveCamera(config);
         }
     }, 10);
 
@@ -62,14 +57,10 @@ export class CameraSynchronizer {
         if (this.rect && this.remoteCamera && needMoveCamera) {
             const scale = this.rect.width / size.width;
             const nextScale = this.remoteCamera.scale * scale;
-            const moveCamera = () => {
-                this.view?.moveCamera({
-                    scale: nextScale,
-                    animationMode: AnimationMode.Immediately,
-                })
-            };
-            moveCamera();
-            delay(moveCamera, 50);
+            this.view?.moveCamera({
+                scale: nextScale,
+                animationMode: AnimationMode.Immediately,
+            })
         }
     }