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'
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|