feat: #comment enabled free drag

src/components/DeviceNode.tsx

@@ -25,7 +25,7 @@ const DeviceNode: React.FC<DeviceNodeProps> = ({
   const nodeRef = useRef<HTMLDivElement>(null);
   const [position, setPosition] = useState(device.position);
   const [isDragging, setIsDragging] = useState(false);
-  const lastPositionRef = useRef({ x: 0, y: 0 });
+  const dragStartRef = useRef({ x: 0, y: 0 });
   const [nodeSize, setNodeSize] = useState({ width: 0, height: 0 });
 
   console.log("inputs", gridWidth, gridHeight, nodeSize);
@@ -56,24 +56,23 @@ const DeviceNode: React.FC<DeviceNodeProps> = ({
     const handleMouseMove = (e: MouseEvent) => {
       if (!isDragging) return;
 
-      const dx = e.clientX - lastPositionRef.current.x;
-      const dy = e.clientY - lastPositionRef.current.y;
+      const dx = e.clientX - dragStartRef.current.x;
+      const dy = e.clientY - dragStartRef.current.y;
 
-      setPosition((prevPos) => {
-        const newPos = {
-          x: prevPos.x + dx,
-          y: prevPos.y + dy,
-        };
-        return snapToGrid(Math.max(0, newPos.x), Math.max(0, newPos.y));
-      });
+      setPosition((prevPos) => ({
+        x: prevPos.x + dx,
+        y: prevPos.y + dy,
+      }));
 
-      lastPositionRef.current = { x: e.clientX, y: e.clientY };
+      dragStartRef.current = { x: e.clientX, y: e.clientY };
     };
 
     const handleMouseUp = () => {
       if (isDragging) {
         setIsDragging(false);
-        onMove(device.id, position);
+        const snappedPosition = snapToGrid(position.x, position.y);
+        setPosition(snappedPosition);
+        onMove(device.id, snappedPosition);
       }
     };
 
@@ -91,7 +90,7 @@ const DeviceNode: React.FC<DeviceNodeProps> = ({
   const handleMouseDown = (e: React.MouseEvent) => {
     e.preventDefault();
     setIsDragging(true);
-    lastPositionRef.current = { x: e.clientX, y: e.clientY };
+    dragStartRef.current = { x: e.clientX, y: e.clientY };
   };
 
   const renderPorts = (ports: Port[], type: "input" | "output") => (