feat(ui): drag-and-drop reordering for reference images#9081
Open
feat(ui): drag-and-drop reordering for reference images#9081
Conversation
Reference images are already stored as an ordered array and serialized to metadata in order, so graph building and recall automatically respect the new order. This change adds the UI affordance: users can drag reference image thumbnails left/right to reorder them. - Adds `refImagesReordered` reducer with validation against length mismatch, unknown ids, and duplicates. - Adds `singleRefImageDndSource` and `useRefImageDnd` hook using pragmatic-drag-and-drop with horizontal edges. - Wraps `RefImagePreview` in a draggable container with drop indicator. - Disables native `<img>` drag so pragmatic-dnd receives the gesture. - Adds unit tests for the new reducer. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
lstein
requested review from
Pfannkuchensack,
blessedcoolant and
dunkeroni
as code owners
iOS WebKit collapses a flex item to zero width when the width is only implied by a child's aspect ratio. Set aspectRatio on the wrapper Box directly so the thumbnail tile sizes correctly on iPad Chrome/Safari. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The default iOS "Save Image" / "Copy" callout fires on long-press over the thumbnail, which interferes with drag attempts on iPad. Scope the suppression (WebkitTouchCallout + userSelect) to the ref image wrapper only, leaving gallery and other image views unaffected. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.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
2 participants
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
The image edit models are sensitive to the order of the reference images: I have found that the first image tends to have more weight than the second and subsequent ones. In addition, when the prompt refers to images as "image 1, image 2", etc and you want to swap out one ref image for another, the current UI only allows you to add images to the end of the list, setting up cases in which the prompt has to be edited to accommodate.
This PR enables the order of reference images to be interactively changed by dragging and dropping them:
refImagesReorderedreducer with validation (length match, known ids, no duplicates) and unit tests.CanvasEntityGroupList.Test plan
pnpm lintandpnpm test:no-watchpass.🤖 Generated with Claude Code