@netless/window-manager 0.4.24 → 0.4.27-canary.0

package/dist/typings.d.ts

@@ -74,3 +74,4 @@ export type { ReadonlyTeleBox, TeleBoxRect };
 export type { SceneState, SceneDefinition, View, AnimationMode, Displayer, Room, Player };
 export type { Storage, StorageStateChangedEvent, StorageStateChangedListener } from "./App/Storage";
 export * from "./Page";
+export * from "./Utils/error";

package/docs/advanced.md

@@ -6,6 +6,7 @@
   - [判断是否打开某种 APP](#has-kind)
   - [页面控制器](#page-control)
   - [视角](#view-mode)
+  - [插入图片到当前app](#insert-image-to-app)
 
 
 <h3 id="redo-undo">撤销重做</h3>
@@ -94,10 +95,34 @@ manager.addPage()
 
 <h3 id="view-mode">视角跟随</h3>
 
-`ViewMode` 有 `broadcaster` `freedom` 两种模式
+多窗口中 `ViewMode` 有 `broadcaster` `freedom` 两种模式
 
-可写权限默认进去为 `broadcaster` 并且互相操作并跟随视角
+- `freedom`
 
-当 `room` 设置 `Writable` 为 `false` 时此时只能跟随视角并不能广播视角
+    自由模式，用户可以自由放缩、移动视角
 
-在 `room` 的 `isWritable` 设置为 `false` 后想重新跟随视角可以通过设置为 `broadcaster` 跟随
+    即便房间里有主播，主播也无法影响用户的视角
+
+- `broadcaster`
+
+    主播模式, 操作时其他人的视角都会跟随我
+
+    同时其他为 `broadcaster` 模式的人也会影响我的视角
+
+    在 `isWritable` 为 `false` 时只会跟随其他 `broadcaster` 的视角
+
+<br>
+
+<h3 id="insert-image-to-app">插入图片到当前 app</h3>
+
+```ts
+// 判断当前是否为最大化
+if (manager.boxState === "maximized") {
+    // `focused` 的值的会根据当前 focus 的 app 不同而变化
+    const app = manager.queryOne(manager.focused)
+    // 有 view 的 app 才可以插入图片, 像是 视频，音频之类的 app 是没有 view 的
+    if (app.view) {
+        app.view.insertImage()
+    }
+}
+```

package/docs/api.md

@@ -28,6 +28,7 @@
     - [`prevPage`](#prevPage)
     - [`addPage`](#addPage)
     - [`refresh`](#refresh)
+    - [`setContainerSizeRatio`](#setContainerSizeRatio)
   - [实例属性](#prototypes)
   - [事件回调](#events)
 
@@ -213,6 +214,14 @@ manager.addPage({ after: true }) // 在当前页后添加一页
 manager.addPage({ scene: { name: "page2" } }) // 传入 page 信息
 ```
 
+<h3 id="removePage">removePage</h3>
+
+> 移除一页
+
+```ts
+const success = await manager.removePage(1)
+```
+
 <h3 id="refresh">refresh</h3>
 
 > 刷新 `manager` 的内部状态, 用于从其他房间 `copy` `attributes`
@@ -221,6 +230,14 @@ manager.addPage({ scene: { name: "page2" } }) // 传入 page 信息
 manager.refresh()
 ```
 
+<h3 id="setContainerSizeRatio">setContainerSizeRatio</h3>
+
+> 设置白板同步区域的宽高比
+
+```ts
+manager.setContainerSizeRatio(10 / 16)
+```
+
 <br>
 
 <h2 id="prototypes">实例属性</h2>

package/docs/app-context.md

@@ -1,156 +1,205 @@
 ## AppContext
 
-- [api](#api)
-- [events](#events)
+-   [api](#api)
+    - [view](#view)
+    - [page](#page)
+    - [storage](#storage)
+-   [events](#events)
 
 <h2 id="api">API</h2>
 
-### appId
+- **context.appId**
 
-插入 `app` 时生成的唯一 ID
+    插入 `app` 时生成的唯一 ID
 
-```ts
-const appId = context.appId
-```
+    ```ts
+    const appId = context.appId;
+    ```
 
-### getDisplayer
+- **context.getDisplayer()**
 
-在默认情况下 `Displayer` 为白板的 `room` 实例
+    在默认情况下 `Displayer` 为白板的 `room` 实例
 
-回放时则为 `Player` 实例
+    回放时则为 `Player` 实例
 
-```ts
-const displayer = context.getDisplayer()
+    ```ts
+    const displayer = context.getDisplayer();
 
-assert(displayer, room) // 互动房间
-assert(displayer, player) // 回放房间
-```
+    assert(displayer, room); // 互动房间
+    assert(displayer, player); // 回放房间
+    ```
 
-### getScenes
 
-`scenes` 在 `addApp` 时传入 `scenePath` 会由 `WindowManager` 创建
+- **context.getIsWritable()**
 
-```ts
-const scenes = context.getScenes()
-```
+    获取当前状态是否可写
 
-### getView
+    ```ts
+    // isWritable === (room.isWritable && box.readonly)
+    const isWritable = context.getIsWritable();
+    ```
 
-`View` 为白板中一块可标注部分
+- **context.getBox()**
 
-```ts
-const view = context.getView()
-```
+    获取当前 app 的 box
 
-### getIsWritable
+    ```ts
+    const box = context.getBox();
 
-获取当前状态是否可写
+    box.$content; // box 的 main element
+    box.$footer;
+    ```
 
-```ts
-// isWritable === (room.isWritable && box.readonly)
-const isWritable = context.getIsWritable()
-```
+<h3 id="view">View</h3>
 
-### getBox
+`view` 可以理解为一块白板，可以从 `context` 中拿到这个实例并挂载到 `Dom` 中
 
-获取当前 app 的 box
+- **context.getView()**
 
-```ts
-const box = context.getBox()
+    获取 `view` 实例
 
-box.$content // box 的 main element
-box.$footer
-```
+    ```ts
+    const view = context.getView();
+    ```
 
-### setScenePath
+- **context.mountView()**
 
-切换当前 `view` 的 `scenePath`
+    挂载 view 到指定 dom
 
-```ts
-context.setScenePath("/page/2")
-```
+    ```ts
+    context.mountView(element);
+    ```
 
-### mountView
+- **context.getScenes()**
 
-挂载 view 到指定 dom
+    `scenes` 在 `addApp` 时传入 `scenePath` 会由 `WindowManager` 创建
 
-```ts
-context.mountView(ref)
-```
+    ```ts
+    const scenes = context.getScenes();
+    ```
 
-### addPage
+- **context.setScenePath()**
 
-```ts
-context.addPage()
-```
+    切换当前 `view` 到指定的 `scenePath`
 
-### nextPage
+    ```ts
+    context.setScenePath("/page/2");
+    ```
 
-```ts
-context.nextPage()
-```
 
-### prevPage
+<h3 id="page">Page</h3>
 
-```ts
-context.prevPage()
-```
+`Page` 是封装后 `scenes` 的一些概念
 
-### pageState
+- **context.addPage()**
 
-```ts
-context.pageState
-```
+    添加一页至 `view`
 
+    ```ts
+    context.addPage() // 默认在最后添加一页
+    context.addPage({ after: true }) // 在当前页后添加一页
+    context.addPage({ scene: { name: "page2" } }) // 传入 page 信息
+    ```
 
-<h2 id="events">events</h2>
+- **context.nextPage()**
+
+    上一页
+
+    ```ts
+    context.nextPage();
+    ```
+
+- **context.prevPage()**
+
+    下一页
+
+    ```ts
+    context.prevPage();
+    ```
+
+- **context.pageState**
+
+    获取当前所在的 `index` 和一共有多少页
+
+    ```ts
+    context.pageState;
+    // {
+    //     index: number,
+    //     length: number,
+    // }
+    ```
+
+<h3 id="storage">storage</h3>
+
+存储和同步状态，以及发送事件的一系列集合
 
-### destroy
+- **context.storage**
+
+    默认创建的 storage 实例
+
+    ```ts
+    context.storage
+    ```
+
+- **createStorage()**
+
+    同时你也可以创建多个 `storage` 实例
+
+    ```ts
+    const defaultState = { count: 0 } // 可选
+    const storage = context.createStorage("store1", defaultState);
+    ```
+
+
+
+
+<h2 id="events">events</h2>
 
-app 被关闭时发送的事件
+- **destroy**
 
-```ts
-context.emitter.on("destroy", () => {
-    // release your listeners
-})
-```
+    app 被关闭时发送
 
-### writableChange
+    ```ts
+    context.emitter.on("destroy", () => {
+        // release your listeners
+    });
+    ```
 
-白板可写状态切换时触发
+- **writableChange**
 
-```ts
-context.emitter.on("writableChange", isWritable => {
-    //
-})
-```
+    白板可写状态切换时触发
 
-### focus
+    ```ts
+    context.emitter.on("writableChange", isWritable => {
+        //
+    });
+    ```
 
-当前 app 获得焦点或者失去焦点时触发
+- **focus**
 
-```ts
-context.emitter.on("focus", focus => {
-    //
-})
-```
+    当前 app 获得焦点或者失去焦点时触发
 
+    ```ts
+    context.emitter.on("focus", focus => {
+        //
+    });
+    ```
 
-### pageStateChange
+- **pageStateChange**
 
-#### PageState
+    `PageState`
 
-```ts
-type PateState {
-    index: number;
-    length: number;
-}
-```
+    ```ts
+    type PateState {
+        index: number;
+        length: number;
+    }
+    ```
 
-当前页数和总页数变化时触发
+    当前页数和总页数变化时触发
 
-```ts
-context.emitter.on("pageStateChange", pageState => {
-    // { index: 0, length: 1 }
-})
-```
+    ```ts
+    context.emitter.on("pageStateChange", pageState => {
+        // { index: 0, length: 1 }
+    });
+    ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.24",
+  "version": "0.4.27-canary.0",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -13,7 +13,7 @@
     "predev": "yarn type-gen",
     "build:lib:types": "tsc --emitDeclarationOnly",
     "lint": "eslint --ext .ts,.tsx,.svelte . && prettier --check .",
-    "test": "jest --config=./jest.config.js"
+    "test": "vitest"
   },
   "keywords": [],
   "author": "",
@@ -40,7 +40,7 @@
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22",
     "@tsconfig/svelte": "^2.0.1",
     "@types/debug": "^4.1.7",
-    "@types/jest": "^27.4.1",
+    "@types/lodash": "^4.14.182",
     "@types/lodash-es": "^4.17.4",
     "@types/uuid": "^8.3.1",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
@@ -50,20 +50,16 @@
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.0",
-    "jest": "^27.5.1",
-    "jest-canvas-mock": "^2.3.1",
-    "jest-fetch-mock": "^3.0.3",
-    "jest-transform-stub": "^2.0.0",
+    "jsdom": "^19.0.0",
     "less": "^4.1.1",
     "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",
-    "svelte-jester": "^2.3.2",
-    "ts-jest": "^27.1.4",
     "typescript": "^4.5.5",
     "vite": "^2.5.3",
+    "vitest": "^0.12.4",
     "white-web-sdk": "2.16.10"
   }
 }