fix: maintain same dragabble dimensions on the overlay

Author: itsjavi

packages/dragswag/src/react/drag-overlay.tsx

@@ -21,14 +21,17 @@ function DragOverlay({ ref, style, children: dragElement, ...props }: React.Comp
     bottom: 0,
     left: 0,
     right: 0,
+    pointerEvents: 'none' as const,
+    zIndex: 9999,
     display: dragElement ? 'block' : 'none',
     ...style,
   }
 
   const dragWrapperStyle = {
-    position: 'relative' as const,
+    position: 'absolute' as const,
     transform: `translateX(0px) translateY(0px)`,
     willChange: 'transform',
+    pointerEvents: 'none' as const,
   }
 
   return (
@@ -44,7 +47,6 @@ const DragOverlayContext = createContext<DragOverlayContextType | null>(null)
 
 export function DragOverlayProvider({ children, ...rest }: DragOverlayProviderProps) {
   const [dragElement, setDragElement] = useState<ReactElement | null>(null)
-  // const [dragElement2, setDragElement2] = [null, () => {}]
   const dragWrapperRef = useRef<HTMLDivElement>(null)
 
   const setDragElementPosition = (position: { top: number; left: number }) => {
@@ -54,12 +56,12 @@ export function DragOverlayProvider({ children, ...rest }: DragOverlayProviderPr
   }
 
   return (
-    <DragOverlayContext value={{ dragElement, setDragElement, setDragElementPosition }}>
+    <DragOverlayContext.Provider value={{ dragElement, setDragElement, setDragElementPosition }}>
       {children}
       <DragOverlay ref={dragWrapperRef} {...rest}>
         {dragElement}
       </DragOverlay>
-    </DragOverlayContext>
+    </DragOverlayContext.Provider>
   )
 }
 

packages/dragswag/src/react/use-draggable.tsx

@@ -18,6 +18,7 @@ export function useDraggable(config: DraggableConfig) {
     config,
     data: null as any,
     currentDragComponent: null as React.ReactElement | null,
+    elementDimensions: { width: 0, height: 0 },
   })
 
   refs.current.config = config
@@ -41,7 +42,10 @@ export function useDraggable(config: DraggableConfig) {
     onDragStart(props) {
       const current = refs.current
 
-      const { top, left } = current.element!.getBoundingClientRect()
+      const { top, left, width, height } = current.element!.getBoundingClientRect()
+
+      // Store element dimensions
+      current.elementDimensions = { width, height }
 
       let offset
 
@@ -174,8 +178,17 @@ export function useDraggable(config: DraggableConfig) {
 
       if (current.isDragging) {
         let dragComponent = current.config.component?.({ data: current.data, props: child.props }) ?? child
+
+        // Apply dimensions from the original element
+        const style = {
+          ...(dragComponent.props.style || {}),
+          width: current.elementDimensions.width + 'px',
+          height: current.elementDimensions.height + 'px',
+        }
+
         dragComponent = React.cloneElement(dragComponent, {
           ref: dragComponentRef,
+          style,
         })
 
         // Store the current drag component to use in the effect