Function handleMouseDown

packages/ui/src/resizer.tsx:40–70

(event: React.MouseEvent<HTMLDivElement>, holder: ResizerHolder)

  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,