@netless/fastboard-react 0.1.0

package/src/components/Toolbar/components/AppsButton.tsx

@@ -0,0 +1,101 @@
+import Tippy from "@tippyjs/react";
+import React, { useContext } from "react";
+
+import vscodePNG from "./assets/vscode.png";
+import geogebraPNG from "./assets/geogebra.png";
+import countdownPNG from "./assets/countdown.png";
+
+import { Icon } from "../../../icons";
+import { RightOffset } from "../../../theme";
+import { Icons } from "../icons";
+import { ToolbarContext } from "../Toolbar";
+import { Button } from "./Button";
+import { useFastboardApp } from "../../hooks";
+
+export interface AppsButtonProps {
+  content?: React.ReactNode;
+  onClick?: () => void;
+}
+
+export function AppsButton({ content, onClick }: AppsButtonProps) {
+  const { theme, icons, writable } = useContext(ToolbarContext);
+
+  const disabled = !writable;
+
+  const button = (
+    <Button content="Apps" onClick={onClick}>
+      <Icon
+        fallback={<Icons.Apps theme={theme} />}
+        src={disabled ? icons?.appsIconDisable : icons?.appsIcon}
+        alt="[apps]"
+      />
+    </Button>
+  );
+
+  return content === false ? (
+    button
+  ) : (
+    <span className="fastboard-toolbar-btn-interactive">
+      <Tippy
+        className="fastboard-tip"
+        content={renderAppsButtonContent(content)}
+        theme={theme}
+        placement="right-end"
+        trigger="click"
+        offset={RightOffset}
+        arrow={false}
+        interactive
+      >
+        {button}
+      </Tippy>
+    </span>
+  );
+}
+
+function renderAppsButtonContent(content?: React.ReactNode) {
+  return (
+    <div className="fastboard-toolbar-panel apps">
+      <div className="fastboard-toolbar-apps">{content || <DefaultApps />}</div>
+    </div>
+  );
+}
+
+function DefaultApps() {
+  const app = useFastboardApp();
+
+  return (
+    <>
+      <AppIcon
+        title="Code Editor"
+        src={vscodePNG}
+        alt="[code editor]"
+        onClick={app?.insertCodeEditor.bind(app)}
+      />
+      <AppIcon title="GeoGebra" src={geogebraPNG} alt="[geogebra]" onClick={app?.insertGeoGebra.bind(app)} />
+      <AppIcon
+        title="Countdown"
+        src={countdownPNG}
+        alt="[countdown]"
+        onClick={app?.insertCountdown.bind(app)}
+      />
+    </>
+  );
+}
+
+interface AppIconProps {
+  title: string;
+  src: string;
+  alt: string;
+  onClick?: () => void;
+}
+
+function AppIcon({ title, src, alt, onClick }: AppIconProps) {
+  return (
+    <span className="fastboard-toolbar-app-icon">
+      <Button placement="top" content={title} onClick={onClick}>
+        <img src={src} alt={alt} title={title} />
+      </Button>
+      <span className="fastboard-toolbar-app-icon-text">{title}</span>
+    </span>
+  );
+}

package/src/components/Toolbar/components/Button.tsx

@@ -0,0 +1,46 @@
+import type { Placement } from "tippy.js";
+import type { PropsWithChildren } from "react";
+
+import clsx from "clsx";
+import React, { forwardRef, useContext } from "react";
+import Tippy from "@tippyjs/react";
+
+import { RightOffset } from "../../../theme";
+import { ToolbarContext } from "../Toolbar";
+
+type ButtonProps = PropsWithChildren<{
+  content: React.ReactNode;
+  disabled?: boolean;
+  active?: boolean;
+  onClick?: () => void;
+  interactive?: boolean;
+  placement?: Placement;
+}>;
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { content, disabled, active, onClick, interactive, placement = "right", children } = props;
+  const { writable, theme } = useContext(ToolbarContext);
+
+  return (
+    <Tippy
+      className="fastboard-tip"
+      content={content}
+      interactive={interactive}
+      theme={theme}
+      disabled={disabled || !writable}
+      placement={placement}
+      offset={placement.includes("right") ? RightOffset : undefined}
+      delay={[1000, 400]}
+      duration={300}
+    >
+      <button
+        ref={ref}
+        className={clsx("fastboard-toolbar-btn", theme, { active })}
+        onClick={onClick}
+        disabled={disabled || !writable}
+      >
+        {children}
+      </button>
+    </Tippy>
+  );
+});

package/src/components/Toolbar/components/ColorBox.tsx

@@ -0,0 +1,55 @@
+import type { Color } from "white-web-sdk";
+
+import clsx from "clsx";
+import React, { useContext } from "react";
+
+import { isEqualArray } from "../../../internal";
+import { ToolbarContext } from "../Toolbar";
+
+const colors: Record<string, Color> = {
+  "#E02020": [224, 32, 32],
+  "#F7B500": [247, 181, 0],
+  "#6DD400": [109, 212, 0],
+  "#32C5FF": [50, 197, 255],
+  "#0091FF": [0, 145, 255],
+  "#6236FF": [98, 54, 255],
+  "#B620E0": [182, 32, 224],
+  "#6D7278": [109, 114, 120],
+};
+
+const colorKeys = Object.keys(colors);
+
+export function ColorBox() {
+  const { theme, memberState, setStrokeColor, writable } = useContext(ToolbarContext);
+
+  const strokeColor = memberState?.strokeColor;
+  const disabled = !writable;
+
+  return (
+    <div className={clsx("fastboard-toolbar-color-box", theme)}>
+      {colorKeys.map((key: string) => (
+        <div
+          key={key}
+          className={clsx("fastboard-toolbar-color-item", theme)}
+          onClick={() => setStrokeColor(colors[key])}
+        >
+          <div
+            className={clsx("fastboard-toolbar-color-border", theme, {
+              active: strokeColor && isEqualArray(strokeColor, colors[key]),
+            })}
+          >
+            <button
+              className={clsx("fastboard-toolbar-color-btn")}
+              style={{ background: key }}
+              disabled={disabled}
+              onClick={ev => {
+                ev.stopPropagation();
+                setStrokeColor(colors[key]);
+              }}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/Toolbar/components/CutLine.tsx

@@ -0,0 +1,8 @@
+import clsx from "clsx";
+import React, { useContext } from "react";
+import { ToolbarContext, name } from "../Toolbar";
+
+export function CutLine() {
+  const { theme } = useContext(ToolbarContext);
+  return <span className={clsx(`${name}-cut-line`, theme)} />;
+}

package/src/components/Toolbar/components/Mask.tsx

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from "react";
+import ReactDOM from "react-dom";
+
+interface MaskProps {
+  toolbar: HTMLDivElement | null;
+  children: React.ReactNode;
+}
+
+export const Mask = React.memo(({ toolbar, children }: MaskProps) => {
+  const [rootElement] = useState<HTMLDivElement | null>(() => {
+    const element = document.createElement("div");
+    element.style.position = "absolute";
+    return element;
+  });
+
+  useEffect(() => {
+    if (toolbar && rootElement) {
+      toolbar.appendChild(rootElement);
+    }
+  }, [rootElement, toolbar]);
+
+  useEffect(() => {
+    if (rootElement && toolbar) {
+      toolbar.appendChild(rootElement);
+
+      const toolbarRect = toolbar.getBoundingClientRect();
+      const halfHeight = toolbarRect.height / 2 - 31;
+      rootElement.style.top = halfHeight + "px";
+      rootElement.style.left = "41px";
+      rootElement.style.width = "17px";
+      rootElement.style.height = "62px";
+
+      return () => {
+        toolbar.removeChild(rootElement);
+      };
+    }
+  }, [rootElement, toolbar]);
+
+  if (rootElement) {
+    return ReactDOM.createPortal(children, rootElement);
+  } else {
+    return null;
+  }
+});

package/src/components/Toolbar/components/PencilButton.tsx

@@ -0,0 +1,66 @@
+import Tippy from "@tippyjs/react";
+import React, { useCallback, useContext } from "react";
+import { ApplianceNames } from "white-web-sdk";
+
+import { useTranslation } from "../../../i18n";
+import { Icon } from "../../../icons";
+import { defaultHotKeys } from "../../../internal";
+import { RightOffset } from "../../../theme";
+import { useFastboardApp } from "../../hooks";
+import { Icons } from "../icons";
+import { ToolbarContext } from "../Toolbar";
+import { renderToolTip } from "./ApplianceButtons";
+import { Button } from "./Button";
+import { ColorBox } from "./ColorBox";
+import { CutLine } from "./CutLine";
+import { Slider } from "./Slider";
+
+export function PencilButton() {
+  const app = useFastboardApp();
+  const { t } = useTranslation();
+
+  const { theme, icons, writable, setAppliance, memberState } = useContext(ToolbarContext);
+
+  const changeAppliance = useCallback(() => {
+    setAppliance(ApplianceNames.pencil);
+  }, [setAppliance]);
+
+  const appliance = memberState?.currentApplianceName;
+  const active = appliance === ApplianceNames.pencil;
+  const disabled = !writable;
+  const shortcut = (app?.hotKeys || defaultHotKeys).changeToPencil;
+
+  return (
+    <span className="fastboard-toolbar-btn-interactive">
+      <Tippy
+        className="fastboard-tip"
+        content={renderPencilButtonContent()}
+        theme={theme}
+        placement="right-start"
+        trigger="click"
+        offset={RightOffset}
+        arrow={false}
+        interactive
+      >
+        <Button content={renderToolTip(t("pencil"), shortcut)} active={active} onClick={changeAppliance}>
+          <Icon
+            fallback={<Icons.Pencil theme={theme} active={active} />}
+            src={disabled ? icons?.pencilIconDisable : icons?.pencilIcon}
+            alt="[pencil]"
+          />
+          <span className="fastboard-toolbar-triangle" />
+        </Button>
+      </Tippy>
+    </span>
+  );
+}
+
+function renderPencilButtonContent() {
+  return (
+    <div className="fastboard-toolbar-panel pencil">
+      <Slider />
+      <CutLine />
+      <ColorBox />
+    </div>
+  );
+}

package/src/components/Toolbar/components/ShapesButton.tsx

@@ -0,0 +1,128 @@
+import type { ShapeType } from "white-web-sdk";
+import type { IconProps } from "../../../typings";
+
+import Tippy from "@tippyjs/react";
+import React, { useContext } from "react";
+import { ApplianceNames } from "white-web-sdk";
+
+import { useTranslation } from "../../../i18n";
+import { RightOffset } from "../../../theme";
+import { ApplianceShapes, Shapes, ShapesMap } from "../const";
+import { Icons } from "../icons";
+import { ToolbarContext } from "../Toolbar";
+import { Button } from "./Button";
+import { ColorBox } from "./ColorBox";
+import { CutLine } from "./CutLine";
+import { Slider } from "./Slider";
+
+const ShapeTypes = new Set([...ApplianceShapes, ...Shapes]);
+
+export function ShapesButton() {
+  const { t } = useTranslation();
+  const { theme, memberState } = useContext(ToolbarContext);
+
+  const appliance = memberState?.currentApplianceName;
+  const shape = memberState?.shapeType;
+
+  const key = (appliance === ApplianceNames.shape ? shape : appliance) as keyof typeof ShapesMap;
+
+  const active = ShapeTypes.has(key);
+
+  const CurrentIcon = ShapesMap[key] || Icons.Rectangle;
+
+  return (
+    <span className="fastboard-toolbar-btn-interactive">
+      <Tippy
+        className="fastboard-tip"
+        content={renderShapesButtonContent()}
+        theme={theme}
+        placement="right-start"
+        trigger="click"
+        offset={RightOffset}
+        arrow={false}
+        interactive
+      >
+        <Button content={t("shape")} active={active}>
+          <CurrentIcon theme={theme} active={active} />
+          <span className="fastboard-toolbar-triangle" />
+        </Button>
+      </Tippy>
+    </span>
+  );
+}
+
+function renderShapesButtonContent() {
+  return (
+    <div className="fastboard-toolbar-panel shapes">
+      <ShapesBox />
+      <CutLine />
+      <Slider />
+      <CutLine />
+      <ColorBox />
+    </div>
+  );
+}
+
+export function ShapesBox() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="fastboard-toolbar-shapes">
+      {ApplianceShapes.map(Appliance => (
+        <ApplianceShapeButton
+          key={Appliance}
+          content={t(Appliance)}
+          Appliance={Appliance}
+          Icon={ShapesMap[Appliance]}
+        />
+      ))}
+      {Shapes.map(shape => (
+        <ShapeShapeButton key={shape} content={t(shape)} shape={shape} Icon={ShapesMap[shape]} />
+      ))}
+    </div>
+  );
+}
+
+interface ApplianceShapeButtonProps {
+  content?: string;
+  Appliance: ApplianceNames;
+  Icon: React.ComponentType<IconProps>;
+}
+
+function ApplianceShapeButton({ content, Appliance, Icon }: ApplianceShapeButtonProps) {
+  const { theme, writable, setAppliance, memberState } = useContext(ToolbarContext);
+
+  const current = memberState?.currentApplianceName;
+  const disabled = !writable;
+
+  return (
+    <Button content={content} disabled={disabled} placement="top" onClick={() => setAppliance(Appliance)}>
+      <Icon theme={theme} active={current === Appliance} />
+    </Button>
+  );
+}
+
+interface ShapeShapeButtonProps {
+  content?: string;
+  shape: ShapeType;
+  Icon: React.ComponentType<IconProps>;
+}
+
+function ShapeShapeButton({ content, shape, Icon }: ShapeShapeButtonProps) {
+  const { theme, writable, setAppliance, memberState } = useContext(ToolbarContext);
+
+  const appliance = memberState?.currentApplianceName;
+  const current = appliance === ApplianceNames.shape && memberState?.shapeType;
+  const disabled = !writable;
+
+  return (
+    <Button
+      content={content}
+      disabled={disabled}
+      placement="top"
+      onClick={() => setAppliance(ApplianceNames.shape, shape)}
+    >
+      <Icon theme={theme} active={current === shape} />
+    </Button>
+  );
+}

package/src/components/Toolbar/components/Slider.tsx

@@ -0,0 +1,26 @@
+import clsx from "clsx";
+import RcSlider from "rc-slider";
+import React, { useContext } from "react";
+
+import { themes } from "../../../theme";
+import { ToolbarContext } from "../Toolbar";
+
+export function Slider() {
+  const { theme, writable, memberState, setStrokeWidth } = useContext(ToolbarContext);
+  const { activeColor } = themes[theme];
+
+  const strokeWidth = memberState?.strokeWidth || 0;
+
+  return (
+    <RcSlider
+      disabled={!writable}
+      className={clsx("fastboard-toolbar-slider", theme)}
+      trackStyle={{ background: activeColor }}
+      handleStyle={{ border: `1px solid ${activeColor}` }}
+      value={strokeWidth}
+      onChange={setStrokeWidth}
+      min={1}
+      max={32}
+    />
+  );
+}

package/src/components/Toolbar/components/TextButton.tsx

@@ -0,0 +1,62 @@
+import Tippy from "@tippyjs/react";
+import React, { useCallback, useContext } from "react";
+import { ApplianceNames } from "white-web-sdk";
+
+import { useTranslation } from "../../../i18n";
+import { Icon } from "../../../icons";
+import { defaultHotKeys } from "../../../internal";
+import { RightOffset } from "../../../theme";
+import { useFastboardApp } from "../../hooks";
+import { Icons } from "../icons";
+import { ToolbarContext } from "../Toolbar";
+import { renderToolTip } from "./ApplianceButtons";
+import { Button } from "./Button";
+import { ColorBox } from "./ColorBox";
+
+export function TextButton() {
+  const app = useFastboardApp();
+  const { t } = useTranslation();
+
+  const { theme, icons, writable, setAppliance, memberState } = useContext(ToolbarContext);
+
+  const changeAppliance = useCallback(() => {
+    setAppliance(ApplianceNames.text);
+  }, [setAppliance]);
+
+  const appliance = memberState?.currentApplianceName;
+  const active = appliance === ApplianceNames.text;
+  const disabled = !writable;
+  const shortcut = (app?.hotKeys || defaultHotKeys).changeToText;
+
+  return (
+    <span className="fastboard-toolbar-btn-interactive">
+      <Tippy
+        className="fastboard-tip"
+        content={renderTextButtonContent()}
+        theme={theme}
+        placement="right-start"
+        trigger="click"
+        offset={RightOffset}
+        arrow={false}
+        interactive
+      >
+        <Button content={renderToolTip(t("text"), shortcut)} active={active} onClick={changeAppliance}>
+          <Icon
+            fallback={<Icons.Text theme={theme} active={active} />}
+            src={disabled ? icons?.textIconDisable : icons?.textIcon}
+            alt="[text]"
+          />
+          <span className="fastboard-toolbar-triangle" />
+        </Button>
+      </Tippy>
+    </span>
+  );
+}
+
+function renderTextButtonContent() {
+  return (
+    <div className="fastboard-toolbar-panel text">
+      <ColorBox />
+    </div>
+  );
+}

package/src/components/Toolbar/components/UpDownButtons.tsx

@@ -0,0 +1,49 @@
+import React, { useCallback, useContext } from "react";
+
+import { Icon } from "../../../icons";
+import { Icons } from "../icons";
+import { Button } from "./Button";
+import { CutLine } from "./CutLine";
+import { ToolbarContext } from "../Toolbar";
+import { ItemHeight } from "../const";
+
+export interface UpButtonProps {
+  disabled: boolean;
+  scrollTo: (height: number) => void;
+}
+
+export function UpButton({ disabled, scrollTo }: UpButtonProps) {
+  const { theme, icons } = useContext(ToolbarContext);
+  const scrollUp = useCallback(() => scrollTo(-ItemHeight), [scrollTo]);
+
+  return (
+    <>
+      <Button content="Up" disabled={disabled} onClick={scrollUp}>
+        <Icon
+          fallback={<Icons.Up theme={theme} />}
+          src={disabled ? icons?.upIconDisable : icons?.upIcon}
+          alt="[up]"
+        />
+      </Button>
+      <CutLine />
+    </>
+  );
+}
+
+export function DownButton({ disabled, scrollTo }: UpButtonProps) {
+  const { theme, icons } = useContext(ToolbarContext);
+  const scrollDown = useCallback(() => scrollTo(ItemHeight), [scrollTo]);
+
+  return (
+    <>
+      <CutLine />
+      <Button content="Down" disabled={disabled} onClick={scrollDown}>
+        <Icon
+          fallback={<Icons.Down theme={theme} />}
+          src={disabled ? icons?.downIconDisable : icons?.downIcon}
+          alt="[down]"
+        />
+      </Button>
+    </>
+  );
+}

package/src/components/Toolbar/const.ts

@@ -0,0 +1,32 @@
+import { ApplianceNames, ShapeType } from "white-web-sdk";
+import { Icons } from "./icons";
+
+export const ShapesMap = {
+  [ApplianceNames.rectangle]: Icons.Rectangle,
+  [ApplianceNames.ellipse]: Icons.Circle,
+  [ApplianceNames.straight]: Icons.Line,
+  [ApplianceNames.arrow]: Icons.Arrow,
+  [ShapeType.Pentagram]: Icons.Star,
+  [ShapeType.Rhombus]: Icons.Diamond,
+  [ShapeType.Triangle]: Icons.Triangle,
+  [ShapeType.SpeechBalloon]: Icons.SpeechBalloon,
+} as const;
+
+export const ApplianceShapes = [
+  ApplianceNames.rectangle,
+  ApplianceNames.ellipse,
+  ApplianceNames.straight,
+  ApplianceNames.arrow,
+] as const;
+
+export const Shapes = [
+  ShapeType.Pentagram,
+  ShapeType.Rhombus,
+  ShapeType.Triangle,
+  ShapeType.SpeechBalloon,
+] as const;
+
+export const ItemHeight = 32 + 4;
+export const ItemsCount = 8;
+export const MaxHeight = ItemHeight * ItemsCount - 4;
+export const MinHeight = ItemHeight * 2 - 4;