@netless/window-manager 1.0.0-canary.6 → 1.0.0-canary.61

package/docs/api.md

@@ -283,6 +283,8 @@ manager.callbacks.on(events, listener)
 | ready                    | undefined      |         | 当所有 APP 创建完毕时触发      ｜
 | sceneStateChange         | SceneState     |         | 当 sceneState 修改时触发     |
 | pageStateChange          | PageState      |         |                            ｜
+| scrollStateChange        | ScrollState    |         | 当在 `ScrollState` 变化时触发 |
+| userScroll               | void           |         | 当用户主动滚动时触发           |
 
 ```ts
 type LoadAppEvent = {
@@ -297,4 +299,12 @@ type PageState = {
     index: number;
     length: number;
 }
+```
+
+```ts
+type ScrollState = {
+    scrollTop: number;
+    page: number;
+    maxScrollPage: number;
+};
 ```

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,53 +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` 为应用窗口本身
+    挂载元素到 `box` 中\
+    推荐使用 `mountStage` 方法挂载元素到 `stage` 中
 
-    类型: `ReadonlyTeleBox`
+    参数: `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 +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,68 @@
+## 迁移至 `@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="telebox-manager-container">
+        <div class="telebox-manager-stage">
+            <div class="netless-window-manager-main-view"></div>
+        </div>
+    </div>
+</div>
+```
+
+
+### `WindowManager.mount()` 迁移
+
+废弃: `chessboard` 属性
+
+- 添加: `containerStyle` 配置
+  - 配置 `telebox-manager-container` 的样式
+- 添加: `stageStyle` 配置**
+  - 配置 `telebox-manager-stage` 的样式
+- 添加: `defaultBoxBodyStyle` 配置
+  - 配置应用窗口默认 `body` 的样式
+- 添加: `defaultBoxStageStyle` 配置
+  - 配置应用窗口默认 `stage` 也就是内容区域的样式
+- 添加: `fullscreen` 配置
+  - 控制应用是否以全屏模式进入
+- 添加: `theme` 配置
+  - 配置默认的颜色变量
+
+### `manager.setContainerSizeRatio()` 行为修改
+
+1.0 之前反复修改 `containerSizeRatio` 会导致内容一直变小
+
+1.0 之后重复修改 `containerSizeRatio` 不会导致内容一致缩小
+
+### baseSize
+
+`baseSize` 主白板会去匹配内容到此大小
+
+添加: `manager.baseSize` 属性\
+添加: `manager.setBaseSize()` 方法\
+添加: `baseSizeChange` 回调
+
+### baseCamera
+
+主白板的 `camera` 会根据 `baseSize` 的值和 `baseCamera` 的值计算一个最终值
+
+添加: `manager.baseSize` 属性\
+添加: `baseCamera` 回调
+
+修改 `baseCamera` 依旧通过 `manager.moveCamera` 来实现

package/package.json

@@ -1,19 +1,21 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.6",
+  "version": "1.0.0-canary.61",
   "description": "",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "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,45 +25,48 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/telebox-insider": "1.0.0-alpha.13",
-    "emittery": "^0.9.2",
+    "@netless/synced-store": "^2.0.7",
+    "@netless/telebox-insider": "1.0.0-alpha.37",
+    "emittery": "^0.11.0",
     "lodash": "^4.17.21",
-    "p-retry": "^4.6.1",
-    "side-effect-manager": "^1.1.0",
+    "p-retry": "^4.6.2",
+    "side-effect-manager": "^1.2.1",
     "uuid": "^7.0.3",
-    "value-enhancer": "^1.2.1",
-    "video.js": ">=7"
+    "value-enhancer": "^1.3.2"
   },
   "devDependencies": {
-    "@netless/app-docs-viewer": "^0.2.9",
-    "@netless/app-media-player": "0.1.0-beta.5",
+    "@netless/app-docs-viewer": "^1.0.0-canary.3",
+    "@netless/app-plyr": "^0.2.3",
+    "@playwright/test": "^1.23.2",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-url": "^6.1.0",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49",
     "@tsconfig/svelte": "^2.0.1",
     "@types/debug": "^4.1.7",
     "@types/lodash": "^4.14.182",
-    "@types/lodash-es": "^4.17.4",
-    "@types/uuid": "^8.3.1",
+    "@types/lodash-es": "^4.17.6",
+    "@types/node": "^18.0.3",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
-    "@vitest/ui": "^0.14.1",
+    "@vitest/ui": "^0.14.2",
     "cypress": "^8.7.0",
     "dotenv": "^10.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.0",
     "jsdom": "^19.0.0",
-    "less": "^4.1.1",
+    "less": "^4.1.3",
     "prettier": "^2.3.2",
     "prettier-plugin-svelte": "^2.4.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-styles": "^3.14.1",
     "svelte": "^3.42.4",
     "typescript": "^4.5.5",
-    "vite": "^2.5.3",
-    "vitest": "^0.14.1",
-    "white-web-sdk": "2.16.10"
+    "vite": "^3.1.3",
+    "vite-plugin-dts": "^1.5.0",
+    "vitest": "^0.23.4",
+    "white-web-sdk": "^2.16.35"
   }
 }

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;