diff --git a/public/index.html b/public/index.html index 0b2060d..3110f45 100644 --- a/public/index.html +++ b/public/index.html @@ -1226,35 +1226,37 @@ function renderMoodboard() { imgDiv.style.backgroundImage = `url(${item.image})`; imgDiv.style.backgroundPosition = `${item.posX ?? 50}% ${item.posY ?? 50}%`; } - // Click to upload (only if no image or double-click) - imgDiv.ondblclick = () => { moodUploadTarget = i; document.getElementById('mood-file-input').click(); }; - if (!hasImg) imgDiv.onclick = () => { moodUploadTarget = i; document.getElementById('mood-file-input').click(); }; - // Drag to reposition - if (hasImg) { - let startX, startY, startPosX, startPosY; + if (!hasImg) { + imgDiv.onclick = () => { moodUploadTarget = i; document.getElementById('mood-file-input').click(); }; + } else { + // Drag to reposition (2D) — double-click to replace image + let startX, startY, startPosX, startPosY, didDrag; const onMove = (e) => { + const dx = e.clientX - startX, dy = e.clientY - startY; + if (!didDrag && Math.abs(dx) < 4 && Math.abs(dy) < 4) return; + didDrag = true; const rect = imgDiv.getBoundingClientRect(); - const dx = ((e.clientX - startX) / rect.width) * -100; - const dy = ((e.clientY - startY) / rect.height) * -100; - item.posX = Math.max(0, Math.min(100, startPosX + dx)); - item.posY = Math.max(0, Math.min(100, startPosY + dy)); + item.posX = Math.max(0, Math.min(100, startPosX + (dx / rect.width) * -80)); + item.posY = Math.max(0, Math.min(100, startPosY + (dy / rect.height) * -80)); imgDiv.style.backgroundPosition = `${item.posX}% ${item.posY}%`; }; const onUp = () => { imgDiv.classList.remove('dragging'); window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); - saveVisionSection('moodboard', JSON.stringify(items)); + if (didDrag) saveVisionSection('moodboard', JSON.stringify(items)); }; imgDiv.addEventListener('mousedown', (e) => { if (e.button !== 0) return; e.preventDefault(); + didDrag = false; imgDiv.classList.add('dragging'); startX = e.clientX; startY = e.clientY; startPosX = item.posX ?? 50; startPosY = item.posY ?? 50; window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); }); + imgDiv.addEventListener('dblclick', () => { moodUploadTarget = i; document.getElementById('mood-file-input').click(); }); } const caption = document.createElement('div');