@netless/window-manager 0.3.12-canary.1 → 0.3.16-canary.0

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.12-canary.1",
+  "version": "0.3.16-canary.0",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -22,9 +22,9 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/app-docs-viewer": "0.1.22",
+    "@netless/app-docs-viewer": "0.1.24",
     "@netless/app-media-player": "0.1.0-beta.5",
-    "@netless/telebox-insider": "0.2.9",
+    "@netless/telebox-insider": "0.2.10",
     "emittery": "^0.9.2",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.1",

package/src/MainView.ts

@@ -88,11 +88,12 @@ export class MainViewProxy extends Base {
         return this.mainView;
     }
 
+    public get cameraState() {
+        return { ...this.view.camera, ...this.view.size };
+    }
+
     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);
@@ -139,6 +140,7 @@ export class MainViewProxy extends Base {
 
     private sizeListener = (size: Size) => {
         this.setMainViewSize(size);
+        callbacks.emit("cameraStateChange", this.cameraState);
     };
 
     public setMainViewSize = debounce(size => {
@@ -147,10 +149,16 @@ export class MainViewProxy extends Base {
 
     private addCameraListener() {
         this.view.callbacks.on("onCameraUpdatedByDevice", this.cameraListener);
+        this.view.callbacks.on("onCameraUpdated", this.cameraStateChangeListener);
     }
 
     private removeCameraListener() {
         this.view.callbacks.off("onCameraUpdatedByDevice", this.cameraListener);
+        this.view.callbacks.off("onCameraUpdated", this.cameraStateChangeListener)
+    }
+
+    private cameraStateChangeListener = () => {
+        callbacks.emit("cameraStateChange", this.cameraState);
     }
 
     public switchViewModeToWriter(): void {

package/src/index.ts

@@ -51,6 +51,7 @@ import type {
     Point,
     Rectangle,
     ViewVisionMode,
+    CameraState,
 } from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
 import type { NetlessApp, RegisterParams } from "./typings";
@@ -143,6 +144,7 @@ export type PublicEvent = {
     boxStateChange: `${TELE_BOX_STATE}`;
     darkModeChange: boolean;
     prefersColorSchemeChange: TeleBoxColorScheme;
+    cameraStateChange: CameraState;
 };
 
 export type MountParams = {
@@ -173,7 +175,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
     private static isCreated = false;
 
-    public version = "0.3.12-canary.1";
+    public version = "0.3.16-canary.0";
 
     public appListeners?: AppListeners;
 
@@ -515,6 +517,14 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         }
     }
 
+    public get cameraState(): CameraState {
+        if (this.appManager) {
+            return this.appManager.mainViewProxy.cameraState;
+        } else {
+            throw new AppManagerNotInitError();
+        }
+    }
+
     public get apps(): Apps | undefined {
         return this.appManager?.store.apps();
     }
@@ -689,6 +699,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             if (containerRect) {
                 this.updateSizer(containerRect, sizer, wrapper);
                 this.cursorManager?.updateContainerRect();
+                this.appManager?.boxManager.updateManagerRect();
             }
         });