diff options
| author | elioat <elioat@tilde.institute> | 2024-12-22 11:15:27 -0500 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-12-22 11:15:27 -0500 |
| commit | 6fc5e5177d75606e7be08fe6b9767f54bbe3e72a (patch) | |
| tree | ca93ab55a558bbae6edf293b7e8a77f73c20c669 /js/pixel-art | |
| parent | c9b0fe6ef8e9efe664ba56ccc5d1fa3c2dcf80bf (diff) | |
| download | tour-6fc5e5177d75606e7be08fe6b9767f54bbe3e72a.tar.gz | |
*
Diffstat (limited to 'js/pixel-art')
| -rw-r--r-- | js/pixel-art/pixel/app.js | 20 | ||||
| -rw-r--r-- | js/pixel-art/pixel/index.html | 16 |
2 files changed, 35 insertions, 1 deletions
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; + } </style> </head> <body> @@ -124,8 +135,11 @@ <input type="color" id="colorPicker" value="#000000"> <div id="colorHistory" class="color-history"></div> <button id="exportBtn">Export as PNG</button> + <div class="zoom-controls"> + <button id="zoomInBtn">🔍+</button> + <button id="zoomOutBtn">🔍-</button> + </div> <button id="resetBtn">Reset</button> - <!--<input type="file" id="importBtn" accept="image/png">--> </div> <script src="app.js"></script> </body> |