127 lines
2.8 KiB
TypeScript
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;
|
|
} |