InvokeAI/invokeai/frontend/web
psychedelicious 4075a81676 feat(ui): gallery image selection ux
The selection logic is a bit complicated. We have image selection and pagination, both of which can be triggered using the mouse or hotkeys. We have viewer image selection and comparison image selection, which is determined by the alt key.

This change ties the room together with these behaviours:

- Changing the page using pagination buttons never changes the selection.
- Changing the selected image using arrows may change the page, if the arrow key pressed would select an image off the current page.
  - `right` on the last image of the current page goes to the next page
  - `down` on the last row of images goes to the next page
  - `left` on the first image of the current page goes to the previous page
  - `up` on the first row of images goes to the previous page
- If `alt` is held when using arrow keys, we change the page, but we only change the comparison image selection.
- When using arrow keys, if the page has changed since the last image was selected, the selection is reset to the first image on the page.
- The next/previous buttons on the image viewer do the same thing as `left` and `right` without `alt`.
- When clicking an image in the gallery:
  - If no modifier keys are held, the image is exclusively selected.
  - If `ctrl` or `meta` are held, the image's selection status is toggled.
  - If `shift` is held, all images from the last-selected image to the image are selected. If there are no images on the current page, the selection is unchanged.
  - If `alt` is held, the image is set as the compare image.
- `ctrl+a` and `meta+a` add the current page to the selection.

The logic for gallery navigation and selection is now pretty hairy. It's spread across 3 hooks, a listener, redux slice, components.

When we next make changes to this part of the app, we should consider consolidating some of the related logic. Probably most of it can go into a single listener and make it much simpler to grok.
2024-07-02 13:52:32 +10:00
..
.storybook chore(ui): lint 2024-04-19 09:32:56 -04:00
patches feat(ui): patch reselect to use lruMemoize only 2024-01-06 00:03:07 +11:00
public (ui) clarify auto-add options 2024-07-02 06:44:09 +10:00
scripts build(ui): add eslint no-console rule 2024-05-15 14:09:44 +10:00
src feat(ui): gallery image selection ux 2024-07-02 13:52:32 +10:00
static/docs feat(ui): update assets 2024-01-12 08:02:59 +11:00
__init__.py Run python black 2023-07-28 09:46:44 -04:00
.eslintignore fix(ui): fix workflow editor model selector, excise ONNX 2024-01-03 13:18:50 +11:00
.eslintrc.js build(ui): add eslint no-console rule 2024-05-15 14:09:44 +10:00
.gitignore tests(ui): set up vitest coverage 2024-05-15 14:09:44 +10:00
.prettierignore fix(ui): fix workflow editor model selector, excise ONNX 2024-01-03 13:18:50 +11:00
.prettierrc.js chore(ui): use new prettier config 2024-01-28 19:57:53 +11:00
index.html Add ID to the HTML link element 2024-04-15 07:54:36 +10:00
knip.ts Scope project files to src dir (enables --production) 2024-04-15 09:14:49 +10:00
package.json feat(ui): abstract out and share logic between comparisons 2024-06-02 15:30:00 +10:00
pnpm-lock.yaml feat(ui): abstract out and share logic between comparisons 2024-06-02 15:30:00 +10:00
README.md docs: move frontend docs to mkdocs 2024-03-13 22:43:20 +11:00
tsconfig.json build(ui): enable TS strictPropertyInitialization 2024-05-15 14:09:44 +10:00
tsconfig.node.json fix(ui): fix package build 2024-03-01 10:42:33 +11:00
vite.config.mts tests(ui): set up vitest coverage 2024-05-15 14:09:44 +10:00