@netless/fastboard 0.0.8 → 0.1.0

package/src/core.ts

@@ -0,0 +1,307 @@
+import type {
+  AnimationMode,
+  ApplianceNames,
+  Camera,
+  Color,
+  ConversionResponse,
+  MemberState,
+  Rectangle,
+  RoomState,
+  SceneDefinition,
+  ShapeType,
+} from "white-web-sdk";
+
+import { BuiltinApps } from "@netless/window-manager";
+import { FastboardAppBase } from "./base";
+import { convertedFileToScene, genUID, getImageSize, makeSlideParams } from "./utils";
+
+export interface InsertDocsStatic {
+  readonly fileType: "pdf" | "ppt";
+  readonly scenePath: string;
+  readonly scenes: SceneDefinition[];
+  readonly title?: string;
+}
+
+export interface InsertDocsDynamic {
+  readonly fileType: "pptx";
+  readonly scenePath: string;
+  readonly taskId: string;
+  readonly title?: string;
+  readonly url?: string;
+  /** @example [{ name: '1' }, { name: '2' }, { name: '3' }] */
+  readonly scenes?: SceneDefinition[];
+}
+
+export interface InsertMediaParams {
+  title: string;
+  src: string;
+}
+
+export type InsertDocsParams = InsertDocsStatic | InsertDocsDynamic;
+
+export type SetMemberStateFn = (partialMemberState: Partial<MemberState>) => void;
+
+export type RoomStateChanged = (diff: Partial<RoomState>) => void;
+
+export class FastboardApp extends FastboardAppBase {
+  /**
+   * Render this app to some DOM.
+   */
+  bindContainer(container: HTMLElement) {
+    this._assertNotDestroyed();
+    this.manager.bindContainer(container);
+  }
+
+  /**
+   * Move window-manager's collector to some place.
+   */
+  bindCollector(container: HTMLElement) {
+    this._assertNotDestroyed();
+    this.manager.bindCollectorContainer(container);
+  }
+
+  /**
+   * Is current room writable?
+   */
+  readonly writable = this.createValue(
+    this.room.isWritable,
+    set => this._addRoomListener("onEnableWriteNowChanged", () => set(this.room.isWritable)),
+    this.room.setWritable.bind(this.room)
+  );
+
+  /**
+   * Current window-manager's windows' state (is it maximized?).
+   */
+  readonly boxState = this.createValue(this.manager.boxState, set =>
+    this._addManagerListener("boxStateChange", set)
+  );
+
+  /**
+   * Current window-manager's focused app's id.
+   * @example "HelloWorld-1A2b3C4d"
+   */
+  readonly focusedApp = this.createValue(this.manager.focused, set =>
+    this._addManagerListener("focusedChange", set)
+  );
+
+  /**
+   * How many times can I call `app.redo()`?
+   */
+  readonly canRedoSteps = this.createValue(this.manager.mainView.canRedoSteps, set =>
+    this._addMainViewListener("onCanRedoStepsUpdate", set)
+  );
+
+  /**
+   * How many times can I call `app.undo()`?
+   */
+  readonly canUndoSteps = this.createValue(this.manager.mainView.canUndoSteps, set =>
+    this._addMainViewListener("onCanUndoStepsUpdate", set)
+  );
+
+  /**
+   * Current camera information of main view.
+   */
+  readonly camera = this.createValue(
+    this.manager.mainView.camera,
+    set => this._addMainViewListener("onCameraUpdated", set),
+    this.manager.moveCamera.bind(this.manager)
+  );
+
+  /**
+   * Current tool's info, like "is using pencil?", "what color?".
+   */
+  readonly memberState = this.createValue<MemberState, SetMemberStateFn>(
+    this.room.state.memberState,
+    set => this._addRoomListener<RoomStateChanged>("onRoomStateChanged", ({ memberState: m }) => m && set(m)),
+    this.manager.mainView.setMemberState.bind(this.manager.mainView)
+  );
+
+  /**
+   * Undo a step on main view.
+   */
+  undo() {
+    this._assertNotDestroyed();
+    this.manager.mainView.undo();
+  }
+
+  /**
+   * Redo a step on main view.
+   */
+  redo() {
+    this._assertNotDestroyed();
+    this.manager.mainView.redo();
+  }
+
+  /**
+   * Move current main view's camera position.
+   */
+  moveCamera(camera: Partial<Camera> & { animationMode?: AnimationMode | undefined }) {
+    this._assertNotDestroyed();
+    this.manager.moveCamera(camera);
+  }
+
+  /**
+   * Move current main view's camera to include a rectangle.
+   */
+  moveCameraToContain(rectangle: Rectangle & { animationMode?: AnimationMode }) {
+    this._assertNotDestroyed();
+    this.manager.moveCameraToContain(rectangle);
+  }
+
+  /**
+   * Delete all things on the main view.
+   */
+  cleanCurrentScene() {
+    this._assertNotDestroyed();
+    this.manager.mainView.cleanCurrentScene();
+  }
+
+  /**
+   * Set current tool, like "pencil".
+   */
+  setAppliance(appliance: ApplianceNames, shape?: ShapeType) {
+    this._assertNotDestroyed();
+    this.manager.mainView.setMemberState({ currentApplianceName: appliance, shapeType: shape });
+  }
+
+  setStrokeWidth(strokeWidth: number) {
+    this._assertNotDestroyed();
+    this.manager.mainView.setMemberState({ strokeWidth });
+  }
+
+  setStrokeColor(strokeColor: Color) {
+    this._assertNotDestroyed();
+    this.manager.mainView.setMemberState({ strokeColor });
+  }
+
+  /**
+   * Insert an image to the main view.
+   */
+  async insertImage(url: string) {
+    this._assertNotDestroyed();
+    await this.manager.switchMainViewToWriter();
+
+    const { divElement } = this.manager.mainView;
+    const containerSize = {
+      width: divElement?.scrollWidth || window.innerWidth,
+      height: divElement?.scrollHeight || window.innerHeight,
+    };
+
+    // 1. shrink the image a little to fit container **width**
+    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);
+
+    // 2. move camera to fit image **height**
+    width /= 0.8;
+    height /= 0.8;
+    const originX = centerX - width / 2;
+    const originY = centerY - height / 2;
+    this.manager.moveCameraToContain({ originX, originY, width, height });
+  }
+
+  /**
+   * Insert PDF/PPTX from conversion result.
+   * @param status https://developer.netless.link/server-en/home/server-conversion#get-query-task-conversion-progress
+   */
+  insertDocs(filename: string, status: ConversionResponse): Promise<string | undefined>;
+
+  /**
+   * Manual way.
+   * @example
+   * app.insertDocs({
+   *   fileType: 'pptx',
+   *   scenePath: `/pptx/${conversion.taskId}`,
+   *   taskId: conversion.taskId,
+   *   title: 'Title',
+   * })
+   */
+  insertDocs(params: InsertDocsParams): Promise<string | undefined>;
+
+  insertDocs(arg1: string | InsertDocsParams, arg2?: ConversionResponse) {
+    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: SceneDefinition[] = 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 });
+      }
+    }
+  }
+
+  private _insertDocsImpl({ fileType, scenePath, title, scenes, ...attributes }: InsertDocsParams) {
+    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,
+        });
+    }
+  }
+
+  /**
+   * Insert the Monaco Code Editor app.
+   */
+  insertCodeEditor() {
+    this._assertNotDestroyed();
+    return this.manager.addApp({
+      kind: "Monaco",
+      options: { title: "Code Editor" },
+    });
+  }
+
+  /**
+   * Insert the Countdown app.
+   */
+  insertCountdown() {
+    this._assertNotDestroyed();
+    return this.manager.addApp({
+      kind: "Countdown",
+      options: { title: "Countdown" },
+    });
+  }
+
+  /**
+   * Insert the Media Player app.
+   */
+  insertMedia({ title, src }: InsertMediaParams) {
+    this._assertNotDestroyed();
+    return this.manager.addApp({
+      kind: BuiltinApps.MediaPlayer,
+      options: { title },
+      attributes: { src },
+    });
+  }
+
+  /**
+   * Insert the GeoGebra app.
+   */
+  insertGeoGebra() {
+    this._assertNotDestroyed();
+    return this.manager.addApp({
+      kind: "GeoGebra",
+      options: { title: "GeoGebra" },
+    });
+  }
+}

package/src/emitter.ts

@@ -0,0 +1,21 @@
+export type FastboardListener<T> = (event: T) => void;
+
+export class FastboardEmitter<T> {
+  listeners = new Set<FastboardListener<T>>();
+
+  get length(): number {
+    return this.listeners.size;
+  }
+
+  dispatch(message: T) {
+    this.listeners.forEach(callback => callback(message));
+  }
+
+  addListener(listener: FastboardListener<T>) {
+    this.listeners.add(listener);
+  }
+
+  removeListener(listener: FastboardListener<T>) {
+    this.listeners.delete(listener);
+  }
+}

package/src/index.ts

@@ -1,34 +1,80 @@
+import type { HotKeys, JoinRoomParams, RoomCallbacks, WhiteWebSdkConfiguration } from "white-web-sdk";
+import type { MountParams } from "@netless/window-manager";
+
+import { DefaultHotKeys, WhiteWebSdk } from "white-web-sdk";
 import { WindowManager } from "@netless/window-manager";
 
-import "./behaviors/register-apps";
-import "./behaviors/style";
+import "./register-apps";
+import { FastboardApp } from "./core";
+import { ensureWindowManager } from "./utils";
 
-import { WhiteboardApp, type WhiteboardAppConfig } from "./WhiteboardApp";
+export type { FastboardReadable, FastboardWritable } from "./value";
 
-export { version } from "../package.json";
-export { PageControl, type PageControlProps } from "./components/PageControl";
-export { RedoUndo, type RedoUndoProps } from "./components/RedoUndo";
-export { Toolbar, type ToolbarProps } from "./components/Toolbar";
-export { ZoomControl, type ZoomControlProps } from "./components/ZoomControl";
-export {
-  PlayerControl,
-  type PlayerControlProps,
-} from "./components/PlayerControl";
-export * from "./WhiteboardApp";
-export * from "./hooks";
+export type { FastboardApp };
 
-export const register = WindowManager.register.bind(WindowManager);
+export interface FastboardOptions {
+  sdkConfig: Omit<WhiteWebSdkConfiguration, "useMobXState">;
+  joinRoom: Omit<JoinRoomParams, "useMultiViews" | "disableNewPencil" | "disableMagixEventDispatchLimit"> & {
+    callbacks?: Partial<RoomCallbacks>;
+  };
+  managerConfig?: Omit<MountParams, "room">;
+}
 
 /**
+ * Create a FastboardApp instance.
  * @example
- * let app = await createWhiteboardApp(config)
- * app.bindElement(el)
+ * let app = await createFastboard({
+ *   sdkConfig: {
+ *     appIdentifier: import.meta.env.VITE_APPID,
+ *   },
+ *   joinRoom: {
+ *     uid: unique_id,
+ *     uuid: import.meta.env.VITE_ROOM_UUID,
+ *     roomToken: import.meta.env.VITE_ROOM_TOKEN,
+ *   },
+ * })
  */
-export async function createWhiteboardApp(
-  config: WhiteboardAppConfig
-): Promise<WhiteboardApp> {
-  const app = new WhiteboardApp(config);
-  // @ts-expect-error // eslint-disable-line
-  await app._instance.readyPromise;
-  return app;
+export async function createFastboard({
+  sdkConfig,
+  joinRoom: { callbacks, ...joinRoomParams },
+  managerConfig,
+}: FastboardOptions) {
+  const sdk = new WhiteWebSdk({
+    ...sdkConfig,
+    useMobXState: true,
+  });
+
+  const hotKeys: Partial<HotKeys> = {
+    ...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(
+    {
+      floatBar: true,
+      hotKeys,
+      ...ensureWindowManager(joinRoomParams),
+      useMultiViews: true,
+      disableNewPencil: false,
+      disableMagixEventDispatchLimit: true,
+    },
+    callbacks
+  );
+
+  const manager = await WindowManager.mount({
+    cursor: true,
+    ...managerConfig,
+    room,
+  });
+
+  return new FastboardApp(sdk, room, manager, hotKeys);
 }

package/src/{behaviors/register-apps.ts → register-apps.ts}

@@ -14,26 +14,18 @@ WindowManager.register({
 
 WindowManager.register({
   kind: "Monaco",
-  src: async () => {
-    const app = await import("@netless/app-monaco");
-    return app.default ?? app;
-  },
+  src: "https://cdn.jsdelivr.net/npm/@netless/app-monaco@latest/dist/main.iife.js",
 });
+
 WindowManager.register({
   kind: "Countdown",
-  src: async () => {
-    const app = await import("@netless/app-countdown");
-    return app.default ?? app;
-  },
+  src: "https://cdn.jsdelivr.net/npm/@netless/app-countdown@latest/dist/main.iife.js",
 });
+
 WindowManager.register({
   kind: "GeoGebra",
-  src: async () => {
-    const app = await import("@netless/app-geogebra");
-    return app.default ?? app;
-  },
+  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",
+    HTML5Codebase: "https://flat-storage-cn-hz.whiteboard.agora.io/GeoGebra/HTML5/5.0/web3d",
   },
 });

package/src/utils.ts

@@ -0,0 +1,74 @@
+import type { ConvertedFile, JoinRoomParams, SceneDefinition, Size } from "white-web-sdk";
+import { WindowManager } from "@netless/window-manager";
+
+export function noop() {
+  /* noop */
+}
+
+export function getImageSize(url: string, fallback: Size) {
+  return new Promise<Size>(resolve => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => resolve(fallback);
+    img.src = url;
+  });
+}
+
+export function makeSlideParams(scenes: SceneDefinition[]) {
+  const emptyScenes: SceneDefinition[] = [];
+  let taskId = "";
+  let url = "";
+
+  // e.g. "ppt(x)://cdn/prefix/dynamicConvert/{taskId}/1.slide"
+  const pptSrcRE = /^pptx?(?<prefix>:\/\/\S+?dynamicConvert)\/(?<taskId>\w+)\//;
+
+  for (const { name, ppt } of scenes) {
+    // make sure scenesWithoutPPT.length === scenes.length
+    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 };
+}
+
+export function convertedFileToScene(f: ConvertedFile, i: number) {
+  return {
+    name: String(i + 1),
+    ppt: {
+      src: f.conversionFileUrl,
+      width: f.width,
+      height: f.height,
+      previewURL: f.preview,
+    },
+  };
+}
+
+export function ensureWindowManager(joinRoom: JoinRoomParams) {
+  if (!joinRoom.invisiblePlugins || !joinRoom.invisiblePlugins.includes(WindowManager)) {
+    joinRoom.invisiblePlugins = [...(joinRoom.invisiblePlugins || []), WindowManager];
+  }
+  return joinRoom;
+}
+
+// Copy from https://github.com/crimx/side-effect-manager/blob/main/src/gen-uid.ts
+const SOUP = "!#%()*+,-./:;=?@[]^_`{|}~" + "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+const SOUP_LEN = SOUP.length;
+const ID_LEN = 20;
+const reusedIdCarrier = /* @__PURE__ */ Array(ID_LEN);
+
+export function genUID() {
+  for (let i = 0; i < ID_LEN; i++) {
+    reusedIdCarrier[i] = SOUP.charAt(Math.random() * SOUP_LEN);
+  }
+  return reusedIdCarrier.join("");
+}

package/src/value.ts

@@ -0,0 +1,74 @@
+import { FastboardEmitter } from "./emitter";
+import { noop } from "./utils";
+
+export type FastboardDisposer = () => void;
+
+export interface FastboardReadable<T> {
+  readonly value: T;
+  subscribe(callback: (value: T) => void): FastboardDisposer;
+  reaction(callback: (value: T) => void): FastboardDisposer;
+}
+
+export interface FastboardWritable<T, SetFn = (value: T) => void> extends FastboardReadable<T> {
+  setValue: SetFn;
+}
+
+export interface FastboardInternalValue<T> extends FastboardWritable<T> {
+  dispose: FastboardDisposer;
+}
+
+/**
+ * Create a readonly, reactive value.
+ * @example
+ * createValue(manager.getMainViewSceneIndex(), (set) => {
+ *   manager.emitter.on("mainViewSceneIndexChanged", set)
+ *   return () => manager.emitter.off("mainViewSceneIndexChanged", set)
+ * })
+ */
+export function createValue<T>(
+  value: T,
+  effect: (set: (value: T) => void) => FastboardDisposer | void
+): FastboardReadable<T>;
+
+/**
+ * Create a writable, reactive value.
+ * @example
+ * createValue(manager.getMainViewSceneIndex(), (set) => {
+ *   manager.emitter.on("mainViewSceneIndexChanged", set)
+ *   return () => manager.emitter.off("mainViewSceneIndexChanged", set)
+ * }, (newValue) => {
+ *   manager.setMainViewSceneIndex(newValue)
+ * })
+ */
+export function createValue<T, SetFn = (value: T) => void>(
+  value: T,
+  effect: (set: (value: T) => void) => FastboardDisposer | void,
+  set: (value: T) => void
+): FastboardWritable<T, SetFn>;
+
+export function createValue<T>(
+  value: T,
+  effect: (set: (value: T) => void) => FastboardDisposer | void,
+  setValue: (value: T) => void = noop
+): FastboardInternalValue<T> {
+  const emitter = new FastboardEmitter<T>();
+
+  function set(newValue: T) {
+    emitter.dispatch((value = newValue));
+  }
+
+  const dispose = effect(set) || noop;
+
+  function subscribe(callback: (value: T) => void) {
+    emitter.addListener(callback);
+    callback(value);
+    return () => emitter.removeListener(callback);
+  }
+
+  function reaction(callback: (value: T) => void) {
+    emitter.addListener(callback);
+    return () => emitter.removeListener(callback);
+  }
+
+  return { value, subscribe, reaction, setValue, dispose };
+}