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';
 
@@ -61,7 +60,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 {
@@ -78,6 +76,7 @@ import {
   screenReaderInstructions as defaultScreenReaderInstructions,
   ScreenReaderInstructions,
 } from '../Accessibility';
+import {useDragOverlayMeasuring} from '../DragOverlay';
 
 export interface Props {
   id?: string;
@@ -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 overlayNode = useDragOverlayMeasuring({
+    disabled: activeId == null,
+    forceRecompute: willRecomputeLayouts,
+  });
 
   // Use the rect of the drag overlay if it is mounted
-  const draggingNodeRect = overlayNodeRect ?? activeNodeRect;
+  const draggingNodeRect = overlayNode.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: overlayNode.rect,
     scrollableAncestors,
     scrollableAncestorRects,
     windowRect,
@@ -577,11 +576,7 @@ export const DndContext = memo(function DndContext({
       ariaDescribedById: {
         draggable: draggableDescribedById,
       },
-      overlayNode: {
-        nodeRef: overlayNodeRef,
-        rect: overlayNodeRect,
-        setRef: setOverlayNodeRef,
-      },
+      overlayNode,
       containerNodeRect,
       dispatch,
       draggableNodes,
@@ -604,8 +599,7 @@ export const DndContext = memo(function DndContext({
     activatorEvent,
     activators,
     containerNodeRect,
-    overlayNodeRect,
-    overlayNodeRef,
+    overlayNode,
     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
@@ -75,20 +75,17 @@ export const DragOverlay = React.memo(
       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,
         };
+
+    overlayNode.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)

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

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

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

@@ -0,0 +1,47 @@
+import {useMemo, useRef} from 'react';
+import {Transform, useNodeRef} from '@dnd-kit/utilities';
+
+import type {DndContextDescriptor} from '../../../store';
+import type {ClientRect} from '../../../types';
+import {useClientRect} from '../../../hooks/utilities';
+import {getMeasurableNode} from '../../../utilities/nodes';
+
+interface Arguments {
+  disabled: boolean;
+  forceRecompute: boolean;
+}
+
+export function useDragOverlayMeasuring({
+  disabled,
+  forceRecompute,
+}: Arguments): DndContextDescriptor['overlayNode'] {
+  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 {
+    nodeRef,
+    rect,
+    setRef,
+    transform,
+  };
+}
+
+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/components/DragOverlay/index.ts

@@ -1,3 +1,4 @@
 export {DragOverlay, defaultDropAnimation} from './DragOverlay';
 export type {Props} from './DragOverlay';
+export {useDragOverlayMeasuring} from './hooks';
 export type {DropAnimation} from './hooks';

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

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

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

@@ -26,6 +26,9 @@ export const Context = createContext<DndContextDescriptor>({
     },
     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,
@@ -95,6 +96,7 @@ export interface DndContextDescriptor {
   overlayNode: {
     nodeRef: MutableRefObject<HTMLElement | null>;
     rect: ViewRect | null;
+    transform: MutableRefObject<Transform | null>;
     setRef: (element: HTMLElement | null) => void;
   };
   scrollableAncestors: Element[];