@netless/window-manager 1.0.0-canary.3 → 1.0.0-canary.32

package/docs/app-context.md

@@ -4,8 +4,9 @@
     - [view](#view)
     - [page](#page)
     - [storage](#storage)
-- [events](#events)
+- [实例属性](#attributes)
 - [box](#box)
+- [events](#events)
 - [Advanced](#Advanced)
 
 <h2 id="api">API</h2>
@@ -75,7 +76,7 @@
     ```
 
     ```ts
-    const view = context.createWhiteBoardView(10); // 生成带有 10 页的白板
+    const view = context.createWhiteBoardView({ size: 10 }); // 生成带有 10 页的白板
     ```
 
 - **WhiteBoardView**
@@ -148,6 +149,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>
 
@@ -253,49 +266,88 @@
   context.dispatchMagixEvent("click", { data: "data" });
   ```
 
-<h2 id="events">events</h2>
+<h2 id="attributes">属性</h2>
 
-- **destroy**
+- **destroyed**
 
-    app 被关闭时发送
+    当前应用是否已经被销毁
+
+    类型: `boolean`
 
     ```ts
-    context.emitter.on("destroy", () => {
-        // release your listeners
-    });
+    contest.destroyed
     ```
 
-- **writableChange**
+- **members**
+    
+    当前房间的所有用户
 
-    白板可写状态切换时触发
+    类型: `Member[]`
 
     ```ts
-    context.emitter.on("writableChange", isWritable => {
-        //
-    });
+    type Member = {
+        uid: string;
+        memberId: number;
+        memberState: MemberState;
+        session: string;
+        payload?: UserPayload;
+    }
     ```
 
-- **focus**
+- **currentMember**
 
-    当前 app 获得焦点或者失去焦点时触发
+    当前用户
+
+    类型: `Member`
 
     ```ts
-    context.emitter.on("focus", focus => {
-        //
-    });
+    context.currentMember
     ```
 
-<h2 id="Advanced">Advanced</h2>
 
-- **context.getView()**
+<h2 id="box">box</h2>
 
-    获取 `view` 实例
+    `box` 为应用窗口本身
+
+    类型: `ReadonlyTeleBox`
+
+- **mountStyles()**
+
+    挂载样式到 `box` 上
+
+    参数: `string | HTMLStyleElement`
 
     ```ts
-    const view = context.view;
+    box.mountStyles(`
+        .hello-world-app span {
+            color: red;
+        }
+    `);
     ```
 
-<h2 id="box">box</h2>
+- **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**
 
@@ -320,7 +372,87 @@
     订阅 `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`
+
+
+<h2 id="events">events</h2>
+
+- **destroy**
+
+    app 被关闭时发送
+
+    ```ts
+    context.emitter.on("destroy", () => {
+        // release your listeners
+    });
+    ```
+
+- **writableChange**
+
+    白板可写状态切换时触发
+
+    ```ts
+    context.emitter.on("writableChange", isWritable => {
+        //
+    });
+    ```
+
+- **focus**
+
+    当前 app 获得焦点或者失去焦点时触发
+
+    ```ts
+    context.emitter.on("focus", focus => {
+        //
+    });
+    ```
+
+
+<h2 id="Advanced">Advanced</h2>
+
+- **context.getView()**
+
+    获取 `view` 实例
+
+    ```ts
+    const view = context.view;
+    ```

package/docs/mirgrate-to-1.0.md

@@ -0,0 +1,28 @@
+## 迁移至 `@netless/window-manager@1.0`
+
+### 样式
+
+1.0 之前
+
+```html
+<div class="netless-window-manager-playground">
+    <div class="netless-window-manager-sizer">
+        <div class="netless-window-manager-wrapper">
+            <div class="netless-window-manager-main-view"></div>
+        </div>
+    </div>
+</div>
+```
+
+1.0 之后
+
+```html
+<div class="netless-window-manager-playground">
+    <div class="netless-window-manager-main-view"></div>
+</div>
+```
+
+
+### `APP` 迁移
+
+

package/package.json

@@ -1,19 +1,21 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.3",
+  "version": "1.0.0-canary.32",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/src/index.d.ts",
   "repository": "netless-io/window-manager",
   "scripts": {
     "prettier": "prettier --write .",
-    "build": "vite build && yarn type-gen",
+    "dev": "vite build --watch",
+    "build": "vite build",
     "type-gen": "tsc --emitDeclarationOnly",
     "predev": "yarn type-gen",
     "build:lib:types": "tsc --emitDeclarationOnly",
     "lint": "eslint --ext .ts,.tsx,.svelte . && prettier --check .",
-    "test": "vitest"
+    "test": "vitest",
+    "e2e": "playwright test"
   },
   "keywords": [],
   "author": "",
@@ -23,18 +25,19 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/telebox-insider": "1.0.0-alpha.9",
-    "emittery": "^0.9.2",
+    "@netless/telebox-insider": "1.0.0-alpha.29",
+    "emittery": "^0.11.0",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.1",
     "side-effect-manager": "^1.1.0",
     "uuid": "^7.0.3",
-    "value-enhancer": "^1.2.1",
+    "value-enhancer": "^1.3.0",
     "video.js": ">=7"
   },
   "devDependencies": {
     "@netless/app-docs-viewer": "^0.2.9",
     "@netless/app-media-player": "0.1.0-beta.5",
+    "@playwright/test": "^1.23.0",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-url": "^6.1.0",
@@ -43,6 +46,7 @@
     "@types/debug": "^4.1.7",
     "@types/lodash": "^4.14.182",
     "@types/lodash-es": "^4.17.4",
+    "@types/node": "^18.0.0",
     "@types/uuid": "^8.3.1",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
@@ -61,6 +65,7 @@
     "svelte": "^3.42.4",
     "typescript": "^4.5.5",
     "vite": "^2.5.3",
+    "vite-plugin-dts": "^1.2.0",
     "vitest": "^0.14.1",
     "white-web-sdk": "2.16.10"
   }

package/playwright.config.ts

@@ -0,0 +1,29 @@
+import type { PlaywrightTestConfig} from '@playwright/test';
+import dotenv from "dotenv";
+import path from "path";
+
+dotenv.config({ path: path.resolve(__dirname, "example", ".env") });
+
+const config: PlaywrightTestConfig = {
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  use: {
+    trace: 'on-first-retry',
+    baseURL: "http://localhost:4000",
+    headless: true,
+  },
+  timeout: 5 * 60 * 1000,
+  workers: 4,
+  projects: [
+    {
+      name: 'chrome',
+      use: {
+        launchOptions: {
+            executablePath: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+        }
+        },
+    },
+  ],
+  testDir: "./e2e",
+};
+export default config;