christian
bc9cf1bf25
All checks were successful
Deploy to Cloudflare Pages / deploy (push) Successful in 32s
30 lines
842 B
TypeScript
30 lines
842 B
TypeScript
import { Coordinates } from "~/types";
|
|
import { PhAngle } from "./PhAngle";
|
|
|
|
interface ComponentProps {
|
|
position: Coordinates;
|
|
referencePosition: Coordinates;
|
|
}
|
|
|
|
export default function RotatableAngle({ position, referencePosition }: ComponentProps) {
|
|
// Calculate angle between points
|
|
const getRotationAngle = () => {
|
|
const deltaX = referencePosition.x - position.x;
|
|
const deltaY = referencePosition.y - position.y;
|
|
// Convert from radians to degrees and adjust for SVG orientation
|
|
const degrees = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
|
|
return degrees - 135; // Adjust baseline rotation to point right
|
|
};
|
|
|
|
return (
|
|
<PhAngle
|
|
className="absolute scale-125"
|
|
style={{
|
|
transform: `rotate(${getRotationAngle()}deg)`,
|
|
top: '-4px',
|
|
left: '-12px'
|
|
}}
|
|
/>
|
|
);
|
|
};
|