tldraw/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs

A tiny little drawing editor.

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import {
  DefaultColorStyle,
  elementShouldCaptureKeys,
  getColorValue,
  useEditor
} from "@tldraw/editor";
import { memo, useMemo, useRef } from "react";
import { useDefaultColorTheme } from "../../../shapes/shared/useDefaultColorTheme.mjs";
import { PORTRAIT_BREAKPOINT } from "../../constants.mjs";
import { useBreakpoint } from "../../context/breakpoints.mjs";
import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
import { TldrawUiButtonIcon } from "../primitives/Button/TldrawUiButtonIcon.mjs";
import {
  TldrawUiToolbar,
  TldrawUiToolbarToggleGroup,
  TldrawUiToolbarToggleItem
} from "../primitives/TldrawUiToolbar.mjs";
import { TldrawUiGrid, TldrawUiRow } from "../primitives/layout.mjs";
import { useStylePanelContext } from "./StylePanelContext.mjs";
import { StylePanelSubheading } from "./StylePanelSubheading.mjs";
function StylePanelButtonPickerInner(props) {
  const { enhancedA11yMode } = useStylePanelContext();
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    enhancedA11yMode && /* @__PURE__ */ jsx(StylePanelSubheading, { children: props.title }),
    /* @__PURE__ */ jsx(TldrawUiToolbar, { label: props.title, children: /* @__PURE__ */ jsx(StylePanelButtonPickerInline, { ...props }) })
  ] });
}
function StylePanelButtonPickerInlineInner(props) {
  const ctx = useStylePanelContext();
  const {
    uiType,
    items,
    title,
    style,
    value,
    onValueChange = ctx.onValueChange,
    onHistoryMark = ctx.onHistoryMark
  } = props;
  const theme = useDefaultColorTheme();
  const editor = useEditor();
  const msg = useTranslation();
  const breakpoint = useBreakpoint();
  const rPointing = useRef(false);
  const rPointingOriginalActiveElement = useRef(null);
  const {
    handleButtonClick,
    handleButtonPointerDown,
    handleButtonPointerEnter,
    handleButtonPointerUp
  } = useMemo(() => {
    const handlePointerUp = () => {
      rPointing.current = false;
      window.removeEventListener("pointerup", handlePointerUp);
      const origActiveEl = rPointingOriginalActiveElement.current;
      if (origActiveEl && elementShouldCaptureKeys(origActiveEl, false)) {
        origActiveEl.focus();
      } else if (breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM) {
        editor.getContainer().focus();
      }
      rPointingOriginalActiveElement.current = null;
    };
    const handleButtonClick2 = (e) => {
      const { id } = e.currentTarget.dataset;
      if (value.type === "shared" && value.value === id) return;
      onHistoryMark?.("point picker item");
      onValueChange(style, id);
    };
    const handleButtonPointerDown2 = (e) => {
      const { id } = e.currentTarget.dataset;
      onHistoryMark?.("point picker item");
      onValueChange(style, id);
      rPointing.current = true;
      rPointingOriginalActiveElement.current = document.activeElement;
      window.addEventListener("pointerup", handlePointerUp);
    };
    const handleButtonPointerEnter2 = (e) => {
      if (!rPointing.current) return;
      const { id } = e.currentTarget.dataset;
      onValueChange(style, id);
    };
    const handleButtonPointerUp2 = (e) => {
      const { id } = e.currentTarget.dataset;
      if (value.type === "shared" && value.value === id) return;
      onValueChange(style, id);
    };
    return {
      handleButtonClick: handleButtonClick2,
      handleButtonPointerDown: handleButtonPointerDown2,
      handleButtonPointerEnter: handleButtonPointerEnter2,
      handleButtonPointerUp: handleButtonPointerUp2
    };
  }, [editor, breakpoint, value, onHistoryMark, onValueChange, style]);
  const Layout = items.length > 4 ? TldrawUiGrid : TldrawUiRow;
  return /* @__PURE__ */ jsx(
    TldrawUiToolbarToggleGroup,
    {
      "data-testid": `style.${uiType}`,
      type: "single",
      value: value.type === "shared" ? value.value : null,
      asChild: true,
      children: /* @__PURE__ */ jsx(Layout, { children: items.map((item) => {
        const isActive = value.type === "shared" && value.value === item.value;
        const label = title + " \u2014 " + msg(`${uiType}-style.${item.value}`);
        return /* @__PURE__ */ jsx(
          TldrawUiToolbarToggleItem,
          {
            type: "icon",
            "data-id": item.value,
            "data-testid": `style.${uiType}.${item.value}`,
            "aria-label": label + (isActive ? ` (${msg("style-panel.selected")})` : ""),
            tooltip: /* @__PURE__ */ jsxs(Fragment, { children: [
              /* @__PURE__ */ jsx("div", { children: label }),
              isActive ? /* @__PURE__ */ jsxs("div", { children: [
                "(",
                msg("style-panel.selected"),
                ")"
              ] }) : null
            ] }),
            value: item.value,
            "data-state": value.type === "shared" && value.value === item.value ? "on" : "off",
            "data-isactive": isActive,
            title: label,
            style: style === DefaultColorStyle ? { color: getColorValue(theme, item.value, "solid") } : void 0,
            onPointerEnter: handleButtonPointerEnter,
            onPointerDown: handleButtonPointerDown,
            onPointerUp: handleButtonPointerUp,
            onClick: handleButtonClick,
            children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: item.icon })
          },
          item.value
        );
      }) })
    }
  );
}
const StylePanelButtonPicker = memo(StylePanelButtonPickerInner);
const StylePanelButtonPickerInline = memo(StylePanelButtonPickerInlineInner);
export {
  StylePanelButtonPicker,
  StylePanelButtonPickerInline
};
//# sourceMappingURL=StylePanelButtonPicker.mjs.map