2025-03-29 13:51:20 +00:00
|
|
|
export function determinePosition(
|
|
|
|
canvasRect: DOMRect,
|
|
|
|
relativeX: number,
|
|
|
|
relativeY: number
|
|
|
|
): {
|
|
|
|
top: number | "auto";
|
|
|
|
left: number | "auto";
|
|
|
|
right: number | "auto";
|
|
|
|
bottom: number | "auto";
|
|
|
|
} {
|
|
|
|
const centerX = canvasRect.width / 2;
|
|
|
|
const centerY = canvasRect.height / 2;
|
|
|
|
|
|
|
|
let position: {
|
|
|
|
top: number | "auto";
|
|
|
|
left: number | "auto";
|
|
|
|
right: number | "auto";
|
|
|
|
bottom: number | "auto";
|
|
|
|
};
|
|
|
|
|
|
|
|
if (relativeY < centerY) {
|
|
|
|
if (relativeX < centerX) {
|
2025-03-31 12:52:40 +00:00
|
|
|
console.log("Top-left");
|
2025-03-29 13:51:20 +00:00
|
|
|
position = {
|
|
|
|
top: relativeY,
|
|
|
|
left: relativeX,
|
|
|
|
right: "auto",
|
|
|
|
bottom: "auto",
|
|
|
|
};
|
|
|
|
} else {
|
2025-03-31 12:52:40 +00:00
|
|
|
console.log("Top-right");
|
2025-03-29 13:51:20 +00:00
|
|
|
position = {
|
|
|
|
top: relativeY,
|
|
|
|
right: canvasRect.width - relativeX,
|
|
|
|
left: "auto",
|
|
|
|
bottom: "auto",
|
|
|
|
};
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (relativeX < centerX) {
|
2025-03-31 12:52:40 +00:00
|
|
|
console.log("Bottom-left");
|
2025-03-29 13:51:20 +00:00
|
|
|
position = {
|
|
|
|
bottom: canvasRect.height - relativeY,
|
|
|
|
left: relativeX,
|
|
|
|
right: "auto",
|
|
|
|
top: "auto",
|
|
|
|
};
|
|
|
|
} else {
|
2025-03-31 12:52:40 +00:00
|
|
|
console.log("Bottom-right");
|
2025-03-29 13:51:20 +00:00
|
|
|
position = {
|
|
|
|
bottom: canvasRect.height - relativeY,
|
|
|
|
right: canvasRect.width - relativeX,
|
|
|
|
left: "auto",
|
|
|
|
top: "auto",
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return position;
|
2025-03-31 12:52:40 +00:00
|
|
|
}
|