🐛 fix(sortable-list): fix DragOverlay position issues after drag operations #420
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ations - Add MeasuringStrategy.Always to ensure accurate position measurement - Add closestCenter collision detection for better drag experience - Add renderOverlay prop for custom drag overlay rendering Closes LOBE-1959, LOBE-1960, LOBE-1961 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reviewer's GuideUpdates the SortableList drag-and-drop behavior to always re-measure droppable positions, use closest-center collision detection, and support a customizable drag overlay, with a demo toggle to showcase the new overlay behavior. Sequence diagram for SortableList drag overlay rendering with closestCenter and measuringsequenceDiagram
actor User
participant PointerSensor
participant DndContext
participant SortableListParent
participant overlayRenderer
participant SortableOverlay
User->>PointerSensor: start drag on item
PointerSensor->>DndContext: onDragStart(event)
DndContext->>SortableListParent: onDragStart callback
SortableListParent->>SortableListParent: setActive(active)
Note over DndContext,SortableListParent: During drag
DndContext->>DndContext: measuringConfig.droppable.strategy = MeasuringStrategy.Always
DndContext->>DndContext: collisionDetection = closestCenter
loop while dragging
DndContext->>DndContext: measure droppables on every update
DndContext->>DndContext: compute collisions via closestCenter
end
SortableListParent->>overlayRenderer: renderOverlay(item) or renderItem(item)
overlayRenderer-->>SortableListParent: ReactNode overlay
SortableListParent->>SortableOverlay: children = overlay
SortableOverlay-->>User: shows drag overlay at correct position
User->>PointerSensor: end drag
PointerSensor->>DndContext: onDragEnd(event)
DndContext->>SortableListParent: onDragEnd callback
SortableListParent->>SortableListParent: setActive(null)
Class diagram for updated SortableListProps and SortableListParentclassDiagram
class SortableListItem {
+string id
+string name
}
class SortableListProps {
+SortableListItem[] items
+function onChange(items: SortableListItem[]): void
+Ref ref
+function renderItem(item: SortableListItem): ReactNode
+function renderOverlay(item: SortableListItem) ReactNode
+number gap
}
class SortableListParent {
+SortableListProps props
+Active active
+function setActive(active: Active): void
+function overlayRenderer(item: SortableListItem): ReactNode
}
class DndContextConfig {
+function collisionDetection(): void
+object measuring
+modifier[] modifiers
}
class measuringConfig {
+object droppable
+MeasuringStrategy strategy
}
class SortableOverlay {
+ReactNode children
}
SortableListParent --> SortableListProps : accepts
SortableListParent --> SortableOverlay : renders
SortableListParent --> DndContextConfig : configures
DndContextConfig --> measuringConfig : uses
SortableListProps --> SortableListItem : contains
SortableListParent --> SortableListItem : activeItem
SortableListParent --> SortableListItem : overlayRenderer
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Contributor
TestGru AssignmentSummary
Files
Tip You can |
Member
|
👍 @arvinxx |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey there - I've reviewed your changes - here's some feedback:
- Consider making
collisionDetectionand themeasuringconfig configurable viaSortableListProps(with sensible defaults ofclosestCenterandMeasuringStrategy.Always) so consumers can tune drag behavior without modifying the component internals. - The new
renderOverlayand fallback torenderItemis nice, but you may want to clarify in the typings or JSDoc that the overlay renderer should be visually independent from list layout (e.g., not relying on flex props) since it’s rendered insideSortableOverlayrather than the list.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Consider making `collisionDetection` and the `measuring` config configurable via `SortableListProps` (with sensible defaults of `closestCenter` and `MeasuringStrategy.Always`) so consumers can tune drag behavior without modifying the component internals.
- The new `renderOverlay` and fallback to `renderItem` is nice, but you may want to clarify in the typings or JSDoc that the overlay renderer should be visually independent from list layout (e.g., not relying on flex props) since it’s rendered inside `SortableOverlay` rather than the list.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
commit: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
SortableListcomponentMeasuringStrategy.Alwaysto ensure accurate position measurement on every dragclosestCentercollision detection for better drag experiencerenderOverlayprop to allow custom drag overlay renderingChanges
Core Fix
measuringconfig withMeasuringStrategy.Alwaysto force re-measurement of element positionsclosestCentercollision detection algorithmNew Feature
renderOverlayprop toSortableListPropsinterfacerenderItemTest Plan
useCustomOverlaytoggle to showcase new featureRelated Issues
Closes LOBE-1959, LOBE-1960, LOBE-1961
🤖 Generated with Claude Code
Summary by Sourcery
Improve SortableList drag-and-drop behavior and support customizable drag overlays.
New Features:
Enhancements: