etienne-delvarre/tdb-rdb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: moodboard drag — dead zone, reduced sensitivity, no drag/dblclick conflict

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Etienne Delvarre
2026-05-29 14:35:01 +02:00
parent 9ee2960b77
commit 4c31b3ad97
1 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+13 -11
View File
@@ -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');