@netless/fastboard 0.0.8 → 0.1.0

package/src/components/Toolbar/Toolbar.tsx

@@ -1,82 +0,0 @@
-import type { CommonProps, GenericIcon, Theme } from "../../types";
-import type { i18n } from "i18next";
-
-import clsx from "clsx";
-import React, { createContext, useCallback, useState } from "react";
-
-import { Icon } from "../../icons";
-import { Icons } from "./icons";
-import { Button } from "./components/Button";
-import { CutLine } from "./components/CutLine";
-import { EmptyToolbarHook, useToolbar, type ToolbarHook } from "./hooks";
-import { Content } from "./Content";
-
-export type ToolbarProps = CommonProps & {
-  icons?: GenericIcon<
-    | "clicker"
-    | "selector"
-    | "pencil"
-    | "eraser"
-    | "clean"
-    | "expand"
-    | "collapse"
-    | "up"
-    | "down"
-    | "text"
-    | "apps"
-  >;
-};
-
-type ToolbarContextType = ToolbarHook & {
-  theme: Theme;
-  icons?: ToolbarProps["icons"];
-  i18n?: i18n | null;
-};
-
-export const ToolbarContext = createContext<ToolbarContextType>({
-  theme: "light",
-  ...EmptyToolbarHook,
-});
-
-export const name = "fastboard-toolbar";
-
-export const Toolbar = ({
-  theme = "light",
-  icons,
-  room,
-  i18n,
-}: ToolbarProps) => {
-  const [expanded, setExpanded] = useState(true);
-  const hook = useToolbar(room);
-  const toggle = useCallback(() => setExpanded(e => !e), []);
-
-  const disabled = !hook.writable;
-
-  return (
-    <ToolbarContext.Provider value={{ theme, icons, ...hook, i18n }}>
-      <div className={clsx(name, theme)}>
-        {expanded ? (
-          <Button content={i18n?.t("collapse")} onClick={toggle}>
-            <Icon
-              fallback={<Icons.Collapse theme={theme} />}
-              src={disabled ? icons?.collapseIconDisable : icons?.collapseIcon}
-            />
-          </Button>
-        ) : (
-          <Button content={i18n?.t("expand")} onClick={toggle}>
-            <Icon
-              fallback={<Icons.Expand theme={theme} />}
-              src={disabled ? icons?.expandIconDisable : icons?.expandIcon}
-            />
-          </Button>
-        )}
-        {expanded && (
-          <>
-            <CutLine />
-            <Content />
-          </>
-        )}
-      </div>
-    </ToolbarContext.Provider>
-  );
-};

package/src/components/Toolbar/components/ApplianceButtons.tsx

@@ -1,132 +0,0 @@
-import type { HotKey } from "white-web-sdk";
-
-import React, { useCallback, useContext } from "react";
-import { ApplianceNames } from "white-web-sdk";
-
-import { defaultHotKeys, useInstance } from "../../../internal";
-import { Icon } from "../../../icons";
-import { Icons } from "../icons";
-import { ToolbarContext } from "../Toolbar";
-import { Button } from "./Button";
-
-export function renderToolTip(text: string | undefined, hotkey?: HotKey) {
-  if (!(typeof hotkey === "string")) return text;
-  return (
-    <span className="fastboard-toolbar-tooltip">
-      <span>{text}</span>
-      <span className="fastboard-toolbar-hotkey">{hotkey.toUpperCase()}</span>
-    </span>
-  );
-}
-
-export function ClickerButton() {
-  const app = useInstance();
-
-  const { theme, icons, writable, setAppliance, memberState, i18n } =
-    useContext(ToolbarContext);
-
-  const changeAppliance = useCallback(
-    () => setAppliance(ApplianceNames.clicker),
-    [setAppliance]
-  );
-
-  const shortcut = app?.config.joinRoom.hotKeys?.changeToClick;
-  const appliance = memberState?.currentApplianceName;
-  const active = appliance === ApplianceNames.clicker;
-  const disabled = !writable;
-
-  return (
-    <Button
-      content={renderToolTip(i18n?.t("clicker"), shortcut)}
-      onClick={changeAppliance}
-      active={active}
-    >
-      <Icon
-        fallback={<Icons.Clicker theme={theme} active={active} />}
-        src={disabled ? icons?.clickerIconDisable : icons?.clickerIcon}
-        alt="[clicker]"
-      />
-    </Button>
-  );
-}
-
-export function SelectorButton() {
-  const app = useInstance();
-
-  const { theme, icons, writable, setAppliance, memberState, i18n } =
-    useContext(ToolbarContext);
-
-  const changeAppliance = useCallback(
-    () => setAppliance(ApplianceNames.selector),
-    [setAppliance]
-  );
-
-  const appliance = memberState?.currentApplianceName;
-  const active = appliance === ApplianceNames.selector;
-  const disabled = !writable;
-  const shortcut = (app?.config.joinRoom.hotKeys || defaultHotKeys)
-    .changeToSelector;
-
-  return (
-    <Button
-      content={renderToolTip(i18n?.t("selector"), shortcut)}
-      onClick={changeAppliance}
-      active={active}
-    >
-      <Icon
-        fallback={<Icons.Selector theme={theme} active={active} />}
-        src={disabled ? icons?.selectorIconDisable : icons?.selectorIcon}
-        alt="[selector]"
-      />
-    </Button>
-  );
-}
-
-export function EraserButton() {
-  const app = useInstance();
-
-  const { theme, icons, writable, setAppliance, memberState, i18n } =
-    useContext(ToolbarContext);
-
-  const changeAppliance = useCallback(
-    () => setAppliance(ApplianceNames.eraser),
-    [setAppliance]
-  );
-
-  const appliance = memberState?.currentApplianceName;
-  const active = appliance === ApplianceNames.eraser;
-  const disabled = !writable;
-  const shortcut = (app?.config.joinRoom.hotKeys || defaultHotKeys)
-    .changeToEraser;
-
-  return (
-    <Button
-      content={renderToolTip(i18n?.t("eraser"), shortcut)}
-      onClick={changeAppliance}
-      active={active}
-    >
-      <Icon
-        fallback={<Icons.Eraser theme={theme} active={active} />}
-        src={disabled ? icons?.eraserIconDisable : icons?.eraserIcon}
-        alt="[eraser]"
-      />
-    </Button>
-  );
-}
-
-export function CleanButton() {
-  const { theme, icons, writable, cleanCurrentScene, i18n } =
-    useContext(ToolbarContext);
-
-  const disabled = !writable;
-
-  return (
-    <Button content={i18n?.t("clean")} onClick={cleanCurrentScene}>
-      <Icon
-        fallback={<Icons.Clean theme={theme} />}
-        src={disabled ? icons?.cleanIconDisable : icons?.cleanIcon}
-        alt="[clean]"
-      />
-    </Button>
-  );
-}

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

@@ -1,106 +0,0 @@
-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 { useInstance } from "../../../internal";
-import { Icon } from "../../../icons";
-import { RightOffset } from "../../../theme";
-import { Icons } from "../icons";
-import { ToolbarContext } from "../Toolbar";
-import { Button } from "./Button";
-
-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 = useInstance();
-
-  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

@@ -1,54 +0,0 @@
-import type { Placement } from "tippy.js";
-
-import clsx from "clsx";
-import React, { forwardRef, useContext, type PropsWithChildren } 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}
-        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

@@ -1,56 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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/PencilButton.tsx

@@ -1,70 +0,0 @@
-import Tippy from "@tippyjs/react";
-import React, { useCallback } from "react";
-import { useContext } from "react";
-import { ApplianceNames } from "white-web-sdk";
-
-import { defaultHotKeys, useInstance } from "../../../internal";
-import { Icon } from "../../../icons";
-import { RightOffset } from "../../../theme";
-import { Icons } from "../icons";
-import { ToolbarContext } from "../Toolbar";
-import { Button } from "./Button";
-import { ColorBox } from "./ColorBox";
-import { CutLine } from "./CutLine";
-import { Slider } from "./Slider";
-import { renderToolTip } from "./ApplianceButtons";
-
-export function PencilButton() {
-  const app = useInstance();
-
-  const { theme, icons, writable, setAppliance, memberState, i18n } =
-    useContext(ToolbarContext);
-
-  const changeAppliance = useCallback(() => {
-    setAppliance(ApplianceNames.pencil);
-  }, [setAppliance]);
-
-  const appliance = memberState?.currentApplianceName;
-  const active = appliance === ApplianceNames.pencil;
-  const disabled = !writable;
-  const shortcut = (app?.config.joinRoom.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(i18n?.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

@@ -1,143 +0,0 @@
-import type { IconProps } from "../../../types";
-
-import Tippy from "@tippyjs/react";
-import React, { useContext } from "react";
-import type { ShapeType } from "white-web-sdk";
-import { ApplianceNames } from "white-web-sdk";
-
-import { RightOffset } from "../../../theme";
-import { ApplianceShapes, Shapes, ShapesMap } from "../const";
-import { Icons } from "../icons";
-import { ToolbarContext } from "../Toolbar";
-import { Button } from "./Button";
-import { CutLine } from "./CutLine";
-import { Slider } from "./Slider";
-import { ColorBox } from "./ColorBox";
-
-const ShapeTypes = new Set([...ApplianceShapes, ...Shapes]);
-
-export function ShapesButton() {
-  const { theme, memberState, i18n } = 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={i18n?.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 { i18n } = useContext(ToolbarContext);
-  return (
-    <div className="fastboard-toolbar-shapes">
-      {ApplianceShapes.map(Appliance => (
-        <ApplianceShapeButton
-          key={Appliance}
-          content={i18n?.t(Appliance)}
-          Appliance={Appliance}
-          Icon={ShapesMap[Appliance]}
-        />
-      ))}
-      {Shapes.map(shape => (
-        <ShapeShapeButton
-          key={shape}
-          content={i18n?.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

@@ -1,27 +0,0 @@
-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}
-    />
-  );
-}