add visual feedback for pan mode on mobile
Hunter
Wednesday, October 22nd, 2025 at 3:08 PM
383 dragState.isPanMode = true;
384 dragState.initialPanX = imageData.panX;
385 dragState.initialPanY = imageData.panY;
386 + // Add visual feedback class
387 + container.classList.add('pan-mode');
388 }
389 }, 500);
390 }
700 }
701 if (dragState) {
702 dragState.image.container.classList.remove('dragging');
703 + dragState.image.container.classList.remove('pan-mode');
704 dragState = null;
705 document.body.style.cursor = '';
706 document.body.classList.remove('dragging');
237 border-color: var(--accent);
238 }
239
240 +/* Visual feedback for pan mode on touch */
241 +.image-container.pan-mode::after {
242 + border-color: var(--accent);
243 + border-width: 3px;
244 + border-style: solid;
245 + animation: pulse-border 0.25s ease-out;
246 +}
247 +
248 +@keyframes pulse-border {
249 + 0% {
250 + border-width: 2px;
251 + opacity: 0.5;
252 + }
253 + 50% {
254 + border-width: 5px;
255 + opacity: 1;
256 + }
257 + 100% {
258 + border-width: 3px;
259 + opacity: 1;
260 + }
261 +}
262 +
263 +/* Hide dimension labels and resize handles in pan mode */
264 +.image-container.pan-mode .dimension-label {
265 + opacity: 0 !important;
266 +}
267 +
268 +.image-container.pan-mode .resize-handle {
269 + opacity: 0 !important;
270 +}
271 +
272 .image-container.resizing::after {
273 border-color: var(--accent);
274 }
502 .add-images-btn {
503 display: block;
504 }
505 +
506 + /* On touch devices, don't change opacity when dragging */
507 + .image-container.dragging {
508 + opacity: 1;
509 + }
510 }