Coordinate System

type Coordinates = {
  x: number;
  y: number;
};

/**
 * Extracts normalized coordinates from mouse and touch events
 * @param event - DOM event object (MouseEvent, TouchEvent, etc.)
 * @returns Coordinates object with x,y properties, or null if coordinates cannot be extracted
 */
function getEventCoordinates(event: Event): Coordinates | null;

import { getEventCoordinates, type Coordinates } from "@dnd-kit/utilities";

// Handle mouse events
function handleMouseMove(event: MouseEvent) {
  const coordinates = getEventCoordinates(event);
  if (coordinates) {
    console.log(`Mouse at: ${coordinates.x}, ${coordinates.y}`);
  }
}

// Handle touch events
function handleTouchStart(event: TouchEvent) {
  const coordinates = getEventCoordinates(event);
  if (coordinates) {
    console.log(`Touch at: ${coordinates.x}, ${coordinates.y}`);
  }
}

// Generic event handler for multiple event types
function handlePointerEvent(event: Event) {
  const coordinates = getEventCoordinates(event);
  if (!coordinates) {
    console.log("Could not extract coordinates from event");
    return;
  }
  
  // Use coordinates for positioning
  updateElementPosition(coordinates);
}

function updateElementPosition(coords: Coordinates) {
  const element = document.getElementById("draggable");
  if (element) {
    element.style.left = `${coords.x}px`;
    element.style.top = `${coords.y}px`;
  }
}

// React component example
import React from "react";

function DraggableComponent() {
  const handleDragMove = (event: React.DragEvent) => {
    const coordinates = getEventCoordinates(event.nativeEvent);
    if (coordinates) {
      // Update drag position
      console.log("Dragging to:", coordinates);
    }
  };
  
  return (
    <div
      draggable
      onDragStart={handleDragMove}
      onDrag={handleDragMove}
    >
      Drag me!
    </div>
  );
}