@netless/fastboard-core 0.2.11 → 0.3.0-canary.0

package/dist/index.mjs

@@ -1,24 +1,589 @@
-import {
-  DefaultApps,
-  createFastboard,
-  registerApps,
-  replayFastboard
-} from "./chunk-IHDHV4XE.mjs";
+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/utils/store.ts
+function noop() {
+}
+function safe_not_equal(a, b) {
+  return a != a ? b == b : a !== b || a && typeof a === "object" || typeof a === "function";
+}
+function readable(value, start = noop) {
+  let stop;
+  const subscribers = /* @__PURE__ */ new Set();
+  function set(new_value) {
+    if (safe_not_equal(value, new_value)) {
+      value = new_value;
+      if (stop) {
+        for (const run of subscribers) {
+          run(value);
+        }
+      }
+    }
+  }
+  function subscribe(run) {
+    subscribers.add(run);
+    if (subscribers.size === 1) {
+      stop = start(set) || noop;
+    }
+    run(value);
+    return () => {
+      subscribers.delete(run);
+      if (subscribers.size === 0) {
+        stop && stop();
+        stop = void 0;
+      }
+    };
+  }
+  function reaction(run) {
+    subscribers.add(run);
+    if (subscribers.size === 1) {
+      stop = start(set) || noop;
+    }
+    return () => {
+      subscribers.delete(run);
+      if (subscribers.size === 0) {
+        stop && stop();
+        stop = void 0;
+      }
+    };
+  }
+  return {
+    get value() {
+      return value;
+    },
+    subscribe,
+    reaction
+  };
+}
+function writable(value, start = noop, set) {
+  const internal = readable(value, start);
+  return {
+    get value() {
+      return internal.value;
+    },
+    subscribe: internal.subscribe,
+    reaction: internal.reaction,
+    set,
+    update(fn) {
+      set(fn(value));
+    }
+  };
+}
+
+// src/utils/misc.ts
+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 { scenes: 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
+    }
+  };
+}
+
+// src/utils/uid.ts
+var SOUP = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+var SOUP_LEN = 62;
+var ID_LEN = 20;
+var reusedIdCarrier = /* @__PURE__ */ 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/behaviors/register-slide.ts
+// src/utils/warn.ts
+var warnings = {
+  "no-ppt-in-scenes": "You're probably inserting the slide app in a wrong way, there shouldn't exist `scenes[0].ppt`."
+};
+var warned = /* @__PURE__ */ new Set();
+function warn(id) {
+  if (warned.has(id))
+    return;
+  warned.add(id);
+  console.warn(warnings[id]);
+}
+
+// src/impl/FastboardApp.ts
+import { DefaultHotKeys, WhiteWebSdk, contentModeScale } from "white-web-sdk";
+import { BuiltinApps, WindowManager as WindowManager2 } from "@netless/window-manager";
+
+// src/internal.ts
 import { WindowManager } from "@netless/window-manager";
+function ensure_window_manager(joinRoom) {
+  if (!joinRoom.invisiblePlugins || !joinRoom.invisiblePlugins.includes(WindowManager)) {
+    joinRoom.invisiblePlugins = [...joinRoom.invisiblePlugins || [], WindowManager];
+  }
+  return joinRoom;
+}
+function transform_app_status(status) {
+  return status === "start" ? "loading" : status === "failed" ? "failed" : "idle";
+}
+
+// src/impl/FastboardApp.ts
+var FastboardAppBase = class {
+  constructor(sdk, room, manager, hotKeys) {
+    this.sdk = sdk;
+    this.room = room;
+    this.manager = manager;
+    this.hotKeys = hotKeys;
+    this._destroyed = false;
+  }
+  _assertNotDestroyed() {
+    if (this._destroyed) {
+      throw new Error("FastboardApp has been destroyed");
+    }
+  }
+  _addRoomListener(name, listener) {
+    this._assertNotDestroyed();
+    this.room.callbacks.on(name, listener);
+    return () => this.room.callbacks.off(name, listener);
+  }
+  _addManagerListener(name, listener) {
+    this._assertNotDestroyed();
+    this.manager.emitter.on(name, listener);
+    return () => this.manager.emitter.off(name, listener);
+  }
+  _addMainViewListener(name, listener) {
+    this._assertNotDestroyed();
+    this.manager.mainView.callbacks.on(name, listener);
+    return () => this.manager.mainView.callbacks.off(name, listener);
+  }
+  destroy() {
+    this._destroyed = true;
+    this.manager.destroy();
+    return this.room.disconnect();
+  }
+};
+var FastboardApp = class extends FastboardAppBase {
+  constructor() {
+    super(...arguments);
+    this.writable = writable(this.room.isWritable, (set) => this._addRoomListener("onEnableWriteNowChanged", () => set(this.room.isWritable)), this.room.setWritable.bind(this.room));
+    this.boxState = readable(this.manager.boxState, (set) => this._addManagerListener("boxStateChange", set));
+    this.focusedApp = readable(this.manager.focused, (set) => this._addManagerListener("focusedChange", set));
+    this.canRedoSteps = readable(this.manager.canRedoSteps, (set) => this._addManagerListener("canRedoStepsChange", set));
+    this.canUndoSteps = readable(this.manager.canUndoSteps, (set) => this._addManagerListener("canUndoStepsChange", set));
+    this.camera = readable(this.manager.mainView.camera, (set) => this._addMainViewListener("onCameraUpdated", set));
+    this.memberState = readable(this.room.state.memberState, (set) => this._addRoomListener("onRoomStateChanged", ({ memberState: m }) => m && set(m)));
+    this.sceneIndex = writable(this.manager.mainViewSceneIndex, (set) => this._addManagerListener("mainViewSceneIndexChange", set), this.manager.setMainViewSceneIndex.bind(this.manager));
+    this.sceneLength = readable(this.manager.mainViewScenesLength, (set) => this._addManagerListener("mainViewScenesLengthChange", set));
+    this._appsStatus = {};
+    this.appsStatus = readable({}, (set) => this._addManagerListener("loadApp", ({ kind, status, reason }) => {
+      this._appsStatus[kind] = { status: transform_app_status(status), reason };
+      set(this._appsStatus);
+    }));
+  }
+  bindContainer(container) {
+    this._assertNotDestroyed();
+    this.manager.bindContainer(container);
+  }
+  bindCollector(container) {
+    this._assertNotDestroyed();
+    this.manager.bindCollectorContainer(container);
+  }
+  undo() {
+    this._assertNotDestroyed();
+    this.manager.undo();
+  }
+  redo() {
+    this._assertNotDestroyed();
+    this.manager.redo();
+  }
+  moveCamera(camera) {
+    this._assertNotDestroyed();
+    this.manager.moveCamera(camera);
+  }
+  moveCameraToContain(rectangle) {
+    this._assertNotDestroyed();
+    this.manager.moveCameraToContain(rectangle);
+  }
+  cleanCurrentScene() {
+    this._assertNotDestroyed();
+    this.manager.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 });
+  }
+  prevPage() {
+    this._assertNotDestroyed();
+    return this.manager.prevPage();
+  }
+  nextPage() {
+    this._assertNotDestroyed();
+    return this.manager.nextPage();
+  }
+  addPage(params) {
+    this._assertNotDestroyed();
+    return this.manager.addPage(params);
+  }
+  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) {
+    this._assertNotDestroyed();
+    if (typeof arg1 === "object" && "fileType" in arg1) {
+      return this._insertDocsImpl(arg1);
+    } else if (arg2 && arg2.status !== "Finished") {
+      throw new Error("FastboardApp cannot insert a converting doc.");
+    } else if (arg2 && arg2.progress) {
+      const title = arg1;
+      const scenePath = `/${arg2.uuid}/${genUID()}`;
+      const scenes1 = arg2.progress.convertedFileList.map(convertedFileToScene);
+      const { scenes, taskId, url } = makeSlideParams(scenes1);
+      if (taskId && url) {
+        return this._insertDocsImpl({ fileType: "pptx", scenePath, scenes, title, taskId, url });
+      } else {
+        return this._insertDocsImpl({ fileType: "pdf", scenePath, scenes: scenes1, title });
+      }
+    }
+  }
+  _insertDocsImpl(_a) {
+    var _b = _a, { fileType, scenePath, title, scenes } = _b, attributes = __objRest(_b, ["fileType", "scenePath", "title", "scenes"]);
+    this._assertNotDestroyed();
+    switch (fileType) {
+      case "pdf":
+        return this.manager.addApp({
+          kind: "DocsViewer",
+          options: { scenePath, title, scenes }
+        });
+      case "pptx":
+        if (scenes && scenes[0].ppt) {
+          warn("no-ppt-in-scenes");
+        }
+        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" }
+    });
+  }
+};
+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
+  }, ensure_window_manager(joinRoomParams)), {
+    useMultiViews: true,
+    disableNewPencil: false,
+    disableMagixEventDispatchLimit: true
+  }), callbacks);
+  const manager = await WindowManager2.mount(__spreadProps(__spreadValues({
+    cursor: true
+  }, managerConfig), {
+    room
+  }));
+  manager.mainView.setCameraBound({
+    minContentMode: contentModeScale(0.3),
+    maxContentMode: contentModeScale(3)
+  });
+  return new FastboardApp(sdk, room, manager, hotKeys);
+}
+
+// src/impl/FastboardPlayer.ts
+import { WhiteWebSdk as WhiteWebSdk2 } from "white-web-sdk";
+import { WindowManager as WindowManager3 } from "@netless/window-manager";
+var FastboardPlayerBase = class {
+  constructor(sdk, player, manager) {
+    this.sdk = sdk;
+    this.player = player;
+    this.manager = manager;
+    this._destroyed = false;
+  }
+  _assertNotDestroyed() {
+    if (this._destroyed) {
+      throw new Error("FastboardApp has been destroyed");
+    }
+  }
+  _addPlayerListener(name, listener) {
+    this._assertNotDestroyed();
+    this.player.callbacks.on(name, listener);
+    return () => this.player.callbacks.off(name, listener);
+  }
+  _addManagerListener(name, listener) {
+    this._assertNotDestroyed();
+    this.manager.emitter.on(name, listener);
+    return () => this.manager.emitter.off(name, listener);
+  }
+  _addMainViewListener(name, listener) {
+    this._assertNotDestroyed();
+    this.manager.mainView.callbacks.on(name, listener);
+    return () => this.manager.mainView.callbacks.off(name, listener);
+  }
+  destroy() {
+    this._destroyed = true;
+    this.manager.destroy();
+    return this.player.callbacks.off();
+  }
+};
+var FastboardPlayer = class extends FastboardPlayerBase {
+  constructor() {
+    super(...arguments);
+    this.currentTime = writable(this.player.progressTime, (set) => this._addPlayerListener("onProgressTimeChanged", set), this.player.seekToProgressTime.bind(this.player));
+    this.phase = readable(this.player.phase, (set) => this._addPlayerListener("onPhaseChanged", set));
+    this.canplay = readable(this.player.isPlayable, (set) => this._addPlayerListener("onIsPlayableChanged", set));
+    this.speed = writable(this.player.playbackSpeed, (set) => {
+      this._setSpeed = set;
+    }, (value) => {
+      this.player.playbackSpeed = value;
+      this._setSpeed(value);
+    });
+    this.ready = readable(false, (set) => {
+      this._setReady = set;
+    });
+    this.duration = readable(0, (set) => {
+      this._setDuration = set;
+    });
+    this.state = readable(null, (set) => {
+      const update = () => set(this.player.state);
+      this.player.callbacks.once("onLoadFirstFrame", () => {
+        this._setDuration(this.player.timeDuration);
+        this._setReady(true);
+        update();
+      });
+      return this._addPlayerListener("onPlayerStateChanged", update);
+    });
+  }
+  bindContainer(container) {
+    this._assertNotDestroyed();
+    this.manager.bindContainer(container);
+  }
+  bindCollector(container) {
+    this._assertNotDestroyed();
+    this.manager.bindCollectorContainer(container);
+  }
+  seek(timestamp) {
+    this._assertNotDestroyed();
+    return this.player.seekToProgressTime(timestamp);
+  }
+  play() {
+    this._assertNotDestroyed();
+    this.player.play();
+  }
+  pause() {
+    this._assertNotDestroyed();
+    this.player.pause();
+  }
+  stop() {
+    this._assertNotDestroyed();
+    this.player.stop();
+  }
+  setSpeed(value) {
+    this._assertNotDestroyed();
+    this.speed.set(value);
+  }
+};
+async function replayFastboard(_a) {
+  var _b = _a, {
+    sdkConfig,
+    replayRoom: _c
+  } = _b, _d = _c, { callbacks } = _d, replayRoomParams = __objRest(_d, ["callbacks"]), {
+    managerConfig
+  } = _b;
+  const sdk = new WhiteWebSdk2(__spreadProps(__spreadValues({}, sdkConfig), {
+    useMobXState: true
+  }));
+  const player = await sdk.replayRoom(__spreadProps(__spreadValues({}, ensure_window_manager(replayRoomParams)), {
+    useMultiViews: true
+  }), callbacks);
+  const managerPromise = WindowManager3.mount(__spreadProps(__spreadValues({
+    cursor: true
+  }, managerConfig), {
+    room: player
+  }));
+  player.play();
+  const manager = await managerPromise;
+  player.pause();
+  return new FastboardPlayer(sdk, player, manager);
+}
+
+// src/behaviors/index.ts
+import { WindowManager as WindowManager4 } from "@netless/window-manager";
 import AppSlide from "@netless/app-slide";
-WindowManager.register({
-  kind: "Slide",
-  appOptions: {
-    debug: false
+var DefaultApps = {
+  Monaco: {
+    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-monaco/0.1.12/dist/main.iife.js"
   },
+  Countdown: {
+    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-countdown/0.0.2/dist/main.iife.js"
+  },
+  GeoGebra: {
+    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-geogebra/0.0.4/dist/main.iife.js",
+    appOptions: {
+      HTML5Codebase: "https://flat-storage-cn-hz.whiteboard.agora.io/GeoGebra/HTML5/5.0/web3d"
+    }
+  },
+  EmbeddedPage: {
+    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-embedded-page/0.1.1/dist/main.iife.js"
+  },
+  Player: {
+    name: "NetlessAppMediaPlayer",
+    src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-media-player/0.1.1/dist/main.iife.js"
+  }
+};
+WindowManager4.register({
+  kind: "Slide",
+  appOptions: { debug: false },
   src: AppSlide
 });
+for (const kind in DefaultApps) {
+  if (Object.prototype.hasOwnProperty.call(DefaultApps, kind)) {
+    const options = DefaultApps[kind];
+    WindowManager4.register(__spreadValues({ kind }, options));
+  }
+}
 export {
-  DefaultApps,
+  FastboardApp,
+  FastboardPlayer,
+  convertedFileToScene,
   createFastboard,
-  registerApps,
-  replayFastboard
+  genUID,
+  getImageSize,
+  makeSlideParams,
+  readable,
+  replayFastboard,
+  warn,
+  writable
 };
 //# sourceMappingURL=index.mjs.map