memori

commit 115d620a134bd99809ddf2811cee0275f4ca6f8c
parent fd33863fdd93fac480711a5eab7252c5aac268e9
Author: Hunter
Date:   Wed, 22 Oct 2025 15:08:09 -0400

add visual feedback for pan mode on mobile

Diffstat:
M
script.js
 | 
3
+++
M
style.css
 | 
37
+++++++++++++++++++++++++++++++++++++

2 files changed, 40 insertions(+), 0 deletions(-)
diff --git a/script.js b/script.js
@@ -383,6 +383,8 @@ function setupImageHandlers(imageData) {
 					dragState.isPanMode = true;
 					dragState.initialPanX = imageData.panX;
 					dragState.initialPanY = imageData.panY;
+					// Add visual feedback class
+					container.classList.add('pan-mode');
 				}
 			}, 500);
 		}
@@ -698,6 +700,7 @@ function clearDragState() {
 	}
 	if (dragState) {
 		dragState.image.container.classList.remove('dragging');
+		dragState.image.container.classList.remove('pan-mode');
 		dragState = null;
 		document.body.style.cursor = '';
 		document.body.classList.remove('dragging');
diff --git a/style.css b/style.css
@@ -237,6 +237,38 @@ body {
 	border-color: var(--accent);
 }
 
+/* Visual feedback for pan mode on touch */
+.image-container.pan-mode::after {
+	border-color: var(--accent);
+	border-width: 3px;
+	border-style: solid;
+	animation: pulse-border 0.25s ease-out;
+}
+
+@keyframes pulse-border {
+	0% {
+		border-width: 2px;
+		opacity: 0.5;
+	}
+	50% {
+		border-width: 5px;
+		opacity: 1;
+	}
+	100% {
+		border-width: 3px;
+		opacity: 1;
+	}
+}
+
+/* Hide dimension labels and resize handles in pan mode */
+.image-container.pan-mode .dimension-label {
+	opacity: 0 !important;
+}
+
+.image-container.pan-mode .resize-handle {
+	opacity: 0 !important;
+}
+
 .image-container.resizing::after {
 	border-color: var(--accent);
 }
@@ -470,4 +502,9 @@ body.dragging * {
 	.add-images-btn {
 		display: block;
 	}
+
+	/* On touch devices, don't change opacity when dragging */
+	.image-container.dragging {
+		opacity: 1;
+	}
 }