@netless/fastboard 0.0.10 → 0.2.0

package/src/icons/ChevronLeft.tsx

@@ -1,21 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function ChevronLeft({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <path
-        fill="none"
-        stroke={stroke}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="m14 16-2-2-2-2 2-2 2-2"
-      />
-    </svg>
-  );
-}

package/src/icons/ChevronRight.tsx

@@ -1,21 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function ChevronRight({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <path
-        fill="none"
-        stroke={stroke}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="m10 16 2-2 2-2-2-2-2-2"
-      />
-    </svg>
-  );
-}

package/src/icons/FilePlus.tsx

@@ -1,18 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function FilePlus({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <path
-        fill={stroke}
-        d="M12 7.5a.5.5 0 0 1 .09.992L12 8.5H8a1.5 1.5 0 0 0-1.493 1.356L6.5 10v6a1.5 1.5 0 0 0 1.356 1.493L8 17.5h6a1.5 1.5 0 0 0 1.493-1.356L15.5 16v-4a.5.5 0 0 1 .992-.09l.008.09v4a2.5 2.5 0 0 1-2.336 2.495L14 18.5H8a2.5 2.5 0 0 1-2.495-2.336L5.5 16v-6a2.5 2.5 0 0 1 2.336-2.495L8 7.5h4Zm4-2a.5.5 0 0 1 .492.41L16.5 6v1.5H18a.5.5 0 0 1 .09.992L18 8.5h-1.5V10a.5.5 0 0 1-.992.09L15.5 10V8.5H14a.5.5 0 0 1-.09-.992L14 7.5h1.5V6a.5.5 0 0 1 .5-.5Z"
-      />
-    </svg>
-  );
-}

package/src/icons/Minus.tsx

@@ -1,21 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function Minus({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <path
-        fill="none"
-        stroke={stroke}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M7 12h10"
-      />
-    </svg>
-  );
-}

package/src/icons/Plus.tsx

@@ -1,21 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function Plus({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <path
-        fill="none"
-        stroke={stroke}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M12 7v10m-5-5h10"
-      />
-    </svg>
-  );
-}

package/src/icons/Redo.tsx

@@ -1,24 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function Redo({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <g
-        fill="none"
-        fillRule="evenodd"
-        stroke={stroke}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M14 14h4v-4" />
-        <path d="m18 14-.788-.9A7.005 7.005 0 0 0 6 14h0" />
-      </g>
-    </svg>
-  );
-}

package/src/icons/Reset.tsx

@@ -1,23 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function Reset({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <g fill="none" fillRule="evenodd" transform="translate(-176 -684)">
-        <path
-          stroke={stroke}
-          strokeLinejoin="round"
-          d="M188 688v4m0 8v4m8-8h-4m-8 0h-4"
-        />
-        <circle cx="188" cy="696" r="6" stroke={stroke} />
-        <circle cx="188" cy="696" r="1" fill={stroke} />
-      </g>
-    </svg>
-  );
-}

package/src/icons/Undo.tsx

@@ -1,24 +0,0 @@
-import type { IconProps } from "../types";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function Undo({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <g
-        fill="none"
-        fillRule="evenodd"
-        stroke={stroke}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M10 14H6v-4" />
-        <path d="m6 14 .788-.9A7.005 7.005 0 0 1 18 14h0" />
-      </g>
-    </svg>
-  );
-}

package/src/icons/index.tsx

@@ -1,11 +0,0 @@
-import React from "react";
-
-export interface IconPropsWithFallback {
-  fallback: React.ReactElement;
-  src?: string;
-  alt?: string;
-}
-
-export function Icon({ fallback, src, alt = "[icon]" }: IconPropsWithFallback) {
-  return src ? <img src={src} alt={alt} title={alt} /> : fallback;
-}

package/src/internal/Instance.tsx

@@ -1,275 +0,0 @@
-import type { Mutable } from "type-fest";
-import type { WindowManager } from "@netless/window-manager";
-import type { Room, SceneDefinition, WhiteWebSdk } from "white-web-sdk";
-import type { JoinRoom, ManagerConfig, SdkConfig } from "./mount-whiteboard";
-import type { i18n } from "i18next";
-
-import React, { createContext, useContext } from "react";
-import ReactDOM from "react-dom";
-import { BuiltinApps } from "@netless/window-manager";
-
-import { Root } from "../components/Root";
-import { mountWhiteboard } from "./mount-whiteboard";
-import { noop } from "./helpers";
-
-export interface AcceptParams {
-  readonly sdk: WhiteWebSdk;
-  readonly room: Room;
-  readonly manager: WindowManager;
-  readonly i18n: i18n;
-}
-
-export interface InsertMediaParams {
-  title: string;
-  src: string;
-}
-
-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;
-  readonly scenes?: SceneDefinition[];
-}
-
-export type InsertDocsParams = InsertDocsStatic | InsertDocsDynamic;
-
-export type Language = "zh-CN" | "en-US";
-
-export interface Layout {
-  Toolbar?: boolean;
-  PageControl?: boolean;
-  RedoUndo?: boolean;
-  ZoomControl?: boolean;
-}
-
-export interface WhiteboardAppConfig {
-  readonly sdkConfig: SdkConfig;
-  readonly joinRoom: JoinRoom;
-  readonly managerConfig?: Omit<ManagerConfig, "container">;
-  readonly layout?: Layout;
-  readonly toolbar?: {
-    apps?: {
-      enable?: boolean;
-      content?: React.ReactNode;
-      onClick?: () => void;
-    };
-  };
-  readonly language?: Language;
-}
-
-export interface Essentials {
-  readonly sdk: WhiteWebSdk;
-  readonly room: Room;
-  readonly manager: WindowManager;
-  readonly i18n: i18n;
-}
-
-export class Instance {
-  static readonly Context = createContext<Instance | null>(null);
-
-  config: Mutable<WhiteboardAppConfig>;
-
-  sdk: WhiteWebSdk | null = null;
-  room: Room | null = null;
-  manager: WindowManager | null = null;
-  i18n: i18n | null = null;
-
-  ready = false;
-  resolveReady!: () => void;
-  readyPromise!: Promise<void>;
-
-  refreshReadyPromise() {
-    this.readyPromise = new Promise<void>(resolve => {
-      this.resolveReady = () => {
-        this.resolveReady = noop;
-        this.ready = true;
-        resolve();
-      };
-    });
-  }
-
-  constructor(config: WhiteboardAppConfig) {
-    this.config = { ...config };
-    this.refreshReadyPromise();
-    this.initialize();
-  }
-
-  async initialize() {
-    const essentials = await mountWhiteboard(
-      this.config.sdkConfig,
-      this.config.joinRoom,
-      this.config.managerConfig || {},
-      this.config.language || "en-US"
-    );
-    this.accept(essentials);
-    this.resolveReady();
-  }
-
-  target: HTMLElement | null = null;
-  collector: HTMLElement | null = null;
-
-  bindElement(target: HTMLElement | null) {
-    if (this.target && this.target !== target) {
-      ReactDOM.unmountComponentAtNode(this.target);
-    }
-    this.target = target;
-    this.forceUpdate();
-  }
-
-  bindCollector(collector: HTMLElement | null) {
-    this.collector = collector;
-    if (this.manager && collector) {
-      this.manager.bindCollectorContainer(collector);
-    }
-  }
-
-  updateLayout(layout: Layout | undefined) {
-    this.config.layout = layout;
-    this.forceUpdate();
-  }
-
-  async forceUpdate() {
-    await this.readyPromise;
-    if (this.target) {
-      ReactDOM.render(<Root instance={this} />, this.target);
-    }
-  }
-
-  accept({ sdk, room, manager, i18n }: AcceptParams) {
-    this.sdk = sdk;
-    this.room = room;
-    this.manager = manager;
-    this.i18n = i18n;
-    this.forceUpdate();
-  }
-
-  async dispose() {
-    if (this.room) {
-      await this.unmount();
-    }
-    if (this.target) {
-      ReactDOM.unmountComponentAtNode(this.target);
-      this.sdk = this.room = this.manager = this.target = null;
-    }
-  }
-
-  async mount(node: HTMLElement) {
-    await this.readyPromise;
-    if (!this.manager) {
-      throw new Error(`[WhiteboardApp] mounted, but not found window manager`);
-    }
-    this.manager.bindContainer(node);
-    if (this.collector) {
-      this.manager.bindCollectorContainer(this.collector);
-    }
-  }
-
-  async unmount() {
-    if (this.manager) {
-      this.manager.destroy();
-      this.manager = null;
-    }
-    if (this.room) {
-      try {
-        await this.room.disconnect();
-      } catch {
-        // ignore any error on disconnecting
-      }
-      this.room = null;
-    }
-    this.refreshReadyPromise();
-  }
-
-  insertDocs(params: InsertDocsParams) {
-    if (!this.manager) {
-      throw new Error(`[WhiteboardApp] cannot insert doc before mounted`);
-    }
-    switch (params.fileType) {
-      case "pdf":
-      case "ppt":
-        return this.manager.addApp({
-          kind: "DocsViewer",
-          options: {
-            scenePath: params.scenePath,
-            title: params.title,
-            scenes: params.scenes,
-          },
-        });
-      case "pptx":
-        return this.manager.addApp({
-          kind: "Slide",
-          options: {
-            scenePath: params.scenePath,
-            title: params.title,
-            scenes: params.scenes,
-          },
-          attributes: {
-            taskId: params.taskId,
-            url: params.url,
-          },
-        });
-    }
-  }
-
-  insertCodeEditor() {
-    if (!this.manager) {
-      throw new Error(`[WhiteboardApp] cannot insert app before mounted`);
-    }
-    return this.manager.addApp({
-      kind: "Monaco",
-      options: { title: "Code Editor" },
-    });
-  }
-
-  insertGeoGebra() {
-    if (!this.manager) {
-      throw new Error(`[WhiteboardApp] cannot insert app before mounted`);
-    }
-    return this.manager.addApp({
-      kind: "GeoGebra",
-      options: { title: "GeoGebra" },
-    });
-  }
-
-  insertCountdown() {
-    if (!this.manager) {
-      throw new Error(`[WhiteboardApp] cannot insert app before mounted`);
-    }
-    return this.manager.addApp({
-      kind: "Countdown",
-      options: { title: "Countdown" },
-    });
-  }
-
-  insertMedia({ title, src }: InsertMediaParams) {
-    if (!this.manager) {
-      throw new Error(`[WhiteboardApp] cannot insert app before mounted`);
-    }
-    return this.manager.addApp({
-      kind: BuiltinApps.MediaPlayer,
-      options: { title },
-      attributes: { src },
-    });
-  }
-
-  async changeLanguage(language: Language) {
-    try {
-      await this.i18n?.changeLanguage(language);
-    } finally {
-      await this.forceUpdate();
-    }
-  }
-}
-
-export function useInstance() {
-  return useContext(Instance.Context);
-}

package/src/internal/helpers.ts

@@ -1,86 +0,0 @@
-import type { SceneDefinition } from "white-web-sdk";
-
-export function noop() {
-  return;
-}
-
-export function applyStyles(css: string) {
-  const el = document.createElement("style");
-  el.appendChild(document.createTextNode(css));
-  document.head.appendChild(el);
-  return el;
-}
-
-export function clamp(value: number, min: number, max: number) {
-  return value < min ? min : value > max ? max : value;
-}
-
-export function isEqualArray<T>(a: T[], b: T[]) {
-  return a.length === b.length && a.every((e, i) => e === b[i]);
-}
-
-export type TaskFn = () => Promise<void> | void;
-
-export class Lock {
-  running = false;
-  private nextFn: TaskFn | null = null;
-  schedule(fn: TaskFn) {
-    if (this.running) {
-      this.nextFn = fn;
-    } else {
-      this.running = true;
-      Promise.resolve(fn()).then(this.step);
-    }
-  }
-  private step = () => {
-    if (this.nextFn) {
-      const fn = this.nextFn;
-      this.nextFn = null;
-      Promise.resolve(fn()).then(this.step);
-    } else {
-      this.running = false;
-    }
-  };
-}
-
-// 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 = Array(ID_LEN);
-
-export const genUID = (): string => {
-  for (let i = 0; i < ID_LEN; i++) {
-    reusedIdCarrier[i] = SOUP.charAt(Math.random() * SOUP_LEN);
-  }
-  return reusedIdCarrier.join("");
-};
-
-export function makeSlideParams(scenes: SceneDefinition[]) {
-  const scenesWithoutPPT: 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
-    scenesWithoutPPT.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 { scenesWithoutPPT, taskId, url };
-}

package/src/internal/hooks.ts

@@ -1,9 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export function useLastValue<T>(value: T) {
-  const ref = useRef<T>(value);
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}

package/src/internal/index.ts

@@ -1,3 +0,0 @@
-export * from "./helpers";
-export * from "./mount-whiteboard";
-export * from "./Instance";

package/src/internal/mount-whiteboard.ts

@@ -1,90 +0,0 @@
-import type { MountParams } from "@netless/window-manager";
-import type {
-  JoinRoomParams,
-  RoomCallbacks,
-  WhiteWebSdkConfiguration,
-} from "white-web-sdk";
-import type { Essentials, Language } from "./Instance";
-
-import { WindowManager } from "@netless/window-manager";
-import { DefaultHotKeys, WhiteWebSdk } from "white-web-sdk";
-import { createI18n } from "../i18n";
-
-export type SdkConfig = Omit<
-  WhiteWebSdkConfiguration,
-  "useMobXState" | "disableNewPencil" | "disableMagixEventDispatchLimit"
->;
-export type JoinRoom = Omit<
-  JoinRoomParams,
-  "useMultiViews" | "disableMagixEventDispatchLimit"
-> & { callbacks?: Partial<RoomCallbacks> };
-export type ManagerConfig = Omit<MountParams, "room">;
-
-function ensureWindowManager(joinRoom: JoinRoom) {
-  if (
-    !joinRoom.invisiblePlugins ||
-    !joinRoom.invisiblePlugins.includes(WindowManager)
-  ) {
-    joinRoom.invisiblePlugins = [
-      ...(joinRoom.invisiblePlugins || []),
-      WindowManager,
-    ];
-  }
-}
-
-export const defaultHotKeys = {
-  changeToSelector: "s",
-  changeToLaserPointer: "z",
-  changeToPencil: "p",
-  changeToRectangle: "r",
-  changeToEllipse: "c",
-  changeToEraser: "e",
-  changeToText: "t",
-  changeToStraight: "l",
-  changeToArrow: "a",
-  changeToHand: "h",
-};
-
-export async function mountWhiteboard(
-  sdkConfig: SdkConfig,
-  joinRoom: JoinRoom,
-  managerConfig: ManagerConfig,
-  language: Language
-): Promise<Essentials> {
-  const sdk = new WhiteWebSdk({
-    ...sdkConfig,
-    useMobXState: true,
-  });
-
-  ensureWindowManager(joinRoom);
-  joinRoom = { ...joinRoom };
-  const callbacks = joinRoom.callbacks;
-  delete joinRoom.callbacks;
-  const joinRoomParams: JoinRoomParams = {
-    floatBar: true,
-    hotKeys: {
-      ...DefaultHotKeys,
-      ...defaultHotKeys,
-    },
-    ...joinRoom,
-    useMultiViews: true,
-    disableNewPencil: false,
-    disableMagixEventDispatchLimit: true,
-  };
-  const room = await sdk.joinRoom(joinRoomParams, callbacks);
-
-  const manager = await WindowManager.mount({
-    cursor: true,
-    debug: import.meta.env.DEV,
-    ...managerConfig,
-    room,
-  });
-
-  const i18n = await createI18n({ language });
-
-  if (import.meta.env.DEV) {
-    Object.assign(window, { sdk, room, manager });
-  }
-
-  return { sdk, room, manager, i18n };
-}