Javascript 通过拖动角控制柄调整矩形的半径

我正在构建一个设计工具，并且一直在理解如何构建这个功能。我在这里做了很多，但有点不稳定

我试图重现的特征可以在Figma或Sketch中找到，这是一段录音

从“react”导入{FC，useffect，useState，useCallback}；
从“/Styles”导入{RadiusControlWrap，RadiusControlStyle，CORNERKNOW}；
接口IRadiusControlProps{
尺寸：任意尺寸；
半径：数字；
onRadiusChange：（半径：数字）=>无效；
}
常数半径控制：FC=({
大小，
半径
辐射变化
}) => {
const[mouseDown，setMouseDown]=useState，以防上面遗漏它

import { FC, useEffect, useState, useCallback } from "react";
import { RadiusControlWrap, RadiusControlStyle, CornerKnob } from "./Styles";

interface IRadiusControlProps {
  size: any;
  radius: number;
  onRadiusChange: (radius: number) => void;
}

const RadiusControl: FC<IRadiusControlProps> = ({
  size,
  radius,
  onRadiusChange
}) => {
  const [mouseDown, setMouseDown] = useState<any>(false);

  const handleMouseMove = useCallback(
    (e: any) => {
      if (mouseDown && e.target && e.target.parentElement) {
        const rect = e.target.parentElement.getBoundingClientRect();
        const x = Math.round(Number(e.clientX - rect.left));
        const y = Math.round(Number(e.clientY - rect.top));
        const val = Math.round(Math.atan2(y, x) * 100);

        // TODO: Understand how to set the correct value
        onRadiusChange(val);
      }
    },
    [mouseDown, onRadiusChange]
  );

  const handleMouseUp = (e: any) => {
    setMouseDown(false);
  };

  const handleMouseDown = (e: any) => {
    setMouseDown(true);
  };

  useEffect(() => {
    if (mouseDown) {
      document.addEventListener("mouseup", handleMouseUp);
      document.addEventListener("mousemove", handleMouseMove);
    } else {
      document.removeEventListener("mousemove", handleMouseMove);
    }

    return () => {
      document.removeEventListener("mouseup", handleMouseUp);
      document.removeEventListener("mousemove", handleMouseMove);
    };
  }, [handleMouseMove, mouseDown]);

  // TODO: how to scale the knobs like Figma or Sketch
  return (
    <RadiusControlWrap>
      <RadiusControlStyle
        style={{
          width: size.width - 30 - radius,
          height: size.height - 30 - radius
        }}
      >
        <CornerKnob corner="tl" onMouseDown={handleMouseDown} />
        <CornerKnob corner="bl" />
        <CornerKnob corner="tr" />
        <CornerKnob corner="br" />
      </RadiusControlStyle>
    </RadiusControlWrap>
  );
};

export default RadiusControl;