memori

commit c1004fcb8a7d279867a0f9337001aa56c01f1319
parent a77fce7377963734dd378fc0398455c88ea1c8af
Author: Hunter
Date:   Fri, 31 Jul 2026 11:53:28 -0400

fade out multi-select marquee on release

Diffstat:
M
resources/selection.js
 | 
13
++++++++++++-
M
resources/style.css
 | 
11
+++++++++++

2 files changed, 23 insertions(+), 1 deletion(-)
diff --git a/resources/selection.js b/resources/selection.js
@@ -2,6 +2,7 @@
 
 let selectedImages = new Set();
 let marqueeState = null;
+const MARQUEE_FADE_MS = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--marquee-fade'));
 
 const selectionBox = document.createElement('div');
 selectionBox.className = 'selection-box';
@@ -88,11 +89,21 @@ function handleMarqueeMove(clientX, clientY) {
 	updateMarquee();
 }
 
+function fadeOutMarquee() {
+	const ghost = selectionBox.cloneNode();
+	ghost.classList.add('releasing');
+	grid.appendChild(ghost);
+	setTimeout(() => ghost.remove(), MARQUEE_FADE_MS + 50);
+}
+
 function endMarquee() {
 	if (!marqueeState) return;
 	marqueeState = null;
-	selectionBox.style.display = 'none';
 	document.body.classList.remove('selecting');
+
+	if (selectionBox.style.display === 'none') return;
+	fadeOutMarquee();
+	selectionBox.style.display = 'none';
 }
 
 document.addEventListener('mousemove', (e) => handleMarqueeMove(e.clientX, e.clientY));
diff --git a/resources/style.css b/resources/style.css
@@ -97,6 +97,7 @@
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 
 	--theme-transition: 250ms ease;
+	--marquee-fade: 75ms;
 	transition:
 		--desk var(--theme-transition),
 		--page var(--theme-transition),
@@ -377,6 +378,16 @@ body.dragging * {
 	z-index: 999999;
 }
 
+.selection-box.releasing {
+	animation: fade-out-marquee var(--marquee-fade) ease-out forwards;
+}
+
+@keyframes fade-out-marquee {
+	to {
+		opacity: 0;
+	}
+}
+
 body.selecting,
 body.selecting * {
 	cursor: crosshair !important;