@netless/fastboard 0.0.7 → 0.0.11

package/dist/svelte.cjs.js

@@ -1,2 +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;
+"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("framer-motion");require("clsx");require("@tippyjs/react");require("rc-slider");function o(i,t){return a.readable(null,s=>{let e=null;n.createWhiteboardApp(t).then(r=>{s(e=r)});const u=i.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

@@ -1 +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"}
+{"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":"2XAqBE,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

@@ -5,6 +5,7 @@ import "white-web-sdk";
 import "i18next";
 import "react";
 import "react-dom";
+import "framer-motion";
 import "clsx";
 import "@tippyjs/react";
 import "rc-slider";

package/dist/svelte.es.js.map

@@ -1 +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;;"}
+{"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

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

package/dist/vue.cjs.js.map

@@ -1 +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"}
+{"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":"uXAwB6B,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

@@ -5,6 +5,7 @@ import "white-web-sdk";
 import "i18next";
 import "react";
 import "react-dom";
+import "framer-motion";
 import "clsx";
 import "@tippyjs/react";
 import "rc-slider";

package/dist/vue.es.js.map

@@ -1 +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;;"}
+{"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.7",
+  "version": "0.0.11",
   "description": "An open sourced sdk based on white-web-sdk.",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -22,6 +22,14 @@
       "default": "./dist/vue.es.js",
       "types": "./src/vue.ts"
     },
+    "./svelte": {
+      "node": {
+        "import": "./dist/svelte.es.js",
+        "require": "./dist/svelte.cjs.js"
+      },
+      "default": "./dist/svelte.es.js",
+      "types": "./src/svelte.ts"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -78,10 +86,11 @@
   "dependencies": {
     "@tippyjs/react": "^4.2.6",
     "clsx": "^1.1.1",
+    "framer-motion": "^5.5.6",
     "i18next": "^21.6.5",
     "rc-slider": "^9.7.5",
     "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"
+  "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 app = await createWhiteboardApp({\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\napp.bindElement(document.getElementById(\"whiteboard\"));\n```\n\n> 使用 `React`\n\n```jsx\nimport { createWhiteboardApp, Fastboard } from \"@netless/fastboard\";\nimport ReactDOM from \"react-dom\";\n\nlet app = await createWhiteboardApp({\n  /* ... */\n});\n\nfunction App() {\n  return <Fastboard app={app} />;\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关于窗口最小化后显示的小图标，可以通过 CSS 覆盖样式的方式修改它的位置：\n\n```css\n.telebox-collector {\n  right: 20px;\n  bottom: 40px;\n}\n```\n\n### 使用 APPS\n\n**注意:** 需要先安装对应的 APP\n\n```bash\nnpm add @netless/app-slide\n```\n\n```typescript\n// 插入动态 PPTX 至白板\nconst appId = await app.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 app.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 app.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,56 +1,127 @@
+import type { ConversionResponse, SceneDefinition } from "white-web-sdk";
 import type {
   InsertDocsParams,
+  InsertMediaParams,
   Language,
+  Layout,
   WhiteboardAppConfig,
 } from "./internal";
-import { Instance } from "./internal";
+import { genUID, Instance, makeSlideParams } from "./internal";
 
-export type { WhiteboardAppConfig, InsertDocsParams };
+export type {
+  Language,
+  Layout,
+  WhiteboardAppConfig,
+  InsertMediaParams,
+  InsertDocsParams,
+};
 
 export class WhiteboardApp {
   private readonly _instance: Instance;
 
-  constructor(readonly config: WhiteboardAppConfig) {
+  public constructor(readonly config: WhiteboardAppConfig) {
     this._instance = new Instance(config);
   }
 
-  get room() {
+  public get room() {
     return this._instance.room;
   }
 
-  get manager() {
+  public get manager() {
     return this._instance.manager;
   }
 
-  get sdk() {
+  public get sdk() {
     return this._instance.sdk;
   }
 
-  get i18n() {
+  public get i18n() {
     return this._instance.i18n;
   }
 
-  private _target: HTMLElement | null = null;
   public get target(): HTMLElement | null {
-    return this._target;
+    return this._instance.target;
   }
 
-  private _collector: HTMLElement | null = null;
   public get collector(): HTMLElement | null {
-    return this._collector;
+    return this._instance.collector;
   }
 
-  public bindElement(
-    target?: HTMLElement | null,
-    collector?: HTMLElement | null
-  ) {
-    this._target = target || null;
-    this._collector = collector || null;
-    this._instance.bindElement(this._target, this._collector);
+  public bindElement(target?: HTMLElement | null) {
+    this._instance.bindElement(target || null);
   }
 
-  public insertDocs(params: InsertDocsParams) {
-    return this._instance.insertDocs(params);
+  public bindCollector(collector?: HTMLElement | null) {
+    this._instance.bindCollector(collector || null);
+  }
+
+  public get layout() {
+    return this._instance.config.layout;
+  }
+
+  public updateLayout(layout?: Layout | undefined) {
+    this._instance.updateLayout(layout);
+  }
+
+  public insertMedia(params: InsertMediaParams) {
+    this._instance.insertMedia(params);
+  }
+
+  /**
+   * Insert PDF/PPTX from conversion result.
+   * @param status https://developer.netless.link/server-en/home/server-conversion#get-query-task-conversion-progress
+   */
+  public insertDocs(
+    filename: string,
+    status: ConversionResponse
+  ): Promise<string | undefined>;
+
+  /**
+   * Manual way.
+   */
+  public insertDocs(params: InsertDocsParams): Promise<string | undefined>;
+
+  public insertDocs(
+    arg1: string | InsertDocsParams,
+    arg2?: ConversionResponse
+  ) {
+    if (typeof arg1 === "object" && "fileType" in arg1) {
+      return this._instance.insertDocs(arg1);
+    } else if (arg2 && arg2.status !== "Finished") {
+      throw new Error("[WhiteboardApp] cannot insert a converting doc");
+    } else if (arg2 && arg2.progress) {
+      const scenes: SceneDefinition[] = arg2.progress.convertedFileList.map(
+        (f, i) => ({
+          name: String(i + 1),
+          ppt: {
+            src: f.conversionFileUrl,
+            width: f.width,
+            height: f.height,
+            previewURL: f.preview,
+          },
+        })
+      );
+      const uid = genUID();
+      const scenePath = `/${arg2.uuid}/${uid}`;
+      const { scenesWithoutPPT, taskId, url } = makeSlideParams(scenes);
+      if (taskId && url) {
+        return this._instance.insertDocs({
+          fileType: "pptx",
+          scenePath,
+          taskId,
+          title: arg1,
+          url,
+          scenes: scenesWithoutPPT,
+        });
+      } else {
+        return this._instance.insertDocs({
+          fileType: "pdf",
+          scenePath,
+          scenes,
+          title: arg1,
+        });
+      }
+    }
   }
 
   public insertCodeEditor() {

package/src/components/PageControl/PageControl.tsx

@@ -0,0 +1,110 @@
+import type { CommonProps, GenericIcon } from "../../types";
+
+import clsx from "clsx";
+import React from "react";
+import Tippy from "@tippyjs/react";
+
+import { TopOffset } from "../../theme";
+import { Icon } from "../../icons";
+import { FilePlus } from "../../icons/FilePlus";
+import { ChevronLeft } from "../../icons/ChevronLeft";
+import { ChevronRight } from "../../icons/ChevronRight";
+import { useWritable } from "../hooks";
+import { usePageControl } from "./hooks";
+
+export const name = "fastboard-page-control";
+
+export type PageControlProps = CommonProps &
+  GenericIcon<"add" | "prev" | "next">;
+
+export function PageControl({
+  room,
+  manager,
+  theme = "light",
+  addIcon,
+  addIconDisable,
+  prevIcon,
+  prevIconDisable,
+  nextIcon,
+  nextIconDisable,
+  i18n,
+}: PageControlProps) {
+  const writable = useWritable(room);
+  const { pageIndex, pageCount, ...actions } = usePageControl(room, manager);
+
+  const disabled = !writable;
+
+  return (
+    <div className={clsx(name, theme)}>
+      {/* <span className={clsx(`${name}-cut-line`, theme)} />{" "} */}
+      <Tippy
+        className="fastboard-tip"
+        content={i18n?.t("prevPage")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        duration={300}
+        offset={TopOffset}
+      >
+        <button
+          className={clsx(`${name}-btn`, "prev", theme)}
+          disabled={disabled || pageIndex === 0}
+          onClick={actions.prevPage}
+        >
+          <Icon
+            fallback={<ChevronLeft theme={theme} />}
+            src={disabled ? prevIconDisable : prevIcon}
+            alt="[prev]"
+          />
+        </button>
+      </Tippy>
+      <span className={clsx(`${name}-page`, theme)}>
+        {pageCount === 0 ? "\u2026" : pageIndex + 1}
+      </span>
+      <span className={clsx(`${name}-slash`, theme)}>/</span>
+      <span className={clsx(`${name}-page-count`, theme)}>{pageCount}</span>
+      <Tippy
+        className="fastboard-tip"
+        content={i18n?.t("nextPage")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        duration={300}
+        offset={TopOffset}
+      >
+        <button
+          className={clsx(`${name}-btn`, "next", theme)}
+          disabled={disabled || pageIndex === pageCount - 1}
+          onClick={actions.nextPage}
+        >
+          <Icon
+            fallback={<ChevronRight theme={theme} />}
+            src={disabled ? nextIconDisable : nextIcon}
+            alt="[next]"
+          />
+        </button>
+      </Tippy>
+      <Tippy
+        className="fastboard-tip"
+        content={i18n?.t("addPage")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        duration={300}
+        offset={TopOffset}
+      >
+        <button
+          className={clsx(`${name}-btn`, "add", theme)}
+          disabled={disabled}
+          onClick={actions.addPage}
+        >
+          <Icon
+            fallback={<FilePlus theme={theme} />}
+            src={disabled ? addIconDisable : addIcon}
+            alt="[add]"
+          />
+        </button>
+      </Tippy>
+    </div>
+  );
+}

package/src/components/PageControl/hooks.ts

@@ -0,0 +1,70 @@
+import type { Room, RoomState } from "white-web-sdk";
+import type { WindowManager } from "@netless/window-manager";
+import { useCallback, useEffect, useState } from "react";
+
+export function usePageControl(
+  room?: Room | null,
+  manager?: WindowManager | null
+) {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageCount, setPageCount] = useState(0);
+
+  const addPage = useCallback(async () => {
+    if (manager && room) {
+      await manager.switchMainViewToWriter();
+      const path = room.state.sceneState.contextPath;
+      room.putScenes(path, [{}], pageIndex + 1);
+      await manager.setMainViewSceneIndex(pageIndex + 1);
+    } else if (!manager && room) {
+      const path = room.state.sceneState.contextPath;
+      room.putScenes(path, [{}], pageIndex + 1);
+      room.setSceneIndex(pageIndex + 1);
+    }
+  }, [room, manager, pageIndex]);
+
+  const prevPage = useCallback(() => {
+    if (manager) {
+      manager.setMainViewSceneIndex(pageIndex - 1);
+    } else if (room) {
+      room.pptPreviousStep();
+    }
+  }, [room, manager, pageIndex]);
+
+  const nextPage = useCallback(() => {
+    if (manager) {
+      manager.setMainViewSceneIndex(pageIndex + 1);
+    } else if (room) {
+      room.pptNextStep();
+    }
+  }, [room, manager, pageIndex]);
+
+  useEffect(() => {
+    if (room) {
+      setPageIndex(room.state.sceneState.index);
+      setPageCount(room.state.sceneState.scenes.length);
+
+      if (manager) {
+        manager.emitter.on("mainViewSceneIndexChange", setPageIndex);
+
+        return () => {
+          manager.emitter.off("mainViewSceneIndexChange", setPageIndex);
+        };
+      } else {
+        const onRoomStateChanged = (modifyState: Partial<RoomState>) => {
+          if (modifyState.sceneState) {
+            setPageIndex(modifyState.sceneState.index);
+            setPageCount(modifyState.sceneState.scenes.length);
+          }
+        };
+
+        room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
+
+        return () => {
+          room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
+        };
+      }
+    }
+  }, [room, manager]);
+
+  return { pageIndex, pageCount, prevPage, nextPage, addPage };
+}

package/src/components/PageControl/index.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export { name, PageControl, type PageControlProps } from "./PageControl";

package/src/components/PlayerControl/PlayerControl.tsx

@@ -1,16 +1,15 @@
-import type { Player } from "white-web-sdk";
 import type { CommonProps, GenericIcon } from "../../types";
-
+import Tippy from "@tippyjs/react";
 import clsx from "clsx";
-import React, { useEffect, useState } from "react";
 import RcSlider from "rc-slider";
-import { PlayerPhase } from "white-web-sdk";
-import { usePlayer } from "./hooks";
+import React, { useEffect, useState } from "react";
+import { PlayerPhase, type Player } from "white-web-sdk";
+
 import { Icon } from "../../icons";
 import { themes, TopOffset } from "../../theme";
-import { Icons } from "./icons";
-import Tippy from "@tippyjs/react";
 import { Button } from "./components/Button";
+import { Icons } from "./icons";
+import { usePlayerControl } from "./hooks";
 
 export type PlayerControlProps = {
   autoHide?: boolean;
@@ -28,7 +27,7 @@ export function PlayerControl({
   ...icons
 }: PlayerControlProps) {
   const [currentTime, setCurrentTime] = useState(0);
-  const player = usePlayer(player_);
+  const player = usePlayerControl(player_);
 
   useEffect(() => {
     setCurrentTime(player.currentTime);

package/src/components/PlayerControl/hooks.ts

@@ -1,8 +1,9 @@
 import type { DependencyList } from "react";
 import type { Player } from "white-web-sdk";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { PlayerPhase } from "white-web-sdk";
+import { useLastValue } from "../../internal/hooks";
 
 const EMPTY_ARRAY: DependencyList = [];
 
@@ -12,15 +13,7 @@ function useForceUpdate() {
   return useCallback(() => forceUpdate_({}), EMPTY_ARRAY);
 }
 
-function useLastValue<T>(value: T) {
-  const ref = useRef<T>(value);
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
-
-export function usePlayer(player?: Player | null) {
+export function usePlayerControl(player?: Player | null) {
   const togglePlay = useCallback(() => {
     if (player) {
       switch (player.phase) {

package/src/components/PlayerControl/index.ts

@@ -1 +1,2 @@
+export * from "./hooks";
 export { PlayerControl, name, type PlayerControlProps } from "./PlayerControl";

package/src/components/{RedoUndo.tsx → RedoUndo/RedoUndo.tsx}

@@ -1,13 +1,15 @@
-import type { CommonProps, GenericIcon } from "../types";
+import type { CommonProps, GenericIcon } from "../../types";
 
 import clsx from "clsx";
-import React, { useCallback, useEffect, useState } from "react";
+import React from "react";
 import Tippy from "@tippyjs/react";
 
-import { Icon } from "../icons";
-import { Undo } from "../icons/Undo";
-import { Redo } from "../icons/Redo";
-import { TopOffset } from "../theme";
+import { Icon } from "../../icons";
+import { Undo } from "../../icons/Undo";
+import { Redo } from "../../icons/Redo";
+import { TopOffset } from "../../theme";
+import { useWritable } from "../hooks";
+import { useRedoUndo } from "./hooks";
 
 export const name = "fastboard-redo-undo";
 
@@ -15,6 +17,7 @@ export type RedoUndoProps = CommonProps & GenericIcon<"undo" | "redo">;
 
 export function RedoUndo({
   room,
+  manager,
   theme = "light",
   undoIcon,
   undoIconDisable,
@@ -22,27 +25,8 @@ export function RedoUndo({
   redoIconDisable,
   i18n,
 }: RedoUndoProps) {
-  const [writable, setWritable] = useState(false);
-  const [undoSteps, setUndoSteps] = useState(0);
-  const [redoSteps, setRedoSteps] = useState(0);
-
-  useEffect(() => {
-    if (room) {
-      setWritable(room.isWritable);
-      room.isWritable && (room.disableSerialization = false);
-
-      const updateWritable = () => setWritable(room?.isWritable || false);
-
-      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
-      room.callbacks.on("onCanUndoStepsUpdate", setUndoSteps);
-      room.callbacks.on("onCanRedoStepsUpdate", setRedoSteps);
-      return () => {
-        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
-        room.callbacks.off("onCanUndoStepsUpdate", setUndoSteps);
-        room.callbacks.off("onCanRedoStepsUpdate", setRedoSteps);
-      };
-    }
-  }, [room]);
+  const writable = useWritable(room);
+  const { redoSteps, undoSteps, redo, undo } = useRedoUndo(room, manager);
 
   const disabled = !writable;
 
@@ -60,7 +44,7 @@ export function RedoUndo({
         <button
           className={clsx(`${name}-btn`, "undo", theme)}
           disabled={disabled || undoSteps === 0}
-          onClick={useCallback(() => room && room.undo(), [room])}
+          onClick={undo}
         >
           <Icon
             fallback={<Undo theme={theme} />}
@@ -81,7 +65,7 @@ export function RedoUndo({
         <button
           className={clsx(`${name}-btn`, "redo", theme)}
           disabled={disabled || redoSteps === 0}
-          onClick={useCallback(() => room && room.redo(), [room])}
+          onClick={redo}
         >
           <Icon
             fallback={<Redo theme={theme} />}

package/src/components/RedoUndo/hooks.ts

@@ -0,0 +1,50 @@
+import type { WindowManager, Room } from "@netless/window-manager";
+import { useCallback, useEffect, useState } from "react";
+
+export function useRedoUndo(
+  room?: Room | null,
+  manager?: WindowManager | null
+) {
+  const [undoSteps, setUndoSteps] = useState(0);
+  const [redoSteps, setRedoSteps] = useState(0);
+
+  useEffect(() => {
+    if (manager) {
+      manager.mainView.callbacks.on("onCanUndoStepsUpdate", setUndoSteps);
+      manager.mainView.callbacks.on("onCanRedoStepsUpdate", setRedoSteps);
+
+      return () => {
+        manager.mainView.callbacks.off("onCanUndoStepsUpdate", setUndoSteps);
+        manager.mainView.callbacks.off("onCanRedoStepsUpdate", setRedoSteps);
+      };
+    }
+
+    if (room) {
+      room.callbacks.on("onCanUndoStepsUpdate", setUndoSteps);
+      room.callbacks.on("onCanRedoStepsUpdate", setRedoSteps);
+
+      return () => {
+        room.callbacks.off("onCanUndoStepsUpdate", setUndoSteps);
+        room.callbacks.off("onCanRedoStepsUpdate", setRedoSteps);
+      };
+    }
+  }, [room, manager]);
+
+  const undo = useCallback(() => {
+    if (manager) {
+      manager.mainView.undo();
+    } else if (room) {
+      room.undo();
+    }
+  }, [manager, room]);
+
+  const redo = useCallback(() => {
+    if (manager) {
+      manager.mainView.redo();
+    } else if (room) {
+      room.redo();
+    }
+  }, [manager, room]);
+
+  return { redoSteps, undoSteps, redo, undo };
+}