noxious/spritesheet-generator
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Debug

Browse Source
This commit is contained in:
Dennis Postma 2025-04-03 02:55:29 +02:00
parent 362efc7bda
commit ca28f66997
2 changed files with 183 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/DropZone.vue
View File

@ -47,7 +47,9 @@
};
const handleFiles = async (files: FileList) => {
console.log('Handling files:', files.length);
const imageFiles = Array.from(files).filter(file => file.type.startsWith('image/'));
console.log('Image files filtered:', imageFiles.length);
if (imageFiles.length === 0) {
store.showNotification('Please upload image files only', 'error');
@ -55,21 +57,30 @@
}
const newSprites: Sprite[] = [];
let errorCount = 0;
for (let i = 0; i < imageFiles.length; i++) {
const file = imageFiles[i];
console.log(`Processing file ${i+1}/${imageFiles.length}:`, file.name, file.type, file.size);
try {
const sprite = await createSpriteFromFile(file, i);
newSprites.push(sprite);
console.log(`Successfully processed ${file.name}`);
} catch (error) {
errorCount++;
console.error('Error loading sprite:', error);
store.showNotification(`Failed to load ${file.name}`, 'error');
}
}
if (newSprites.length > 0) {
console.log('Adding sprites to store:', newSprites.length);
store.addSprites(newSprites);
emit('files-uploaded', newSprites);
store.showNotification(`Added ${newSprites.length} sprites successfully`);
} else if (errorCount > 0) {
store.showNotification(`Failed to load all ${errorCount} sprites`, 'error');
}
};
@ -78,9 +89,26 @@
const reader = new FileReader();
reader.onload = e => {
if (!e.target?.result) {
console.error('Failed to read file:', file.name);
reject(new Error(`Failed to read file: ${file.name}`));
return;
}
const img = new Image();
// Set crossOrigin to anonymous to handle CORS issues
img.crossOrigin = 'anonymous';
img.onload = () => {
// Verify the image has loaded properly
if (img.width === 0 || img.height === 0) {
console.error('Image loaded with invalid dimensions:', file.name, img.width, img.height);
reject(new Error(`Image has invalid dimensions: ${file.name}`));
return;
}
console.log('Sprite created successfully:', file.name, img.width, img.height);
resolve({
img,
width: img.width,
@ -93,11 +121,20 @@
});
};
img.onerror = reject;
img.src = e.target?.result as string;
img.onerror = (error) => {
console.error('Error loading image:', file.name, error);
reject(new Error(`Failed to load image: ${file.name}`));
};
// Set the source after setting up event handlers
img.src = e.target.result as string;
};
reader.onerror = (error) => {
console.error('Error reading file:', file.name, error);
reject(new Error(`Error reading file: ${file.name}`));
};
reader.onerror = reject;
reader.readAsDataURL(file);
});
};

182
src/composables/useSpritesheetStore.ts
View File

@ -58,70 +58,174 @@ export function useSpritesheetStore() {
});
function addSprites(newSprites: Sprite[]) {
sprites.value.push(...newSprites);
sprites.value.sort((a, b) => a.uploadOrder - b.uploadOrder);
updateCellSize();
autoArrangeSprites();
console.log('Store: Adding sprites', newSprites.length);
if (newSprites.length === 0) {
console.warn('Store: Attempted to add empty sprites array');
return;
}
try {
// Validate sprites before adding them
const validSprites = newSprites.filter(sprite => {
if (!sprite.img || sprite.width <= 0 || sprite.height <= 0) {
console.error('Store: Invalid sprite detected', sprite);
return false;
}
return true;
});
if (validSprites.length === 0) {
console.error('Store: No valid sprites to add');
return;
}
console.log('Store: Adding valid sprites', validSprites.length);
sprites.value.push(...validSprites);
sprites.value.sort((a, b) => a.uploadOrder - b.uploadOrder);
updateCellSize();
autoArrangeSprites();
console.log('Store: Sprites added successfully, total count:', sprites.value.length);
} catch (error) {
console.error('Store: Error adding sprites:', error);
}
}
function updateCellSize() {
if (sprites.value.length === 0) return;
console.log('Store: Updating cell size');
if (sprites.value.length === 0) {
console.log('Store: No sprites to update cell size');
return;
}
let maxWidth = 0;
let maxHeight = 0;
try {
let maxWidth = 0;
let maxHeight = 0;
sprites.value.forEach(sprite => {
maxWidth = Math.max(maxWidth, sprite.width);
maxHeight = Math.max(maxHeight, sprite.height);
});
sprites.value.forEach(sprite => {
if (sprite.width <= 0 || sprite.height <= 0) {
console.warn('Store: Sprite with invalid dimensions detected', sprite);
return;
}
maxWidth = Math.max(maxWidth, sprite.width);
maxHeight = Math.max(maxHeight, sprite.height);
});
cellSize.width = maxWidth;
cellSize.height = maxHeight;
if (maxWidth === 0 || maxHeight === 0) {
console.error('Store: Failed to calculate valid cell size');
return;
}
updateCanvasSize();
console.log('Store: Cell size calculated', maxWidth, maxHeight);
cellSize.width = maxWidth;
cellSize.height = maxHeight;
updateCanvasSize();
} catch (error) {
console.error('Store: Error updating cell size:', error);
}
}
function updateCanvasSize() {
if (!canvas.value || sprites.value.length === 0) return;
console.log('Store: Updating canvas size');
if (!canvas.value) {
console.error('Store: Canvas not available for size update');
return;
}
const totalSprites = sprites.value.length;
const cols = columns.value;
const rows = Math.ceil(totalSprites / cols);
if (sprites.value.length === 0) {
console.log('Store: No sprites to determine canvas size');
return;
}
canvas.value.width = cols * cellSize.width;
canvas.value.height = rows * cellSize.height;
try {
const totalSprites = sprites.value.length;
const cols = columns.value;
const rows = Math.ceil(totalSprites / cols);
if (cellSize.width <= 0 || cellSize.height <= 0) {
console.error('Store: Invalid cell size for canvas update', cellSize);
return;
}
const newWidth = cols * cellSize.width;
const newHeight = rows * cellSize.height;
console.log('Store: Setting canvas size to', newWidth, newHeight);
canvas.value.width = newWidth;
canvas.value.height = newHeight;
} catch (error) {
console.error('Store: Error updating canvas size:', error);
}
}
function autoArrangeSprites() {
if (sprites.value.length === 0) return;
console.log('Store: Auto-arranging sprites');
if (sprites.value.length === 0) {
console.log('Store: No sprites to arrange');
return;
}
sprites.value.forEach((sprite, index) => {
const column = index % columns.value;
const row = Math.floor(index / columns.value);
try {
if (cellSize.width <= 0 || cellSize.height <= 0) {
console.error('Store: Invalid cell size for auto-arranging', cellSize);
return;
}
sprite.x = column * cellSize.width;
sprite.y = row * cellSize.height;
});
sprites.value.forEach((sprite, index) => {
const column = index % columns.value;
const row = Math.floor(index / columns.value);
renderSpritesheetPreview();
sprite.x = column * cellSize.width;
sprite.y = row * cellSize.height;
console.log(`Store: Positioned sprite ${index} at (${sprite.x}, ${sprite.y})`);
});
if (!animation.isPlaying && animation.manualUpdate && isModalOpen.value) {
renderAnimationFrame(animation.currentFrame);
renderSpritesheetPreview();
if (!animation.isPlaying && animation.manualUpdate && isModalOpen.value) {
renderAnimationFrame(animation.currentFrame);
}
console.log('Store: Sprites arranged successfully');
} catch (error) {
console.error('Store: Error auto-arranging sprites:', error);
}
}
function renderSpritesheetPreview(showGrid = true) {
if (!ctx.value || !canvas.value || sprites.value.length === 0) return;
ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
if (showGrid) {
drawGrid();
console.log('Store: Rendering spritesheet preview');
if (!ctx.value || !canvas.value) {
console.error('Store: Canvas or context not available for rendering');
return;
}
sprites.value.forEach(sprite => {
ctx.value!.drawImage(sprite.img, sprite.x, sprite.y);
});
if (sprites.value.length === 0) {
console.log('Store: No sprites to render');
return;
}
try {
ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
if (showGrid) {
drawGrid();
}
sprites.value.forEach((sprite, index) => {
try {
if (!sprite.img || sprite.img.width === 0 || sprite.img.height === 0) {
console.warn(`Store: Invalid sprite at index ${index}, skipping render`);
return;
}
ctx.value!.drawImage(sprite.img, sprite.x, sprite.y);
} catch (spriteError) {
console.error(`Store: Error rendering sprite at index ${index}:`, spriteError);
}
});
console.log('Store: Spritesheet preview rendered successfully');
} catch (error) {
console.error('Store: Error rendering spritesheet preview:', error);
}
}
function drawGrid() {