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');