Dwinzo_dev/app/src/components/ui/componets/functions/determinePosition.ts

127 lines
2.8 KiB
TypeScript

// export function determinePosition(
// canvasRect: DOMRect,
// relativeX: number,
// relativeY: number
// ): {
// top: number | "auto";
// left: number | "auto";
// right: number | "auto";
// bottom: number | "auto";
// } {
// // Calculate the midpoints of the canvas
// const centerX = canvasRect.width / 2;
// const centerY = canvasRect.height / 2;
// // Initialize position with default values
// let position: {
// top: number | "auto";
// left: number | "auto";
// right: number | "auto";
// bottom: number | "auto";
// };
// if (relativeY < centerY) {
// // Top half
// if (relativeX < centerX) {
// // Left side
// position = {
// top: relativeY,
// left: relativeX,
// right: "auto",
// bottom: "auto",
// };
// } else {
// // Right side
// position = {
// top: relativeY,
// right: canvasRect.width - relativeX,
// left: "auto",
// bottom: "auto",
// };
// }
// } else {
// // Bottom half
// if (relativeX < centerX) {
// // Left side
// position = {
// bottom: canvasRect.height - relativeY,
// left: relativeX,
// right: "auto",
// top: "auto",
// };
// } else {
// // Right side
// position = {
// bottom: canvasRect.height - relativeY,
// right: canvasRect.width - relativeX,
// left: "auto",
// top: "auto",
// };
// }
// }
// return position;
// }
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) {
console.log("Top-left");
position = {
top: relativeY,
left: relativeX,
right: "auto",
bottom: "auto",
};
} else {
console.log("Top-right");
position = {
top: relativeY,
right: canvasRect.width - relativeX,
left: "auto",
bottom: "auto",
};
}
} else {
if (relativeX < centerX) {
console.log("Bottom-left");
position = {
bottom: canvasRect.height - relativeY,
left: relativeX,
right: "auto",
top: "auto",
};
} else {
console.log("Bottom-right");
position = {
bottom: canvasRect.height - relativeY,
right: canvasRect.width - relativeX,
left: "auto",
top: "auto",
};
}
}
return position;
}