UI (box)
242 | 243 | box 是白板为所有应用默认创建的 UI 244 | 应用所有可以操作的 UI 部分都在 box 范围内 245 | 246 | - **context.getBox()** 247 | 248 | 获取 box 249 | 返回类型: `ReadonlyTeleBox` 250 | 251 | - **box.mountStyles()** 252 | 253 | 挂载样式到 `box` 254 | 参数: `string | HTMLStyleElement` 255 | 256 | ```js 257 | const box = context.getBox(); 258 | box.mountStyles(` 259 | .app-span { 260 | color: red; 261 | } 262 | `) 263 | ``` 264 | 265 | - **box.mountContent()** 266 | 267 | 挂载元素到 `box` 268 | 参数: `HTMLElement` 269 | 270 | ```js 271 | const box = context.getBox(); 272 | const content = document.createElement("div"); 273 | box.mountContent(context); 274 | ``` 275 | 276 | - **box.mountFooter()** 277 | 278 | 挂载元素到 `box` 的 `footer` 279 | 参数: `HTMLElement` 280 | 281 | ```js 282 | const box = context.getBox(); 283 | const footer = document.createElement("div"); 284 | box.mountFooter(context); 285 | ``` 286 | 287 |events
288 | 289 | - **destroy** 290 | 291 | app 被关闭时发送 292 | 293 | ```ts 294 | context.emitter.on("destroy", () => { 295 | // release your listeners 296 | }); 297 | ``` 298 | 299 | - **writableChange** 300 | 301 | 白板可写状态切换时触发 302 | 303 | ```ts 304 | context.emitter.on("writableChange", isWritable => { 305 | // 306 | }); 307 | ``` 308 | 309 | - **focus** 310 | 311 | 当前 app 获得焦点或者失去焦点时触发 312 | 313 | ```ts 314 | context.emitter.on("focus", focus => { 315 | // 316 | }); 317 | ``` 318 | 319 | - **pageStateChange** 320 | 321 | `PageState` 322 | 323 | ```ts 324 | type PateState { 325 | index: number; 326 | length: number; 327 | } 328 | ``` 329 | 330 | 当前页数和总页数变化时触发 331 | 332 | ```ts 333 | context.emitter.on("pageStateChange", pageState => { 334 | // { index: 0, length: 1 } 335 | }); 336 | ``` 337 | - **roomStageChange** 338 | 339 | 房间的状态变化时触发\ 340 | 比如当教具切换时 341 | 342 | ```js 343 | context.emitter.on("roomStageChange", stage => { 344 | if (state.memberState) { 345 | console.log("appliance change to", state.memberState.currentApplianceName); 346 | } 347 | }); 348 | ``` 349 | 350 | 或者是当前房间人数变化时 351 | 352 | ```js 353 | context.emitter.on("roomStageChange", stage => { 354 | if (state.roomMembers) { 355 | console.log("current room members change", state.roomMembers); 356 | } 357 | }); 358 | ``` 359 | 详细状态的介绍请参考 https://developer.netless.link/javascript-zh/home/business-state-management 360 | 361 |Advanced
362 | 363 | - **context.getView()** 364 | 365 | 获取 `view` 实例 366 | 367 | ```ts 368 | const view = context.getView(); 369 | ``` -------------------------------------------------------------------------------- /docs/cn/basic.md: -------------------------------------------------------------------------------- 1 | # 基础教程 2 | `WindowManager` 内置了 `DocsViewer` 和 `MediaPlayer` 用来播放 PPT 和音视频 3 | 4 | ## 打开动态/静态 PPT 5 | ```typescript 6 | import { BuiltinApps } from "@netless/window-manager"; 7 | 8 | const appId = await manager.addApp({ 9 | kind: BuiltinApps.DocsViewer, 10 | options: { 11 | scenePath: "/docs-viewer", // 定义 ppt 所在的 scenePath 12 | title: "docs1", // 可选 13 | scenes: [], // SceneDefinition[] 静态/动态 Scene 数据 14 | }, 15 | }); 16 | ``` 17 | 18 | ## 打开音视频 19 | ```typescript 20 | import { BuiltinApps } from "@netless/window-manager"; 21 | 22 | const appId = await manager.addApp({ 23 | kind: BuiltinApps.MediaPlayer, 24 | options: { 25 | title: "test.mp3", // 可选 26 | }, 27 | attributes: { 28 | src: "xxxx", // 音视频 url 29 | }, 30 | }); 31 | ``` 32 | 33 | 34 | ## 查询所有的 App 35 | ```typescript 36 | const apps = manager.queryAll(); 37 | ``` 38 | 39 | ## 查询单个 APP 40 | ```typescript 41 | const app = manager.queryOne(appId); 42 | ``` 43 | 44 | ## 关闭 App 45 | ```typescript 46 | manager.closeApp(appId); 47 | ``` 48 | 49 | ## events 50 | 51 | ### 窗口最小化最大化 52 | ```typescript 53 | manager.emitter.on("boxStateChange", state => { 54 | // maximized | minimized | normal 55 | }); 56 | ``` 57 | 58 | ### 视角跟随模式 59 | ```typescript 60 | manager.emitter.on("broadcastChange", state => { 61 | // state: number | undefined 62 | }); 63 | ``` 64 | 65 | -------------------------------------------------------------------------------- /docs/cn/camera.md: -------------------------------------------------------------------------------- 1 | # 视角 2 | 在多窗口模式下, 可以同时存在多块白板，但是大多数情况下用户都只需要对主白板也就是 `mainView` 进行操作 3 | 4 | 5 | ## 获取 `mainView` 的 `camera` 6 | ```typescript 7 | manager.mainView.camera 8 | ``` 9 | 10 | ## 获取 `mainView` 的 `size` 11 | ```typescript 12 | manager.mainView.size 13 | ``` 14 | 15 | ## 监听 `mainView` 的 `camera` 变化 16 | ```typescript 17 | manager.mainView.callbacks.on("onCameraUpdated", camera => { 18 | // 更新后的 camera 19 | }) 20 | ``` 21 | 22 | ## 监听 `mainView` 的 `size` 的变化 23 | ```typescript 24 | manager.mainView.callbacks.on("onSizeUpdated", camera => { 25 | // 更新后的 size 26 | }) 27 | ``` 28 | 29 | ## 通过 `api` 移动 `camera` 30 | ```typescript 31 | manager.moveCamera(camera) 32 | ``` 33 | 34 | ## 设置视角边界 35 | 把所有人的视角限制在以世界坐标 (0, 0) 为中心，宽为 1024，高为 768 的矩形之中。 36 | ```typescript 37 | manager.setCameraBound({ 38 | centerX: 0, 39 | centerY: 0, 40 | width: 1024, 41 | height: 768, 42 | }) 43 | ``` 44 | 45 | ## 禁止/允许 `mainView` `camera` 的移动，缩放 46 | ```typescript 47 | // 禁止 `camera` 移动,缩放 48 | manager.mainView.disableCameraTransform = true 49 | 50 | // 恢复 `camera` 移动,缩放 51 | manager.mainView.disableCameraTransform = false 52 | ``` 53 | **注意**，该属性为 `true` 时，仅仅禁止设备操作。你依然可以用 `moveCamera` 方法主动调整视角。 54 | -------------------------------------------------------------------------------- /docs/cn/concept.md: -------------------------------------------------------------------------------- 1 | # 概念 2 | 3 | ## 同步区域 4 | 5 | 在不同分辨率的设备上，想要看到相同的区域和窗口，我们就需要在所有设备保持一个相同的比例。 6 | 7 | 所以 `WindowManager` 有一个 `containerSizeRatio` 的选项来配置白板的宽高比，默认为 `9 / 16` 8 | 9 | 如果外层给到 `WindowManager` 宽高并不是完美适配这个宽高比的话, `WindowManger` 会自动在内部算出一个适配这个比例的最大宽高，然后填充上去，这时在内部就会有一些区域不能操作 10 | -------------------------------------------------------------------------------- /docs/cn/custom-max-bar.md: -------------------------------------------------------------------------------- 1 | ## 如何自定义最大化 `titleBar` 2 | 3 | 获取并订阅所有的 `box` 4 | 5 | ```js 6 | manager.boxManager.teleboxManager.boxes$.subscribe(boxes => { 7 | // boxes 为所有的窗口，当窗口添加和删除时都会触发 8 | }) 9 | ``` 10 | 11 | 切换 `box` 的 `focus` 12 | ```js 13 | manager.boxManager.teleBoxManager.focusBox(box) 14 | ``` 15 | 16 | 关闭某个 `box` 17 | ```js 18 | manager.boxManager.teleBoxManager.remove(box) 19 | ``` 20 | 21 | 切换最大化状态 22 | ```js 23 | manager.boxManager.teleBoxManager.setMaximized(false) 24 | manager.boxManager.teleBoxManager.setMaximized(true) 25 | ``` 26 | 27 | 切换最小化状态 28 | ```js 29 | manager.boxManager.teleBoxManager.setMinimized(true) 30 | manager.boxManager.teleBoxManager.setMaximized(false) 31 | ``` -------------------------------------------------------------------------------- /docs/cn/develop-app.md: -------------------------------------------------------------------------------- 1 | # 开发自定义 APP 2 | 3 | - [AppContext](./app-context.md) 4 | 5 | ## official apps https://github.com/netless-io/netless-app 6 | 7 | ## app-with-whiteboard 8 | 9 | 如果需要 app 中挂载白板请参考 [board.tsx](https://github.com/netless-io/window-manager/blob/master/example/app/board.tsx) 10 | 11 |12 | 13 | ```ts 14 | import type { NetlessApp, AppContext } from "@netless/window-manager"; 15 | 16 | const HelloWorld: NetlessApp = { 17 | kind: "HelloWorld", 18 | setup: (context: AppContext) => { 19 | context.mountView(context.getBox().$content); // 可选: 挂载 View 到 box 上 20 | }, 21 | }; 22 | 23 | WindowManager.register({ 24 | kind: HelloWorld.kind, 25 | src: HelloWorld, 26 | }); 27 | 28 | manager.addApp({ 29 | kind: "HelloWorld", 30 | options: { 31 | scenePath: "/hello-world", // 如果需要在 App 中使用白板则必须声明 scenePath 32 | }, 33 | }); 34 | ``` 35 | 36 | ## Counter 37 | 38 | ```ts 39 | const Counter: NetlessApp<{ count: number }> = { 40 | kind: "Counter", 41 | setup: (context) => { 42 | const storage = context.storage; 43 | storage.ensureState({ count: 0 }); 44 | 45 | const box = context.getBox(); // box 为这个应用打开的窗口 46 | const $content = box.$content // 获取窗口的 content 47 | 48 | const countDom = document.createElement("div"); 49 | countDom.innerText = storage.state.count.toString(); 50 | $content.appendChild(countDom); 51 | 52 | // 监听 state 变化回调 53 | storage.addStateChangedListener(diff => { 54 | if (diff.count) { 55 | // diff 会给出 newValue 和 oldValue 56 | console.log(diff.count.newValue); 57 | console.log(diff.count.oldValue); 58 | countDom.innerText = diff.count.newValue.toString(); 59 | } 60 | }); 61 | 62 | const incButton = document.createElement("button"); 63 | incButton.innerText = "Inc"; 64 | const incButtonOnClick = () => { 65 | storage.setState({ count: storage.state.count + 1 }); 66 | } 67 | incButton.addEventListener("click", incButtonOnClick); 68 | $content.appendChild(incButton); 69 | 70 | const decButton = document.createElement("button"); 71 | decButton.innerText = "Dec"; 72 | const decButtonOnClick = () => { 73 | storage.setState({ count: storage.state.count - 1 }); 74 | } 75 | decButton.addEventListener("click", decButtonOnClick); 76 | $content.appendChild(decButton); 77 | 78 | // 监听事件 79 | const event1Disposer = context.addMagixEventListener("event1", msg => { 80 | console.log("event1", msg); 81 | }); 82 | 83 | // 向打开 app 的其他人发送消息 84 | context.dispatchMagixEvent("event1", { count: 10 }); 85 | 86 | // 应用销毁时, 注意清理掉监听器 87 | context.emitter.on("destroy", () => { 88 | incButton.removeEventListener("click", incButtonOnClick); 89 | decButton.removeEventListener("click", decButtonOnClick); 90 | event1Disposer(); 91 | }); 92 | } 93 | } 94 | ``` -------------------------------------------------------------------------------- /docs/cn/export-pdf.md: -------------------------------------------------------------------------------- 1 | # 导出 PDF 2 | 3 | 此功能需要额外安装 `jspdf` 依赖才能使用 4 | 5 | ``` 6 | npm install jspdf@2.5.1 7 | ``` 8 | 9 | ### 支持的 app 及版本 10 | 11 | 1. @netless/app-slide `0.2.23` 及以上版本支持保存动态 ppt 板书 12 | 13 | 2. @netless/app-docs-viewer `0.2.10` 及以上版本支持保存 pdf 板书, **注意** app-docs-viewer 中可以展示静态 ppt, pdf, 动态 ppt. 其中只有 pdf 文件支持保存板书 14 | 15 | 对应 @netless/window-manager `0.4.50` 及以上 16 | 17 | 3. white-web-sdk `2.16.37` 及以上 18 | 19 | ### 发起保存板书任务 20 | 21 | 通过 `window.postMessage` 发事件来发起保存板书任务, 注意不要在任务尚未完成之前重复发送该事件. 22 | 23 | ```js 24 | window.postMessage({ 25 | type: "@netless/_request_save_pdf_", 26 | appId: /* windowManager.addApp 返回的值, 指定要保存哪个窗口的板书, */ 27 | }) 28 | ``` 29 | 30 | ### 获取任务进度 31 | 32 | 任务进度也通过 message 事件传递, 你需要在发起任务之前监听任务进度事件, 实例代码如下所示. 33 | 其中 data.result 只有在任务成功时候才有值, 任务失败或者任务进行中都为 null. 34 | **如果下载任务失败, 则 progress 为 100 但是 result 为 null.** 35 | 36 | ```js 37 | window.addEventListener("message", evt => { 38 | if (evt.data.type === "@netless/_result_save_pdf_") { 39 | console.log(evt.data); 40 | // data 包含如下属性 41 | // data.type: 固定值 "@netless/_result_save_pdf_" 42 | // data.appId: 指明是哪次下载任务, 与发起保存板书时候传递的 appId 值一致 43 | // data.progress: 下载进度, 0 ~ 100 44 | // data.result: { pdf: ArrayBuffer {}, title: "a.pptx" } 或者 null, 为板书的 pdf 文件内容, 45 | // 仅当下载进度 100 时才有值. 获取到 ArrayBuffer 后需要自行完成下载到本地的逻辑. 46 | } 47 | }); 48 | ``` 49 | -------------------------------------------------------------------------------- /docs/cn/migrate.md: -------------------------------------------------------------------------------- 1 | 2 | ### 注意事项 3 | 4 | 多窗口模式必须开启白板的 `useMultiViews` 和 `useMobXState` 选项 5 | 6 | 会造成原本以下 `room` 上的一些方法和 `state` 失效 7 | 8 | `方法` 9 | 10 | - `room.bindHtmlElement()` 用 `WindowManager.mount()` 代替 11 | - `room.scalePptToFit()` 暂无代替,不再推荐调用 `scalePptToFit` 12 | - `room.setScenePath()` 用 `manager.setMainViewScenePath()` 代替 13 | - `room.setSceneIndex()` 用 `manager.setMainViewSceneIndex()` 代替 14 | 15 | > 为了方便使用 `manager` 替换了 `room` 上的一些方法可以直接对 `mainView` 生效 16 | 17 | - `room.disableCameraTransform` 18 | - `room.moveCamera` 19 | - `room.moveCameraToContain` 20 | - `room.convertToPointInWorld` 21 | - `room.setCameraBound` 22 | 23 | `camera` 24 | 25 | - `room.state.cameraState` 用 `manager.mainView.camera` 和 `manager.mainView.size` 代替 26 | 27 | 想要监听主白板 `camera` 的变化, 请使用如下方式代替 28 | 29 | ```javascript 30 | manager.mainView.callbacks.on("onCameraUpdated", camera => { 31 | console.log(camera); 32 | }); 33 | ``` 34 | 35 | 监听主白板 `size` 变化 36 | 37 | ```javascript 38 | manager.mainView.callbacks.on("onSizeUpdated", size => { 39 | console.log(size); 40 | }); 41 | ``` 42 | 43 |
44 | 45 | ## `white-web-sdk` 从 `2.15.x` 迁移至 `2.16.x` 46 | 47 | ### `room.setMemberState` 48 | 49 | 此方法在开启多窗口时要等待 `WindowManager` 挂载完成后才可以直接调用。 50 | 51 | 或者使用 `manager.mainView.setMemberState` 代替 52 | 53 |
54 | 55 | ### `room.pptPreviousStep` `room.pptNextStep` 切换上下页 56 | 57 | 因为窗口实现机制的改变, `pptPreviousStep` 和 `pptNextStep` 不再生效 58 | 59 | 如果需要切换主白板的上下页, 请使用 `manager.nextPage` 和 `manager.prevPage` 60 | 61 | -------------------------------------------------------------------------------- /docs/cn/quickstart.md: -------------------------------------------------------------------------------- 1 | # 快速上手 2 | 3 | ## 安装 4 | 通过 `npm` 或 `yarn` 来安装 `WindowManager`. 5 | ```shell 6 | # npm 7 | $ npm install @netless/window-manager 8 | 9 | # yarn 10 | $ yarn add @netless/window-manager 11 | ``` 12 | 13 | 引用 14 | ```typescript 15 | import { WhiteWindowSDK } from "@netless/window-manager"; 16 | import "@netless/window-manager/dist/style.css"; 17 | ``` 18 | 19 | ## 开始使用 20 | 21 | ### 准备容器 22 | 在页面中创建一个用于挂载的容器 23 | ```html 24 | 25 | ``` 26 | 27 | ### 初始化 SDK 28 | ```typescript 29 | const sdk = new WhiteWindowSDK({ 30 | appIdentifier: "appIdentifier" 31 | }) 32 | ``` 33 | 34 | ### 加入房间并挂载容器 35 | ```typescript 36 | const manager = await sdk.mount({ 37 | joinRoomParams: { 38 | uuid: "room uuid", 39 | roomToken: "room token", 40 | }, 41 | mountParams: { 42 | container: document.getElementById("container") 43 | } 44 | }) 45 | ``` 46 | 47 | ### 卸载 48 | ```typescript 49 | manager.destroy(); 50 | ``` 51 | -------------------------------------------------------------------------------- /docs/cn/replay.md: -------------------------------------------------------------------------------- 1 | ## 回放 2 | 3 | > 注意: 多窗口的回放只支持从创建房间开始就是多窗口的房间 4 | 5 | > 如果是一开始作为单窗口模式使用，又转变成多窗口模式使用, 则会造成回放渲染空白 6 | 7 |
8 | 9 | 10 | ```typescript 11 | import { WhiteWebSdk } from "white-web-sdk"; 12 | import { WindowManager, BuiltinApps } from "@netless/window-manager"; 13 | import "@netless/window-manager/dist/style.css"; 14 | 15 | const sdk = new WhiteWebSdk({ 16 | appIdentifier: "appIdentifier", 17 | useMobXState: true // 请确保打开这个选项 18 | }); 19 | 20 | let manager: WindowManager; 21 | 22 | sdk.replayRoom({ 23 | uuid: "room uuid", 24 | roomToken: "room token", 25 | invisiblePlugins: [WindowManager], 26 | useMultiViews: true, // 多窗口必须用开启 useMultiViews 27 | }).then(player => { 28 | player.callbacks.on("onPhaseChanged", async (phase) => { 29 | if (phase === PlayerPhase.Playing) { 30 | if (manager) return; 31 | manager = await WindowManager.mount({ 32 | room: player, 33 | container: document.getElementById("container") 34 | }); 35 | } 36 | }) 37 | }); 38 | 39 | player.play(); // WindowManager 只有在播放之后才能挂载 40 | ``` -------------------------------------------------------------------------------- /docs/concept.md: -------------------------------------------------------------------------------- 1 | # Concept 2 | 3 | ## Sync Zone 4 | 5 | On devices with different resolutions, if we want to see the same area and window, we need to maintain the same ratio on all devices. 6 | 7 | So `WindowManager` has a `containerSizeRatio` option to configure the aspect ratio of the whiteboard, the default is `9 / 16` 8 | 9 | If the width and height given to WindowManager by the outer layer do not perfectly fit this aspect ratio, WindowManger will automatically calculate a maximum width and height that fits this ratio internally, and then fill it in. At this time, there will be some internal areas that cannot be operated 10 | 11 | -------------------------------------------------------------------------------- /docs/custom-max-bar.md: -------------------------------------------------------------------------------- 1 | ## How to customize maximized `titleBar` 2 | 3 | Get and subscribe to all `box` 4 | 5 | ```js 6 | manager.boxManager.teleboxManager.boxes$.subscribe(boxes => { 7 | // boxes are all windows, trigger when windows are added and deleted 8 | }) 9 | ``` 10 | 11 | Toggle `focus` of `box` 12 | ```js 13 | manager.boxManager.teleBoxManager.focusBox(box) 14 | ``` 15 | 16 | close a `box` 17 | ```js 18 | manager.boxManager.teleBoxManager.remove(box) 19 | ``` 20 | 21 | Toggle maximized state 22 | ```js 23 | manager.boxManager.teleBoxManager.setMaximized(false) 24 | manager.boxManager.teleBoxManager.setMaximized(true) 25 | ``` 26 | 27 | Toggle minimized state 28 | ```js 29 | manager.boxManager.teleBoxManager.setMinimized(true) 30 | manager.boxManager.teleBoxManager.setMaximized(false) 31 | ``` -------------------------------------------------------------------------------- /docs/develop-app.md: -------------------------------------------------------------------------------- 1 | # Develop custom APP 2 | 3 | - [AppContext](./app-context.md) 4 | 5 | ## official apps https://github.com/netless-io/netless-app 6 | 7 | ## app-with-whiteboard 8 | 9 | If you need to mount a whiteboard in the app, please refer to [board.tsx](https://github.com/netless-io/window-manager/blob/master/example/app/board.tsx) 10 | 11 |
12 | 13 | ```ts 14 | import type { NetlessApp, AppContext } from "@netless/window-manager"; 15 | 16 | const HelloWorld: NetlessApp = { 17 | kind: "Hello World", 18 | setup: (context: AppContext) => { 19 | context.mountView(context.getBox().$content); // optional: mount the View to the box 20 | }, 21 | }; 22 | 23 | WindowManager.register({ 24 | kind: HelloWorld.kind, 25 | src: HelloWorld, 26 | }); 27 | 28 | manager.addApp({ 29 | kind: "Hello World", 30 | options: { 31 | scenePath: "/hello-world", // If you need to use the whiteboard in the app, you must declare scenePath 32 | }, 33 | }); 34 | ``` 35 | 36 | ## Counter 37 | 38 | ```ts 39 | const Counter: NetlessApp<{ count: number }> = { 40 | kind: "Counter", 41 | setup: context => { 42 | const storage = context.storage; 43 | storage.ensureState({ count: 0 }); 44 | 45 | const box = context.getBox(); // box is the window opened for this application 46 | const $content = box.$content; // Get the content of the window 47 | 48 | const countDom = document.createElement("div"); 49 | countDom.innerText = storage.state.count.toString(); 50 | $content.appendChild(countDom); 51 | 52 | // Listen for state change callbacks 53 | storage.addStateChangedListener(diff => { 54 | if (diff.count) { 55 | // diff will give newValue and oldValue 56 | console.log(diff.count.newValue); 57 | console.log(diff.count.oldValue); 58 | countDom.innerText = diff.count.newValue.toString(); 59 | } 60 | }); 61 | 62 | const incButton = document.createElement("button"); 63 | incButton.innerText = "Inc"; 64 | const incButtonOnClick = () => { 65 | storage.setState({ count: storage.state.count + 1 }); 66 | }; 67 | incButton.addEventListener("click", incButtonOnClick); 68 | $content.appendChild(incButton); 69 | 70 | const decButton = document.createElement("button"); 71 | decButton.innerText = "Dec"; 72 | const decButtonOnClick = () => { 73 | storage.setState({ count: storage.state.count - 1 }); 74 | }; 75 | decButton.addEventListener("click", decButtonOnClick); 76 | $content.appendChild(decButton); 77 | 78 | // listen for events 79 | const event1Disposer = context.addMagixEventListener("event1", msg => { 80 | console.log("event1", msg); 81 | }); 82 | 83 | // Send a message to other people who have the app open 84 | context.dispatchMagixEvent("event1", { count: 10 }); 85 | 86 | // When the application is destroyed, pay attention to clean up the listener 87 | context.emitter.on("destroy", () => { 88 | incButton.removeEventListener("click", incButtonOnClick); 89 | decButton.removeEventListener("click", decButtonOnClick); 90 | event1Disposer(); 91 | }); 92 | }, 93 | }; 94 | ``` 95 | -------------------------------------------------------------------------------- /docs/export-pdf.md: -------------------------------------------------------------------------------- 1 | # Export PDF 2 | 3 | This feature requires additional installation of the `jspdf` dependency to use 4 | 5 | ``` 6 | npm install jspdf@2.5.1 7 | ``` 8 | 9 | ### Supported apps and versions 10 | 11 | 1. @netless/app-slide `0.2.23` and above support saving dynamic ppt board writing 12 | 13 | 2. @netless/app-docs-viewer `0.2.10` and above support saving pdf board writing, **Note** app-docs-viewer can show static ppt, pdf, dynamic ppt. Only pdf files support saving board writing 14 | 15 | Only pdf files can be saved in the app-docs-viewer, which is compatible with @netless/window-manager `0.4.50` and above. 16 | 17 | 3. white-web-sdk `2.16.37` and above 18 | 19 | ### Initiate a save board writing task 20 | 21 | Launch the save board writing task with a `window.postMessage` event, and be careful not to repeat the event before the task is completed. 22 | 23 | ```js 24 | window.postMessage({ 25 | type: "@netless/_request_save_pdf_", 26 | appId: /* windowManager.addApp return value, specify which window to save the board writing, */ 27 | }) 28 | ``` 29 | 30 | ### Get task progress 31 | 32 | Task progress is also passed through the message event, you need to listen to the task progress event before launching the task, the example code is shown below. 33 | The data.result will only have a value if the task succeeds, and will be null if the task fails or is in progress. 34 | **If the download task fails, then progress is 100 but result is null.** 35 | 36 | ```js 37 | window.addEventListener("message", evt => { 38 | if (evt.data.type === "@netless/_result_save_pdf_") { 39 | console.log(evt.data); 40 | // data contains the following properties 41 | // data.type: fixed value "@netless/_result_save_pdf_" 42 | // data.appId: specifies which download task, same as the appId value passed when the board writing was saved 43 | // data.progress: progress of the download, 0 ~ 100 44 | // data.result: { pdf: ArrayBuffer {}, title: "a.pptx" } or null, the contents of the pdf file for the board writing. 45 | // value only when the download progresses to 100. After getting the ArrayBuffer you need to complete the logic of downloading to local. 46 | } 47 | }); 48 | ``` 49 | -------------------------------------------------------------------------------- /docs/migrate.md: -------------------------------------------------------------------------------- 1 | ### Precautions 2 | 3 | Multi-window mode must enable whiteboard `useMultiViews` and `useMobXState` options 4 | 5 | It will cause some methods and `state` on the following `room` to fail 6 | 7 | `method` 8 | 9 | - `room.bindHtmlElement()` is replaced by `WindowManager.mount()` 10 | - There is no replacement for `room.scalePptToFit()`, calling `scalePptToFit` is no longer recommended 11 | - `room.setScenePath()` is replaced by `manager.setMainViewScenePath()` 12 | - `room.setSceneIndex()` is replaced by `manager.setMainViewSceneIndex()` 13 | 14 | > In order to use `manager` to replace some methods on `room`, it can directly take effect on `mainView` 15 | 16 | - `room.disableCameraTransform` 17 | - `room.moveCamera` 18 | - `room.moveCameraToContain` 19 | - `room.convertToPointInWorld` 20 | - `room.setCameraBound` 21 | 22 | `camera` 23 | 24 | - `room.state.cameraState` is replaced by `manager.mainView.camera` and `manager.mainView.size` 25 | 26 | If you want to monitor the main whiteboard `camera` changes, please use the following method instead 27 | 28 | ```javascript 29 | manager.mainView.callbacks.on("onCameraUpdated", camera => { 30 | console.log(camera); 31 | }); 32 | ``` 33 | 34 | Monitor main whiteboard `size` changes 35 | 36 | ```javascript 37 | manager.mainView.callbacks.on("onSizeUpdated", size => { 38 | console.log(size); 39 | }); 40 | ``` 41 | 42 |
43 | 44 | ## `white-web-sdk` migrated from `2.15.x` to `2.16.x` 45 | 46 | ### `room.setMemberState` 47 | 48 | This method can be called directly after waiting for `WindowManager` to be mounted when multi-window is enabled. 49 | 50 | Or use `manager.mainView.setMemberState` instead 51 | 52 |
53 | 54 | ### `room.pptPreviousStep` `room.pptNextStep` Switch to the next page 55 | 56 | `pptPreviousStep` and `pptNextStep` no longer work due to changes in window implementation 57 | 58 | If you need to switch the top and bottom pages of the main whiteboard, please use `manager.nextPage` and `manager.prevPage` 59 | -------------------------------------------------------------------------------- /docs/quickstart.md: -------------------------------------------------------------------------------- 1 | # Get started quickly 2 | 3 | ## Install 4 | Install `WindowManager` via `npm` or `yarn`. 5 | ```bash 6 | # npm 7 | $ npm install @netless/window-manager 8 | 9 | # yarn 10 | $ yarn add @netless/window-manager 11 | ``` 12 | 13 | Import: 14 | ```typescript 15 | import { WhiteWindowSDK } from "@netless/window-manager"; 16 | import "@netless/window-manager/dist/style.css"; 17 | ``` 18 | 19 | ## Start using 20 | 21 | ### Prepare container 22 | Create a container for mounting in the page 23 | ```html 24 | 25 | ``` 26 | 27 | ### Initialize the SDK 28 | ```typescript 29 | const sdk = new WhiteWindowSDK({ 30 | appIdentifier: "appIdentifier" 31 | }) 32 | ``` 33 | 34 | ### Join the room and mount the container 35 | ```typescript 36 | const manager = await sdk.mount({ 37 | joinRoomParams: { 38 | uuid: "room uuid", 39 | roomToken: "room token", 40 | }, 41 | mountParams: { 42 | container: document.getElementById("container") 43 | } 44 | }) 45 | ``` 46 | 47 | ### Uninstall 48 | ```typescript 49 | manager.destroy(); 50 | ``` 51 | -------------------------------------------------------------------------------- /docs/replay.md: -------------------------------------------------------------------------------- 1 | ## playback 2 | 3 | > Note: Multi-window playback only supports multi-window rooms from the creation of the room 4 | 5 | > If it is used as a single-window mode at the beginning and then converted to a multi-window mode, it will cause blank playback rendering 6 | 7 |
8 | 9 | 10 | ```typescript 11 | import { WhiteWebSdk } from "white-web-sdk"; 12 | import { WindowManager, BuiltinApps } from "@netless/window-manager"; 13 | import "@netless/window-manager/dist/style.css"; 14 | 15 | const sdk = new WhiteWebSdk({ 16 | appIdentifier: "appIdentifier", 17 | useMobXState: true // make sure this option is turned on 18 | }); 19 | 20 | let manager: WindowManager; 21 | 22 | sdk.replayRoom({ 23 | uuid: "room uuid", 24 | roomToken: "room token", 25 | invisiblePlugins: [WindowManager], 26 | useMultiViews: true, // Multi-window must be enabled useMultiViews 27 | }).then(player => { 28 | player.callbacks.on("onPhaseChanged", async (phase) => { 29 | if (phase === PlayerPhase.Playing) { 30 | if (manager) return; 31 | manager = await WindowManager.mount({ 32 | room: player, 33 | container: document.getElementById("container") 34 | }); 35 | } 36 | }) 37 | }); 38 | 39 | player.play(); // WindowManager can only be mounted after playing 40 | ``` 41 | -------------------------------------------------------------------------------- /e2e/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "projectId": "window-manager", 3 | "baseUrl": "http://localhost:4000", 4 | "integrationFolder": "cypress/integration", 5 | "testFiles": "**/*.spec.ts", 6 | "video": false 7 | } 8 | -------------------------------------------------------------------------------- /e2e/cypress/integration/boxstate.spec.ts: -------------------------------------------------------------------------------- 1 | import { TELE_BOX_STATE } from "@netless/telebox-insider"; 2 | import type { WindowManager } from "../../../dist"; 3 | import { HelloWorldApp } from "../../../example/app/helloworld-app"; 4 | import sinon from "sinon"; 5 | import "./common"; 6 | 7 | describe("boxState", () => { 8 | before(() => { 9 | sinon.restore(); 10 | cy.visit("/"); 11 | cy.wait(8000); 12 | }); 13 | 14 | afterEach(() => { 15 | cy.wait(1000); 16 | }); 17 | 18 | after(() => { 19 | cy.window().then(async (window: any) => { 20 | const manager = window.manager as WindowManager; 21 | const apps = manager.queryAll(); 22 | if (apps.length > 0) { 23 | apps.forEach(app => { 24 | manager.closeApp(app.id); 25 | }); 26 | } 27 | }); 28 | }); 29 | 30 | it("添加一个 App", () => { 31 | cy.window().then(async (window: any) => { 32 | const manager = window.manager as WindowManager; 33 | const WindowManager = window.WindowManager; 34 | const onFocus = sinon.spy(); 35 | const onCreated = sinon.spy(); 36 | 37 | WindowManager.register({ 38 | kind: "HelloWorld", 39 | src: HelloWorldApp, 40 | addHooks: (emitter: any) => { 41 | emitter.on("focus", () => onFocus()); 42 | emitter.on("created", () => onCreated()); 43 | }, 44 | }); 45 | 46 | const apps = manager.queryAll(); 47 | if (apps.length === 0) { 48 | cy.wrap(null).then(() => { 49 | return manager.addApp({ 50 | kind: "HelloWorld", 51 | options: { 52 | scenePath: "/helloworld1", 53 | }, 54 | }); 55 | }); 56 | cy.wait(100).then(() => { 57 | expect(onCreated.calledOnce).to.be.true; 58 | expect(onFocus.calledOnce).to.be.true; 59 | }); 60 | } 61 | }); 62 | }); 63 | 64 | it("最大化", () => { 65 | cy.window().then(async (window: any) => { 66 | const manager = window.manager; 67 | const apps = manager.queryAll(); 68 | const app = apps[0]; 69 | expect(manager.boxState).to.be.equal(TELE_BOX_STATE.Normal); 70 | cy.get(`[data-tele-box-i-d=${app.id}] .telebox-titlebar-icon-maximize`).click({ 71 | force: true, 72 | }); 73 | cy.wait(500).then(() => { 74 | expect(manager.boxState).to.be.equal(TELE_BOX_STATE.Maximized); 75 | }); 76 | cy.get(`[data-tele-box-i-d=${app.id}] .telebox-titlebar-icon-maximize`).click({ 77 | force: true, 78 | }); 79 | cy.wait(500).then(() => { 80 | expect(manager.boxState).to.be.equal(TELE_BOX_STATE.Normal); 81 | }); 82 | }); 83 | }); 84 | 85 | it("最小化", () => { 86 | cy.window().then(async (window: any) => { 87 | const manager = window.manager; 88 | const apps = manager.queryAll(); 89 | const app = apps[0]; 90 | expect(manager.boxState).to.be.equal(TELE_BOX_STATE.Normal); 91 | cy.get(`[data-tele-box-i-d=${app.id}] .telebox-titlebar-icon-minimize`).click({ 92 | force: true, 93 | }); 94 | cy.wait(500).then(() => { 95 | expect(manager.boxState).to.be.equal(TELE_BOX_STATE.Minimized); 96 | cy.get(".telebox-collector.telebox-collector-visible").should("have.length", 1); 97 | }); 98 | }); 99 | }); 100 | 101 | it("从最小化恢复 focus topBox", () => { 102 | cy.window().then(async (window: any) => { 103 | const manager = window.manager as WindowManager; 104 | const apps = manager.queryAll(); 105 | const app = apps[0]; 106 | expect(manager.boxState).to.be.equal(TELE_BOX_STATE.Minimized); 107 | cy.get(`.telebox-collector.telebox-collector-visible`).click({ force: true }); 108 | cy.wait(500).then(() => { 109 | expect(manager.boxState).to.be.equal(TELE_BOX_STATE.Normal); 110 | expect(manager.focused).to.be.equal(app.id); 111 | }); 112 | }); 113 | }); 114 | }); 115 | 116 | export {}; 117 | -------------------------------------------------------------------------------- /e2e/cypress/integration/common.ts: -------------------------------------------------------------------------------- 1 | const resizeObserverLoopErrRe = /^ResizeObserver loop limit exceeded/; 2 | 3 | Cypress.on("uncaught:exception", err => { 4 | if (resizeObserverLoopErrRe.test(err.message)) { 5 | return false; 6 | } 7 | }); 8 | -------------------------------------------------------------------------------- /e2e/cypress/integration/cursor.spec.ts: -------------------------------------------------------------------------------- 1 | import { RoomPhase } from "white-web-sdk"; 2 | import type { Room } from "white-web-sdk"; 3 | 4 | describe("光标", () => { 5 | before(() => { 6 | cy.visit("/"); 7 | cy.wait(8000); 8 | }); 9 | 10 | afterEach(() => { 11 | cy.wait(1000); 12 | }); 13 | 14 | it("room members 数据正确", () => { 15 | cy.window().then((window: any) => { 16 | const manager = window.manager; 17 | const room = window.room as Room; 18 | expect(room.phase).to.be.equal(RoomPhase.Connected); 19 | expect(manager).to.be.a("object"); 20 | expect(room.isWritable).to.be.true; 21 | cy.get(".netless-whiteboard").should("have.length", 1); 22 | expect(room.state.roomMembers.length).to.be.gte(2); 23 | }); 24 | }); 25 | 26 | // 光标实现方式修改, 不再有默认的 dom 27 | // it("光标 dom 存在", () => { 28 | // cy.window().then((window: any) => { 29 | // const room = window.room as Room; 30 | // cy.get(".netless-window-manager-cursor-mid").should("have.length", 1); 31 | // expect(room.state.roomMembers.length).to.be.gte(2); 32 | // }); 33 | // }) 34 | }); 35 | 36 | export {}; 37 | -------------------------------------------------------------------------------- /e2e/cypress/integration/index.spec.ts: -------------------------------------------------------------------------------- 1 | import { RoomPhase } from "white-web-sdk"; 2 | 3 | describe("正常流程", () => { 4 | before(() => { 5 | cy.visit("/"); 6 | cy.wait(8000); 7 | }); 8 | 9 | afterEach(() => { 10 | cy.wait(1000); 11 | }); 12 | 13 | it("挂载成功", () => { 14 | cy.window().then((window: any) => { 15 | const manager = window.manager; 16 | const room = window.room; 17 | expect(room).to.be.a("object"); 18 | expect(room.phase).to.be.equal(RoomPhase.Connected); 19 | expect(manager).to.be.a("object"); 20 | }); 21 | }); 22 | 23 | it("插入一个 APP", () => { 24 | cy.window().then(async (window: any) => { 25 | const manager = window.manager; 26 | const appId = await manager.addApp({ 27 | kind: "HelloWorld", 28 | options: { 29 | scenePath: "/helloworld1", 30 | }, 31 | }); 32 | cy.wait(1000).then(() => { 33 | expect(appId).to.be.string; 34 | cy.get(".telebox-box").should("have.length", 1); 35 | expect(manager.focused).to.be.equal(appId); 36 | const app = manager.queryOne(appId); 37 | expect(app).to.be.a("object"); 38 | expect(app.view.focusScenePath).to.be.match(/helloworld1/); 39 | }); 40 | }); 41 | }); 42 | 43 | it("删除所有 APP", () => { 44 | cy.window().then(async (window: any) => { 45 | const manager = window.manager; 46 | const apps = manager.queryAll(); 47 | for (const app of apps) { 48 | await app.close(); 49 | } 50 | expect(manager.queryAll().length).to.be.equal(0); 51 | cy.get(".telebox-box").should("have.length", 0); 52 | expect(manager.focused).to.be.undefined; 53 | }); 54 | }); 55 | }); 56 | 57 | export {}; 58 | -------------------------------------------------------------------------------- /e2e/cypress/integration/mainViewScenePath.spec.ts: -------------------------------------------------------------------------------- 1 | import type { Room } from "white-web-sdk"; 2 | import type { WindowManager } from "../../../dist"; 3 | import "./common"; 4 | 5 | describe("切换 MainViewScene", () => { 6 | before(() => { 7 | cy.visit("/"); 8 | cy.wait(8000); 9 | }); 10 | 11 | afterEach(() => { 12 | cy.wait(1000); 13 | }); 14 | 15 | it("设置 MainViewSceneIndex", () => { 16 | cy.window().then(async (window: any) => { 17 | const manager = window.manager as WindowManager; 18 | const room = window.room; 19 | expect(room).to.be.a("object"); 20 | expect(manager).to.be.a("object"); 21 | 22 | cy.wrap(null).then(() => manager.setMainViewSceneIndex(0)); 23 | 24 | expect(manager.mainViewSceneIndex).to.be.equal(0); 25 | expect(manager.mainView.focusScenePath).to.be.equal("/init"); 26 | }); 27 | }); 28 | 29 | it("设置 mainViewScenePath 更新 mainViewSceneIndex", () => { 30 | cy.window().then((window: any) => { 31 | const manager = window.manager as WindowManager; 32 | const room = window.room; 33 | expect(room).to.be.a("object"); 34 | expect(manager).to.be.a("object"); 35 | 36 | cy.wrap(null).then(() => room.putScenes("/", [{}])); 37 | cy.wrap(null).then(() => manager.setMainViewSceneIndex(1)); 38 | 39 | cy.wait(1000).then(() => { 40 | expect(manager.mainViewSceneIndex).to.be.equal(1); 41 | }); 42 | 43 | cy.wrap(null).then(() => manager.setMainViewScenePath("/")); 44 | 45 | cy.wait(1000).then(() => { 46 | expect(manager.mainViewSceneIndex).to.be.equal(0); 47 | }); 48 | }); 49 | }); 50 | 51 | it("删除 scenes 更新 sceneIndex", () => { 52 | cy.window().then(async (window: any) => { 53 | const manager = window.manager as WindowManager; 54 | const room = window.room as Room; 55 | expect(room).to.be.a("object"); 56 | expect(manager).to.be.a("object"); 57 | room.putScenes("/", [{}]); 58 | 59 | cy.wrap(null).then(() => manager.setMainViewSceneIndex(1)); 60 | 61 | cy.wait(1000).then(() => { 62 | const focusScenePath = manager.mainView.focusScenePath; 63 | if (focusScenePath) { 64 | expect(focusScenePath).to.be.not.equal("/init"); 65 | cy.wrap(null).then(() => room.removeScenes(focusScenePath)); 66 | cy.wait(1000).then(() => { 67 | expect(manager.mainViewSceneIndex).to.be.equal(0); 68 | expect(manager.mainView.focusScenePath).to.be.equal("/init"); 69 | }); 70 | } else { 71 | expect(true).to.be.false; 72 | } 73 | }); 74 | }); 75 | }); 76 | }); 77 | 78 | export {}; 79 | -------------------------------------------------------------------------------- /e2e/cypress/integration/readonly.spec.ts: -------------------------------------------------------------------------------- 1 | import { RoomPhase } from "white-web-sdk"; 2 | import type { Room } from "white-web-sdk"; 3 | 4 | describe("只读模式加入房间", () => { 5 | before(() => { 6 | cy.visit("/?isWritable=false"); 7 | cy.wait(8000); 8 | }); 9 | 10 | afterEach(() => { 11 | cy.wait(1000); 12 | }); 13 | 14 | it("挂载成功", () => { 15 | cy.window().then((window: any) => { 16 | const manager = window.manager; 17 | const room = window.room as Room; 18 | expect(room.phase).to.be.equal(RoomPhase.Connected); 19 | expect(manager).to.be.a("object"); 20 | expect(room.isWritable).to.be.false; 21 | cy.get(".netless-whiteboard").should("have.length", 1); 22 | }); 23 | }); 24 | }); 25 | 26 | export {}; 27 | -------------------------------------------------------------------------------- /e2e/cypress/integration/redoUndo.spec.ts: -------------------------------------------------------------------------------- 1 | import type { WindowManager } from "../../../dist"; 2 | import "./common"; 3 | 4 | describe("redo undo 切换", () => { 5 | before(() => { 6 | cy.visit("/"); 7 | cy.wait(8000); 8 | }); 9 | 10 | afterEach(() => { 11 | cy.wait(1000); 12 | }); 13 | 14 | it("获取 redo undo steps", () => { 15 | cy.window().then(async (window: any) => { 16 | const manager = window.manager as WindowManager; 17 | const room = window.room; 18 | expect(room).to.be.a("object"); 19 | expect(manager).to.be.a("object"); 20 | 21 | expect(manager.canRedoSteps).to.be.equal(0); 22 | expect(manager.canUndoSteps).to.be.equal(0); 23 | }); 24 | }); 25 | }); 26 | 27 | export {}; 28 | -------------------------------------------------------------------------------- /e2e/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "e2e", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "cy:run": "cypress run" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "@types/sinon": "^10.0.8", 14 | "cypress": "^8.7.0", 15 | "sinon": "^12.0.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "rootDirs": ["./", "../dist"], 4 | "outDir": "dist", 5 | "strictNullChecks": true, 6 | "strict": true, 7 | "declaration": true, 8 | "noImplicitAny": true, 9 | "module": "ESNext", 10 | "skipLibCheck": true, 11 | "target": "es6", 12 | "jsx": "react", 13 | "forceConsistentCasingInFileNames": false, 14 | "lib": [ 15 | "es6", 16 | "dom", 17 | "ES2017" 18 | ], 19 | "allowSyntheticDefaultImports": true, 20 | "experimentalDecorators": true, 21 | "moduleResolution": "node", 22 | "allowJs": true, 23 | "types": ["cypress"], 24 | "noUnusedParameters": true, 25 | "noImplicitOverride": true, 26 | }, 27 | "include": [ 28 | "../node_modules/@types/**/index.d.ts", "cypress/integration", 29 | "../dist" 30 | ], 31 | } -------------------------------------------------------------------------------- /example/app/board.css: -------------------------------------------------------------------------------- 1 | .board-footer { 2 | width: 100%; 3 | height: 100%; 4 | display: flex; 5 | } 6 | -------------------------------------------------------------------------------- /example/app/board.tsx: -------------------------------------------------------------------------------- 1 | import type { NetlessApp } from "../../dist"; 2 | import React, { useEffect, useState } from "react"; 3 | import ReactDom from "react-dom"; 4 | import type { AppContext } from "../../dist"; 5 | import "./board.css"; 6 | 7 | export const Board: NetlessApp = { 8 | kind: "Board", 9 | setup: context => { 10 | // 获取 app 的 box 11 | const box = context.getBox(); 12 | 13 | // 挂载白板的 view 到 box 到 content 14 | context.mountView(box.$content); 15 | 16 | // 挂载自定义的 footer 到 box 的 footer 上 17 | mount(box.$footer, context); 18 | 19 | setTimeout(() => { 20 | context.dispatchAppEvent("board", 42); 21 | context.dispatchAppEvent("board2"); 22 | }, 1000); 23 | }, 24 | }; 25 | 26 | const BoardFooter = ({ context }: { context: AppContext }) => { 27 | const [pageState, setPageState] = useState({ index: 0, length: 0 }); 28 | 29 | const nextPage = () => context.nextPage(); 30 | 31 | const prevPage = () => context.prevPage(); 32 | 33 | const addPage = () => context.addPage(); 34 | 35 | const removePage = () => context.removePage(1); 36 | 37 | const removeLastPage = () => context.removePage(context.pageState.length - 1); 38 | 39 | useEffect(() => { 40 | setPageState(context.pageState); 41 | return context.emitter.on("pageStateChange", pageState => { 42 | console.log("pageStateChange", pageState); 43 | setPageState(pageState); 44 | }); 45 | }, []); 46 | 47 | return ( 48 |
49 |
50 |
51 |
52 |
53 |
54 | {pageState.index + 1}/{pageState.length}
55 |
56 | );
57 | };
58 |
59 | export const mount = (dom: HTMLElement, context: AppContext) => {
60 | ReactDom.render(
49 | {#if !isLaserPointer}
50 |
80 |
--------------------------------------------------------------------------------
/src/Cursor/Cursor.svelte.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponentTyped } from "svelte";
2 |
3 | declare class Cursor extends SvelteComponentTyped<{
4 | readonly cursorName: string;
5 | readonly tagName?: string;
6 | readonly backgroundColor: string;
7 | readonly appliance: string;
8 | readonly x: number;
9 | readonly y: number;
10 | readonly src?: string;
11 | readonly visible: boolean;
12 | readonly avatar: string;
13 | readonly theme: string;
14 | readonly color: string;
15 | readonly cursorTagBackgroundColor: string;
16 | readonly opacity: number;
17 | readonly pencilEraserSize?: number;
18 | readonly custom?: boolean;
19 | }> {}
20 |
21 | export default Cursor;
22 |
--------------------------------------------------------------------------------
/src/Cursor/Cursor.ts:
--------------------------------------------------------------------------------
1 | import type { RoomMember } from "white-web-sdk";
2 | import type { CursorOptions } from "../index";
3 | import type { AppManager } from "../AppManager";
4 | import type { Position } from "../AttributesDelegate";
5 | import type { CursorManager } from "./index";
6 |
7 | import { omit } from "lodash";
8 | import { ApplianceNames } from "white-web-sdk";
9 |
10 | import { findMemberByUid } from "../Helper";
11 | import App from "./Cursor.svelte";
12 | import { remoteIcon } from "./icons2";
13 |
14 | export type Payload = {
15 | [key: string]: any;
16 | };
17 |
18 | export class Cursor {
19 | private member?: RoomMember;
20 | private timer?: number;
21 | private component?: App;
22 | private style: CursorOptions["style"] & string = "default";
23 |
24 | constructor(
25 | private manager: AppManager,
26 | private memberId: string,
27 | private cursorManager: CursorManager,
28 | private wrapper?: HTMLElement
29 | ) {
30 | this.updateMember();
31 | this.createCursor();
32 | this.autoHidden();
33 | this.setStyle(cursorManager.style);
34 | }
35 |
36 | public move = (position: Position) => {
37 | if (position.type === "main") {
38 | const rect = this.cursorManager.wrapperRect;
39 | if (this.component && rect) {
40 | this.autoHidden();
41 | this.moveCursor(position, rect, this.manager.mainView);
42 | }
43 | } else {
44 | const focusView = this.cursorManager.focusView;
45 | const viewRect = focusView?.divElement?.getBoundingClientRect();
46 | const viewCamera = focusView?.camera;
47 | if (focusView && viewRect && viewCamera && this.component) {
48 | this.autoHidden();
49 | this.moveCursor(position, viewRect, focusView);
50 | }
51 | }
52 | };
53 |
54 | public setStyle = (style: typeof this.style) => {
55 | this.style = style;
56 | if (this.component) {
57 | this.component.$set({
58 | src: this.getIcon(),
59 | custom: this.isCustomIcon(),
60 | });
61 | }
62 | };
63 |
64 | public leave = () => {
65 | this.hide();
66 | };
67 |
68 | private moveCursor(cursor: Position, rect: DOMRect, view: any) {
69 | const { x, y, type } = cursor;
70 | const point = view?.screen.convertPointToScreen(x, y);
71 | if (point) {
72 | let translateX = point.x - 2;
73 | let translateY = point.y - 18;
74 | if (this.isCustomIcon()) {
75 | translateX -= 11;
76 | translateY += 4;
77 | }
78 | if (type === "app") {
79 | const wrapperRect = this.cursorManager.wrapperRect;
80 | if (wrapperRect) {
81 | translateX = translateX + rect.x - wrapperRect.x;
82 | translateY = translateY + rect.y - wrapperRect.y;
83 | }
84 | }
85 | if (point.x < 0 || point.x > rect.width || point.y < 0 || point.y > rect.height) {
86 | this.component?.$set({ visible: false, x: translateX, y: translateY });
87 | } else {
88 | this.component?.$set({ visible: true, x: translateX, y: translateY });
89 | }
90 | }
91 | }
92 |
93 | public get memberApplianceName() {
94 | return this.member?.memberState?.currentApplianceName;
95 | }
96 |
97 | public get memberColor() {
98 | const rgb = this.member?.memberState?.strokeColor.join(",");
99 | return `rgb(${rgb})`;
100 | }
101 |
102 | public get memberColorHex(): string {
103 | const [r, g, b] = this.member?.memberState?.strokeColor || [236, 52, 85];
104 | return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
105 | }
106 |
107 | private get payload(): Payload | undefined {
108 | return this.member?.payload;
109 | }
110 |
111 | public get memberCursorName() {
112 | return this.payload?.nickName || this.payload?.cursorName || this.memberId;
113 | }
114 |
115 | private get memberTheme() {
116 | if (this.payload?.theme) {
117 | return "netless-window-manager-cursor-inner-mellow";
118 | } else {
119 | return "netless-window-manager-cursor-inner";
120 | }
121 | }
122 |
123 | private get memberCursorTextColor() {
124 | return this.payload?.cursorTextColor || "#FFFFFF";
125 | }
126 |
127 | private get memberCursorTagBackgroundColor() {
128 | return this.payload?.cursorTagBackgroundColor || this.memberColor;
129 | }
130 |
131 | private get memberAvatar() {
132 | return this.payload?.avatar;
133 | }
134 |
135 | private get memberOpacity() {
136 | if (!this.memberCursorName && !this.memberAvatar) {
137 | return 0;
138 | } else {
139 | return 1;
140 | }
141 | }
142 |
143 | private get memberTagName(): string | undefined {
144 | return this.payload?.cursorTagName;
145 | }
146 |
147 | private autoHidden() {
148 | if (this.timer) {
149 | clearTimeout(this.timer);
150 | }
151 | this.timer = window.setTimeout(() => {
152 | this.hide();
153 | }, 1000 * 10); // 10 秒钟自动隐藏
154 | }
155 |
156 | private async createCursor() {
157 | if (this.member && this.wrapper) {
158 | this.component = new App({
159 | target: this.wrapper,
160 | props: this.initProps(),
161 | });
162 | }
163 | }
164 |
165 | private initProps() {
166 | return {
167 | uid: this.memberId,
168 | x: 0,
169 | y: 0,
170 | appliance: this.memberApplianceName as string,
171 | avatar: this.memberAvatar,
172 | src: this.getIcon(),
173 | custom: this.isCustomIcon(),
174 | visible: false,
175 | backgroundColor: this.memberColor,
176 | cursorName: this.memberCursorName,
177 | theme: this.memberTheme,
178 | color: this.memberCursorTextColor,
179 | cursorTagBackgroundColor: this.memberCursorTagBackgroundColor,
180 | opacity: this.memberOpacity,
181 | tagName: this.memberTagName,
182 | pencilEraserSize: this.member?.memberState.pencilEraserSize,
183 | };
184 | }
185 |
186 | private getIcon(): string | undefined {
187 | if (!this.member) return;
188 |
189 | const { memberApplianceName, memberColorHex } = this;
190 | const { userApplianceIcons, applianceIcons } = this.cursorManager;
191 |
192 | let iconsKey: string | undefined = this.memberApplianceName;
193 | if (iconsKey === ApplianceNames.pencilEraser) {
194 | iconsKey = `${iconsKey}${this.member?.memberState.pencilEraserSize || 1}`;
195 | }
196 |
197 | const userApplianceSrc = iconsKey && userApplianceIcons[iconsKey];
198 | if (userApplianceSrc) return userApplianceSrc;
199 |
200 | if (this.style === "custom" && memberApplianceName) {
201 | const customApplianceSrc = remoteIcon(memberApplianceName, memberColorHex);
202 | if (customApplianceSrc) return customApplianceSrc;
203 | }
204 |
205 | const applianceSrc = applianceIcons[iconsKey || ApplianceNames.shape];
206 | return applianceSrc || applianceIcons[ApplianceNames.shape];
207 | }
208 |
209 | private isCustomIcon(): boolean {
210 | if (!this.member) return false;
211 |
212 | const { memberApplianceName, memberColorHex } = this;
213 | const { userApplianceIcons } = this.cursorManager;
214 |
215 | let iconsKey: string | undefined = this.memberApplianceName;
216 | if (iconsKey === ApplianceNames.pencilEraser) {
217 | iconsKey = `${iconsKey}${this.member?.memberState.pencilEraserSize || 1}`;
218 | }
219 |
220 | const userApplianceSrc = iconsKey && userApplianceIcons[iconsKey];
221 | if (userApplianceSrc) return false;
222 |
223 | if (this.style === "custom" && memberApplianceName) {
224 | const customApplianceSrc = remoteIcon(memberApplianceName, memberColorHex);
225 | if (customApplianceSrc) return true;
226 | }
227 |
228 | return false;
229 | }
230 |
231 | public updateMember() {
232 | this.member = findMemberByUid(this.manager.room, this.memberId);
233 | this.updateComponent();
234 | return this.member;
235 | }
236 |
237 | private updateComponent() {
238 | this.component?.$set(omit(this.initProps(), ["x", "y"]));
239 | }
240 |
241 | public destroy() {
242 | if (this.component) {
243 | this.component.$destroy();
244 | }
245 | this.cursorManager.cursorInstances.delete(this.memberId);
246 | if (this.timer) {
247 | clearTimeout(this.timer);
248 | }
249 | }
250 |
251 | public hide() {
252 | if (this.component) {
253 | this.component.$set({ visible: false });
254 | this.destroy();
255 | }
256 | }
257 | }
258 |
--------------------------------------------------------------------------------
/src/Cursor/icons.ts:
--------------------------------------------------------------------------------
1 | import { ApplianceNames } from "white-web-sdk";
2 | import pencil from "../image/pencil-cursor.png";
3 | import selector from "../image/selector-cursor.png";
4 | import eraser from "../image/eraser-cursor.png";
5 | import shape from "../image/shape-cursor.svg";
6 | import text from "../image/text-cursor.svg";
7 | import laser from "../image/laser-pointer-cursor.svg";
8 | import pencilEraser1 from "../image/pencil-eraser-1.svg";
9 | import pencilEraser2 from "../image/pencil-eraser-2.svg";
10 | import pencilEraser3 from "../image/pencil-eraser-3.svg";
11 |
12 | export const ApplianceMap: {
13 | [key: string]: string;
14 | } = {
15 | [ApplianceNames.pencil]: pencil,
16 | [ApplianceNames.selector]: selector,
17 | [ApplianceNames.eraser]: eraser,
18 | [ApplianceNames.shape]: shape,
19 | [ApplianceNames.text]: text,
20 | [ApplianceNames.laserPointer]: laser,
21 | ["pencilEraser1"]: pencilEraser1,
22 | ["pencilEraser2"]: pencilEraser2,
23 | ["pencilEraser3"]: pencilEraser3,
24 | };
25 |
--------------------------------------------------------------------------------
/src/Cursor/icons2.ts:
--------------------------------------------------------------------------------
1 | import type { MemberState } from "white-web-sdk";
2 | import { ApplianceNames } from "white-web-sdk";
3 |
4 | type Color = string;
5 |
6 | const staticCircle = `data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='12' cy='12' r='2.5' stroke='%23000' stroke-linejoin='square'/%3E%3Ccircle cx='12' cy='12' r='3.5' stroke='%23FFF'/%3E%3C/g%3E%3C/svg%3E`;
7 |
8 | function circleUrl(color: Color): string {
9 | return `data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='12' cy='12' r='2.5' stroke='%23${color}' stroke-linejoin='square'/%3E%3Ccircle cx='12' cy='12' r='3.5' stroke='%23${color}'/%3E%3C/g%3E%3C/svg%3E`;
10 | }
11 |
12 | function crossUrl(color: Color): string {
13 | return `data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M5 12H19' stroke='%23${color}' stroke-linejoin='round'/%3E%3Cpath d='M12 5V19' stroke='%23${color}' stroke-linejoin='round'/%3E%3C/svg%3E`;
14 | }
15 |
16 | function cssCursor(url: string): string {
17 | return `url("${url}") 12 12, auto`;
18 | }
19 |
20 | function makeStyleContent(config: { [cursor: string]: string }): string {
21 | let result = "";
22 | for (const cursor in config) {
23 | result += `.netless-whiteboard.${cursor} {cursor: ${config[cursor]}}\n`;
24 | }
25 | return result;
26 | }
27 |
28 | const $style = document.createElement("style");
29 |
30 | export function enableLocal(memberState: MemberState): () => void {
31 | const [r, g, b] = memberState.strokeColor;
32 | const hex = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
33 | $style.textContent = makeStyleContent({
34 | "cursor-pencil": cssCursor(circleUrl(hex)),
35 | "cursor-eraser": cssCursor(staticCircle),
36 | "cursor-rectangle": cssCursor(crossUrl(hex)),
37 | "cursor-ellipse": cssCursor(crossUrl(hex)),
38 | "cursor-straight": cssCursor(crossUrl(hex)),
39 | "cursor-arrow": cssCursor(crossUrl(hex)),
40 | "cursor-shape": cssCursor(crossUrl(hex)),
41 | });
42 | document.head.appendChild($style);
43 |
44 | return () => {
45 | if ($style.parentNode == null) return;
46 | document.head.removeChild($style);
47 | };
48 | }
49 |
50 | const shapeAppliances: Set
51 |
71 | {/if}
72 |
55 | {#if hasAvatar}
56 | 
62 | {/if}
63 |
64 | {#if hasTagName}
65 |
66 | {tagName}
67 |
68 | {/if}
69 |
70 |
73 | ![{appliance}]()
78 |
79 |