import { MouseEvent } from 'react';

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

// TODO: add tests
export const mouseEventToCanvasPoint = (
  evt: MouseEvent<HTMLCanvasElement>
): Point => {
  const rect = evt.currentTarget.getBoundingClientRect();
  const elementX = evt.clientX - rect.left;
  const elementY = evt.clientY - rect.top;

  return {
    x: (elementX * evt.currentTarget.width) / rect.width,
    y: (elementY * evt.currentTarget.height) / rect.height,
  };
};
