kaneo (minimalist kanban) fork to experiment adding a tangled integration
github.com/usekaneo/kaneo
1import type { MouseEvent } from "react";
2
3/**
4 * Get click coordinates relative to the viewport as percentages.
5 * Useful for positioning animations like circular reveals.
6 *
7 * @param event - The mouse event from a click handler
8 * @returns Object with x and y coordinates as percentages (0-100)
9 */
10export function getClickCoordinates(event: MouseEvent<HTMLElement>): {
11 x: number;
12 y: number;
13} {
14 const rect = event.currentTarget.getBoundingClientRect();
15 const x = ((rect.left + rect.width / 2) / window.innerWidth) * 100;
16 const y = ((rect.top + rect.height / 2) / window.innerHeight) * 100;
17
18 return { x, y };
19}
20
21/**
22 * Get coordinates from an element's center position.
23 * Useful for programmatic animations without click events.
24 *
25 * @param element - The HTML element to get coordinates from
26 * @returns Object with x and y coordinates as percentages (0-100)
27 */
28export function getElementCoordinates(element: HTMLElement): {
29 x: number;
30 y: number;
31} {
32 const rect = element.getBoundingClientRect();
33 const x = ((rect.left + rect.width / 2) / window.innerWidth) * 100;
34 const y = ((rect.top + rect.height / 2) / window.innerHeight) * 100;
35
36 return { x, y };
37}