77 lines
1.8 KiB
TypeScript
77 lines
1.8 KiB
TypeScript
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;
|
|
|
|
// Define a threshold for considering a point as "centered"
|
|
const centerThreshold = 10; // Adjust this value as needed
|
|
|
|
// Check if the point is within the center threshold
|
|
const isCenterX = Math.abs(relativeX - centerX) <= centerThreshold;
|
|
const isCenterY = Math.abs(relativeY - centerY) <= centerThreshold;
|
|
|
|
// If the point is centered, return a special "centered" position
|
|
if (isCenterX && isCenterY) {
|
|
return {
|
|
top: "auto",
|
|
left: "auto",
|
|
right: "auto",
|
|
bottom: "auto",
|
|
};
|
|
}
|
|
|
|
let position: {
|
|
top: number | "auto";
|
|
left: number | "auto";
|
|
right: number | "auto";
|
|
bottom: number | "auto";
|
|
};
|
|
|
|
if (relativeY < centerY) {
|
|
if (relativeX < centerX) {
|
|
// Top-left quadrant
|
|
position = {
|
|
top: relativeY - 41.5,
|
|
left: relativeX - 125,
|
|
right: "auto",
|
|
bottom: "auto",
|
|
};
|
|
} else {
|
|
// Top-right quadrant
|
|
position = {
|
|
top: relativeY - 41.5,
|
|
right: canvasRect.width - relativeX - 125,
|
|
left: "auto",
|
|
bottom: "auto",
|
|
};
|
|
}
|
|
} else {
|
|
if (relativeX < centerX) {
|
|
// Bottom-left quadrant
|
|
position = {
|
|
bottom: canvasRect.height - relativeY - 41.5,
|
|
left: relativeX - 125,
|
|
right: "auto",
|
|
top: "auto",
|
|
};
|
|
} else {
|
|
// Bottom-right quadrant
|
|
position = {
|
|
bottom: canvasRect.height - relativeY - 41.5,
|
|
right: canvasRect.width - relativeX - 125,
|
|
left: "auto",
|
|
top: "auto",
|
|
};
|
|
}
|
|
}
|
|
|
|
return position;
|
|
} |