Small Icons On Desktop -
// reset positions to a nice grid (based on current desktop size) function resetToDefaultGrid() const containerRect = desktopEl.getBoundingClientRect(); const marginX = 35; const marginY = 35; const colSpacing = 110; const rowSpacing = 120; const columns = 3; iconsState.forEach((icon, idx) => const col = idx % columns; const row = Math.floor(idx / columns); let x = marginX + col * colSpacing; let y = marginY + row * rowSpacing; // ensure within viewport borders const maxX = Math.max(20, containerRect.width - 100); const maxY = Math.max(20, containerRect.height - 90); x = Math.min(maxX, Math.max(10, x)); y = Math.min(maxY, Math.max(10, y)); icon.x = x; icon.y = y; ); persistPositions(); renderAllIcons(); showToast("✨ Icons rearranged to default grid", 1200);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Desktop Icons · Interactive Canvas</title> <style> * margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* prevent text selection while dragging icons */ small icons on desktop
// helper: remove existing context menu function removeContextMenu() if (activeContextMenu && activeContextMenu.parentNode) activeContextMenu.remove(); activeContextMenu = null; // reset positions to a nice grid (based
const desktopEl = document.getElementById('desktopContainer'); const marginX = 35