Mouse & Pointer Events

/**
 * Reactive mouse position tracking
 * @param options - Configuration options
 * @returns Mouse position and metadata
 */
function useMouse(options?: UseMouseOptions): {
  x: Ref<number>;
  y: Ref<number>;
  sourceType: Ref<UseMouseSourceType>;
};

interface UseMouseOptions extends ConfigurableWindow, ConfigurableEventFilter {
  type?: UseMouseCoordType;
  touch?: boolean;
  resetOnTouchEnds?: boolean;
  initialValue?: Position;
  target?: MaybeElementRef;
  scroll?: boolean;
}

type UseMouseCoordType = 'page' | 'client' | 'screen' | 'movement';
type UseMouseSourceType = 'mouse' | 'touch' | null;

import { useMouse } from "@vueuse/core";

// Basic mouse tracking
const { x, y } = useMouse();

// Track relative to specific element
const element = ref<HTMLElement>();
const { x, y } = useMouse({ target: element });

// Include touch events
const { x, y, sourceType } = useMouse({ touch: true });

// Use different coordinate system
const { x, y } = useMouse({ type: 'client' }); // viewport coordinates
const { x, y } = useMouse({ type: 'movement' }); // movement delta

/**
 * Reactive mouse position relative to an element
 * @param target - Target element or ref
 * @param options - Configuration options
 * @returns Mouse position relative to element
 */
function useMouseInElement(
  target?: MaybeElementRef,
  options?: UseMouseInElementOptions
): {
  x: Ref<number>;
  y: Ref<number>;
  elementX: Ref<number>;
  elementY: Ref<number>;
  elementPositionX: Ref<number>;
  elementPositionY: Ref<number>;
  elementHeight: Ref<number>;
  elementWidth: Ref<number>;
  isOutside: Ref<boolean>;
  stop: () => void;
};

interface UseMouseInElementOptions extends UseMouseOptions {
  handleOutside?: boolean;
}

/**
 * Reactive mouse button pressed state
 * @param options - Configuration options
 * @returns Mouse pressed state and utilities
 */
function useMousePressed(options?: UseMousePressedOptions): {
  pressed: Ref<boolean>;
  sourceType: Ref<UseMouseSourceType>;
};

interface UseMousePressedOptions extends ConfigurableWindow {
  touch?: boolean;
  drag?: boolean;
  capture?: boolean;
  initialValue?: boolean;
  target?: MaybeElementRef;
}

/**
 * Reactive pointer events with multi-touch support
 * @param options - Configuration options
 * @returns Pointer state and events
 */
function usePointer(options?: UsePointerOptions): {
  isInside: Ref<boolean>;
  pressure: Ref<number>;
  pointerId: Ref<number>;
  height: Ref<number>;
  width: Ref<number>;
  tiltX: Ref<number>;
  tiltY: Ref<number>;
  pointerType: Ref<string>;
  isPrimary: Ref<boolean>;
} & ReturnType<typeof useMouse>;

interface UsePointerOptions extends UseMouseOptions {
  pointerTypes?: PointerType[];
}

/**
 * Reactive Pointer Lock API
 * @param target - Target element or ref
 * @param options - Configuration options
 * @returns Pointer lock state and controls
 */
function usePointerLock(
  target?: MaybeElementRef,
  options?: UsePointerLockOptions
): UsePointerLockReturn;

interface UsePointerLockReturn {
  isSupported: ComputedRef<boolean>;
  element: Ref<Element | null>;
  triggerElement: Ref<Element | null>;
  isActive: ComputedRef<boolean>;
  lock: (element?: MaybeElementRef) => Promise<Element | null>;
  unlock: () => Promise<boolean>;
}

/**
 * Reactive pointer swipe gesture detection
 * @param target - Target element or ref
 * @param options - Configuration options
 * @returns Swipe detection utilities
 */
function usePointerSwipe(
  target: MaybeElementRef,
  options?: UsePointerSwipeOptions
): {
  readonly isSwiping: Ref<boolean>;
  readonly direction: ComputedRef<UseSwipeDirection | null>;
  readonly posStart: Readonly<Position>;
  readonly posEnd: Readonly<Position>;
  readonly distanceX: ComputedRef<number>;
  readonly distanceY: ComputedRef<number>;
  stop: () => void;
};

interface UsePointerSwipeOptions {
  threshold?: number;
  onSwipe?: (e: PointerEvent) => void;
  onSwipeEnd?: (e: PointerEvent, direction: UseSwipeDirection) => void;
  onSwipeStart?: (e: PointerEvent) => void;
  disableTextSelection?: boolean;
  pointerTypes?: PointerType[];
}

type UseSwipeDirection = 'up' | 'down' | 'left' | 'right';

/**
 * Make elements draggable with reactive position tracking
 * @param target - Target element or ref
 * @param options - Configuration options
 * @returns Draggable state and utilities
 */
function useDraggable(
  target: MaybeComputedElementRef,
  options?: UseDraggableOptions
): {
  x: Ref<number>;
  y: Ref<number>;
  isDragging: Ref<boolean>;
  position: ComputedRef<Position>;
  style: ComputedRef<CSSProperties>;
};

interface UseDraggableOptions {
  exact?: boolean;
  preventDefault?: boolean;
  stopPropagation?: boolean;
  pointerTypes?: PointerType[];
  initialValue?: Position;
  onStart?: (position: Position, event: PointerEvent) => void | false;
  onMove?: (position: Position, event: PointerEvent) => void;
  onEnd?: (position: Position, event: PointerEvent) => void;
  axis?: 'x' | 'y' | 'both';
  disabled?: MaybeRefOrGetter<boolean>;
  containerElement?: MaybeElementRef;
  handle?: MaybeElementRef;
}

import { ref } from "vue";
import { useDraggable } from "@vueuse/core";

const el = ref<HTMLElement>();

// Basic draggable
const { x, y, isDragging } = useDraggable(el);

// Constrain to axis
const { x, y } = useDraggable(el, { axis: 'x' });

// With drag handles and containers
const container = ref<HTMLElement>();
const handle = ref<HTMLElement>();

const { x, y } = useDraggable(el, {
  containerElement: container,
  handle: handle
});

// With callbacks
const { x, y } = useDraggable(el, {
  onStart: (pos, event) => {
    console.log('Drag started at', pos);
  },
  onMove: (pos, event) => {
    console.log('Dragging to', pos);
  },
  onEnd: (pos, event) => {
    console.log('Drag ended at', pos);
  }
});

/**
 * Create drop zone for file uploads and drag & drop
 * @param target - Target element or ref
 * @param options - Configuration options
 * @returns Drop zone state and utilities
 */
function useDropZone(
  target: MaybeElementRef,
  options?: UseDropZoneOptions
): UseDropZoneReturn;

interface UseDropZoneReturn {
  files: Ref<File[] | null>;
  isOverDropZone: Ref<boolean>;
}

interface UseDropZoneOptions {
  onDrop?: (files: File[] | null, event: DragEvent) => void;
  onEnter?: (files: File[] | null, event: DragEvent) => void;
  onLeave?: (files: File[] | null, event: DragEvent) => void;
  onOver?: (files: File[] | null, event: DragEvent) => void;
  dataTypes?: string[];
  preventDefaultForUnhandled?: boolean;
}

/**
 * Reactive swipe gesture detection
 * @param target - Target element or ref
 * @param options - Configuration options
 * @returns Swipe detection utilities
 */
function useSwipe(
  target: MaybeElementRef,
  options?: UseSwipeOptions
): UseSwipeReturn;

interface UseSwipeReturn {
  isPressed: Ref<boolean>;
  isSwiping: Ref<boolean>;
  direction: ComputedRef<UseSwipeDirection | null>;
  coordsStart: Readonly<Position>;
  coordsEnd: Readonly<Position>;
  lengthX: ComputedRef<number>;
  lengthY: ComputedRef<number>;
  stop: () => void;
}

interface UseSwipeOptions {
  threshold?: number;
  onSwipe?: (e: TouchEvent | MouseEvent) => void;
  onSwipeEnd?: (e: TouchEvent | MouseEvent, direction: UseSwipeDirection) => void;
  onSwipeStart?: (e: TouchEvent | MouseEvent) => void;
  passive?: boolean;
  window?: Window;
}

/**
 * Listen for long press events
 * @param target - Target element or ref
 * @param handler - Long press handler function
 * @param options - Configuration options
 * @returns Stop function
 */
function onLongPress(
  target: MaybeElementRef,
  handler: (evt: PointerEvent) => void,
  options?: OnLongPressOptions
): () => void;

interface OnLongPressOptions {
  delay?: number;
  modifiers?: OnLongPressModifiers;
  distanceThreshold?: number | false;
}

interface OnLongPressModifiers {
  stop?: boolean;
  once?: boolean;
  prevent?: boolean;
  capture?: boolean;
  self?: boolean;
}

/**
 * Create parallax effects based on mouse movement
 * @param target - Target element or ref
 * @param options - Configuration options
 * @returns Parallax transforms
 */
function useParallax(
  target: MaybeElementRef,
  options?: UseParallaxOptions
): UseParallaxReturn;

interface UseParallaxReturn {
  tilt: ComputedRef<number>;
  roll: ComputedRef<number>;
  source: 'mouse' | 'deviceOrientation';
}

interface UseParallaxOptions {
  deviceOrientationTiltAdjust?: (i: number) => number;
  deviceOrientationRollAdjust?: (i: number) => number;
  mouseTiltAdjust?: (i: number) => number;
  mouseRollAdjust?: (i: number) => number;
}

interface Position {
  x: number;
  y: number;
}

type PointerType = 'mouse' | 'touch' | 'pen';

interface ConfigurableEventFilter {
  eventFilter?: EventFilter;
}

type EventFilter<Args extends any[] = any[], This = any, Return = void> = (
  invoke: Fn<Args, Return>,
  options: FunctionWrapperOptions<Args, This>
) => void;