Minor Changes
-
#518
6310227
Thanks @clauderic! - Major internal refactor of measuring and collision detection.Summary of changes
Previously, all collision detection algorithms were relative to the top and left points of the document. While this approach worked in most situations, it broke down in a number of different use-cases, such as fixed position droppable containers and trying to drag between containers that had different scroll positions.
This new approach changes the frame of comparison to be relative to the viewport. This is a major breaking change, and will need to be released under a new major version bump.
Breaking changes:
- By default,
@dnd-kit
now ignores only the transforms applied to the draggable / droppable node itself, but considers all the transforms applied to its ancestors. This should provide the right balance of flexibility for most consumers.- Transforms applied to the droppable and draggable nodes are ignored by default, because the recommended approach for moving items on the screen is to use the transform property, which can interfere with the calculation of collisions.
- Consumers can choose an alternate approach that does consider transforms for specific use-cases if needed by configuring the measuring prop of . Refer to the example.
- Reduced the number of concepts related to measuring from
ViewRect
,LayoutRect
to just a single concept ofClientRect
.- The
ClientRect
interface no longer holds theoffsetTop
andoffsetLeft
properties. For most use-cases, you can replaceoffsetTop
withtop
andoffsetLeft
withleft
. - Replaced the following exports from the
@dnd-kit/core
package withgetClientRect
:getBoundingClientRect
getViewRect
getLayoutRect
getViewportLayoutRect
- The
- Removed
translatedRect
from theSensorContext
interface. Replace usage withcollisionRect
. - Removed
activeNodeClientRect
on theDndContext
interface. Replace withactiveNodeRect
.
- By default,
-
528c67e
Thanks @clauderic! - Introduced theuseLatestValue
hook, which returns a ref that holds the latest value of a given argument. Optionally, the second argument can be used to customize the dependencies passed to the effect.
Patch Changes
- #561
02edd26
Thanks @clauderic! - - TheuseNodeRef
hook'sonChange
argument now receives both the current node and the previous node that were attached to the ref.- The
onChange
argument is only called if the previous node differs from the current node
- The