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

package/src/icons/Left.tsx

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

package/src/icons/Minus.tsx

@@ -1,15 +0,0 @@
-import type { IconProps } from "../typings";
-
-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" fill="none">
-      <path d="M5 12h14" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
-    </svg>
-  );
-}

package/src/icons/Plus.tsx

@@ -1,15 +0,0 @@
-import type { IconProps } from "../typings";
-
-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" fill="none">
-      <path d="M5 12h14m-7-7v14" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
-    </svg>
-  );
-}

package/src/icons/Redo.tsx

@@ -1,19 +0,0 @@
-import type { IconProps } from "../typings";
-
-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" fill="none">
-      <path
-        d="M19 9.625H9v-1.25h10v1.25ZM5.625 13v6h-1.25v-6h1.25ZM9 9.625A3.375 3.375 0 0 0 5.625 13h-1.25A4.625 4.625 0 0 1 9 8.375v1.25Z"
-        fill={stroke}
-      />
-      <path d="m15 5 4 4-4 4" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
-    </svg>
-  );
-}

package/src/icons/Reset.tsx

@@ -1,17 +0,0 @@
-import type { IconProps } from "../typings";
-
-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" fill="none">
-      <circle cx="12" cy="12" fill={stroke} r="2" />
-      <path d="M12 3v4m0 10v4m9-9h-4M7 12H3" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
-      <circle cx="12" cy="12" r="7" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
-    </svg>
-  );
-}

package/src/icons/Right.tsx

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

package/src/icons/Undo.tsx

@@ -1,19 +0,0 @@
-import type { IconProps } from "../typings";
-
-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" fill="none">
-      <path
-        d="M5 9.625h10v-1.25H5v1.25ZM18.375 13v6h1.25v-6h-1.25ZM15 9.625A3.375 3.375 0 0 1 18.375 13h1.25A4.625 4.625 0 0 0 15 8.375v1.25Z"
-        fill={stroke}
-      />
-      <path d="M9 5 5 9l4 4" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
-    </svg>
-  );
-}

package/src/icons/WhiteboardAdd.tsx

@@ -1,26 +0,0 @@
-import type { IconProps } from "../typings";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function WhiteboardAdd({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24" fill="none">
-      <path d="M4 20h16M4 6h16" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
-      <rect
-        height="10"
-        rx="1"
-        stroke={stroke}
-        strokeLinejoin="round"
-        strokeWidth="1.25"
-        width="14"
-        x="5"
-        y="8"
-      />
-      <path d="M12 4v2m-3 7h6m-3-3v6" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
-    </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/index.ts

@@ -1,12 +0,0 @@
-import "./behaviors/style";
-
-export * from "./typings";
-export * from "./components/hooks";
-export * from "./components/RedoUndo";
-export * from "./components/ZoomControl";
-export * from "./components/PageControl";
-export * from "./components/Toolbar";
-export * from "./components/PlayerControl";
-export * from "./components/Fastboard";
-export * from "./components/ReplayFastboard";
-export * from "./vanilla";

package/src/internal/helpers.ts

@@ -1,31 +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 const defaultHotKeys = {
-  changeToSelector: "s",
-  changeToLaserPointer: "z",
-  changeToPencil: "p",
-  changeToRectangle: "r",
-  changeToEllipse: "c",
-  changeToEraser: "e",
-  changeToText: "t",
-  changeToStraight: "l",
-  changeToArrow: "a",
-  changeToHand: "h",
-};

package/src/internal/hooks.ts

@@ -1,23 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-
-export function useLastValue<T>(value: T) {
-  const ref = useRef<T>(value);
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
-
-export function useAsyncValue<T>(fn: () => Promise<T>) {
-  const [value, setValue] = useState<T | null>(null);
-  useEffect(() => {
-    fn().then(setValue);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return value;
-}
-
-export function useForceUpdate() {
-  const [, forceUpdate] = useState({});
-  return useCallback(() => forceUpdate({}), []);
-}

package/src/internal/index.ts

@@ -1,2 +0,0 @@
-export * from "./helpers";
-export * from "./hooks";

package/src/theme.ts

@@ -1,36 +0,0 @@
-import type { IconProps } from "./typings";
-
-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/typings.ts

@@ -1,15 +0,0 @@
-export type Theme = "light" | "dark";
-export type Language = "en" | "zh-CN";
-
-export interface IconProps {
-  theme?: Theme;
-  active?: boolean;
-}
-
-export interface CommonProps {
-  theme?: Theme;
-}
-
-export type GenericIcon<K extends string, E extends string = "disable"> = Partial<
-  Record<`${K}Icon${Capitalize<E | "">}`, string>
->;

package/src/vanilla/index.tsx

@@ -1,28 +0,0 @@
-import type { FastboardApp } from "@netless/fastboard-core";
-import type { DivProps, FastboardProps } from "../components/Fastboard";
-
-import React from "react";
-import ReactDOM from "react-dom";
-import { Fastboard } from "../components/Fastboard";
-
-export type MountProps = Omit<FastboardProps & DivProps, "ref">;
-
-/**
- * Mount fastboard app to some dom, returns the disposer, which will unmount the app.
- * @example
- * let app = await createFastboard({ ...config })
- * const { update, destroy } = mount(app, document.getElementById("whiteboard"))
- * update({ theme: 'dark' })
- * destroy()
- */
-export function mount(app: FastboardApp, dom: HTMLElement, props: MountProps) {
-  ReactDOM.render(<Fastboard app={app} {...props} />, dom);
-  return {
-    update(props: MountProps) {
-      ReactDOM.render(<Fastboard app={app} {...props} />, dom);
-    },
-    destroy() {
-      ReactDOM.unmountComponentAtNode(dom);
-    },
-  };
-}