@netless/fastboard 0.0.11 → 0.1.0

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 };
-}

package/src/react.tsx

@@ -1,52 +0,0 @@
-import type { WhiteboardApp } from "./index";
-
-import React, { forwardRef, useEffect, useRef } from "react";
-import { useLastValue } from "./internal/hooks";
-
-// https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd
-function useCombinedRefs<T>(...refs: React.Ref<T>[]) {
-  const targetRef = useRef<T | null>(null);
-
-  useEffect(() => {
-    for (const ref of refs) {
-      if (!ref) continue;
-
-      if (typeof ref === "function") {
-        ref(targetRef.current);
-      } else {
-        (ref as typeof targetRef).current = targetRef.current;
-      }
-    }
-  }, [refs]);
-
-  return targetRef;
-}
-
-/**
- * @example
- * let app = await createWhiteboardApp(config)
- * <Fastboard app={app} />
- * await app.dispose()
- */
-export const Fastboard = forwardRef<
-  HTMLDivElement,
-  { app?: WhiteboardApp | null } & React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
-  >
->(({ app, ...restProps }, outerRef) => {
-  const innerRef = useRef<HTMLDivElement>(null);
-  const ref = useCombinedRefs(outerRef, innerRef);
-  const previous = useLastValue(app);
-
-  useEffect(() => {
-    if (previous && previous !== app) {
-      previous.bindElement(null);
-    }
-    if (app) {
-      app.bindElement(ref.current);
-    }
-  }, [app, previous, ref]);
-
-  return <div className="fastboard" {...restProps} ref={ref} />;
-});

package/src/style.scss

@@ -1,35 +0,0 @@
-@import "@netless/window-manager/dist/style.css";
-@import "tippy.js/dist/tippy.css";
-@import "tippy.js/themes/light.css";
-@import "rc-slider/assets/index.css";
-@import "./components/Root.scss";
-@import "./components/RedoUndo/RedoUndo.scss";
-@import "./components/PageControl/PageControl.scss";
-@import "./components/ZoomControl/ZoomControl.scss";
-@import "./components/Toolbar/Toolbar.scss";
-@import "./components/PlayerControl/PlayerControl.scss";
-
-.fastboard {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.tippy-box.fastboard-tip {
-  color: #eee;
-  background-color: rgba($color: #000000, $alpha: 0.95);
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-}
-
-.tippy-box.fastboard-tip[data-placement^="right"] > .tippy-arrow::before {
-  top: 4px;
-  border-width: 4px;
-  border-right-color: #000;
-}
-
-.tippy-box.fastboard-tip[data-placement^="top"] > .tippy-arrow::before {
-  left: 4px;
-  border-width: 4px;
-  border-top-color: #000;
-}

package/src/svelte.ts

@@ -1,45 +0,0 @@
-import { readable, type Readable } from "svelte/store";
-import { createWhiteboardApp } from "./index";
-
-import type { WhiteboardApp, WhiteboardAppConfig } from "./WhiteboardApp";
-
-export type FastBoardConfig = WhiteboardAppConfig;
-
-/**
- * @example
- * ```svelte
- * <script>
- *   let ref = writable(null)
- *   let app = useFastboard(ref, { sdkConfig, joinRoom })
- *   if (app) {
- *     app.insertDocs({...})
- *   }
- * </script>
- * <div style="width: 100%; height: 100%" bind:this={$ref} />
- * ```
- */
-export function useFastboard(
-  ref: Readable<HTMLElement | null>,
-  config: FastBoardConfig
-): Readable<WhiteboardApp | null> {
-  return readable<WhiteboardApp | null>(null, set => {
-    let app_: WhiteboardApp | null = null;
-
-    createWhiteboardApp(config).then(app => {
-      set((app_ = app));
-    });
-
-    const dispose = ref.subscribe(div => {
-      if (div && app_) {
-        app_.bindElement(div);
-      }
-    });
-
-    return () => {
-      dispose();
-      if (app_) {
-        app_.dispose();
-      }
-    };
-  });
-}

package/src/theme/index.ts

@@ -1,36 +0,0 @@
-import type { IconProps } from "../types";
-
-export interface ThemeConfig {
-  color: string;
-  activeColor: string;
-  backgroundColor: string;
-  hoverBackgroundColor: string;
-}
-
-export const light: ThemeConfig = {
-  color: "#5D5D5D",
-  activeColor: "#3381FF",
-  backgroundColor: "#fff",
-  hoverBackgroundColor: "rgba(51, 129, 255, 0.1)",
-};
-
-export const dark: ThemeConfig = {
-  ...light,
-  color: "#eee",
-  backgroundColor: "#111",
-};
-
-export const themes = { light, dark };
-
-export const getStroke = (props: IconProps) => {
-  let config;
-  if (props.theme) {
-    config = themes[props.theme];
-  } else {
-    config = themes.light;
-  }
-  return props.active ? config.activeColor : config.color;
-};
-
-export const TopOffset = [0, 11] as [number, number];
-export const RightOffset = [0, 11] as [number, number];

package/src/types/index.ts

@@ -1,22 +0,0 @@
-import type { Room } from "white-web-sdk";
-import type { WindowManager } from "@netless/window-manager";
-import type { i18n } from "i18next";
-
-export type Theme = "light" | "dark";
-
-export interface IconProps {
-  theme?: Theme;
-  active?: boolean;
-}
-
-export interface CommonProps {
-  room?: Room | null;
-  manager?: WindowManager | null;
-  theme?: Theme;
-  i18n?: i18n | null;
-}
-
-export type GenericIcon<
-  K extends string,
-  E extends string = "disable"
-> = Partial<Record<`${K}Icon${Capitalize<E | "">}`, string>>;