diff options
-rw-r--r-- | js/pixel-art/pixel/app.js | 16 |
1 files changed, 6 insertions, 10 deletions
diff --git a/js/pixel-art/pixel/app.js b/js/pixel-art/pixel/app.js index 569201e..382fc90 100644 --- a/js/pixel-art/pixel/app.js +++ b/js/pixel-art/pixel/app.js @@ -24,7 +24,7 @@ let currentCanvasIndex = 0; let globalOffsetX = 0; let globalOffsetY = 0; -// Event Listeners + canvas.addEventListener('mousedown', handleInputStart); canvas.addEventListener('mousemove', handleInputMove); canvas.addEventListener('mouseup', handleInputEnd); @@ -47,9 +47,11 @@ document.getElementById('panRightBtn').addEventListener('click', () => handlePan document.getElementById('centerViewBtn').addEventListener('click', resetView); document.getElementById('newCanvasBtn').addEventListener('click', addNewCanvas); + resizeCanvas(); loadFromLocalStorage(); + function addNewCanvas() { canvases.push({ grid: Array(gridWidth).fill().map(() => Array(gridHeight).fill(null)), @@ -82,7 +84,7 @@ function centerGrid() { if (index === 0) { canvasData.offsetX = Math.max((canvas.width - (gridWidth * cellSize * canvases.length) - (cellSize * (canvases.length - 1))) / 2, 0); } else { - // Position each canvas just one cell width apart + // Position each canvas one cell width apart const previousCanvas = canvases[index - 1]; canvasData.offsetX = previousCanvas.offsetX + (gridWidth * cellSize) + cellSize; } @@ -93,7 +95,6 @@ function drawGrid() { ctx.fillStyle = 'teal'; ctx.fillRect(0, 0, canvas.width, canvas.height); - // Draw all canvases canvases.forEach((canvasData, index) => { const xOffset = canvasData.offsetX + globalOffsetX; @@ -155,7 +156,6 @@ function handleReset() { const confirmReset = confirm("Are you sure you want to reset? This will clear your drawing and settings."); if (confirmReset) { - // Reset to defaults gridWidth = defaultGridWidth; gridHeight = defaultGridHeight; cellSize = 16; @@ -246,7 +246,7 @@ function loadFromLocalStorage() { addNewCanvas(); } - // Always ensure there's at least one canvas + // Ensure there's at least one canvas if (canvases.length === 0) { addNewCanvas(); } @@ -258,7 +258,7 @@ function loadFromLocalStorage() { function exportToPNG() { // Prompt for filename const filename = prompt("Enter a name for your file(s)", "pixel-art"); - if (!filename) return; // User cancelled + if (!filename) return; // Cancelled canvases.forEach((canvasData, index) => { const tempCanvas = document.createElement('canvas'); @@ -273,7 +273,6 @@ function exportToPNG() { } } - // Create padded number for multiple files const paddedNumber = String(index + 1).padStart(2, '0'); const finalFilename = canvases.length > 1 ? `${filename}-${paddedNumber}.png` @@ -392,9 +391,6 @@ function handleZoom(factor) { if (newCellSize === cellSize) return; - // const centerX = (canvas.width / 2 - offsetX) / cellSize; - // const centerY = (canvas.height / 2 - offsetY) / cellSize; - cellSize = newCellSize; centerGrid(); |