Function Resizer

packages/ui/src/resizer.tsx:21–177

({
  onResize,
  onChange,
  maxHeight,
  maxWidth,
  minHeight = 10,
  minWidth = 10,
  previewImage,
  holders = ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
  className,
})

const StyledHolder = tw.div`absolute w-3 h-3 border-2 border-white rounded-full cursor-nwse-resize bg-primary pointer-events-auto z-[1]`

export const Resizer: FC<ResizerProps> = ({
  onResize,
  onChange,
  maxHeight,
  maxWidth,
  minHeight = 10,
  minWidth = 10,
  previewImage,
  holders = ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
  className,
}) => {
  const pointRef = React.useRef({ x: 0, y: 0 })
  const holdreRef = React.useRef<ResizerHolder>('top-left')
  const [size, setSize] = React.useState({ width: 0, height: 0 })
  const sizeRef = React.useRef(size)
  const [resizing, setResizing] = React.useState(false)
  const rateRef = React.useRef(1)
  const ref = useRef<HTMLDivElement>(null)

  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>, holder: ResizerHolder) => {
    event.preventDefault()

    pointRef.current = {
      x: event.clientX,
      y: event.clientY,
    }
    holdreRef.current = holder
    const el = ref.current!
    const { width, height } = el.getBoundingClientRect()
    setSize({
      width,
      height,
    })
    sizeRef.current = {
      width,
      height,
    }
    setResizing(true)
    rateRef.current = height / width

    el.style.top = ~['top-left', 'top-right'].indexOf(holder) ? 'auto' : '0'
    el.style.left = ~['top-left', 'bottom-left'].indexOf(holder) ? 'auto' : '0'
    el.style.right = ~['top-right', 'bottom-right'].indexOf(holder) ? 'auto' : '0'
    el.style.bottom = ~['bottom-left', 'bottom-right'].indexOf(holder) ? 'auto' : '0'

    if ('ontouchstart' in document.documentElement)
      window.addEventListener('touchmove', handleMouseMove)
    else window.addEventListener('mousemove', handleMouseMove)
    window.addEventListener('mouseup', handleMouseUp)
  }

  const handleMouseMove = (event: MouseEvent | TouchEvent) => {
    let x = 0,
      y = 0
    if (event instanceof TouchEvent) {
      const touch = event.touches[0]
      x = touch.clientX
      y = touch.clientY