From 59725af5dabf0052bc0b31861b1a1365c33d9271 Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Mon, 7 Apr 2025 21:34:40 +0530
Subject: [PATCH] feat: improved <DraggableButton /> rotations

---
 src/components/DraggableButton.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/DraggableButton.tsx b/src/components/DraggableButton.tsx
index ede8e68..f86cec8 100644
--- a/src/components/DraggableButton.tsx
+++ b/src/components/DraggableButton.tsx
@@ -26,7 +26,6 @@ export const DraggableButton = React.forwardRef<
 >(({ children, ...props }, ref) => {
 	const [position, setPosition] = useState({ x: 0, y: 0 });
 	const [rotation, setRotation] = useState(0);
-	const baseRotation = useRef(0);
 	const [isDragging, setIsDragging] = useState(false);
 	const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
 	const [isInitialized, setIsInitialized] = useState(false);
@@ -42,9 +41,8 @@ export const DraggableButton = React.forwardRef<
 		if (!el || isInitialized) return;
 
 		// Extract initial rotation from transform style
-		const transform = window.getComputedStyle(el).transform;
-		const matrix = new DOMMatrix(transform);
-		baseRotation.current = Math.atan2(matrix.b, matrix.a) * (180 / Math.PI);
+		const rotate = window.getComputedStyle(el).rotate;
+		setRotation(parseFloat(rotate));
 
 		const rect = el.getBoundingClientRect();
 		const parentRect = el.parentElement?.getBoundingClientRect() ?? rect;
@@ -55,10 +53,10 @@ export const DraggableButton = React.forwardRef<
 
 		// Set position and clear any bottom/right values
 		el.style.position = "absolute";
-		el.style.top = `${top}px`;
-		el.style.left = `${left}px`;
-		el.style.bottom = "unset";
-		el.style.right = "unset";
+		// el.style.top = `${top}px`;
+		// el.style.left = `${left}px`;
+		// el.style.bottom = "unset";
+		// el.style.right = "unset";
 		el.style.transition = "none";
 
 		setPosition({ x: left, y: top });
@@ -74,7 +72,7 @@ export const DraggableButton = React.forwardRef<
 		// Remove the transition property entirely
 		el.style.left = `${position.x}px`;
 		el.style.top = `${position.y}px`;
-		el.style.transform = `rotateZ(${rotation}deg)`;
+		el.style.rotate = `${rotation}deg`;
 
 		const handleKeyDown = (e: KeyboardEvent) => {
 			if (e.key === "Escape") setIsDragging(false);
@@ -173,9 +171,6 @@ export const DraggableButton = React.forwardRef<
 	const handleEnd = () => {
 		setIsDragging(false);
 
-		// Remove the rotation reset - let chaos reign!
-		// setRotation(baseRotation.current);
-
 		// Start momentum animation
 		if (
 			Math.abs(lastVelocity.current.x) > 0.1 ||