@netless/window-manager 1.0.0-canary.7 → 1.0.0-canary.71

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.7",
+  "version": "1.0.0-canary.71",
   "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.14",
-    "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.4",
+    "@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;

package/src/App/AppContext.ts

@@ -1,5 +1,4 @@
 import { BoxNotCreatedError } from "../Utils/error";
-import { Storage } from "./Storage";
 import {
     autorun,
     listenDisposed,
@@ -7,17 +6,18 @@ import {
     reaction,
     unlistenDisposed,
     unlistenUpdated,
-    toJS,
+    toJS
 } from "white-web-sdk";
+import { Storage } from "@netless/synced-store";
 import type {
     Room,
     SceneDefinition,
     View,
-    EventListener as WhiteEventListener
+    EventListener as WhiteEventListener,
+    Player
 } from "white-web-sdk";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import type Emittery from "emittery";
-import type { BoxManager } from "../BoxManager";
 import type { AppEmitterEvent, Member } from "../index";
 import type { AppManager } from "../AppManager";
 import type { AppProxy } from "./AppProxy";
@@ -29,10 +29,15 @@ import type {
 import { WhiteBoardView } from "./WhiteboardView";
 import { findMemberByUid } from "../Helper";
 import { MAX_PAGE_SIZE } from "../constants";
-import { putScenes } from "../Utils/Common";
-import { isNumber } from "lodash";
+import { isBoolean, isNumber } from "lodash";
+import { Val } from "value-enhancer";
 
-export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOptions = any> {
+export type CreateWhiteBoardViewParams = {
+    size?: number;
+    syncCamera?: boolean;
+}
+
+export class AppContext<TAttributes extends Record<string, any> = any, TMagixEventPayloads = any, TAppOptions = any> {
     public readonly emitter: Emittery<AppEmitterEvent<TAttributes>>;
     public readonly mobxUtils = {
         autorun,
@@ -49,12 +54,11 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     private store = this.manager.store;
     public readonly isAddApp: boolean;
     public readonly isReplay = this.manager.isReplay;
-    private whiteBoardView?: WhiteBoardView;
+    public whiteBoardView?: WhiteBoardView;
     public _viewWrapper?: HTMLElement;
 
     constructor(
         private manager: AppManager,
-        private boxManager: BoxManager,
         public appId: string,
         private appProxy: AppProxy,
         private appOptions?: TAppOptions | (() => TAppOptions)
@@ -63,9 +67,17 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         this.isAddApp = appProxy.isAddApp;
     }
 
-    public get displayer(){
+    public get displayer() {
         return this.manager.displayer;
-    };
+    }
+
+    public get destroyed() {
+        return this.appProxy.status === "destroyed";
+    }
+
+    public get attributes(): TAttributes {
+        return this.appProxy.attributes;
+    }
 
     /** @deprecated Use context.storage.state instead. */
     public getAttributes = (): TAttributes | undefined => {
@@ -85,7 +97,16 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         return this.appProxy.view;
     };
 
-    public createWhiteBoardView = (size?: number): WhiteBoardView => {
+    public get now(): number {
+        if (this.isReplay) {
+            const player = this.displayer as Player;
+            return player.beginTimestamp + player.progressTime;
+        } else {
+            return (this.displayer as Room).calibrationTimestamp;
+        }
+    }
+
+    public createWhiteBoardView = (params?: CreateWhiteBoardViewParams): WhiteBoardView => {
         if (this.whiteBoardView) {
             return this.whiteBoardView;
         }
@@ -93,23 +114,39 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         if (!view) {
             view = this.appProxy.createAppDir();
         }
+        if (params) {
+            if (isBoolean(params.syncCamera)) {
+                this.appProxy.syncCamera$.setValue(params.syncCamera);
+            }
+        }
         const viewWrapper = document.createElement("div");
         this._viewWrapper = viewWrapper;
         viewWrapper.className = "window-manager-view-wrapper";
-        this.box.$content.parentElement?.appendChild(viewWrapper);
-        const removeViewWrapper = () => {
-            this.box.$content.parentElement?.removeChild(viewWrapper);
-            this._viewWrapper = undefined;
-        }
+        this.box.$main.appendChild(viewWrapper);
         view.divElement = viewWrapper;
+        this.appProxy.fireMemberStateChange();
         if (this.isAddApp) {
-            this.initPageSize(size);
+            this.ensurePageSize(params?.size);
         }
-        this.whiteBoardView = new WhiteBoardView(this, this.appProxy, removeViewWrapper);
+        this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, this.ensurePageSize);
+        this.appProxy.sideEffectManager.add(() => [
+            this.box._stageRect$.subscribe(rect => {
+                viewWrapper.style.left = `${rect.x}px`;
+                viewWrapper.style.top = `${rect.y}px`;
+                viewWrapper.style.width = `${rect.width}px`;
+                viewWrapper.style.height = `${rect.height}px`;
+            }),
+            () => {
+                return () => {
+                    this.whiteBoardView = undefined;
+                }
+            }
+        ]);
+        this.appProxy.whiteBoardViewCreated$.setValue(true);
         return this.whiteBoardView;
     }
 
-    private initPageSize = (size?: number) => {
+    private ensurePageSize = (size?: number) => {
         if (!isNumber(size)) return;
         if (!this.appProxy.scenePath) return;
         if (this.appProxy.pageState.length >= size) return;
@@ -117,25 +154,22 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
             throw Error(`[WindowManager]: size ${size} muse be in range [1, ${MAX_PAGE_SIZE}]`);
         }
         const needInsert = size - this.appProxy.pageState.length;
-        const startPageNumber = this.appProxy.pageState.length;
-        const scenes = new Array(needInsert).fill({}).map((_, index) => {
-            return { name: `${startPageNumber + index + 1}` };
-        });
-        putScenes(this.room, this.appProxy.scenePath, scenes);
+        const scenes = new Array(needInsert).fill({});
+        this.room?.putScenes(this.appProxy.scenePath, scenes);
     }
 
     public getInitScenePath = () => {
-        return this.manager.getAppInitPath(this.appId);
+        return this.appProxy.scenePath;
     };
 
     /** Get App writable status. */
     public get isWritable(): boolean {
-        return this.manager.canOperate;
+        return this.manager.canOperate && !this.destroyed;
     };
 
     /** Get the App Window UI box. */
     public get box(): ReadonlyTeleBox {
-        const box = this.boxManager.getBox(this.appId);
+        const box = this.appProxy.box$.value;
         if (box) {
             return box;
         } else {
@@ -147,14 +181,15 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         return this.manager.room;
     };
 
-    public get members() {
-        return this.manager.members;
+    public get members(): Member[] {
+        return this.manager.members$.value;
     }
 
-    public get memberState(): Member {
+    //** currentMember is undefined in read-only and replay mode. */
+    public get currentMember(): Member | undefined {
         const self = findMemberByUid(this.room, this.manager.uid);
         if (!self) {
-            throw new Error(`Member ${this.manager.uid} not found.`);
+            return undefined;
         }
         return {
             uid: this.manager.uid,
@@ -189,26 +224,26 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
             : this.appOptions;
     };
 
-    private _storage?: Storage<TAttributes>;
-
-    /** Main Storage for attributes. */
-    public get storage(): Storage<TAttributes> {
-        if (!this._storage) {
-            this._storage = new Storage(this);
-        }
-        return this._storage;
-    }
-
     /**
      * Create separated storages for flexible state management.
-     * @param storeId Namespace for the storage. Storages of the same namespace share the same data.
+     * @param namespace Namespace for the storage. Storages of the same namespace share the same data.
      * @param defaultState Default state for initial storage creation.
      * @returns
      */
-    public createStorage = <TState>(storeId: string, defaultState?: TState): Storage<TState> => {
-        const storage = new Storage(this, storeId, defaultState);
+    public createStorage = <TState extends Record<string, any>>(namespace: string, defaultState?: TState): Storage<TState> => {
+        const isWritable$ = new Val(this.isWritable);
+        const plugin$ = new Val(this.manager.windowManger);
+        const storage = new Storage({
+            plugin$,
+            isWritable$,
+            namespace: `${this.appId}:${namespace}`,
+            defaultState: defaultState
+        });
+        this.emitter.on("writableChange", writable => {
+            isWritable$.setValue(writable);
+        })
         this.emitter.on("destroy", () => {
-            storage.destroy();
+            storage.disconnect();
         });
         return storage;
     };