yaak/src-web/components/ResizeHandle.tsx

import classNames from 'classnames';
import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
import { useCallback, useRef, useState } from 'react';

const START_DISTANCE = 7;

export interface ResizeHandleEvent {
  x: number;
  y: number;
  xStart: number;
  yStart: number;
}

interface Props {
  style?: CSSProperties;
  className?: string;
  onResizeStart?: () => void;
  onResizeEnd?: () => void;
  onResizeMove?: (e: ResizeHandleEvent) => void;
  onReset?: () => void;
  side: 'left' | 'right' | 'top';
  justify: 'center' | 'end' | 'start';
}

export function ResizeHandle({
  style,
  justify,
  className,
  onResizeStart,
  onResizeEnd,
  onResizeMove,
  onReset,
  side,
}: Props) {
  const vertical = side === 'top';
  const [isResizing, setIsResizing] = useState<boolean>(false);
  const moveState = useRef<{
    move: (e: MouseEvent) => void;
    up: (e: MouseEvent) => void;
    calledStart: boolean;
    xStart: number;
    yStart: number;
  } | null>(null);

  const handlePointerDown = useCallback(
    (e: ReactMouseEvent<HTMLDivElement>) => {
      function move(e: MouseEvent) {
        if (moveState.current == null) return;

        const xDistance = moveState.current.xStart - e.clientX;
        const yDistance = moveState.current.yStart - e.clientY;
        const distance = Math.abs(vertical ? yDistance : xDistance);
        if (moveState.current.calledStart) {
          onResizeMove?.({
            x: e.clientX,
            y: e.clientY,
            xStart: moveState.current.xStart,
            yStart: moveState.current.yStart,
          });
        } else if (distance > START_DISTANCE) {
          onResizeStart?.();
          moveState.current.calledStart = true;
          setIsResizing(true);
        }
      }

      function up() {
        setIsResizing(false);
        moveState.current = null;
        document.documentElement.removeEventListener('mousemove', move);
        document.documentElement.removeEventListener('mouseup', up);
        onResizeEnd?.();
      }

      moveState.current = { calledStart: false, xStart: e.clientX, yStart: e.clientY, move, up };

      document.documentElement.addEventListener('mousemove', move);
      document.documentElement.addEventListener('mouseup', up);
    },
    [onResizeEnd, onResizeMove, onResizeStart, vertical],
  );

  return (
    <div
      aria-hidden
      style={style}
      onDoubleClick={onReset}
      onPointerDown={handlePointerDown}
      className={classNames(
        className,
        'group z-10 flex select-none transition-colors hover:bg-surface-active rounded-full',
        // 'bg-info', // For debugging
        vertical ? 'w-full h-1.5 cursor-row-resize' : 'h-full w-1.5 cursor-col-resize',
        justify === 'center' && 'justify-center',
        justify === 'end' && 'justify-end',
        justify === 'start' && 'justify-start',
        side === 'right' && 'right-0',
        side === 'left' && 'left-0',
        side === 'top' && 'top-0',
      )}
    >
      {/* Show global overlay with cursor style to ensure cursor remains the same when moving quickly */}
      {isResizing && (
        <div
          className={classNames(
            // 'bg-[rgba(255,0,0,0.1)]', // For debugging
            'fixed -left-[100vw] -right-[100vw] -top-[100vh] -bottom-[100vh]',
            vertical && 'cursor-row-resize',
            !vertical && 'cursor-col-resize',
          )}
        />
      )}
    </div>
  );
}