Fix issues with DragOverlay measuring

packages/core/src/components/DndContext/DndContext.tsx

@@ -14,7 +14,6 @@ import {
   getEventCoordinates,
   Transform,
   useIsomorphicLayoutEffect,
-  useNodeRef,
   useUniqueId,
 } from '@dnd-kit/utilities';
 
@@ -31,6 +30,7 @@ import {
   useAutoScroller,
   useCachedNode,
   useCombineActivators,
+  useDragOverlayMeasuring,
   useDroppableMeasuring,
   useScrollableAncestors,
   useClientRect,
@@ -61,7 +61,6 @@ import {
   getViewRect,
   rectIntersection,
 } from '../../utilities';
-import {getMeasurableNode} from '../../utilities/nodes';
 import {applyModifiers, Modifiers} from '../../modifiers';
 import type {Active, DataRef} from '../../store/types';
 import type {
@@ -226,13 +225,13 @@ export const DndContext = memo(function DndContext({
   );
   const scrollableAncestorRects = useClientRects(scrollableAncestors);
 
-  const [overlayNodeRef, setOverlayNodeRef] = useNodeRef();
-  const overlayNodeRect = useClientRect(
-    activeId ? getMeasurableNode(overlayNodeRef.current) : null
-  );
+  const dragOverlay = useDragOverlayMeasuring({
+    disabled: activeId == null,
+    forceRecompute: willRecomputeLayouts,
+  });
 
   // Use the rect of the drag overlay if it is mounted
-  const draggingNodeRect = overlayNodeRect ?? activeNodeRect;
+  const draggingNodeRect = dragOverlay.rect ?? activeNodeRect;
 
   // The delta between the previous and new position of the draggable node
   // is only relevant when there is no drag overlay
@@ -254,7 +253,7 @@ export const DndContext = memo(function DndContext({
     containerNodeRect,
     draggingNodeRect,
     over: sensorContext.current.over,
-    overlayNodeRect,
+    overlayNodeRect: dragOverlay.rect,
     scrollableAncestors,
     scrollableAncestorRects,
     windowRect,
@@ -577,13 +576,9 @@ export const DndContext = memo(function DndContext({
       ariaDescribedById: {
         draggable: draggableDescribedById,
       },
-      overlayNode: {
-        nodeRef: overlayNodeRef,
-        rect: overlayNodeRect,
-        setRef: setOverlayNodeRef,
-      },
       containerNodeRect,
       dispatch,
+      dragOverlay,
       draggableNodes,
       droppableContainers,
       droppableRects,
@@ -604,8 +599,7 @@ export const DndContext = memo(function DndContext({
     activatorEvent,
     activators,
     containerNodeRect,
-    overlayNodeRect,
-    overlayNodeRef,
+    dragOverlay,
     dispatch,
     draggableNodes,
     draggableDescribedById,
@@ -615,7 +609,6 @@ export const DndContext = memo(function DndContext({
     recomputeLayouts,
     scrollableAncestors,
     scrollableAncestorRects,
-    setOverlayNodeRef,
     willRecomputeLayouts,
     windowRect,
   ]);

packages/core/src/components/DragOverlay/DragOverlay.tsx

@@ -6,7 +6,7 @@ import {applyModifiers, Modifiers} from '../../modifiers';
 import {ActiveDraggableContext} from '../DndContext';
 import {useDndContext} from '../../hooks';
 import type {ViewRect} from '../../types';
-import {useDerivedTransform, useDropAnimation, DropAnimation} from './hooks';
+import {useDropAnimation, DropAnimation} from './hooks';
 
 type TransitionGetter = (
   activatorEvent: Event | null
@@ -56,7 +56,7 @@ export const DragOverlay = React.memo(
       draggableNodes,
       activatorEvent,
       over,
-      overlayNode,
+      dragOverlay,
       scrollableAncestors,
       scrollableAncestorRects,
       windowRect,
@@ -67,28 +67,25 @@ export const DragOverlay = React.memo(
       active,
       activeNodeRect: activeNodeClientRect,
       containerNodeRect,
-      draggingNodeRect: overlayNode.rect,
+      draggingNodeRect: dragOverlay.rect,
       over,
-      overlayNodeRect: overlayNode.rect,
+      overlayNodeRect: dragOverlay.rect,
       scrollableAncestors,
       scrollableAncestorRects,
       transform,
       windowRect,
     });
-    const derivedTransform = useDerivedTransform(
-      modifiedTransform,
-      activeNodeRect,
-      overlayNode.nodeRef.current
-    );
     const isDragging = active !== null;
-    const intermediateTransform = derivedTransform ?? modifiedTransform;
     const finalTransform = adjustScale
-      ? intermediateTransform
+      ? modifiedTransform
       : {
-          ...intermediateTransform,
+          ...modifiedTransform,
           scaleX: 1,
           scaleY: 1,
         };
+
+    dragOverlay.transform.current = finalTransform;
+
     const initialNodeRect = useLazyMemo<ViewRect | null>(
       (previousValue) => {
         if (isDragging) {
@@ -116,7 +113,7 @@ export const DragOverlay = React.memo(
                   initialNodeRect
                 )
               : undefined,
-          transition: derivedTransform
+          transition: modifiedTransform
             ? undefined
             : typeof transition === 'function'
             ? transition(activatorEvent)
@@ -145,7 +142,7 @@ export const DragOverlay = React.memo(
       duration: dropAnimation?.duration,
       easing: dropAnimation?.easing,
       dragSourceOpacity: dropAnimation?.dragSourceOpacity,
-      node: overlayNode.nodeRef.current,
+      node: dragOverlay.nodeRef.current,
       transform: attributesSnapshot.current?.transform,
     });
     const shouldRender = Boolean(
@@ -176,7 +173,7 @@ export const DragOverlay = React.memo(
       wrapperElement,
       {
         ...otherAttributes,
-        ref: overlayNode.setRef,
+        ref: dragOverlay.setRef,
       },
       finalChildren
     );

packages/core/src/components/DragOverlay/hooks/index.ts

@@ -1,2 +1,2 @@
-export {useDerivedTransform} from './useDerivedTransform';
-export {useDropAnimation, DropAnimation} from './useDropAnimation';
+export {useDropAnimation} from './useDropAnimation';
+export type {DropAnimation} from './useDropAnimation';

packages/core/src/hooks/index.ts

@@ -9,6 +9,7 @@ export {useDndContext} from './useDndContext';
 export type {UseDndContextReturnValue} from './useDndContext';
 export {useDroppable} from './useDroppable';
 export type {UseDroppableArguments} from './useDroppable';
+
 export {
   AutoScrollActivator,
   MeasuringStrategy,

packages/core/src/hooks/utilities/index.ts

@@ -21,4 +21,5 @@ export type {
   SyntheticListeners,
   SyntheticListenerMap,
 } from './useSyntheticListeners';
-export {useRect, useClientRect, useClientRects} from './useRect';
+export {useRect, useClientRect, useClientRects, useViewRect} from './useRect';
+export {useDragOverlayMeasuring} from './useDragOverlayMeasuring';

packages/core/src/hooks/utilities/useDragOverlayMeasuring.ts

@@ -0,0 +1,51 @@
+import {useMemo, useRef} from 'react';
+import {Transform, useNodeRef} from '@dnd-kit/utilities';
+
+import {getMeasurableNode} from '../../utilities/nodes';
+import type {DndContextDescriptor} from '../../store';
+import type {ClientRect} from '../../types';
+
+import {useClientRect} from './useRect';
+
+interface Arguments {
+  disabled: boolean;
+  forceRecompute: boolean;
+}
+
+export function useDragOverlayMeasuring({
+  disabled,
+  forceRecompute,
+}: Arguments): DndContextDescriptor['dragOverlay'] {
+  const transform = useRef<Transform | null>(null);
+  const [nodeRef, setRef] = useNodeRef();
+  const measuredOverlayRect = useClientRect(
+    disabled ? null : getMeasurableNode(nodeRef.current),
+    forceRecompute
+  );
+
+  const rect = useMemo(() => {
+    return measuredOverlayRect && transform.current
+      ? add(measuredOverlayRect, transform.current)
+      : null;
+  }, [measuredOverlayRect]);
+
+  return useMemo(
+    () => ({
+      nodeRef,
+      rect,
+      setRef,
+      transform,
+    }),
+    [rect, transform, nodeRef, setRef]
+  );
+}
+
+function add(rect: ClientRect, transform: Transform) {
+  return {
+    ...rect,
+    left: Math.round(rect.left - transform.x),
+    right: Math.round(rect.right - transform.x),
+    top: Math.round(rect.top - transform.y),
+    bottom: Math.round(rect.bottom - transform.y),
+  };
+}

packages/core/src/hooks/utilities/useRect.ts

@@ -1,11 +1,12 @@
 import {useRef} from 'react';
 import {useLazyMemo} from '@dnd-kit/utilities';
 
-import {getBoundingClientRect} from '../../utilities';
+import {getBoundingClientRect, getViewRect} from '../../utilities';
 import type {LayoutRect} from '../../types';
 
 type RectFn<T, U> = (element: U) => T;
 
+export const useViewRect = createUseRectFn(getViewRect);
 export const useClientRect = createUseRectFn(getBoundingClientRect);
 export const useClientRects = createUseRectsFn(getBoundingClientRect);
 

packages/core/src/store/context.ts

@@ -20,12 +20,15 @@ export const Context = createContext<DndContextDescriptor>({
   droppableRects: new Map(),
   droppableContainers: new DroppableContainersMap(),
   over: null,
-  overlayNode: {
+  dragOverlay: {
     nodeRef: {
       current: null,
     },
     rect: null,
     setRef: noop,
+    transform: {
+      current: null,
+    },
   },
   scrollableAncestors: [],
   scrollableAncestorRects: [],

packages/core/src/store/types.ts

@@ -1,4 +1,5 @@
 import type {MutableRefObject} from 'react';
+import type {Transform} from '@dnd-kit/utilities';
 
 import type {
   Coordinates,
@@ -92,9 +93,10 @@ export interface DndContextDescriptor {
   droppableContainers: DroppableContainers;
   droppableRects: LayoutRectMap;
   over: Over | null;
-  overlayNode: {
+  dragOverlay: {
     nodeRef: MutableRefObject<HTMLElement | null>;
     rect: ViewRect | null;
+    transform: MutableRefObject<Transform | null>;
     setRef: (element: HTMLElement | null) => void;
   };
   scrollableAncestors: Element[];

packages/sortable/src/components/SortableContext.tsx

@@ -47,14 +47,14 @@ export function SortableContext({
 }: Props) {
   const {
     active,
-    overlayNode,
+    dragOverlay,
     droppableRects,
     over,
     recomputeLayouts,
     willRecomputeLayouts,
   } = useDndContext();
   const containerId = useUniqueId(ID_PREFIX, id);
-  const useDragOverlay = Boolean(overlayNode.rect !== null);
+  const useDragOverlay = Boolean(dragOverlay.rect !== null);
   const items = useMemo(
     () =>
       userDefinedItems.map((item) =>