[bug]: Minor bug, selection of multiple images in Gallery

[mcbexx]

Is there an existing issue for this problem?

• I have searched the existing issues

Install method

Invoke's Launcher

Operating system

Windows

GPU vendor

Nvidia (CUDA)

GPU model

5070 ti

GPU VRAM

16

Version number

6.4.0

Browser

No response

System Information

No response

What happened

If you select multiple images in the gallery by clicking the first image, holding down shift and selecting the second image, the image in the image viewer port changes accordingly (first image -> second image). This works correctly when the second image comes after the first image in the gallery view.

However, if the first image you select comes after the second image in the gallery (selection order is reversed), the image viewport will switch to the image right before the first selected image and not the second selected image. This is unexpected behaviour and can be confusing.

Here's a short clip to clarify:

Invoke_Community_Edition_iwkE4lGDIt.mp4

What you expected to happen

The shift-click range selection should display the second selected image regardless of the "direction" the selection is created.

How to reproduce the problem

First click on image no. 1 in the gallery. Image Viewer shows image no. 1
Hold shift and click image no. 6 -> Images 1 to 6 are selected -> Image Viewer shows image no. 6.
This is the correct behaviour.

Now, select "in the other direction":
Clear selection by clicking on image no. 6.
Image Viewer shows image no. 6
Hold shift and click image no. 1 -> Images 1 to 6 are selected -> Image Viewer shows image no. 5 (should be no. 1).

Additional context

No response

Discord username

No response

[psychedelicious]

Think we need to add logic to respect the "direction" in this logic:

InvokeAI/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx

Lines 111 to 122 in 28a77ab

	} else if (shiftKey) {
	const rangeEndImageName = imageName;
	const lastSelectedImage = selection.at(-1);
	const lastClickedIndex = imageNames.findIndex((name) => name === lastSelectedImage);
	const currentClickedIndex = imageNames.findIndex((name) => name === rangeEndImageName);
	if (lastClickedIndex > -1 && currentClickedIndex > -1) {
	// We have a valid range!
	const start = Math.min(lastClickedIndex, currentClickedIndex);
	const end = Math.max(lastClickedIndex, currentClickedIndex);
	const imagesToSelect = imageNames.slice(start, end + 1);
	dispatch(selectionChanged(uniq(selection.concat(imagesToSelect))));
	}