@netless/window-manager 0.3.15 → 0.3.16-canary.3

package/docs/api.md

@@ -0,0 +1,113 @@
+# API
+
+## 目录
+  - [静态方法](#static-methods)
+    - [`mount`](#mount)
+    - [`register`](#register)
+  - [实例方法](#instance-methods)
+    - [`addApp`](#addApp)
+    - [`closeApp`](#closeApp)
+  - [实例属性](#prototypes)
+  - [事件回调](#events)
+
+<h2 id="static-methods">静态方法</h2>
+
+<h3 id="mount">WindowManager.mount</h3>
+
+> 挂载 WindowManager
+
+```typescript
+const manager = await WindowManager.mount(
+    room: room,
+    container: document.getElementById("container")
+    // 完整配置见下方
+);
+```
+
+参数
+
+| name                   | type                                    | default | desc                         |
+| ---------------------- | --------------------------------------- | ------- | ---------------------------- |
+| room                   | [require] Room                          |         | 房间实例                         |
+| container              | [require] HTMLElement                   |         | 房间挂载容器                       |
+| containerSizeRatio     | [optional] number                       | 9 / 16  | 多窗口区域的高宽比，默认为 9 : 16         |
+| chessboard             | [optional] boolean                      | true    | 多窗口区域以外的空间显示 PS 棋盘背景，默认 true |
+| collectorContainer     | [optional] HTMLElement                  |         | 用于多窗口最小化图标挂载的 dom            |
+| collectorStyles        | [optional] Partial{CSSStyleDeclaration} |         | 配置 collector 的样式             |
+| overwriteStyles        | [optional] string                       |         | 用于覆盖窗口的样式                    |
+| cursor                 | [optional] boolean                      | false   | 开启光标同步                       |
+| disableCameraTransform | [optional] boolean                      |         | 禁用主白板的相机移动                   |
+| prefersColorScheme     | [optional] string                       | light   | auto, light, dark            |
+| debug                  | [optional] boolean                      | false   | 打印日志信息   
+
+<h3 id="register">WindowManager.register</h3>
+
+> 注册 `APP` 到 `WindowManager`
+
+```typescript
+WindowManager.register({
+    kind: "helloWorld",
+    src: NetlessApp,
+    appOptions: () => "appOptions",
+    addHooks: (emitter) => {
+         emitter.on("created", result => {
+            console.log("HelloWordResult", result);
+        });
+        emitter.on("focus", result => {
+            console.log("HelloWorld focus", result);
+        })
+        emitter.on("destroy", result => {
+            console.log("HelloWorld destroy", result);
+        })
+    }
+})
+```
+
+
+<h2 id="instance-methods">实例方法</h2>
+
+<h3 id="addApp">addApp</h3>
+
+> 添加 `app` 至白板
+
+```typescript
+const appId = await manager.addApp({
+    kind: "helloWorld"
+    options: { // 可选配置
+        scenePath: "/hello-world"
+    }
+})
+```
+具体参数请参考 `APP` 本身的要求
+
+<h3 id="closeApp">closeApp</h3>
+
+> 关闭已经打开的 `APP`
+
+```typescript
+manager.closeApp(appId)
+```
+
+<h2 id="prototypes">实例属性</h2>
+
+| name               | type    | default | desc   |
+| ------------------ | ------- | ------- | ------ |
+| mainView           | View    |         | 主白板    |
+| boxState           | string  |         | 当前窗口状态 |
+| darkMode           | boolean |         | 黑夜模式   |
+| prefersColorScheme | string  |         | 颜色主题   |
+
+
+<h2 id="events">事件回调</h2>
+
+```typescript
+manager.callbacks.on(events, listener)
+```
+
+| name                     | type           | default | desc                       |
+| ------------------------ | -------------- | ------- | -------------------------- |
+| mainViewModeChange       | ViewVisionMode |         |                            |
+| boxStateChange           | string         |         | normal,minimized,maximized |
+| darkModeChange           | boolean        |         |                            |
+| prefersColorSchemeChange | string         |         | auto,light,dark            |
+| cameraStateChange        | CameraState    |         |                            |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.3.15",
+  "version": "0.3.16-canary.3",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",

package/src/AppManager.ts

@@ -395,6 +395,9 @@ export class AppManager {
                 if (appProxy) {
                     appProxy.destroy(false, true, payload.error);
                 }
+                if (this.boxManager.maximized) {
+                    this.boxManager.focusTopBox();
+                }
                 break;
             }
             case "boxStateChange": {

package/src/BoxManager.ts

@@ -268,8 +268,8 @@ export class BoxManager {
         this.teleBoxManager.update(appId, { x, y }, true);
     }
 
-    public focusBox({ appId }: AppId): void {
-        this.teleBoxManager.update(appId, { focus: true }, true);
+    public focusBox({ appId }: AppId, skipUpdate = true): void {
+        this.teleBoxManager.update(appId, { focus: true }, skipUpdate);
     }
 
     public resizeBox({ appId, width, height, skipUpdate }: ResizeBoxParams): void {
@@ -315,6 +315,16 @@ export class BoxManager {
         this.teleBoxManager.setMinimized(minimized, skipUpdate);
     }
 
+    public focusTopBox(): void {
+        const boxes = this.teleBoxManager.query();
+        if (boxes.length >= 1) {
+            const box = this.getTopBox();
+            if (box) {
+                this.focusBox({ appId: box.id }, false);
+            }
+        }
+    }
+
     public setReadonly(readonly: boolean) {
         this.teleBoxManager.setReadonly(readonly);
     }

package/src/MainView.ts

@@ -24,8 +24,14 @@ export class MainViewProxy extends Base {
         emitter.once("mainViewMounted").then(() => {
             setTimeout(() => {
                 this.start();
+                if (!this.mainViewCamera || !this.mainViewSize) {
+                    this.setCameraAndSize();
+                }
             }, 200); // 等待 mainView 挂载完毕再进行监听，否则会触发不必要的 onSizeUpdated
         });
+        emitter.on("playgroundSizeChange", () => {
+            this.sizeChangeHandler(this.mainViewSize);
+        });
     }
 
     private get mainViewCamera() {
@@ -43,10 +49,9 @@ export class MainViewProxy extends Base {
 
     public start() {
         if (this.started) return;
+        this.sizeChangeHandler(this.mainViewSize);
         this.addCameraListener();
         this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
-        this.manager.refresher?.add(Fields.MainViewSize, this.sizeReaction);
-        this.view.callbacks.on("onSizeUpdated", this.sizeListener);
         this.started = true;
     }
 
@@ -60,6 +65,7 @@ export class MainViewProxy extends Base {
             () => this.mainViewCamera,
             camera => {
                 if (camera && camera.id !== this.context.uid) {
+                    this.moveCameraToContian(this.mainViewSize);
                     this.moveCamera(camera);
                 }
             },
@@ -69,20 +75,12 @@ export class MainViewProxy extends Base {
         );
     };
 
-    private sizeReaction = () => {
-        return reaction(
-            () => this.mainViewSize,
-            size => {
-                if (size && size.id !== this.context.uid) {
-                    this.moveCameraToContian(size);
-                    this.moveCamera(this.mainViewCamera);
-                }
-            },
-            {
-                fireImmediately: true,
-            }
-        );
-    };
+    private sizeChangeHandler =  debounce((size: Size) => {
+        if (size) {
+            this.moveCameraToContian(size);
+            this.moveCamera(this.mainViewCamera);
+        }
+    }, 30);
 
     public get view(): View {
         return this.mainView;
@@ -94,9 +92,6 @@ export class MainViewProxy extends Base {
 
     public createMainView(): View {
         const mainView = createView(this.manager.displayer);
-        mainView.callbacks.on("onSizeUpdated", () => {
-            this.context.updateManagerRect();
-        });
         const mainViewScenePath = this.store.getMainViewScenePath();
         if (mainViewScenePath) {
             setViewFocusScenePath(mainView, mainViewScenePath);
@@ -107,9 +102,9 @@ export class MainViewProxy extends Base {
         return mainView;
     }
 
-    private cameraListener = (camera: Camera) => {
+    private onCameraUpdatedByDevice = (camera: Camera) => {
         this.store.setMainViewCamera({ ...camera, id: this.context.uid });
-        if (this.store.getMainViewSize()?.id !== this.context.uid) {
+        if (!isEqual(this.mainViewSize, {...this.mainView.size, id: this.context.uid})) {
             this.setMainViewSize(this.view.size);
         }
     };
@@ -141,28 +136,25 @@ export class MainViewProxy extends Base {
         this.context.blurFocusBox();
     }
 
-    private sizeListener = (size: Size) => {
-        this.setMainViewSize(size);
-        callbacks.emit("cameraStateChange", this.cameraState);
-    };
-
     public setMainViewSize = debounce(size => {
         this.store.setMainViewSize({ ...size, id: this.context.uid });
     }, 50);
 
     private addCameraListener() {
-        this.view.callbacks.on("onCameraUpdatedByDevice", this.cameraListener);
-        this.view.callbacks.on("onCameraUpdated", this.cameraStateChangeListener);
+        this.view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
+        this.view.callbacks.on("onCameraUpdated", this.onCameraOrSizeUpdated);
+        this.view.callbacks.on("onSizeUpdated", this.onCameraOrSizeUpdated);
     }
 
     private removeCameraListener() {
-        this.view.callbacks.off("onCameraUpdatedByDevice", this.cameraListener);
-        this.view.callbacks.off("onCameraUpdated", this.cameraStateChangeListener)
+        this.view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
+        this.view.callbacks.off("onCameraUpdated", this.onCameraOrSizeUpdated);
+        this.view.callbacks.off("onSizeUpdated", this.onCameraOrSizeUpdated);
     }
 
-    private cameraStateChangeListener = () => {
+    private onCameraOrSizeUpdated = () => {
         callbacks.emit("cameraStateChange", this.cameraState);
-    }
+    };
 
     public switchViewModeToWriter(): void {
         if (!this.manager.canOperate) return;
@@ -206,7 +198,6 @@ export class MainViewProxy extends Base {
         this.removeCameraListener();
         this.manager.refresher?.remove(Fields.MainViewCamera);
         this.manager.refresher?.remove(Fields.MainViewSize);
-        this.view.callbacks.off("onSizeUpdated", this.sizeListener);
         this.started = false;
     }
 

package/src/index.ts

@@ -135,6 +135,7 @@ export type EmitterEvent = {
     mainViewMounted: undefined;
     observerIdChange: number;
     boxStateChange: string;
+    playgroundSizeChange: DOMRect;
 };
 
 export const emitter: Emittery<EmitterEvent> = new Emittery();
@@ -175,7 +176,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
     private static isCreated = false;
 
-    public version = "0.3.15";
+    public version = "0.3.16-canary.3";
 
     public appListeners?: AppListeners;
 
@@ -699,6 +700,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             if (containerRect) {
                 this.updateSizer(containerRect, sizer, wrapper);
                 this.cursorManager?.updateContainerRect();
+                this.appManager?.boxManager.updateManagerRect();
+                emitter.emit("playgroundSizeChange", containerRect);
             }
         });