2023-09-29 13:41:58 -04:00
|
|
|
export type Align = 'middle' | 'top-left' | 'top-right';
|
|
|
|
|
|
2024-03-15 17:03:54 +01:00
|
|
|
export type ContextMenuPosition = { x: number; y: number };
|
|
|
|
|
|
|
|
|
|
export const getContextMenuPosition = (event: MouseEvent, align: Align = 'middle'): ContextMenuPosition => {
|
2023-09-29 13:41:58 -04:00
|
|
|
const { x, y, currentTarget, target } = event;
|
|
|
|
|
const box = ((currentTarget || target) as HTMLElement)?.getBoundingClientRect();
|
|
|
|
|
if (box) {
|
|
|
|
|
switch (align) {
|
2024-02-02 04:18:00 +01:00
|
|
|
case 'middle': {
|
2023-09-29 13:41:58 -04:00
|
|
|
return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
|
2024-02-02 04:18:00 +01:00
|
|
|
}
|
|
|
|
|
case 'top-left': {
|
2023-09-29 13:41:58 -04:00
|
|
|
return { x: box.x, y: box.y };
|
2024-02-02 04:18:00 +01:00
|
|
|
}
|
|
|
|
|
case 'top-right': {
|
2023-09-29 13:41:58 -04:00
|
|
|
return { x: box.x + box.width, y: box.y };
|
2024-02-02 04:18:00 +01:00
|
|
|
}
|
2023-09-29 13:41:58 -04:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return { x, y };
|
|
|
|
|
};
|