*

1 files changed, 23 insertions, 0 deletions

diff --git a/js/pixel-art/pixel/app.js b/js/pixel-art/pixel/app.js
index 9dc9cd8..1fab676 100644
--- a/js/pixel-art/pixel/app.js
+++ b/js/pixel-art/pixel/app.js
@@ -36,6 +36,10 @@ window.addEventListener('keydown', handlePan);
 paletteToggle.addEventListener('click', togglePalette);
 document.getElementById('zoomInBtn').addEventListener('click', () => handleZoom(1.5));
 document.getElementById('zoomOutBtn').addEventListener('click', () => handleZoom(0.666));
+document.getElementById('panUpBtn').addEventListener('click', () => handlePanButton('up'));
+document.getElementById('panDownBtn').addEventListener('click', () => handlePanButton('down'));
+document.getElementById('panLeftBtn').addEventListener('click', () => handlePanButton('left'));
+document.getElementById('panRightBtn').addEventListener('click', () => handlePanButton('right'));
 
 // Initialization
 resizeCanvas();
@@ -293,4 +297,23 @@ function handleZoom(factor) {
     
     drawGrid();
     saveToLocalStorage();
+}
+
+function handlePanButton(direction) {
+    const step = cellSize;
+    switch(direction) {
+        case 'up':
+            offsetY += step;
+            break;
+        case 'down':
+            offsetY -= step;
+            break;
+        case 'left':
+            offsetX += step;
+            break;
+        case 'right':
+            offsetX -= step;
+            break;
+    }
+    drawGrid();
 }
\ No newline at end of file