feat(ui): locate in gallery image context menu #8434
Merged
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
csehatt741
requested review from
psychedelicious,
blessedcoolant,
maryhipp and
hipsterusername
as code owners
|
This is a simple and naive implementation, as To provide better user experience, state could be shared via Redux, but I'm not sure it is within the scope of this change. |
Three changes needed to make scrollIntoView and "Locate in Gallery" work reliably. 1. Use setTimeout to work around race condition with scrollIntoView in gallery. It was possible to call scrollIntoView before react-virtuoso was ready. I think react-virtuoso was initialized but hadn't rendered/measured its items yet, so when we scroll to e.g. index 742, the items have a zero height, so it doesn't actually scroll down. Then the items render. Setting a timeout here defers the scroll until after the next event loop cycle, by which time we expect react-virutoso to be ready. 2. Ensure the scollIntoView effect in gallery triggers any time the selection is touched by making its dependency the array of selected images, not just the last selected image name. The "locate in gallery" functionality works by selecting an image. There's a reactive effect in the gallery that runs when the last selected image changes and scrolls it into view. But if you already have an image selected, selecting it again will not change the image name bc it is a string primitive. The useEffect ignores the selection. So, if you clicked "locate in gallery" on an image that was already selected, it wouldn't be scrolled into view - even if you had already scrolled away from it. To work around this, the effect now uses the whole selection array as its dependency. Whenever the selection changes, we get a new array, which triggers the effect. 3. Gallery slice had some checks to avoid creating a new array of selected image names in state when the selected images didn't change. For example, if image "abc" was selected, and we selected "abc" again, instead of creating a new array with the same "abc" image, we bailed early. IIRC this optimization addressed a rerender issue long ago. This optimization needs to be removed in order for fix invoke-ai#2 above to work. We now _want_ a new array whenever selection is set - even if it didn't actually change.
… locate e.g. when on a tab that doesn't have a gallery, or the image is intermediate
psychedelicious
force-pushed
the
feat/locate-in-gallery
branch
from
6329c5f to
d070b27
Compare
… finish before selecting image
psychedelicious
approved these changes
Aug 18, 2025
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
A new feature was implemented to locate any images in the gallery via the image context menu.
NavigationApiwas extended by two new functions,expandLeftPanelandexpandRightPanel, to expand the right panel on which the image gallery locatedcollapseandexpand, were extended inuseCollapsibleGridviewPanelto check the status of the panel and only collapse/expand when it is required in order to avoid unnecessary resizing of the paneluseGalleryPanelcustom hook was created to encapsulate gallery related configuration ofuseCollapsibleGridviewPanelGalleryPanelwas refactored to useuseGalleryPanelcustom hookImageMenuItemLocateInGaleryimage context menu item was created to locate any images in the gallerySingleSelectionMenuItemswas extended by the newImageMenuItemLocateInGalerymenu itemsentToCanvasandsentToUpscale, was added toen.jsonRelated Issues / Discussions
Closes #7867
Checklist
What's Newcopy (if doing a release after this PR)