From 6fc5e5177d75606e7be08fe6b9767f54bbe3e72a Mon Sep 17 00:00:00 2001 From: elioat Date: Sun, 22 Dec 2024 11:15:27 -0500 Subject: * --- js/pixel-art/pixel/app.js | 20 ++++++++++++++++++++ js/pixel-art/pixel/index.html | 16 +++++++++++++++- 2 files changed, 35 insertions(+), 1 deletion(-) (limited to 'js/pixel-art') diff --git a/js/pixel-art/pixel/app.js b/js/pixel-art/pixel/app.js index 2066db5..5da21b0 100644 --- a/js/pixel-art/pixel/app.js +++ b/js/pixel-art/pixel/app.js @@ -17,6 +17,8 @@ let isDrawing = false; let lastX = null; let lastY = null; let lastCell = null; +const MIN_CELL_SIZE = 4; +const MAX_CELL_SIZE = 64; // Event Listeners canvas.addEventListener('mousedown', handleInputStart); @@ -32,6 +34,8 @@ document.getElementById('resetBtn').addEventListener('click', handleReset); document.getElementById('exportBtn').addEventListener('click', exportToPNG); window.addEventListener('keydown', handlePan); paletteToggle.addEventListener('click', togglePalette); +document.getElementById('zoomInBtn').addEventListener('click', () => handleZoom(1.5)); +document.getElementById('zoomOutBtn').addEventListener('click', () => handleZoom(0.666)); // Initialization resizeCanvas(); @@ -269,4 +273,20 @@ function togglePalette() { paletteToggle.classList.add('hidden'); paletteToggle.innerHTML = '🎨'; } +} + +function handleZoom(factor) { + const newCellSize = Math.max(MIN_CELL_SIZE, Math.min(MAX_CELL_SIZE, cellSize * factor)); + + if (newCellSize === cellSize) return; + + const centerX = (canvas.width / 2 - offsetX) / cellSize; + const centerY = (canvas.height / 2 - offsetY) / cellSize; + + cellSize = newCellSize; + + centerGrid(); + + drawGrid(); + saveToLocalStorage(); } \ No newline at end of file diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html index 610161c..c864a98 100644 --- a/js/pixel-art/pixel/index.html +++ b/js/pixel-art/pixel/index.html @@ -109,6 +109,17 @@ bottom: 10px; } } + + .zoom-controls { + display: flex; + gap: 5px; + margin-top: 10px; + } + + .zoom-controls button { + flex: 1; + padding: 4px; + } @@ -124,8 +135,11 @@

+ + +

- -- cgit 1.4.1-2-gfad0