@netless/fastboard 0.0.8 → 0.1.0

package/src/internal/Instance.tsx

@@ -1,251 +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 { 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 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;
-}
-
-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, collector: HTMLElement | null) {
-    if (this.target && target) {
-      ReactDOM.unmountComponentAtNode(this.target);
-    }
-    this.target = target;
-    this.collector = collector;
-    this.forceUpdate();
-  }
-
-  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`);
-    }
-    if (this.collector) {
-      this.manager.bindContainer(node, this.collector);
-    } else {
-      this.manager.bindContainer(node);
-    }
-  }
-
-  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,
-          },
-          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" },
-    });
-  }
-
-  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,42 +0,0 @@
-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;
-    }
-  };
-}

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/style.scss

@@ -1,29 +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.scss";
-@import "./components/PageControl.scss";
-@import "./components/ZoomControl.scss";
-@import "./components/Toolbar/Toolbar.scss";
-@import "./components/PlayerControl/PlayerControl.scss";
-
-.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>>;

package/src/vue.ts

@@ -1,74 +0,0 @@
-import type { ComponentPublicInstance, Ref } from "vue-demi";
-import {
-  computed,
-  getCurrentScope,
-  onScopeDispose,
-  shallowRef,
-  unref,
-  watchEffect,
-} from "vue-demi";
-import { createWhiteboardApp } from "./index";
-
-import type { WhiteboardApp, WhiteboardAppConfig } from "./WhiteboardApp";
-
-export type FastBoardConfig = WhiteboardAppConfig;
-
-export type MaybeRef<T> = T | Ref<T>;
-export type VueInstance = ComponentPublicInstance;
-export type MaybeElementRef = MaybeRef<
-  HTMLElement | SVGElement | VueInstance | undefined | null
->;
-
-/**
- * Get the dom element of a ref of element or Vue component instance
- */
-export function unrefElement(elRef: MaybeElementRef) {
-  const plain = unref(elRef);
-  return (plain as VueInstance)?.$el ?? plain;
-}
-
-function tryOnScopeDispose(fn: () => void) {
-  if (getCurrentScope()) {
-    onScopeDispose(fn);
-    return true;
-  }
-  return false;
-}
-
-/**
- * @example
- * ```vue
- * <script setup>
- * const el = ref(null)
- * const app = useFastboard(el, { sdkConfig, joinRoom })
- * if (app.value) {
- *   app.value.insertDocs({...})
- * }
- * </script>
- * <template>
- *   <div style="width: 100%; height: 100%" ref="el"></div>
- * </template>
- * ```
- */
-export function useFastboard(el: MaybeElementRef, config: FastBoardConfig) {
-  const app = shallowRef<WhiteboardApp | null>(null);
-  const target = computed(() => unrefElement(el));
-
-  createWhiteboardApp(config).then(app_ => {
-    app.value = app_;
-  });
-
-  watchEffect(() => {
-    if (target.value && app.value) {
-      app.value.bindElement(target.value);
-    }
-  });
-
-  tryOnScopeDispose(() => {
-    if (app.value) {
-      app.value.dispose();
-    }
-  });
-
-  return app;
-}