Repository navigation
feat(assets): dnd kit for asset-to-timeline drag - #75
Merged
Merged
Conversation
Replaces the native HTML5 dataTransfer drag between the Assets tab and the timeline with @dnd-kit/react. Asset cells and audio rows become useDraggable sources typed by asset kind, lanes become useDroppable targets with built-in type acceptance (video lanes take video, audio lanes audio, text lanes nothing), and the Timeline resolves drops itself through useDragDropMonitor — computing the drop time from the lane rect and pointer position at the current zoom, with refs keeping the handler fresh across renders. dnd kit's default feedback replaces the browser drag ghost, accepting lanes highlight while hovered, dragged items dim, and the keyboard sensor makes the flow accessible for free. The ASSET_MIME constant and native drop plumbing are gone. Co-authored-by: Cursor <cursoragent@cursor.com>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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
Per feedback: the Assets-tab drag now runs on dnd kit (
@dnd-kit/react0.5) instead of native HTML5 drag-and-drop.useDraggablewithtype= asset kind and the asset id as data; dragged items dim and dnd kit's feedback plugin renders the drag preview.useDroppablewith type-basedaccept(video lanes ← video assets, audio lanes ← audio, text lanes accept nothing — their clips are sketched). Accepting lanes get an accent highlight while hovered.useDragDropMonitorand computes the drop time from the lane's rect +operation.position.current.xat the current zoom; placement logic (video clip push,placeAudioOnTrack) is unchanged. Ref-forwarded handlers keep closures fresh regardless of the library's registration timing.ASSET_MIMEand all native dataTransfer plumbing are removed. Keyboard-sensor accessibility comes with the kit.Dependency change — restart
npm run devso vite picks up the new package.Test plan
Made with Cursor