commit 8c7c579f69871e6aab85a1d3fce55396660389a5
parent 906fb3fc22b1e865659a083d4de02d38b5bddd8c
Author: Hunter
Date: Wed, 29 Jul 2026 15:37:07 -0400
keep multiselections on top while dragging; don't reorder them when hovering
Diffstat:
2 files changed, 17 insertions(+), 5 deletions(-)
diff --git a/resources/images.js b/resources/images.js
@@ -377,3 +377,10 @@ function bringToFront(container) {
highestZIndex++;
container.style.zIndex = highestZIndex;
}
+
+// Raise a whole group above everything else, keeping its members' order relative to one another
+function bringGroupToFront(group) {
+ [...group]
+ .sort((a, b) => (parseInt(a.container.style.zIndex, 10) || 0) - (parseInt(b.container.style.zIndex, 10) || 0))
+ .forEach(img => bringToFront(img.container));
+}
diff --git a/resources/pointer.js b/resources/pointer.js
@@ -3,8 +3,9 @@
function setupImageHandlers(imageData) {
const container = imageData.container;
- // Bring to front on hover
+ // Bring to front on hover, except within a selection, where it would shuffle the group's paint order
container.addEventListener('mouseenter', () => {
+ if (isSelected(imageData)) return;
bringToFront(container);
});
@@ -18,6 +19,7 @@ function setupImageHandlers(imageData) {
// Dragging a selected image moves the whole selection
const group = isSelected(imageData) ? Array.from(selectedImages) : [imageData];
+ bringGroupToFront(group);
const bounds = selectionBounds(group);
dragState = {
@@ -70,10 +72,13 @@ function setupImageHandlers(imageData) {
container.addEventListener('touchstart', (e) => {
if (e.target.classList.contains('resize-handle')) return;
- // Bring to front on touch
- bringToFront(container);
-
- if (!isSelected(imageData)) clearSelection();
+ // Bring to front on touch; a selected image is raised with its group instead
+ if (isSelected(imageData)) {
+ bringGroupToFront(Array.from(selectedImages));
+ } else {
+ bringToFront(container);
+ clearSelection();
+ }
if (e.touches.length === 1) {
// Single touch - start drag (or long press for pan)