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

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

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

@@ -1,135 +0,0 @@
-import type { ShapeType } from "white-web-sdk";
-import type { IconProps } from "../../../typings";
-
-import Tippy from "@tippyjs/react";
-import React, { useCallback, useContext } from "react";
-import { ApplianceNames } from "white-web-sdk";
-
-import { useTranslation } from "../../../i18n";
-import { RightOffset } from "../../../theme";
-import { ApplianceShapes, Shapes, ShapesMap } from "../const";
-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 { writable, theme, memberState, lastShape, setAppliance } = 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[lastShape];
-
-  const onClick = useCallback(() => {
-    if ((ApplianceShapes as readonly ApplianceNames[]).includes(lastShape as ApplianceNames)) {
-      setAppliance(lastShape as ApplianceNames);
-    } else if (Shapes.includes(lastShape as ShapeType)) {
-      setAppliance(ApplianceNames.shape, lastShape as ShapeType);
-    }
-  }, [lastShape, setAppliance]);
-
-  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} disabled={!writable} onClick={onClick}>
-          <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

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

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

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

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

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

package/src/components/Toolbar/hooks.ts

@@ -1,89 +0,0 @@
-import type { ApplianceNames, Color, MemberState, ShapeType } from "white-web-sdk";
-import type { AppsStatus } from "@netless/fastboard-core";
-
-import { useCallback, useState } from "react";
-
-import { noop } from "../../internal";
-import { useFastboardApp, useFastboardValue, useWritable } from "../hooks";
-import { ShapesMap } from "./const";
-
-export type UnifiedShape = keyof typeof ShapesMap;
-
-export interface ToolbarHook {
-  readonly writable: boolean;
-  readonly memberState: MemberState | undefined;
-  readonly lastShape: UnifiedShape;
-  readonly appsStatus: AppsStatus;
-  cleanCurrentScene(): void;
-  setAppliance(appliance: ApplianceNames, shape?: ShapeType): void;
-  setStrokeWidth(width: number): void;
-  setStrokeColor(color: Color): void;
-}
-
-export function useRoomState() {
-  return useFastboardValue(useFastboardApp().memberState);
-}
-
-export function useAppsStatus() {
-  return useFastboardValue(useFastboardApp().appsStatus);
-}
-
-export function useToolbar(): ToolbarHook {
-  const app = useFastboardApp();
-  const writable = useWritable();
-  const memberState = useRoomState();
-  const appsStatus = useAppsStatus();
-  const [lastShape, setLastShape] = useState<UnifiedShape>("rectangle" as ApplianceNames.rectangle);
-
-  const cleanCurrentScene = useCallback(() => {
-    app.cleanCurrentScene();
-  }, [app]);
-
-  const setAppliance = useCallback(
-    (appliance: ApplianceNames, shape?: ShapeType) => {
-      app.setAppliance(appliance, shape);
-      if (shape) {
-        setLastShape(shape);
-      } else if (appliance in ShapesMap) {
-        setLastShape(appliance as UnifiedShape);
-      }
-    },
-    [app]
-  );
-
-  const setStrokeWidth = useCallback(
-    (strokeWidth: number) => {
-      app.setStrokeWidth(strokeWidth);
-    },
-    [app]
-  );
-
-  const setStrokeColor = useCallback(
-    (strokeColor: Color) => {
-      app.setStrokeColor(strokeColor);
-    },
-    [app]
-  );
-
-  return {
-    writable,
-    memberState,
-    lastShape,
-    appsStatus,
-    cleanCurrentScene,
-    setAppliance,
-    setStrokeWidth,
-    setStrokeColor,
-  };
-}
-
-export const EmptyToolbarHook: ToolbarHook = {
-  writable: false,
-  memberState: undefined,
-  lastShape: "rectangle" as ApplianceNames.rectangle,
-  appsStatus: {},
-  cleanCurrentScene: noop,
-  setAppliance: noop,
-  setStrokeWidth: noop,
-  setStrokeColor: noop,
-};

package/src/components/Toolbar/icons/Apps.tsx

@@ -1,16 +0,0 @@
-import type { IconProps } from "../../../typings";
-
-import React from "react";
-import { getStroke } from "../../../theme";
-
-export const Apps = (props: IconProps) => {
-  const stroke = getStroke(props);
-  return (
-    <svg viewBox="0 0 24 24">
-      <g fill={stroke}>
-        <path d="M17.667 4.5h-3.334c-1.012 0-1.833.82-1.833 1.833V11.5h5.167c1.012 0 1.833-.82 1.833-1.833V6.333c0-1.012-.82-1.833-1.833-1.833Zm-3.334 1h3.334c.46 0 .833.373.833.833v3.334l-.006.104a.833.833 0 0 1-.827.729H13.5V6.333c0-.46.373-.833.833-.833Z" />
-        <path d="M6.333 19.5A1.833 1.833 0 0 1 4.5 17.667v-3.334c0-.525.221-1 .576-1.334a1.822 1.822 0 0 1-.576-1.332V8.333c0-1.012.82-1.833 1.833-1.833H10A1.5 1.5 0 0 1 11.5 8v4.5h4.167c.962 0 1.75.74 1.827 1.683l.006.15v3.334c0 1.012-.82 1.833-1.833 1.833Zm4.167-6H6.333a.833.833 0 0 0-.827.729l-.006.104v3.334c0 .46.373.833.833.833H10.5v-5Zm5.167 0H11.5v5h4.167c.46 0 .833-.373.833-.833v-3.334a.833.833 0 0 0-.833-.833ZM10 7.5H6.333a.833.833 0 0 0-.833.833v3.334c0 .46.373.833.833.833H10.5V8a.5.5 0 0 0-.41-.492L10 7.5Z" />
-      </g>
-    </svg>
-  );
-};

package/src/components/Toolbar/icons/Arrow.tsx

@@ -1,13 +0,0 @@
-import type { IconProps } from "../../../typings";
-
-import React from "react";
-import { getStroke } from "../../../theme";
-
-export const Arrow = (props: IconProps) => {
-  const stroke = getStroke(props);
-  return (
-    <svg viewBox="0 0 24 24">
-      <path fill={stroke} d="M19 5v6l-2.647-2.646L5.99 18.718l-.708-.708L15.645 7.646 13 5h6Z" />
-    </svg>
-  );
-};

package/src/components/Toolbar/icons/Circle.tsx

@@ -1,13 +0,0 @@
-import type { IconProps } from "../../../typings";
-
-import React from "react";
-import { getStroke } from "../../../theme";
-
-export const Circle = (props: IconProps) => {
-  const stroke = getStroke(props);
-  return (
-    <svg viewBox="0 0 24 24">
-      <rect width="15" height="15" x="4.5" y="4.5" fill="none" stroke={stroke} rx="7.5" />
-    </svg>
-  );
-};

package/src/components/Toolbar/icons/Clean.tsx

@@ -1,16 +0,0 @@
-import type { IconProps } from "../../../typings";
-
-import React from "react";
-import { getStroke } from "../../../theme";
-
-export const Clean = (props: IconProps) => {
-  const stroke = getStroke(props);
-  return (
-    <svg viewBox="0 0 24 24">
-      <path
-        fill={stroke}
-        d="M9.754 11.99c0 1.856-.711 3.62-1.96 4.951l-.151.155h1.403l.855-.853h.707l.853.853h2.635l.094-.064a6.237 6.237 0 0 0 2.559-4.781l.005-.26h1a7.237 7.237 0 0 1-2.994 5.862l-.229.16-.277.083h-3l-.353-.146-.647-.647-.646.647-.354.146h-3l-.286-.91.214-.148a6.237 6.237 0 0 0 2.567-4.787l.005-.26h1Zm4.772-6.502v2l.35.039a2.98 2.98 0 0 1 2.644 2.78l.006.181h-8a2.98 2.98 0 0 1 2.65-2.961l.35-.039v-2h2Z"
-      />
-    </svg>
-  );
-};

package/src/components/Toolbar/icons/Clicker.tsx

@@ -1,19 +0,0 @@
-import type { IconProps } from "../../../typings";
-
-import React from "react";
-import { getStroke } from "../../../theme";
-
-export const Clicker = (props: IconProps) => {
-  const stroke = getStroke(props);
-  return (
-    <svg viewBox="0 0 24 24">
-      <g fill="none">
-        <path d="M0 0h24v24H0z" />
-        <path
-          fill={stroke}
-          d="m7 5.072 10.33 7.892-4.879.549 3.232 5.598-.866.5-3.233-5.597-2.914 3.95L7 5.072Z"
-        />
-      </g>
-    </svg>
-  );
-};

package/src/components/Toolbar/icons/Collapse.tsx

@@ -1,13 +0,0 @@
-import type { IconProps } from "../../../typings";
-
-import React from "react";
-import { getStroke } from "../../../theme";
-
-export const Collapse = (props: IconProps) => {
-  const stroke = getStroke(props);
-  return (
-    <svg viewBox="0 0 24 24">
-      <path fill="none" stroke={stroke} d="m8 10-2 2 2 2m10-8H6m12 12H6m12-4h-8m8-4h-8" />
-    </svg>
-  );
-};

package/src/components/Toolbar/icons/Diamond.tsx

@@ -1,13 +0,0 @@
-import type { IconProps } from "../../../typings";
-
-import React from "react";
-import { getStroke } from "../../../theme";
-
-export const Diamond = (props: IconProps) => {
-  const stroke = getStroke(props);
-  return (
-    <svg viewBox="0 0 24 24">
-      <path fill="none" stroke={stroke} d="M4.222 12 12 4.222 19.778 12 12 19.778z" />
-    </svg>
-  );
-};

package/src/components/Toolbar/icons/Down.tsx

@@ -1,13 +0,0 @@
-import type { IconProps } from "../../../typings";
-
-import React from "react";
-import { getStroke } from "../../../theme";
-
-export const Down = (props: IconProps) => {
-  const stroke = getStroke(props);
-  return (
-    <svg viewBox="0 0 24 24">
-      <path fill="none" stroke={stroke} d="m16 13-2 2-2 2-2-2-2-2m8-6-2 2-2 2-2-2-2-2" />
-    </svg>
-  );
-};