// clamp all icon positions to visible area (on window resize) function clampIconPositions() const containerRect = desktopEl.getBoundingClientRect(); let changed = false; iconsState.forEach(icon => const maxX = Math.max(20, containerRect.width - 95); const maxY = Math.max(20, containerRect.height - 85); if (icon.x > maxX) icon.x = maxX; changed = true; if (icon.y > maxY) icon.y = maxY; changed = true; if (icon.x < 5) icon.x = 5; changed = true; if (icon.y < 5) icon.y = 5; changed = true; ); if (changed) persistPositions(); renderAllIcons(); // re-render with updated coords else // still re-render to keep consistent? we call after resize anyway renderAllIcons();
// ---- Drag & Drop logic (mouse) ---- function onMouseDown(e, icon) if (e.button !== 0) return; // left click only for dragging e.preventDefault(); dragTarget = icon; const iconDiv = e.currentTarget; activeIconElement = iconDiv; // bring to front iconDiv.style.zIndex = currentZIndex++; const startRect = iconDiv.getBoundingClientRect(); initialLeft = startRect.left; initialTop = startRect.top; dragStartX = e.clientX; dragStartY = e.clientY; const onMouseMove = (moveEvent) => if (!dragTarget) return; moveEvent.preventDefault(); const dx = moveEvent.clientX - dragStartX; const dy = moveEvent.clientY - dragStartY; let newX = initialLeft + dx; let newY = initialTop + dy; // boundary constraints relative to desktop container const containerRect = desktopEl.getBoundingClientRect(); const maxX = containerRect.width - 88; const maxY = containerRect.height - 78; newX = Math.min(maxX, Math.max(2, newX)); newY = Math.min(maxY, Math.max(2, newY)); if (activeIconElement) activeIconElement.style.left = `$newXpx`; activeIconElement.style.top = `$newYpx`; ; const onMouseUp = (upEvent) => if (dragTarget && activeIconElement) // commit final position from actual element style const leftVal = parseFloat(activeIconElement.style.left); const topVal = parseFloat(activeIconElement.style.top); if (!isNaN(leftVal) && !isNaN(topVal)) dragTarget.x = leftVal; dragTarget.y = topVal; persistPositions(); dragTarget = null; activeIconElement = null; document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); removeContextMenu(); // also remove menu while dragging ; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); removeContextMenu(); // dismiss any open context menu when starting drag small icons on desktop
// save icons positions to localStorage function persistPositions() const positions = iconsState.map(icon => ( id: icon.id, x: icon.x, y: icon.y )); localStorage.setItem('desktopIconsLayout', JSON.stringify(positions)); // clamp all icon positions to visible area
<div class="desktop" id="desktopContainer"></div> <div class="status-note">✨ Right-click icon → remove | Double‑click to open</div> let changed = false
// helper: remove existing context menu function removeContextMenu() if (activeContextMenu && activeContextMenu.parentNode) activeContextMenu.remove(); activeContextMenu = null;