@wordpress/components/build-module/angle-picker-control/angle-circle.mjs

UI components for WordPress.

// packages/components/src/angle-picker-control/angle-circle.tsx
import clsx from "clsx";
import { useEffect, useRef } from "@wordpress/element";
import { __experimentalUseDragging as useDragging } from "@wordpress/compose";

// packages/components/src/angle-picker-control/style.module.scss
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='e91ec3f005']")) {
  const style = document.createElement("style");
  style.setAttribute("data-wp-hash", "e91ec3f005");
  style.appendChild(document.createTextNode("._8f57b8d483c51fbe__circle-root{border:1px solid var(--wp-components-color-gray-600,#949494);border-radius:50%;box-sizing:border-box;cursor:grab;height:32px;overflow:hidden;width:32px}._8f57b8d483c51fbe__circle-root:active{cursor:grabbing}.b1bae984ac10fcc3__circle-indicator-wrapper{box-sizing:border-box;height:100%;position:relative;width:100%}.b1bae984ac10fcc3__circle-indicator-wrapper:focus-visible{outline:none}._6d2fe0a2cbb31bf0__circle-indicator{background:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));border-radius:50%;box-sizing:border-box;display:block;height:6px;left:50%;position:absolute;top:4px;transform:translateX(-50%);width:6px}"));
  document.head.appendChild(style);
}
var style_module_default = { "circle-root": "_8f57b8d483c51fbe__circle-root", "circle-indicator-wrapper": "b1bae984ac10fcc3__circle-indicator-wrapper", "circle-indicator": "_6d2fe0a2cbb31bf0__circle-indicator" };

// packages/components/src/angle-picker-control/angle-circle.tsx
import { jsx as _jsx } from "react/jsx-runtime";
function AngleCircle({
  value,
  onChange,
  className,
  ...props
}) {
  const angleCircleRef = useRef(null);
  const angleCircleCenterRef = useRef(void 0);
  const previousCursorValueRef = useRef(void 0);
  const setAngleCircleCenter = () => {
    if (angleCircleRef.current === null) {
      return;
    }
    const rect = angleCircleRef.current.getBoundingClientRect();
    angleCircleCenterRef.current = {
      x: rect.x + rect.width / 2,
      y: rect.y + rect.height / 2
    };
  };
  const changeAngleToPosition = (event) => {
    if (event === void 0) {
      return;
    }
    event.preventDefault();
    event.target?.focus();
    if (angleCircleCenterRef.current !== void 0 && onChange !== void 0) {
      const {
        x: centerX,
        y: centerY
      } = angleCircleCenterRef.current;
      onChange(getAngle(centerX, centerY, event.clientX, event.clientY));
    }
  };
  const {
    startDrag,
    isDragging
  } = useDragging({
    onDragStart: (event) => {
      setAngleCircleCenter();
      changeAngleToPosition(event);
    },
    onDragMove: changeAngleToPosition,
    onDragEnd: changeAngleToPosition
  });
  useEffect(() => {
    if (isDragging) {
      if (previousCursorValueRef.current === void 0) {
        previousCursorValueRef.current = document.body.style.cursor;
      }
      document.body.style.cursor = "grabbing";
    } else {
      document.body.style.cursor = previousCursorValueRef.current || "";
      previousCursorValueRef.current = void 0;
    }
  }, [isDragging]);
  return (
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    /* @__PURE__ */ _jsx("div", {
      ref: angleCircleRef,
      onMouseDown: startDrag,
      className: clsx("components-angle-picker-control__angle-circle", style_module_default["circle-root"], className),
      ...props,
      children: /* @__PURE__ */ _jsx("div", {
        style: value ? {
          transform: `rotate(${value}deg)`
        } : void 0,
        className: clsx("components-angle-picker-control__angle-circle-indicator-wrapper", style_module_default["circle-indicator-wrapper"]),
        tabIndex: -1,
        children: /* @__PURE__ */ _jsx("div", {
          className: clsx("components-angle-picker-control__angle-circle-indicator", style_module_default["circle-indicator"])
        })
      })
    })
  );
}
function getAngle(centerX, centerY, pointX, pointY) {
  const y = pointY - centerY;
  const x = pointX - centerX;
  const angleInRadians = Math.atan2(y, x);
  const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;
  if (angleInDeg < 0) {
    return 360 + angleInDeg;
  }
  return angleInDeg;
}
var angle_circle_default = AngleCircle;
export {
  angle_circle_default as default
};
//# sourceMappingURL=angle-circle.mjs.map