@netless/fastboard 0.0.4 → 0.0.8

package/dist/svelte.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var a=require("svelte/store"),n=require("./index.cjs.js");require("@netless/window-manager");require("white-web-sdk");require("i18next");require("react");require("react-dom");require("clsx");require("@tippyjs/react");require("rc-slider");function o(t,i){return a.readable(null,s=>{let e=null;n.createWhiteboardApp(i).then(r=>{s(e=r)});const u=t.subscribe(r=>{r&&e&&e.bindElement(r)});return()=>{u(),e&&e.dispose()}})}exports.useFastboard=o;
+//# sourceMappingURL=svelte.cjs.js.map

package/dist/svelte.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte.cjs.js","sources":["../src/svelte.ts"],"sourcesContent":["import { readable, type Readable } from \"svelte/store\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\n/**\n * @example\n * ```svelte\n * <script>\n *   let ref = writable(null)\n *   let app = useFastboard(ref, { sdkConfig, joinRoom })\n *   if (app) {\n *     app.insertDocs({...})\n *   }\n * </script>\n * <div style=\"width: 100%; height: 100%\" bind:this={$ref} />\n * ```\n */\nexport function useFastboard(\n  ref: Readable<HTMLElement | null>,\n  config: FastBoardConfig\n): Readable<WhiteboardApp | null> {\n  return readable<WhiteboardApp | null>(null, set => {\n    let app_: WhiteboardApp | null = null;\n\n    createWhiteboardApp(config).then(app => {\n      set((app_ = app));\n    });\n\n    const dispose = ref.subscribe(div => {\n      if (div && app_) {\n        app_.bindElement(div);\n      }\n    });\n\n    return () => {\n      dispose();\n      if (app_) {\n        app_.dispose();\n      }\n    };\n  });\n}\n"],"names":["readable"],"mappings":"kWAqBE,EACA,EACgC,OACzBA,YAA+B,KAAM,GAAO,IAC7C,GAA6B,2BAEb,GAAQ,KAAK,GAAO,GACjC,EAAO,UAGR,GAAU,EAAI,UAAU,GAAO,CAC/B,GAAO,KACJ,YAAY,WAId,IAAM,KAEP,KACG"}

package/dist/svelte.es.js

@@ -0,0 +1,31 @@
+import { readable } from "svelte/store";
+import { createWhiteboardApp } from "./index.es.js";
+import "@netless/window-manager";
+import "white-web-sdk";
+import "i18next";
+import "react";
+import "react-dom";
+import "clsx";
+import "@tippyjs/react";
+import "rc-slider";
+function useFastboard(ref, config) {
+  return readable(null, (set) => {
+    let app_ = null;
+    createWhiteboardApp(config).then((app) => {
+      set(app_ = app);
+    });
+    const dispose = ref.subscribe((div) => {
+      if (div && app_) {
+        app_.bindElement(div);
+      }
+    });
+    return () => {
+      dispose();
+      if (app_) {
+        app_.dispose();
+      }
+    };
+  });
+}
+export { useFastboard };
+//# sourceMappingURL=svelte.es.js.map

package/dist/svelte.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte.es.js","sources":["../src/svelte.ts"],"sourcesContent":["import { readable, type Readable } from \"svelte/store\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\n/**\n * @example\n * ```svelte\n * <script>\n *   let ref = writable(null)\n *   let app = useFastboard(ref, { sdkConfig, joinRoom })\n *   if (app) {\n *     app.insertDocs({...})\n *   }\n * </script>\n * <div style=\"width: 100%; height: 100%\" bind:this={$ref} />\n * ```\n */\nexport function useFastboard(\n  ref: Readable<HTMLElement | null>,\n  config: FastBoardConfig\n): Readable<WhiteboardApp | null> {\n  return readable<WhiteboardApp | null>(null, set => {\n    let app_: WhiteboardApp | null = null;\n\n    createWhiteboardApp(config).then(app => {\n      set((app_ = app));\n    });\n\n    const dispose = ref.subscribe(div => {\n      if (div && app_) {\n        app_.bindElement(div);\n      }\n    });\n\n    return () => {\n      dispose();\n      if (app_) {\n        app_.dispose();\n      }\n    };\n  });\n}\n"],"names":[],"mappings":";;;;;;;;;;sBAqBE,KACA,QACgC;SACzB,SAA+B,MAAM,SAAO;QAC7C,OAA6B;wBAEb,QAAQ,KAAK,SAAO;UACjC,OAAO;AAAA;UAGR,UAAU,IAAI,UAAU,SAAO;UAC/B,OAAO,MAAM;aACV,YAAY;AAAA;AAAA;WAId,MAAM;;UAEP,MAAM;aACH;AAAA;AAAA;AAAA;AAAA;;"}

package/dist/vue.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var t=require("vue-demi"),s=require("./index.cjs.js");require("@netless/window-manager");require("white-web-sdk");require("i18next");require("react");require("react-dom");require("clsx");require("@tippyjs/react");require("rc-slider");function n(u){var e;const r=t.unref(u);return(e=r==null?void 0:r.$el)!=null?e:r}function o(u){return t.getCurrentScope()?(t.onScopeDispose(u),!0):!1}function l(u,r){const e=t.shallowRef(null),i=t.computed(()=>n(u));return s.createWhiteboardApp(r).then(a=>{e.value=a}),t.watchEffect(()=>{i.value&&e.value&&e.value.bindElement(i.value)}),o(()=>{e.value&&e.value.dispose()}),e}exports.unrefElement=n;exports.useFastboard=l;
+//# sourceMappingURL=vue.cjs.js.map

package/dist/vue.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.cjs.js","sources":["../src/vue.ts"],"sourcesContent":["import type { ComponentPublicInstance, Ref } from \"vue-demi\";\nimport {\n  computed,\n  getCurrentScope,\n  onScopeDispose,\n  shallowRef,\n  unref,\n  watchEffect,\n} from \"vue-demi\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\nexport type MaybeRef<T> = T | Ref<T>;\nexport type VueInstance = ComponentPublicInstance;\nexport type MaybeElementRef = MaybeRef<\n  HTMLElement | SVGElement | VueInstance | undefined | null\n>;\n\n/**\n * Get the dom element of a ref of element or Vue component instance\n */\nexport function unrefElement(elRef: MaybeElementRef) {\n  const plain = unref(elRef);\n  return (plain as VueInstance)?.$el ?? plain;\n}\n\nfunction tryOnScopeDispose(fn: () => void) {\n  if (getCurrentScope()) {\n    onScopeDispose(fn);\n    return true;\n  }\n  return false;\n}\n\n/**\n * @example\n * ```vue\n * <script setup>\n * const el = ref(null)\n * const app = useFastboard(el, { sdkConfig, joinRoom })\n * if (app.value) {\n *   app.value.insertDocs({...})\n * }\n * </script>\n * <template>\n *   <div style=\"width: 100%; height: 100%\" ref=\"el\"></div>\n * </template>\n * ```\n */\nexport function useFastboard(el: MaybeElementRef, config: FastBoardConfig) {\n  const app = shallowRef<WhiteboardApp | null>(null);\n  const target = computed(() => unrefElement(el));\n\n  createWhiteboardApp(config).then(app_ => {\n    app.value = app_;\n  });\n\n  watchEffect(() => {\n    if (target.value && app.value) {\n      app.value.bindElement(target.value);\n    }\n  });\n\n  tryOnScopeDispose(() => {\n    if (app.value) {\n      app.value.dispose();\n    }\n  });\n\n  return app;\n}\n"],"names":["unref","getCurrentScope","shallowRef","computed"],"mappings":"8VAwB6B,EAAwB,YAC7C,GAAQA,QAAM,SACZ,oBAAuB,MAAvB,OAA8B,EAGxC,WAA2B,EAAgB,OACrCC,uCACa,GACR,IAEF,cAkBoB,EAAqB,EAAyB,MACnE,GAAMC,aAAiC,MACvC,EAASC,WAAS,IAAM,EAAa,iCAEvB,GAAQ,KAAK,GAAQ,GACnC,MAAQ,kBAGF,IAAM,CACZ,EAAO,OAAS,EAAI,SAClB,MAAM,YAAY,EAAO,WAIf,IAAM,CAClB,EAAI,SACF,MAAM,YAIP"}

package/dist/vue.es.js

@@ -0,0 +1,42 @@
+import { unref, shallowRef, computed, watchEffect, getCurrentScope, onScopeDispose } from "vue-demi";
+import { createWhiteboardApp } from "./index.es.js";
+import "@netless/window-manager";
+import "white-web-sdk";
+import "i18next";
+import "react";
+import "react-dom";
+import "clsx";
+import "@tippyjs/react";
+import "rc-slider";
+function unrefElement(elRef) {
+  var _a;
+  const plain = unref(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+function useFastboard(el, config) {
+  const app = shallowRef(null);
+  const target = computed(() => unrefElement(el));
+  createWhiteboardApp(config).then((app_) => {
+    app.value = app_;
+  });
+  watchEffect(() => {
+    if (target.value && app.value) {
+      app.value.bindElement(target.value);
+    }
+  });
+  tryOnScopeDispose(() => {
+    if (app.value) {
+      app.value.dispose();
+    }
+  });
+  return app;
+}
+export { unrefElement, useFastboard };
+//# sourceMappingURL=vue.es.js.map

package/dist/vue.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.es.js","sources":["../src/vue.ts"],"sourcesContent":["import type { ComponentPublicInstance, Ref } from \"vue-demi\";\nimport {\n  computed,\n  getCurrentScope,\n  onScopeDispose,\n  shallowRef,\n  unref,\n  watchEffect,\n} from \"vue-demi\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\nexport type MaybeRef<T> = T | Ref<T>;\nexport type VueInstance = ComponentPublicInstance;\nexport type MaybeElementRef = MaybeRef<\n  HTMLElement | SVGElement | VueInstance | undefined | null\n>;\n\n/**\n * Get the dom element of a ref of element or Vue component instance\n */\nexport function unrefElement(elRef: MaybeElementRef) {\n  const plain = unref(elRef);\n  return (plain as VueInstance)?.$el ?? plain;\n}\n\nfunction tryOnScopeDispose(fn: () => void) {\n  if (getCurrentScope()) {\n    onScopeDispose(fn);\n    return true;\n  }\n  return false;\n}\n\n/**\n * @example\n * ```vue\n * <script setup>\n * const el = ref(null)\n * const app = useFastboard(el, { sdkConfig, joinRoom })\n * if (app.value) {\n *   app.value.insertDocs({...})\n * }\n * </script>\n * <template>\n *   <div style=\"width: 100%; height: 100%\" ref=\"el\"></div>\n * </template>\n * ```\n */\nexport function useFastboard(el: MaybeElementRef, config: FastBoardConfig) {\n  const app = shallowRef<WhiteboardApp | null>(null);\n  const target = computed(() => unrefElement(el));\n\n  createWhiteboardApp(config).then(app_ => {\n    app.value = app_;\n  });\n\n  watchEffect(() => {\n    if (target.value && app.value) {\n      app.value.bindElement(target.value);\n    }\n  });\n\n  tryOnScopeDispose(() => {\n    if (app.value) {\n      app.value.dispose();\n    }\n  });\n\n  return app;\n}\n"],"names":[],"mappings":";;;;;;;;;;sBAwB6B,OAAwB;;QAC7C,QAAQ,MAAM;SACZ,qCAAuB,QAAvB,YAA8B;AAAA;AAGxC,2BAA2B,IAAgB;MACrC,mBAAmB;mBACN;WACR;AAAA;SAEF;AAAA;sBAkBoB,IAAqB,QAAyB;QACnE,MAAM,WAAiC;QACvC,SAAS,SAAS,MAAM,aAAa;sBAEvB,QAAQ,KAAK,UAAQ;QACnC,QAAQ;AAAA;cAGF,MAAM;QACZ,OAAO,SAAS,IAAI,OAAO;UACzB,MAAM,YAAY,OAAO;AAAA;AAAA;oBAIf,MAAM;QAClB,IAAI,OAAO;UACT,MAAM;AAAA;AAAA;SAIP;AAAA;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard",
-  "version": "0.0.4",
+  "version": "0.0.8",
   "description": "An open sourced sdk based on white-web-sdk.",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -14,6 +14,14 @@
       "default": "./dist/index.es.js",
       "types": "./src/index.ts"
     },
+    "./vue": {
+      "node": {
+        "import": "./dist/vue.es.js",
+        "require": "./dist/vue.cjs.js"
+      },
+      "default": "./dist/vue.es.js",
+      "types": "./src/vue.ts"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -37,8 +45,11 @@
     "@netless/app-monaco": "*",
     "@netless/app-slide": "*",
     "@netless/window-manager": "*",
+    "@vue/composition-api": "*",
     "react": "*",
     "react-dom": "*",
+    "svelte": "*",
+    "vue": "*",
     "white-web-sdk": "*"
   },
   "peerDependenciesMeta": {
@@ -53,6 +64,15 @@
     },
     "@netless/app-geogebra": {
       "optional": true
+    },
+    "@vue/composition-api": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -60,7 +80,8 @@
     "clsx": "^1.1.1",
     "i18next": "^21.6.5",
     "rc-slider": "^9.7.5",
-    "tippy.js": "^6.3.7"
+    "tippy.js": "^6.3.7",
+    "vue-demi": "^0.12.1"
   },
   "readme": "# @netless/fastboard\n\nA whiteboard starter, based on [white-web-sdk](https://www.npmjs.com/package/white-web-sdk), [@netless/window-manager](https://www.npmjs.com/package/@netless/window-manager)\nand [netless-app](https://github.com/netless-io/netless-app).\n\n## 目录\n\n- [安装](#install)\n- [使用](#usage)\n- [进阶](./docs/advanced.md)\n- [开发](#开发)\n\n<h2 id=\"install\">安装</h2>\n\n```bash\nnpm add @netless/fastboard @netless/window-manager white-web-sdk react react-dom\n```\n\n<h2 id=\"usage\">使用</h2>\n\n<h3 id=\"mount-whiteboard\">挂载白板</h3>\n\n> 原生 `javascript`\n\n```js\nimport { createWhiteboardApp } from \"@netless/fastboard\";\n\nlet whiteboard = await createWhiteboardApp({\n  target: document.getElementById(\"whiteboard\"),\n  // [1]\n  sdkConfig: {\n    appIdentifier: \"whiteboard-appid\",\n  },\n  // [2]\n  joinRoom: {\n    uid: \"unique_id_for_each_client\",\n    uuid: \"room-uuid\",\n    roomToken: \"NETLESSROOM_...\",\n  },\n  // [3]\n  managerConfig: {\n    cursor: true,\n  },\n});\n```\n\n> 使用 `React`\n\n```typescript\nimport { useFastboard, FastBoardConfig } from \"@netless/fastboard\";\nimport ReactDOM from \"react-dom\";\n\nconst config: FastBoardConfig = {\n  sdkConfig: {\n    appIdentifier: \"whiteboard-appid\",\n  },\n  joinRoom: {\n    uid: \"unique_id_for_each_client\",\n    uuid: \"room-uuid\",\n    roomToken: \"NETLESSROOM_...\",\n  },\n};\n\nfunction App() {\n  const [app, ref] = useFastboard(config);\n  return <div ref={ref} />;\n}\nReactDOM.render(<App />, document.getElementById(\"root\"));\n```\n\n[1] 关于 SDK 更多配置请看 [构造 WhiteWebSDK](https://developer.netless.link/javascript-zh/home/construct-white-web-sdk)\n\n[2] 加入房间更多配置请看 [构造 Room 与 Player 对象](https://developer.netless.link/javascript-zh/home/construct-room-and-player)\n\n[3] 配置 `WindowManager` 请看 [WindowManager](https://github.com/netless-io/window-manager#mount)\n\n### 使用 APPS\n\n**注意:** 需要先安装对应的 APP\n\n```bash\nnpm add @netless/app-slide\n```\n\n```typescript\n// 插入动态 PPTX 至白板\nconst appId = await whiteboard.insertDocs({\n  fileType: \"pptx\",\n  params: {\n    scenePath: `/ppt/${uuid}`, // [1]\n    title: \"a.pptx\",\n    taskId: \"1234567...\", // [2]\n    url: \"https://convertcdn.netless.link/dynamicConvert\", // [3]\n  },\n});\n\n// 插入 PDF/静态 PPT 至白板\nconst appId = await whiteboard.insertDocs({\n  fileType: \"pdf\", // or ppt\n  options: {\n    scenePath: `/pdf${uuid}`,\n    title: \"a.pdf\", // 可选\n    scenes: [], // SceneDefinition[] 静态/动态 Scene 数据\n  },\n});\n\n// 插入音频/视频至白板\nconst appId = await whiteboard.manager.addApp({\n  kind: \"MediaPlayer\",\n  options: {\n    title: \"test.mp3\", // 可选\n  },\n  attributes: {\n    src: \"xxxx\", // 音视频 url\n  },\n});\n```\n\n更多 `app` 请看 [netless-app](#https://github.com/netless-io/netless-app)\n\n## Develop\n\n```bash\npnpm i\n# upgrade dependencies\npnpm up -Li\n# build and see bundle size\npnpm build\nopen node_modules/.visualizer/stats.html\n```\n\n## License\n\nMIT @ [netless](https://github.com/netless-io)\n"
 }

package/src/WhiteboardApp.ts

@@ -1,11 +1,12 @@
 import type {
   InsertDocsParams,
   Language,
+  Layout,
   WhiteboardAppConfig,
 } from "./internal";
 import { Instance } from "./internal";
 
-export type { WhiteboardAppConfig, InsertDocsParams };
+export type { Language, Layout, WhiteboardAppConfig, InsertDocsParams };
 
 export class WhiteboardApp {
   private readonly _instance: Instance;
@@ -14,14 +15,61 @@ export class WhiteboardApp {
     this._instance = new Instance(config);
   }
 
-  public bindElement(target?: HTMLElement | null) {
-    this._instance.target = target || null;
+  get room() {
+    return this._instance.room;
+  }
+
+  get manager() {
+    return this._instance.manager;
+  }
+
+  get sdk() {
+    return this._instance.sdk;
+  }
+
+  get i18n() {
+    return this._instance.i18n;
+  }
+
+  public get target(): HTMLElement | null {
+    return this._instance.target;
+  }
+
+  public get collector(): HTMLElement | null {
+    return this._instance.collector;
+  }
+
+  public bindElement(
+    target?: HTMLElement | null,
+    collector?: HTMLElement | null
+  ) {
+    this._instance.bindElement(target || null, collector || null);
+  }
+
+  public get layout() {
+    return this._instance.config.layout;
+  }
+
+  public updateLayout(layout?: Layout | undefined) {
+    this._instance.updateLayout(layout);
   }
 
   public insertDocs(params: InsertDocsParams) {
     return this._instance.insertDocs(params);
   }
 
+  public insertCodeEditor() {
+    return this._instance.insertCodeEditor();
+  }
+
+  public insertGeoGebra() {
+    return this._instance.insertGeoGebra();
+  }
+
+  public insertCountdown() {
+    return this._instance.insertCountdown();
+  }
+
   public changeLanguage(language: Language) {
     return this._instance.changeLanguage(language);
   }

package/src/components/PageControl.tsx

@@ -36,14 +36,14 @@ export function PageControl({
     if (manager && room) {
       await manager.switchMainViewToWriter();
       const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageCount);
-      await manager.setMainViewSceneIndex(pageIndex);
+      room.putScenes(path, [{}], pageIndex + 1);
+      await manager.setMainViewSceneIndex(pageIndex + 1);
     } else if (!manager && room) {
       const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageCount);
-      room.setSceneIndex(pageIndex);
+      room.putScenes(path, [{}], pageIndex + 1);
+      room.setSceneIndex(pageIndex + 1);
     }
-  }, [room, manager, pageCount, pageIndex]);
+  }, [room, manager, pageIndex]);
 
   const prevPage = useCallback(() => {
     if (room?.isWritable) {

package/src/components/Root.tsx

@@ -10,7 +10,7 @@ export interface RootProps {
   instance: Instance;
 }
 
-export default function Root({ instance: app }: RootProps) {
+export function Root({ instance: app }: RootProps) {
   const [mux] = useState(() => new Lock());
 
   const useWhiteboard = useCallback(
@@ -21,21 +21,40 @@ export default function Root({ instance: app }: RootProps) {
     [app, mux]
   );
 
+  const {
+    Toolbar: toolbar = true,
+    RedoUndo: redo_undo = true,
+    ZoomControl: zoom_control = true,
+    PageControl: page_control = true,
+  } = app.config.layout || {};
+
+  const props = {
+    room: app.room,
+    manager: app.manager,
+    i18n: app.i18n,
+  };
+
   return (
     <Instance.Context.Provider value={app}>
       <div className="fastboard-root">
         {!app.room && <div className="fastboard-loading">Loading&hellip;</div>}
         <div className="fastboard-view" ref={useWhiteboard} />
-        <div className="fastboard-left">
-          <Toolbar room={app.room} manager={app.manager} i18n={app.i18n} />
-        </div>
-        <div className="fastboard-bottom-left">
-          <RedoUndo room={app.room} manager={app.manager} i18n={app.i18n} />
-          <ZoomControl room={app.room} manager={app.manager} i18n={app.i18n} />
-        </div>
-        <div className="fastboard-bottom-right">
-          <PageControl room={app.room} manager={app.manager} i18n={app.i18n} />
-        </div>
+        {toolbar && (
+          <div className="fastboard-left">
+            <Toolbar {...props} />
+          </div>
+        )}
+        {(redo_undo || zoom_control) && (
+          <div className="fastboard-bottom-left">
+            {redo_undo && <RedoUndo {...props} />}
+            {zoom_control && <ZoomControl {...props} />}
+          </div>
+        )}
+        {page_control && (
+          <div className="fastboard-bottom-right">
+            <PageControl {...props} />
+          </div>
+        )}
       </div>
     </Instance.Context.Provider>
   );

package/src/hooks.ts

@@ -15,13 +15,16 @@ export type FastBoardConfig = WhiteboardAppConfig;
  */
 export function useFastboard(config: FastBoardConfig): readonly [
   app: WhiteboardApp | null,
-  ref: (div: HTMLDivElement | null) => void
+  ref: (div: HTMLDivElement | null) => void,
+  collectorRef: (div: HTMLDivElement | null) => void
 ] & {
   readonly app: WhiteboardApp | null;
   readonly ref: (div: HTMLDivElement | null) => void;
+  readonly collectorRef: (div: HTMLDivElement | null) => void;
 } {
   const [app, setApp] = useState<WhiteboardApp | null>(null);
   const [currentTarget, ref] = useState<HTMLDivElement | null>(null);
+  const [collector, collectorRef] = useState<HTMLDivElement | null>(null);
 
   useEffect(() => {
     let isMounted = true;
@@ -38,9 +41,13 @@ export function useFastboard(config: FastBoardConfig): readonly [
 
   useEffect(() => {
     if (app) {
-      app.bindElement(currentTarget);
+      app.bindElement(currentTarget, collector);
     }
-  }, [app, currentTarget]);
+  }, [app, collector, currentTarget]);
 
-  return Object.assign([app, ref] as const, { app, ref });
+  return Object.assign([app, ref, collectorRef] as const, {
+    app,
+    ref,
+    collectorRef,
+  });
 }

package/src/index.ts

@@ -10,6 +10,10 @@ export { PageControl, type PageControlProps } from "./components/PageControl";
 export { RedoUndo, type RedoUndoProps } from "./components/RedoUndo";
 export { Toolbar, type ToolbarProps } from "./components/Toolbar";
 export { ZoomControl, type ZoomControlProps } from "./components/ZoomControl";
+export {
+  PlayerControl,
+  type PlayerControlProps,
+} from "./components/PlayerControl";
 export * from "./WhiteboardApp";
 export * from "./hooks";
 

package/src/internal/Instance.tsx

@@ -1,3 +1,4 @@
+import type { Mutable } from "type-fest";
 import type { WindowManager } from "@netless/window-manager";
 import type { Room, SceneDefinition, WhiteWebSdk } from "white-web-sdk";
 import type { JoinRoom, ManagerConfig, SdkConfig } from "./mount-whiteboard";
@@ -6,7 +7,7 @@ import type { i18n } from "i18next";
 import React, { createContext, useContext } from "react";
 import ReactDOM from "react-dom";
 
-import Root from "../components/Root";
+import { Root } from "../components/Root";
 import { mountWhiteboard } from "./mount-whiteboard";
 import { noop } from "./helpers";
 
@@ -36,10 +37,18 @@ export type InsertDocsParams = InsertDocsStatic | InsertDocsDynamic;
 
 export type Language = "zh-CN" | "en-US";
 
+export interface Layout {
+  Toolbar?: boolean;
+  PageControl?: boolean;
+  RedoUndo?: boolean;
+  ZoomControl?: boolean;
+}
+
 export interface WhiteboardAppConfig {
   readonly sdkConfig: SdkConfig;
   readonly joinRoom: JoinRoom;
   readonly managerConfig?: Omit<ManagerConfig, "container">;
+  readonly layout?: Layout;
   readonly toolbar?: {
     apps?: {
       enable?: boolean;
@@ -60,7 +69,7 @@ export interface Essentials {
 export class Instance {
   static readonly Context = createContext<Instance | null>(null);
 
-  readonly config: WhiteboardAppConfig;
+  config: Mutable<WhiteboardAppConfig>;
 
   sdk: WhiteWebSdk | null = null;
   room: Room | null = null;
@@ -82,13 +91,11 @@ export class Instance {
   }
 
   constructor(config: WhiteboardAppConfig) {
-    this.config = config;
+    this.config = { ...config };
     this.refreshReadyPromise();
     this.initialize();
   }
 
-  private _target: HTMLElement | null = null;
-
   async initialize() {
     const essentials = await mountWhiteboard(
       this.config.sdkConfig,
@@ -100,15 +107,20 @@ export class Instance {
     this.resolveReady();
   }
 
-  get target(): HTMLElement | null {
-    return this._target;
-  }
+  target: HTMLElement | null = null;
+  collector: HTMLElement | null = null;
 
-  set target(value: HTMLElement | null) {
-    if (this._target && value) {
-      ReactDOM.unmountComponentAtNode(this._target);
+  bindElement(target: HTMLElement | null, collector: HTMLElement | null) {
+    if (this.target && target) {
+      ReactDOM.unmountComponentAtNode(this.target);
     }
-    this._target = value;
+    this.target = target;
+    this.collector = collector;
+    this.forceUpdate();
+  }
+
+  updateLayout(layout: Layout | undefined) {
+    this.config.layout = layout;
     this.forceUpdate();
   }
 
@@ -139,7 +151,12 @@ export class Instance {
 
   async mount(node: HTMLElement) {
     await this.readyPromise;
-    if (this.manager) {
+    if (!this.manager) {
+      throw new Error(`[WhiteboardApp] mounted, but not found window manager`);
+    }
+    if (this.collector) {
+      this.manager.bindContainer(node, this.collector);
+    } else {
       this.manager.bindContainer(node);
     }
   }

package/src/internal/mount-whiteboard.ts

@@ -4,7 +4,7 @@ import type {
   RoomCallbacks,
   WhiteWebSdkConfiguration,
 } from "white-web-sdk";
-import type { Essentials, Language } from "./instance";
+import type { Essentials, Language } from "./Instance";
 
 import { WindowManager } from "@netless/window-manager";
 import { DefaultHotKeys, WhiteWebSdk } from "white-web-sdk";

package/src/svelte.ts

@@ -0,0 +1,45 @@
+import { readable, type Readable } from "svelte/store";
+import { createWhiteboardApp } from "./index";
+
+import type { WhiteboardApp, WhiteboardAppConfig } from "./WhiteboardApp";
+
+export type FastBoardConfig = WhiteboardAppConfig;
+
+/**
+ * @example
+ * ```svelte
+ * <script>
+ *   let ref = writable(null)
+ *   let app = useFastboard(ref, { sdkConfig, joinRoom })
+ *   if (app) {
+ *     app.insertDocs({...})
+ *   }
+ * </script>
+ * <div style="width: 100%; height: 100%" bind:this={$ref} />
+ * ```
+ */
+export function useFastboard(
+  ref: Readable<HTMLElement | null>,
+  config: FastBoardConfig
+): Readable<WhiteboardApp | null> {
+  return readable<WhiteboardApp | null>(null, set => {
+    let app_: WhiteboardApp | null = null;
+
+    createWhiteboardApp(config).then(app => {
+      set((app_ = app));
+    });
+
+    const dispose = ref.subscribe(div => {
+      if (div && app_) {
+        app_.bindElement(div);
+      }
+    });
+
+    return () => {
+      dispose();
+      if (app_) {
+        app_.dispose();
+      }
+    };
+  });
+}

package/src/vue.ts

@@ -0,0 +1,74 @@
+import type { ComponentPublicInstance, Ref } from "vue-demi";
+import {
+  computed,
+  getCurrentScope,
+  onScopeDispose,
+  shallowRef,
+  unref,
+  watchEffect,
+} from "vue-demi";
+import { createWhiteboardApp } from "./index";
+
+import type { WhiteboardApp, WhiteboardAppConfig } from "./WhiteboardApp";
+
+export type FastBoardConfig = WhiteboardAppConfig;
+
+export type MaybeRef<T> = T | Ref<T>;
+export type VueInstance = ComponentPublicInstance;
+export type MaybeElementRef = MaybeRef<
+  HTMLElement | SVGElement | VueInstance | undefined | null
+>;
+
+/**
+ * Get the dom element of a ref of element or Vue component instance
+ */
+export function unrefElement(elRef: MaybeElementRef) {
+  const plain = unref(elRef);
+  return (plain as VueInstance)?.$el ?? plain;
+}
+
+function tryOnScopeDispose(fn: () => void) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+
+/**
+ * @example
+ * ```vue
+ * <script setup>
+ * const el = ref(null)
+ * const app = useFastboard(el, { sdkConfig, joinRoom })
+ * if (app.value) {
+ *   app.value.insertDocs({...})
+ * }
+ * </script>
+ * <template>
+ *   <div style="width: 100%; height: 100%" ref="el"></div>
+ * </template>
+ * ```
+ */
+export function useFastboard(el: MaybeElementRef, config: FastBoardConfig) {
+  const app = shallowRef<WhiteboardApp | null>(null);
+  const target = computed(() => unrefElement(el));
+
+  createWhiteboardApp(config).then(app_ => {
+    app.value = app_;
+  });
+
+  watchEffect(() => {
+    if (target.value && app.value) {
+      app.value.bindElement(target.value);
+    }
+  });
+
+  tryOnScopeDispose(() => {
+    if (app.value) {
+      app.value.dispose();
+    }
+  });
+
+  return app;
+}