@netless/fastboard 0.0.8 → 0.1.0

package/dist/index.mjs

@@ -0,0 +1,393 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/index.ts
+import { DefaultHotKeys, WhiteWebSdk } from "white-web-sdk";
+import { WindowManager as WindowManager3 } from "@netless/window-manager";
+
+// src/register-apps.ts
+import { WindowManager } from "@netless/window-manager";
+WindowManager.register({
+  kind: "Slide",
+  appOptions: {
+    debug: false
+  },
+  src: async () => {
+    var _a;
+    const app = await import("@netless/app-slide");
+    return (_a = app.default) != null ? _a : app;
+  }
+});
+WindowManager.register({
+  kind: "Monaco",
+  src: "https://cdn.jsdelivr.net/npm/@netless/app-monaco@latest/dist/main.iife.js"
+});
+WindowManager.register({
+  kind: "Countdown",
+  src: "https://cdn.jsdelivr.net/npm/@netless/app-countdown@latest/dist/main.iife.js"
+});
+WindowManager.register({
+  kind: "GeoGebra",
+  src: "https://cdn.jsdelivr.net/npm/@netless/app-monaco@geogebra/dist/main.iife.js",
+  appOptions: {
+    HTML5Codebase: "https://flat-storage-cn-hz.whiteboard.agora.io/GeoGebra/HTML5/5.0/web3d"
+  }
+});
+
+// src/core.ts
+import { BuiltinApps } from "@netless/window-manager";
+
+// src/emitter.ts
+var FastboardEmitter = class {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Set();
+  }
+  get length() {
+    return this.listeners.size;
+  }
+  dispatch(message) {
+    this.listeners.forEach((callback) => callback(message));
+  }
+  addListener(listener) {
+    this.listeners.add(listener);
+  }
+  removeListener(listener) {
+    this.listeners.delete(listener);
+  }
+};
+
+// src/utils.ts
+import { WindowManager as WindowManager2 } from "@netless/window-manager";
+function noop() {
+}
+function getImageSize(url, fallback) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => resolve(fallback);
+    img.src = url;
+  });
+}
+function makeSlideParams(scenes) {
+  const emptyScenes = [];
+  let taskId = "";
+  let url = "";
+  const pptSrcRE = /^pptx?(?<prefix>:\/\/\S+?dynamicConvert)\/(?<taskId>\w+)\//;
+  for (const { name, ppt } of scenes) {
+    emptyScenes.push({ name });
+    if (!ppt || !ppt.src.startsWith("ppt")) {
+      continue;
+    }
+    const match = pptSrcRE.exec(ppt.src);
+    if (!match || !match.groups) {
+      continue;
+    }
+    taskId = match.groups.taskId;
+    url = "https" + match.groups.prefix;
+    break;
+  }
+  return { emptyScenes, taskId, url };
+}
+function convertedFileToScene(f, i) {
+  return {
+    name: String(i + 1),
+    ppt: {
+      src: f.conversionFileUrl,
+      width: f.width,
+      height: f.height,
+      previewURL: f.preview
+    }
+  };
+}
+function ensureWindowManager(joinRoom) {
+  if (!joinRoom.invisiblePlugins || !joinRoom.invisiblePlugins.includes(WindowManager2)) {
+    joinRoom.invisiblePlugins = [...joinRoom.invisiblePlugins || [], WindowManager2];
+  }
+  return joinRoom;
+}
+var SOUP = "!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+var SOUP_LEN = SOUP.length;
+var ID_LEN = 20;
+var reusedIdCarrier = Array(ID_LEN);
+function genUID() {
+  for (let i = 0; i < ID_LEN; i++) {
+    reusedIdCarrier[i] = SOUP.charAt(Math.random() * SOUP_LEN);
+  }
+  return reusedIdCarrier.join("");
+}
+
+// src/value.ts
+function createValue(value, effect, setValue = noop) {
+  const emitter = new FastboardEmitter();
+  function set(newValue) {
+    emitter.dispatch(value = newValue);
+  }
+  const dispose = effect(set) || noop;
+  function subscribe(callback) {
+    emitter.addListener(callback);
+    callback(value);
+    return () => emitter.removeListener(callback);
+  }
+  function reaction(callback) {
+    emitter.addListener(callback);
+    return () => emitter.removeListener(callback);
+  }
+  return { value, subscribe, reaction, setValue, dispose };
+}
+
+// src/base.ts
+var FastboardAppBase = class {
+  constructor(sdk, room, manager, hotKeys) {
+    this.sdk = sdk;
+    this.room = room;
+    this.manager = manager;
+    this.hotKeys = hotKeys;
+    this._disposers = [];
+    this._destroyed = false;
+    this.createValue = (...args) => {
+      const value = createValue(...args);
+      this._disposers.push(value.dispose);
+      return value;
+    };
+  }
+  _assertNotDestroyed() {
+    if (this._destroyed) {
+      throw new Error("[FastboardApp] Can not call any method on destroyed FastboardApp.");
+    }
+  }
+  _addRoomListener(name, listener) {
+    this._assertNotDestroyed();
+    this.room.callbacks.on(name, listener);
+    return () => this.room.callbacks.off(name, listener);
+  }
+  _addManagerListener(name, set) {
+    this._assertNotDestroyed();
+    this.manager.emitter.on(name, set);
+    return () => this.manager.emitter.off(name, set);
+  }
+  _addMainViewListener(name, listener) {
+    this._assertNotDestroyed();
+    this.manager.mainView.callbacks.on(name, listener);
+    return () => this.manager.mainView.callbacks.off(name, listener);
+  }
+  destroy() {
+    this._disposers.forEach((dispose) => dispose());
+    this._disposers.length = 0;
+    this._destroyed = true;
+    this.manager.destroy();
+    return this.room.disconnect();
+  }
+};
+
+// src/core.ts
+var FastboardApp = class extends FastboardAppBase {
+  constructor() {
+    super(...arguments);
+    this.writable = this.createValue(this.room.isWritable, (set) => this._addRoomListener("onEnableWriteNowChanged", () => set(this.room.isWritable)), this.room.setWritable.bind(this.room));
+    this.boxState = this.createValue(this.manager.boxState, (set) => this._addManagerListener("boxStateChange", set));
+    this.focusedApp = this.createValue(this.manager.focused, (set) => this._addManagerListener("focusedChange", set));
+    this.canRedoSteps = this.createValue(this.manager.mainView.canRedoSteps, (set) => this._addMainViewListener("onCanRedoStepsUpdate", set));
+    this.canUndoSteps = this.createValue(this.manager.mainView.canUndoSteps, (set) => this._addMainViewListener("onCanUndoStepsUpdate", set));
+    this.camera = this.createValue(this.manager.mainView.camera, (set) => this._addMainViewListener("onCameraUpdated", set), this.manager.moveCamera.bind(this.manager));
+    this.memberState = this.createValue(this.room.state.memberState, (set) => this._addRoomListener("onRoomStateChanged", ({ memberState: m }) => m && set(m)), this.manager.mainView.setMemberState.bind(this.manager.mainView));
+  }
+  bindContainer(container) {
+    this._assertNotDestroyed();
+    this.manager.bindContainer(container);
+  }
+  bindCollector(container) {
+    this._assertNotDestroyed();
+    this.manager.bindCollectorContainer(container);
+  }
+  undo() {
+    this._assertNotDestroyed();
+    this.manager.mainView.undo();
+  }
+  redo() {
+    this._assertNotDestroyed();
+    this.manager.mainView.redo();
+  }
+  moveCamera(camera) {
+    this._assertNotDestroyed();
+    this.manager.moveCamera(camera);
+  }
+  moveCameraToContain(rectangle) {
+    this._assertNotDestroyed();
+    this.manager.moveCameraToContain(rectangle);
+  }
+  cleanCurrentScene() {
+    this._assertNotDestroyed();
+    this.manager.mainView.cleanCurrentScene();
+  }
+  setAppliance(appliance, shape) {
+    this._assertNotDestroyed();
+    this.manager.mainView.setMemberState({ currentApplianceName: appliance, shapeType: shape });
+  }
+  setStrokeWidth(strokeWidth) {
+    this._assertNotDestroyed();
+    this.manager.mainView.setMemberState({ strokeWidth });
+  }
+  setStrokeColor(strokeColor) {
+    this._assertNotDestroyed();
+    this.manager.mainView.setMemberState({ strokeColor });
+  }
+  async insertImage(url) {
+    this._assertNotDestroyed();
+    await this.manager.switchMainViewToWriter();
+    const { divElement } = this.manager.mainView;
+    const containerSize = {
+      width: (divElement == null ? void 0 : divElement.scrollWidth) || window.innerWidth,
+      height: (divElement == null ? void 0 : divElement.scrollHeight) || window.innerHeight
+    };
+    const maxWidth = containerSize.width * 0.8;
+    let { width, height } = await getImageSize(url, containerSize);
+    const scale = Math.min(maxWidth / width, 1);
+    const uuid = genUID();
+    const { centerX, centerY } = this.manager.camera;
+    width *= scale;
+    height *= scale;
+    this.manager.mainView.insertImage({ uuid, centerX, centerY, width, height, locked: false });
+    this.manager.mainView.completeImageUpload(uuid, url);
+    width /= 0.8;
+    height /= 0.8;
+    const originX = centerX - width / 2;
+    const originY = centerY - height / 2;
+    this.manager.moveCameraToContain({ originX, originY, width, height });
+  }
+  insertDocs(arg1, arg2) {
+    if (typeof arg1 === "object" && "fileType" in arg1) {
+      return this._insertDocsImpl(arg1);
+    } else if (arg2 && arg2.status !== "Finished") {
+      throw new Error("[FastboardApp] Can not insert a converting doc.");
+    } else if (arg2 && arg2.progress) {
+      const scenes = arg2.progress.convertedFileList.map(convertedFileToScene);
+      const scenePath = `/${arg2.uuid}/${genUID()}`;
+      const { emptyScenes, taskId, url } = makeSlideParams(scenes);
+      if (taskId && url) {
+        const title = arg1;
+        return this._insertDocsImpl({ fileType: "pptx", scenePath, taskId, title, url, scenes: emptyScenes });
+      } else {
+        return this._insertDocsImpl({ fileType: "pdf", scenePath, scenes, title: arg1 });
+      }
+    }
+  }
+  _insertDocsImpl(_a) {
+    var _b = _a, { fileType, scenePath, title, scenes } = _b, attributes = __objRest(_b, ["fileType", "scenePath", "title", "scenes"]);
+    this._assertNotDestroyed();
+    switch (fileType) {
+      case "pdf":
+      case "ppt":
+        return this.manager.addApp({
+          kind: "DocsViewer",
+          options: { scenePath, title, scenes }
+        });
+      case "pptx":
+        return this.manager.addApp({
+          kind: "Slide",
+          options: { scenePath, title, scenes },
+          attributes
+        });
+    }
+  }
+  insertCodeEditor() {
+    this._assertNotDestroyed();
+    return this.manager.addApp({
+      kind: "Monaco",
+      options: { title: "Code Editor" }
+    });
+  }
+  insertCountdown() {
+    this._assertNotDestroyed();
+    return this.manager.addApp({
+      kind: "Countdown",
+      options: { title: "Countdown" }
+    });
+  }
+  insertMedia({ title, src }) {
+    this._assertNotDestroyed();
+    return this.manager.addApp({
+      kind: BuiltinApps.MediaPlayer,
+      options: { title },
+      attributes: { src }
+    });
+  }
+  insertGeoGebra() {
+    this._assertNotDestroyed();
+    return this.manager.addApp({
+      kind: "GeoGebra",
+      options: { title: "GeoGebra" }
+    });
+  }
+};
+
+// src/index.ts
+async function createFastboard(_a) {
+  var _b = _a, {
+    sdkConfig,
+    joinRoom: _c
+  } = _b, _d = _c, { callbacks } = _d, joinRoomParams = __objRest(_d, ["callbacks"]), {
+    managerConfig
+  } = _b;
+  const sdk = new WhiteWebSdk(__spreadProps(__spreadValues({}, sdkConfig), {
+    useMobXState: true
+  }));
+  const hotKeys = __spreadProps(__spreadValues({}, DefaultHotKeys), {
+    changeToSelector: "s",
+    changeToLaserPointer: "z",
+    changeToPencil: "p",
+    changeToRectangle: "r",
+    changeToEllipse: "c",
+    changeToEraser: "e",
+    changeToText: "t",
+    changeToStraight: "l",
+    changeToArrow: "a",
+    changeToHand: "h"
+  });
+  const room = await sdk.joinRoom(__spreadProps(__spreadValues({
+    floatBar: true,
+    hotKeys
+  }, ensureWindowManager(joinRoomParams)), {
+    useMultiViews: true,
+    disableNewPencil: false,
+    disableMagixEventDispatchLimit: true
+  }), callbacks);
+  const manager = await WindowManager3.mount(__spreadProps(__spreadValues({
+    cursor: true
+  }, managerConfig), {
+    room
+  }));
+  return new FastboardApp(sdk, room, manager, hotKeys);
+}
+export {
+  createFastboard
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/register-apps.ts","../src/core.ts","../src/emitter.ts","../src/utils.ts","../src/value.ts","../src/base.ts"],"sourcesContent":["import type { HotKeys, JoinRoomParams, RoomCallbacks, WhiteWebSdkConfiguration } from \"white-web-sdk\";\nimport type { MountParams } from \"@netless/window-manager\";\n\nimport { DefaultHotKeys, WhiteWebSdk } from \"white-web-sdk\";\nimport { WindowManager } from \"@netless/window-manager\";\n\nimport \"./register-apps\";\nimport { FastboardApp } from \"./core\";\nimport { ensureWindowManager } from \"./utils\";\n\nexport type { FastboardReadable, FastboardWritable } from \"./value\";\n\nexport type { FastboardApp };\n\nexport interface FastboardOptions {\n  sdkConfig: Omit<WhiteWebSdkConfiguration, \"useMobXState\">;\n  joinRoom: Omit<JoinRoomParams, \"useMultiViews\" | \"disableNewPencil\" | \"disableMagixEventDispatchLimit\"> & {\n    callbacks?: Partial<RoomCallbacks>;\n  };\n  managerConfig?: Omit<MountParams, \"room\">;\n}\n\n/**\n * Create a FastboardApp instance.\n * @example\n * let app = await createFastboard({\n *   sdkConfig: {\n *     appIdentifier: import.meta.env.VITE_APPID,\n *   },\n *   joinRoom: {\n *     uid: unique_id,\n *     uuid: import.meta.env.VITE_ROOM_UUID,\n *     roomToken: import.meta.env.VITE_ROOM_TOKEN,\n *   },\n * })\n */\nexport async function createFastboard({\n  sdkConfig,\n  joinRoom: { callbacks, ...joinRoomParams },\n  managerConfig,\n}: FastboardOptions) {\n  const sdk = new WhiteWebSdk({\n    ...sdkConfig,\n    useMobXState: true,\n  });\n\n  const hotKeys: Partial<HotKeys> = {\n    ...DefaultHotKeys,\n    changeToSelector: \"s\",\n    changeToLaserPointer: \"z\",\n    changeToPencil: \"p\",\n    changeToRectangle: \"r\",\n    changeToEllipse: \"c\",\n    changeToEraser: \"e\",\n    changeToText: \"t\",\n    changeToStraight: \"l\",\n    changeToArrow: \"a\",\n    changeToHand: \"h\",\n  };\n\n  const room = await sdk.joinRoom(\n    {\n      floatBar: true,\n      hotKeys,\n      ...ensureWindowManager(joinRoomParams),\n      useMultiViews: true,\n      disableNewPencil: false,\n      disableMagixEventDispatchLimit: true,\n    },\n    callbacks\n  );\n\n  const manager = await WindowManager.mount({\n    cursor: true,\n    ...managerConfig,\n    room,\n  });\n\n  return new FastboardApp(sdk, room, manager, hotKeys);\n}\n","import { WindowManager } from \"@netless/window-manager\";\n\nWindowManager.register({\n  kind: \"Slide\",\n  appOptions: {\n    // turn on to show debug controller\n    debug: false,\n  },\n  src: async () => {\n    const app = await import(\"@netless/app-slide\");\n    return app.default ?? app;\n  },\n});\n\nWindowManager.register({\n  kind: \"Monaco\",\n  src: \"https://cdn.jsdelivr.net/npm/@netless/app-monaco@latest/dist/main.iife.js\",\n});\n\nWindowManager.register({\n  kind: \"Countdown\",\n  src: \"https://cdn.jsdelivr.net/npm/@netless/app-countdown@latest/dist/main.iife.js\",\n});\n\nWindowManager.register({\n  kind: \"GeoGebra\",\n  src: \"https://cdn.jsdelivr.net/npm/@netless/app-monaco@geogebra/dist/main.iife.js\",\n  appOptions: {\n    HTML5Codebase: \"https://flat-storage-cn-hz.whiteboard.agora.io/GeoGebra/HTML5/5.0/web3d\",\n  },\n});\n","import type {\n  AnimationMode,\n  ApplianceNames,\n  Camera,\n  Color,\n  ConversionResponse,\n  MemberState,\n  Rectangle,\n  RoomState,\n  SceneDefinition,\n  ShapeType,\n} from \"white-web-sdk\";\n\nimport { BuiltinApps } from \"@netless/window-manager\";\nimport { FastboardAppBase } from \"./base\";\nimport { convertedFileToScene, genUID, getImageSize, makeSlideParams } from \"./utils\";\n\nexport interface InsertDocsStatic {\n  readonly fileType: \"pdf\" | \"ppt\";\n  readonly scenePath: string;\n  readonly scenes: SceneDefinition[];\n  readonly title?: string;\n}\n\nexport interface InsertDocsDynamic {\n  readonly fileType: \"pptx\";\n  readonly scenePath: string;\n  readonly taskId: string;\n  readonly title?: string;\n  readonly url?: string;\n  /** @example [{ name: '1' }, { name: '2' }, { name: '3' }] */\n  readonly scenes?: SceneDefinition[];\n}\n\nexport interface InsertMediaParams {\n  title: string;\n  src: string;\n}\n\nexport type InsertDocsParams = InsertDocsStatic | InsertDocsDynamic;\n\nexport type SetMemberStateFn = (partialMemberState: Partial<MemberState>) => void;\n\nexport type RoomStateChanged = (diff: Partial<RoomState>) => void;\n\nexport class FastboardApp extends FastboardAppBase {\n  /**\n   * Render this app to some DOM.\n   */\n  bindContainer(container: HTMLElement) {\n    this._assertNotDestroyed();\n    this.manager.bindContainer(container);\n  }\n\n  /**\n   * Move window-manager's collector to some place.\n   */\n  bindCollector(container: HTMLElement) {\n    this._assertNotDestroyed();\n    this.manager.bindCollectorContainer(container);\n  }\n\n  /**\n   * Is current room writable?\n   */\n  readonly writable = this.createValue(\n    this.room.isWritable,\n    set => this._addRoomListener(\"onEnableWriteNowChanged\", () => set(this.room.isWritable)),\n    this.room.setWritable.bind(this.room)\n  );\n\n  /**\n   * Current window-manager's windows' state (is it maximized?).\n   */\n  readonly boxState = this.createValue(this.manager.boxState, set =>\n    this._addManagerListener(\"boxStateChange\", set)\n  );\n\n  /**\n   * Current window-manager's focused app's id.\n   * @example \"HelloWorld-1A2b3C4d\"\n   */\n  readonly focusedApp = this.createValue(this.manager.focused, set =>\n    this._addManagerListener(\"focusedChange\", set)\n  );\n\n  /**\n   * How many times can I call `app.redo()`?\n   */\n  readonly canRedoSteps = this.createValue(this.manager.mainView.canRedoSteps, set =>\n    this._addMainViewListener(\"onCanRedoStepsUpdate\", set)\n  );\n\n  /**\n   * How many times can I call `app.undo()`?\n   */\n  readonly canUndoSteps = this.createValue(this.manager.mainView.canUndoSteps, set =>\n    this._addMainViewListener(\"onCanUndoStepsUpdate\", set)\n  );\n\n  /**\n   * Current camera information of main view.\n   */\n  readonly camera = this.createValue(\n    this.manager.mainView.camera,\n    set => this._addMainViewListener(\"onCameraUpdated\", set),\n    this.manager.moveCamera.bind(this.manager)\n  );\n\n  /**\n   * Current tool's info, like \"is using pencil?\", \"what color?\".\n   */\n  readonly memberState = this.createValue<MemberState, SetMemberStateFn>(\n    this.room.state.memberState,\n    set => this._addRoomListener<RoomStateChanged>(\"onRoomStateChanged\", ({ memberState: m }) => m && set(m)),\n    this.manager.mainView.setMemberState.bind(this.manager.mainView)\n  );\n\n  /**\n   * Undo a step on main view.\n   */\n  undo() {\n    this._assertNotDestroyed();\n    this.manager.mainView.undo();\n  }\n\n  /**\n   * Redo a step on main view.\n   */\n  redo() {\n    this._assertNotDestroyed();\n    this.manager.mainView.redo();\n  }\n\n  /**\n   * Move current main view's camera position.\n   */\n  moveCamera(camera: Partial<Camera> & { animationMode?: AnimationMode | undefined }) {\n    this._assertNotDestroyed();\n    this.manager.moveCamera(camera);\n  }\n\n  /**\n   * Move current main view's camera to include a rectangle.\n   */\n  moveCameraToContain(rectangle: Rectangle & { animationMode?: AnimationMode }) {\n    this._assertNotDestroyed();\n    this.manager.moveCameraToContain(rectangle);\n  }\n\n  /**\n   * Delete all things on the main view.\n   */\n  cleanCurrentScene() {\n    this._assertNotDestroyed();\n    this.manager.mainView.cleanCurrentScene();\n  }\n\n  /**\n   * Set current tool, like \"pencil\".\n   */\n  setAppliance(appliance: ApplianceNames, shape?: ShapeType) {\n    this._assertNotDestroyed();\n    this.manager.mainView.setMemberState({ currentApplianceName: appliance, shapeType: shape });\n  }\n\n  setStrokeWidth(strokeWidth: number) {\n    this._assertNotDestroyed();\n    this.manager.mainView.setMemberState({ strokeWidth });\n  }\n\n  setStrokeColor(strokeColor: Color) {\n    this._assertNotDestroyed();\n    this.manager.mainView.setMemberState({ strokeColor });\n  }\n\n  /**\n   * Insert an image to the main view.\n   */\n  async insertImage(url: string) {\n    this._assertNotDestroyed();\n    await this.manager.switchMainViewToWriter();\n\n    const { divElement } = this.manager.mainView;\n    const containerSize = {\n      width: divElement?.scrollWidth || window.innerWidth,\n      height: divElement?.scrollHeight || window.innerHeight,\n    };\n\n    // 1. shrink the image a little to fit container **width**\n    const maxWidth = containerSize.width * 0.8;\n    let { width, height } = await getImageSize(url, containerSize);\n    const scale = Math.min(maxWidth / width, 1);\n    const uuid = genUID();\n    const { centerX, centerY } = this.manager.camera;\n    width *= scale;\n    height *= scale;\n    this.manager.mainView.insertImage({ uuid, centerX, centerY, width, height, locked: false });\n    this.manager.mainView.completeImageUpload(uuid, url);\n\n    // 2. move camera to fit image **height**\n    width /= 0.8;\n    height /= 0.8;\n    const originX = centerX - width / 2;\n    const originY = centerY - height / 2;\n    this.manager.moveCameraToContain({ originX, originY, width, height });\n  }\n\n  /**\n   * Insert PDF/PPTX from conversion result.\n   * @param status https://developer.netless.link/server-en/home/server-conversion#get-query-task-conversion-progress\n   */\n  insertDocs(filename: string, status: ConversionResponse): Promise<string | undefined>;\n\n  /**\n   * Manual way.\n   * @example\n   * app.insertDocs({\n   *   fileType: 'pptx',\n   *   scenePath: `/pptx/${conversion.taskId}`,\n   *   taskId: conversion.taskId,\n   *   title: 'Title',\n   * })\n   */\n  insertDocs(params: InsertDocsParams): Promise<string | undefined>;\n\n  insertDocs(arg1: string | InsertDocsParams, arg2?: ConversionResponse) {\n    if (typeof arg1 === \"object\" && \"fileType\" in arg1) {\n      return this._insertDocsImpl(arg1);\n    } else if (arg2 && arg2.status !== \"Finished\") {\n      throw new Error(\"[FastboardApp] Can not insert a converting doc.\");\n    } else if (arg2 && arg2.progress) {\n      const scenes: SceneDefinition[] = arg2.progress.convertedFileList.map(convertedFileToScene);\n      const scenePath = `/${arg2.uuid}/${genUID()}`;\n      const { emptyScenes, taskId, url } = makeSlideParams(scenes);\n      if (taskId && url) {\n        const title = arg1;\n        return this._insertDocsImpl({ fileType: \"pptx\", scenePath, taskId, title, url, scenes: emptyScenes });\n      } else {\n        return this._insertDocsImpl({ fileType: \"pdf\", scenePath, scenes, title: arg1 });\n      }\n    }\n  }\n\n  private _insertDocsImpl({ fileType, scenePath, title, scenes, ...attributes }: InsertDocsParams) {\n    this._assertNotDestroyed();\n    switch (fileType) {\n      case \"pdf\":\n      case \"ppt\":\n        return this.manager.addApp({\n          kind: \"DocsViewer\",\n          options: { scenePath, title, scenes },\n        });\n      case \"pptx\":\n        return this.manager.addApp({\n          kind: \"Slide\",\n          options: { scenePath, title, scenes },\n          attributes,\n        });\n    }\n  }\n\n  /**\n   * Insert the Monaco Code Editor app.\n   */\n  insertCodeEditor() {\n    this._assertNotDestroyed();\n    return this.manager.addApp({\n      kind: \"Monaco\",\n      options: { title: \"Code Editor\" },\n    });\n  }\n\n  /**\n   * Insert the Countdown app.\n   */\n  insertCountdown() {\n    this._assertNotDestroyed();\n    return this.manager.addApp({\n      kind: \"Countdown\",\n      options: { title: \"Countdown\" },\n    });\n  }\n\n  /**\n   * Insert the Media Player app.\n   */\n  insertMedia({ title, src }: InsertMediaParams) {\n    this._assertNotDestroyed();\n    return this.manager.addApp({\n      kind: BuiltinApps.MediaPlayer,\n      options: { title },\n      attributes: { src },\n    });\n  }\n\n  /**\n   * Insert the GeoGebra app.\n   */\n  insertGeoGebra() {\n    this._assertNotDestroyed();\n    return this.manager.addApp({\n      kind: \"GeoGebra\",\n      options: { title: \"GeoGebra\" },\n    });\n  }\n}\n","export type FastboardListener<T> = (event: T) => void;\n\nexport class FastboardEmitter<T> {\n  listeners = new Set<FastboardListener<T>>();\n\n  get length(): number {\n    return this.listeners.size;\n  }\n\n  dispatch(message: T) {\n    this.listeners.forEach(callback => callback(message));\n  }\n\n  addListener(listener: FastboardListener<T>) {\n    this.listeners.add(listener);\n  }\n\n  removeListener(listener: FastboardListener<T>) {\n    this.listeners.delete(listener);\n  }\n}\n","import type { ConvertedFile, JoinRoomParams, SceneDefinition, Size } from \"white-web-sdk\";\nimport { WindowManager } from \"@netless/window-manager\";\n\nexport function noop() {\n  /* noop */\n}\n\nexport function getImageSize(url: string, fallback: Size) {\n  return new Promise<Size>(resolve => {\n    const img = new Image();\n    img.onload = () => resolve(img);\n    img.onerror = () => resolve(fallback);\n    img.src = url;\n  });\n}\n\nexport function makeSlideParams(scenes: SceneDefinition[]) {\n  const emptyScenes: SceneDefinition[] = [];\n  let taskId = \"\";\n  let url = \"\";\n\n  // e.g. \"ppt(x)://cdn/prefix/dynamicConvert/{taskId}/1.slide\"\n  const pptSrcRE = /^pptx?(?<prefix>:\\/\\/\\S+?dynamicConvert)\\/(?<taskId>\\w+)\\//;\n\n  for (const { name, ppt } of scenes) {\n    // make sure scenesWithoutPPT.length === scenes.length\n    emptyScenes.push({ name });\n\n    if (!ppt || !ppt.src.startsWith(\"ppt\")) {\n      continue;\n    }\n    const match = pptSrcRE.exec(ppt.src);\n    if (!match || !match.groups) {\n      continue;\n    }\n    taskId = match.groups.taskId;\n    url = \"https\" + match.groups.prefix;\n    break;\n  }\n\n  return { emptyScenes, taskId, url };\n}\n\nexport function convertedFileToScene(f: ConvertedFile, i: number) {\n  return {\n    name: String(i + 1),\n    ppt: {\n      src: f.conversionFileUrl,\n      width: f.width,\n      height: f.height,\n      previewURL: f.preview,\n    },\n  };\n}\n\nexport function ensureWindowManager(joinRoom: JoinRoomParams) {\n  if (!joinRoom.invisiblePlugins || !joinRoom.invisiblePlugins.includes(WindowManager)) {\n    joinRoom.invisiblePlugins = [...(joinRoom.invisiblePlugins || []), WindowManager];\n  }\n  return joinRoom;\n}\n\n// Copy from https://github.com/crimx/side-effect-manager/blob/main/src/gen-uid.ts\nconst SOUP = \"!#%()*+,-./:;=?@[]^_`{|}~\" + \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\nconst SOUP_LEN = SOUP.length;\nconst ID_LEN = 20;\nconst reusedIdCarrier = /* @__PURE__ */ Array(ID_LEN);\n\nexport function genUID() {\n  for (let i = 0; i < ID_LEN; i++) {\n    reusedIdCarrier[i] = SOUP.charAt(Math.random() * SOUP_LEN);\n  }\n  return reusedIdCarrier.join(\"\");\n}\n","import { FastboardEmitter } from \"./emitter\";\nimport { noop } from \"./utils\";\n\nexport type FastboardDisposer = () => void;\n\nexport interface FastboardReadable<T> {\n  readonly value: T;\n  subscribe(callback: (value: T) => void): FastboardDisposer;\n  reaction(callback: (value: T) => void): FastboardDisposer;\n}\n\nexport interface FastboardWritable<T, SetFn = (value: T) => void> extends FastboardReadable<T> {\n  setValue: SetFn;\n}\n\nexport interface FastboardInternalValue<T> extends FastboardWritable<T> {\n  dispose: FastboardDisposer;\n}\n\n/**\n * Create a readonly, reactive value.\n * @example\n * createValue(manager.getMainViewSceneIndex(), (set) => {\n *   manager.emitter.on(\"mainViewSceneIndexChanged\", set)\n *   return () => manager.emitter.off(\"mainViewSceneIndexChanged\", set)\n * })\n */\nexport function createValue<T>(\n  value: T,\n  effect: (set: (value: T) => void) => FastboardDisposer | void\n): FastboardReadable<T>;\n\n/**\n * Create a writable, reactive value.\n * @example\n * createValue(manager.getMainViewSceneIndex(), (set) => {\n *   manager.emitter.on(\"mainViewSceneIndexChanged\", set)\n *   return () => manager.emitter.off(\"mainViewSceneIndexChanged\", set)\n * }, (newValue) => {\n *   manager.setMainViewSceneIndex(newValue)\n * })\n */\nexport function createValue<T, SetFn = (value: T) => void>(\n  value: T,\n  effect: (set: (value: T) => void) => FastboardDisposer | void,\n  set: (value: T) => void\n): FastboardWritable<T, SetFn>;\n\nexport function createValue<T>(\n  value: T,\n  effect: (set: (value: T) => void) => FastboardDisposer | void,\n  setValue: (value: T) => void = noop\n): FastboardInternalValue<T> {\n  const emitter = new FastboardEmitter<T>();\n\n  function set(newValue: T) {\n    emitter.dispatch((value = newValue));\n  }\n\n  const dispose = effect(set) || noop;\n\n  function subscribe(callback: (value: T) => void) {\n    emitter.addListener(callback);\n    callback(value);\n    return () => emitter.removeListener(callback);\n  }\n\n  function reaction(callback: (value: T) => void) {\n    emitter.addListener(callback);\n    return () => emitter.removeListener(callback);\n  }\n\n  return { value, subscribe, reaction, setValue, dispose };\n}\n","import type { PublicEvent, Room, WindowManager } from \"@netless/window-manager\";\nimport type { HotKeys, WhiteWebSdk } from \"white-web-sdk\";\nimport type { FastboardDisposer, FastboardInternalValue } from \"./value\";\n\nimport { createValue } from \"./value\";\n\nexport class FastboardAppBase {\n  public constructor(\n    readonly sdk: WhiteWebSdk,\n    readonly room: Room,\n    readonly manager: WindowManager,\n    readonly hotKeys: Partial<HotKeys>\n  ) {}\n\n  protected readonly _disposers: FastboardDisposer[] = [];\n  protected _destroyed = false;\n  protected _assertNotDestroyed() {\n    if (this._destroyed) {\n      throw new Error(\"[FastboardApp] Can not call any method on destroyed FastboardApp.\");\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  protected createValue: typeof createValue = (...args: [any, any]): any => {\n    const value = createValue(...args);\n    this._disposers.push((value as FastboardInternalValue<unknown>).dispose);\n    return value;\n  };\n\n  protected _addRoomListener<T = unknown>(name: string, listener: T) {\n    this._assertNotDestroyed();\n    this.room.callbacks.on(name, listener);\n    return () => this.room.callbacks.off(name, listener);\n  }\n\n  protected _addManagerListener<K extends keyof PublicEvent>(name: K, set: (value: PublicEvent[K]) => void) {\n    this._assertNotDestroyed();\n    this.manager.emitter.on(name, set);\n    return () => this.manager.emitter.off(name, set);\n  }\n\n  protected _addMainViewListener<T = unknown>(name: string, listener: T) {\n    this._assertNotDestroyed();\n    this.manager.mainView.callbacks.on(name, listener);\n    return () => this.manager.mainView.callbacks.off(name, listener);\n  }\n\n  public destroy() {\n    this._disposers.forEach(dispose => dispose());\n    this._disposers.length = 0;\n    this._destroyed = true;\n    this.manager.destroy();\n    return this.room.disconnect();\n  }\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,87 +1,32 @@
 {
   "name": "@netless/fastboard",
-  "version": "0.0.8",
-  "description": "An open sourced sdk based on white-web-sdk.",
-  "main": "./dist/index.cjs.js",
-  "module": "./dist/index.es.js",
-  "types": "./src/index.ts",
-  "exports": {
-    ".": {
-      "node": {
-        "import": "./dist/index.es.js",
-        "require": "./dist/index.cjs.js"
-      },
-      "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"
-  },
+  "version": "0.1.0",
+  "description": "A tiny wrapper of white-web-sdk and @netless/window-manager.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "src/index.ts",
+  "sideEffects": false,
   "files": [
     "src",
     "dist"
   ],
-  "contributors": [
-    {
-      "name": "hyrious",
-      "email": "hyrious@outlook.com"
-    },
-    {
-      "name": "l1shen",
-      "email": "lishen1635@gmail.com"
-    }
-  ],
-  "license": "MIT",
   "peerDependencies": {
-    "@netless/app-countdown": "*",
-    "@netless/app-geogebra": "*",
-    "@netless/app-monaco": "*",
     "@netless/app-slide": "*",
-    "@netless/window-manager": "*",
-    "@vue/composition-api": "*",
-    "react": "*",
-    "react-dom": "*",
-    "svelte": "*",
-    "vue": "*",
-    "white-web-sdk": "*"
+    "@netless/window-manager": ">=0.4.0",
+    "white-web-sdk": ">=2.16.0"
   },
   "peerDependenciesMeta": {
     "@netless/app-slide": {
       "optional": true
-    },
-    "@netless/app-monaco": {
-      "optional": true
-    },
-    "@netless/app-countdown": {
-      "optional": true
-    },
-    "@netless/app-geogebra": {
-      "optional": true
-    },
-    "@vue/composition-api": {
-      "optional": true
-    },
-    "svelte": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
     }
   },
-  "dependencies": {
-    "@tippyjs/react": "^4.2.6",
-    "clsx": "^1.1.1",
-    "i18next": "^21.6.5",
-    "rc-slider": "^9.7.5",
-    "tippy.js": "^6.3.7",
-    "vue-demi": "^0.12.1"
+  "devDependencies": {
+    "@netless/app-slide": "^0.0.55",
+    "@netless/window-manager": "^0.4.0-canary.17",
+    "tsup": "^5.11.11",
+    "white-web-sdk": "^2.16.0"
   },
-  "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"
+  "scripts": {
+    "build": "tsup"
+  }
 }

package/src/base.ts

@@ -0,0 +1,55 @@
+import type { PublicEvent, Room, WindowManager } from "@netless/window-manager";
+import type { HotKeys, WhiteWebSdk } from "white-web-sdk";
+import type { FastboardDisposer, FastboardInternalValue } from "./value";
+
+import { createValue } from "./value";
+
+export class FastboardAppBase {
+  public constructor(
+    readonly sdk: WhiteWebSdk,
+    readonly room: Room,
+    readonly manager: WindowManager,
+    readonly hotKeys: Partial<HotKeys>
+  ) {}
+
+  protected readonly _disposers: FastboardDisposer[] = [];
+  protected _destroyed = false;
+  protected _assertNotDestroyed() {
+    if (this._destroyed) {
+      throw new Error("[FastboardApp] Can not call any method on destroyed FastboardApp.");
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  protected createValue: typeof createValue = (...args: [any, any]): any => {
+    const value = createValue(...args);
+    this._disposers.push((value as FastboardInternalValue<unknown>).dispose);
+    return value;
+  };
+
+  protected _addRoomListener<T = unknown>(name: string, listener: T) {
+    this._assertNotDestroyed();
+    this.room.callbacks.on(name, listener);
+    return () => this.room.callbacks.off(name, listener);
+  }
+
+  protected _addManagerListener<K extends keyof PublicEvent>(name: K, set: (value: PublicEvent[K]) => void) {
+    this._assertNotDestroyed();
+    this.manager.emitter.on(name, set);
+    return () => this.manager.emitter.off(name, set);
+  }
+
+  protected _addMainViewListener<T = unknown>(name: string, listener: T) {
+    this._assertNotDestroyed();
+    this.manager.mainView.callbacks.on(name, listener);
+    return () => this.manager.mainView.callbacks.off(name, listener);
+  }
+
+  public destroy() {
+    this._disposers.forEach(dispose => dispose());
+    this._disposers.length = 0;
+    this._destroyed = true;
+    this.manager.destroy();
+    return this.room.disconnect();
+  }
+}