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

Zoom fixes

Browse Source
This commit is contained in:
Dennis Postma 2025-04-03 03:47:25 +02:00
parent 319a052d48
commit 33efe08207
5 changed files with 383 additions and 412 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

639
src/components/MainContent.vue
View File

@ -11,16 +11,13 @@
</div>
</div>
<div class="p-6">
<div ref="containerEl" class="relative overflow-auto bg-gray-700 rounded border border-gray-600 h-96"
:class="{ 'cursor-grab': !isPanning, 'cursor-grabbing': isPanning }">
<div ref="containerEl" class="relative overflow-auto bg-gray-700 rounded border border-gray-600 h-96" :class="{ 'cursor-grab': !isPanning, 'cursor-grabbing': isPanning }">
<canvas
ref="canvasEl"
class="block"
:style="{
transform: `scale(${store.zoomLevel.value})`,
transformOrigin: 'top left',
width: zoomedWidth + 'px',
height: zoomedHeight + 'px'
}"
></canvas>
</div>
@ -30,368 +27,368 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
import { useSpritesheetStore } from '../composables/useSpritesheetStore';
import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
import { useSpritesheetStore } from '../composables/useSpritesheetStore';
const store = useSpritesheetStore();
const canvasEl = ref<HTMLCanvasElement | null>(null);
const containerEl = ref<HTMLDivElement | null>(null);
const store = useSpritesheetStore();
const canvasEl = ref<HTMLCanvasElement | null>(null);
const containerEl = ref<HTMLDivElement | null>(null);
// Panning state
const isPanning = ref(false);
const isAltPressed = ref(false);
const isMiddleMouseDown = ref(false);
const lastPosition = ref({ x: 0, y: 0 });
// Panning state
const isPanning = ref(false);
const isAltPressed = ref(false);
const isMiddleMouseDown = ref(false);
const lastPosition = ref({ x: 0, y: 0 });
// Tooltip state
const isTooltipVisible = ref(false);
const tooltipText = ref('');
const tooltipPosition = ref({ x: 0, y: 0 });
// Tooltip state
const isTooltipVisible = ref(false);
const tooltipText = ref('');
const tooltipPosition = ref({ x: 0, y: 0 });
// Responsive canvas sizing
const containerWidth = ref(0);
const containerHeight = ref(0);
const baseCanvasWidth = ref(0);
const baseCanvasHeight = ref(0);
// Responsive canvas sizing
const containerWidth = ref(0);
const containerHeight = ref(0);
const baseCanvasWidth = ref(0);
const baseCanvasHeight = ref(0);
// Computed properties for zoomed dimensions
const zoomedWidth = computed(() => {
return baseCanvasWidth.value * store.zoomLevel.value;
});
// Computed properties for zoomed dimensions
const zoomedWidth = computed(() => {
return baseCanvasWidth.value * store.zoomLevel.value;
});
const zoomedHeight = computed(() => {
return baseCanvasHeight.value * store.zoomLevel.value;
});
const zoomedHeight = computed(() => {
return baseCanvasHeight.value * store.zoomLevel.value;
});
const tooltipStyle = computed(() => ({
left: `${tooltipPosition.value.x + 15}px`,
top: `${tooltipPosition.value.y + 15}px`,
}));
const tooltipStyle = computed(() => ({
left: `${tooltipPosition.value.x + 15}px`,
top: `${tooltipPosition.value.y + 15}px`,
}));
// Watch for zoom changes to update the container scroll position
watch(() => store.zoomLevel.value, (newZoom, oldZoom) => {
if (!containerEl.value) return;
// Watch for zoom changes to update the container scroll position
watch(
() => store.zoomLevel.value,
(newZoom, oldZoom) => {
if (!containerEl.value) return;
// Adjust scroll position to keep the center point consistent when zooming
const centerX = containerEl.value.scrollLeft + containerEl.value.clientWidth / 2;
const centerY = containerEl.value.scrollTop + containerEl.value.clientHeight / 2;
// Adjust scroll position to keep the center point consistent when zooming
const centerX = containerEl.value.scrollLeft + containerEl.value.clientWidth / 2;
const centerY = containerEl.value.scrollTop + containerEl.value.clientHeight / 2;
// Calculate new scroll position based on new zoom level
const scaleChange = newZoom / oldZoom;
containerEl.value.scrollLeft = centerX * scaleChange - containerEl.value.clientWidth / 2;
containerEl.value.scrollTop = centerY * scaleChange - containerEl.value.clientHeight / 2;
// Calculate new scroll position based on new zoom level
const scaleChange = newZoom / oldZoom;
containerEl.value.scrollLeft = centerX * scaleChange - containerEl.value.clientWidth / 2;
containerEl.value.scrollTop = centerY * scaleChange - containerEl.value.clientHeight / 2;
// Re-render the canvas with the new zoom level
updateCanvasSize();
store.renderSpritesheetPreview();
});
// Re-render the canvas with the new zoom level
updateCanvasSize();
store.renderSpritesheetPreview();
}
);
const setupCheckerboardPattern = () => {
if (!canvasEl.value) return;
const setupCheckerboardPattern = () => {
if (!canvasEl.value) return;
canvasEl.value.style.backgroundImage = `
canvasEl.value.style.backgroundImage = `
linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
linear-gradient(-45deg, transparent 75%, #1a1a1a 75%)
`;
canvasEl.value.style.backgroundSize = '20px 20px';
canvasEl.value.style.backgroundPosition = '0 0, 0 10px, 10px -10px, -10px 0px';
};
canvasEl.value.style.backgroundSize = '20px 20px';
canvasEl.value.style.backgroundPosition = '0 0, 0 10px, 10px -10px, -10px 0px';
};
const updateCanvasSize = () => {
if (!canvasEl.value || !containerEl.value) return;
const updateCanvasSize = () => {
if (!canvasEl.value || !containerEl.value) return;
// Get the container dimensions
containerWidth.value = containerEl.value.clientWidth;
containerHeight.value = containerEl.value.clientHeight;
// Get the container dimensions
containerWidth.value = containerEl.value.clientWidth;
containerHeight.value = containerEl.value.clientHeight;
// Set the base canvas size to fill the container
// These are the "unzoomed" dimensions
baseCanvasWidth.value = Math.max(containerWidth.value,
store.cellSize.width * Math.ceil(containerWidth.value / store.cellSize.width));
baseCanvasHeight.value = Math.max(containerHeight.value,
store.cellSize.height * Math.ceil(containerHeight.value / store.cellSize.height));
// Set the base canvas size to fill the container
// These are the "unzoomed" dimensions
baseCanvasWidth.value = Math.max(containerWidth.value, store.cellSize.width * Math.ceil(containerWidth.value / store.cellSize.width));
baseCanvasHeight.value = Math.max(containerHeight.value, store.cellSize.height * Math.ceil(containerHeight.value / store.cellSize.height));
// Update the actual canvas element size
canvasEl.value.width = baseCanvasWidth.value;
canvasEl.value.height = baseCanvasHeight.value;
// Trigger a re-render
store.renderSpritesheetPreview();
};
const handleMouseDown = (e: MouseEvent) => {
if (!canvasEl.value || store.sprites.value.length === 0) return;
const rect = canvasEl.value.getBoundingClientRect();
// Adjust coordinates based on zoom level
const x = (e.clientX - rect.left) / store.zoomLevel.value;
const y = (e.clientY - rect.top) / store.zoomLevel.value;
// Find which sprite was clicked
for (let i = store.sprites.value.length - 1; i >= 0; i--) {
const sprite = store.sprites.value[i];
if (x >= sprite.x && x <= sprite.x + store.cellSize.width && y >= sprite.y && y <= sprite.y + store.cellSize.height) {
store.draggedSprite.value = sprite;
store.dragOffset.x = x - sprite.x;
store.dragOffset.y = y - sprite.y;
break;
}
}
};
const handleMouseMove = (e: MouseEvent) => {
// Don't process sprite movement or tooltips while panning
if (isPanning.value) return;
if (!canvasEl.value) return;
const rect = canvasEl.value.getBoundingClientRect();
// Adjust coordinates for zoom
const x = (e.clientX - rect.left) / store.zoomLevel.value;
const y = (e.clientY - rect.top) / store.zoomLevel.value;
// Update tooltip
const cellX = Math.floor(x / store.cellSize.width);
const cellY = Math.floor(y / store.cellSize.height);
if (canvasEl.value && cellX >= 0 && cellX < canvasEl.value.width / store.cellSize.width &&
cellY >= 0 && cellY < canvasEl.value.height / store.cellSize.height) {
isTooltipVisible.value = true;
tooltipText.value = `Cell: (${cellX}, ${cellY})`;
tooltipPosition.value.x = e.pageX;
tooltipPosition.value.y = e.pageY;
} else {
isTooltipVisible.value = false;
}
// Move the sprite if we're dragging one
if (store.draggedSprite.value) {
if (store.isShiftPressed.value) {
// Free positioning within the cell bounds when shift is pressed
const cellX = Math.floor(store.draggedSprite.value.x / store.cellSize.width);
const cellY = Math.floor(store.draggedSprite.value.y / store.cellSize.height);
// Calculate new position with constraints to stay within the cell
const newX = x - store.dragOffset.x;
const newY = y - store.dragOffset.y;
// Calculate cell boundaries
const cellLeft = cellX * store.cellSize.width;
const cellTop = cellY * store.cellSize.height;
const cellRight = cellLeft + store.cellSize.width - store.draggedSprite.value.img.width;
const cellBottom = cellTop + store.cellSize.height - store.draggedSprite.value.img.height;
// Constrain position to stay within the cell
store.draggedSprite.value.x = Math.max(cellLeft, Math.min(newX, cellRight));
store.draggedSprite.value.y = Math.max(cellTop, Math.min(newY, cellBottom));
} else {
// Calculate new position based on grid cells (snap to grid)
const newCellX = Math.floor((x - store.dragOffset.x) / store.cellSize.width);
const newCellY = Math.floor((y - store.dragOffset.y) / store.cellSize.height);
// Make sure we stay within bounds
if (canvasEl.value) {
const maxCellX = Math.floor(canvasEl.value.width / store.cellSize.width) - 1;
const maxCellY = Math.floor(canvasEl.value.height / store.cellSize.height) - 1;
const boundedCellX = Math.max(0, Math.min(newCellX, maxCellX));
const boundedCellY = Math.max(0, Math.min(newCellY, maxCellY));
store.draggedSprite.value.x = boundedCellX * store.cellSize.width;
store.draggedSprite.value.y = boundedCellY * store.cellSize.height;
}
}
// Set the actual canvas dimensions - remove any zoom scaling here
canvasEl.value.width = baseCanvasWidth.value;
canvasEl.value.height = baseCanvasHeight.value;
// Trigger a re-render
store.renderSpritesheetPreview();
}
};
};
const handleMouseUp = () => {
store.draggedSprite.value = null;
};
const handleMouseDown = (e: MouseEvent) => {
if (!canvasEl.value || store.sprites.value.length === 0) return;
const handleMouseOut = () => {
isTooltipVisible.value = false;
store.draggedSprite.value = null;
};
const rect = canvasEl.value.getBoundingClientRect();
// Adjust coordinates based on zoom level
const x = (e.clientX - rect.left) / store.zoomLevel.value;
const y = (e.clientY - rect.top) / store.zoomLevel.value;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Shift') {
store.isShiftPressed.value = true;
}
if (e.key === 'Alt') {
e.preventDefault(); // Prevent browser from focusing address bar
isAltPressed.value = true;
}
// Add keyboard shortcuts for zooming
if (e.ctrlKey || e.metaKey) {
if (e.key === '=' || e.key === '+') {
e.preventDefault();
store.zoomIn();
} else if (e.key === '-') {
e.preventDefault();
store.zoomOut();
} else if (e.key === '0') {
e.preventDefault();
store.resetZoom();
// Find which sprite was clicked
for (let i = store.sprites.value.length - 1; i >= 0; i--) {
const sprite = store.sprites.value[i];
if (x >= sprite.x && x <= sprite.x + store.cellSize.width && y >= sprite.y && y <= sprite.y + store.cellSize.height) {
store.draggedSprite.value = sprite;
store.dragOffset.x = x - sprite.x;
store.dragOffset.y = y - sprite.y;
break;
}
}
}
};
};
const handleKeyUp = (e: KeyboardEvent) => {
if (e.key === 'Shift') {
store.isShiftPressed.value = false;
}
const handleMouseMove = (e: MouseEvent) => {
// Don't process sprite movement or tooltips while panning
if (isPanning.value) return;
if (e.key === 'Alt') {
isAltPressed.value = false;
}
};
if (!canvasEl.value) return;
const handleCanvasMouseDown = (e: MouseEvent) => {
// Middle mouse button or Alt + left click for panning
if (e.button === 1 || (e.button === 0 && isAltPressed.value)) {
e.preventDefault();
isPanning.value = true;
lastPosition.value = { x: e.clientX, y: e.clientY };
} else {
// Regular sprite dragging
handleMouseDown(e);
}
};
const rect = canvasEl.value.getBoundingClientRect();
// Adjust coordinates for zoom
const x = (e.clientX - rect.left) / store.zoomLevel.value;
const y = (e.clientY - rect.top) / store.zoomLevel.value;
const handleCanvasMouseMove = (e: MouseEvent) => {
if (isPanning.value && containerEl.value) {
e.preventDefault();
const dx = e.clientX - lastPosition.value.x;
const dy = e.clientY - lastPosition.value.y;
// Update tooltip
const cellX = Math.floor(x / store.cellSize.width);
const cellY = Math.floor(y / store.cellSize.height);
// Scroll the container in the opposite direction of the mouse movement
containerEl.value.scrollLeft -= dx;
containerEl.value.scrollTop -= dy;
// Update the last position for the next movement
lastPosition.value = { x: e.clientX, y: e.clientY };
} else {
// Handle regular mouse move for sprites and tooltip
handleMouseMove(e);
}
};
const handleCanvasMouseUp = () => {
isPanning.value = false;
handleMouseUp();
};
const handleCanvasMouseLeave = () => {
isPanning.value = false;
handleMouseOut();
};
const preventContextMenu = (e: MouseEvent) => {
e.preventDefault();
};
const setupCanvasEvents = () => {
if (!canvasEl.value) return;
// Set up mouse events for the canvas
canvasEl.value.addEventListener('mousedown', handleCanvasMouseDown);
canvasEl.value.addEventListener('mousemove', handleCanvasMouseMove);
canvasEl.value.addEventListener('mouseup', handleCanvasMouseUp);
canvasEl.value.addEventListener('mouseleave', handleCanvasMouseLeave);
canvasEl.value.addEventListener('contextmenu', preventContextMenu);
};
// Handle window resize to update canvas dimensions
const handleResize = () => {
updateCanvasSize();
};
onMounted(async () => {
// Set up global event listeners
window.addEventListener('keydown', handleKeyDown);
window.addEventListener('keyup', handleKeyUp);
window.addEventListener('resize', handleResize);
// Initialize the canvas
await nextTick();
initializeCanvas();
// Observe container size changes
if ('ResizeObserver' in window) {
const resizeObserver = new ResizeObserver(() => {
updateCanvasSize();
});
if (containerEl.value) {
resizeObserver.observe(containerEl.value);
}
}
});
const initializeCanvas = () => {
if (!canvasEl.value || !containerEl.value) return;
try {
const context = canvasEl.value.getContext('2d');
if (!context) {
console.error('Failed to get 2D context from canvas');
return;
if (canvasEl.value && cellX >= 0 && cellX < canvasEl.value.width / store.cellSize.width && cellY >= 0 && cellY < canvasEl.value.height / store.cellSize.height) {
isTooltipVisible.value = true;
tooltipText.value = `Cell: (${cellX}, ${cellY})`;
tooltipPosition.value.x = e.pageX;
tooltipPosition.value.y = e.pageY;
} else {
isTooltipVisible.value = false;
}
// Set canvas and context in the store
store.canvas.value = canvasEl.value;
store.ctx.value = context;
// Move the sprite if we're dragging one
if (store.draggedSprite.value) {
if (store.isShiftPressed.value) {
// Free positioning within the cell bounds when shift is pressed
const cellX = Math.floor(store.draggedSprite.value.x / store.cellSize.width);
const cellY = Math.floor(store.draggedSprite.value.y / store.cellSize.height);
// Set up the checkerboard pattern
setupCheckerboardPattern();
// Calculate new position with constraints to stay within the cell
const newX = x - store.dragOffset.x;
const newY = y - store.dragOffset.y;
// Set up canvas mouse events
setupCanvasEvents();
// Calculate cell boundaries
const cellLeft = cellX * store.cellSize.width;
const cellTop = cellY * store.cellSize.height;
const cellRight = cellLeft + store.cellSize.width - store.draggedSprite.value.img.width;
const cellBottom = cellTop + store.cellSize.height - store.draggedSprite.value.img.height;
// Set the initial canvas size based on container
updateCanvasSize();
// Constrain position to stay within the cell
store.draggedSprite.value.x = Math.max(cellLeft, Math.min(newX, cellRight));
store.draggedSprite.value.y = Math.max(cellTop, Math.min(newY, cellBottom));
} else {
// Calculate new position based on grid cells (snap to grid)
const newCellX = Math.floor((x - store.dragOffset.x) / store.cellSize.width);
const newCellY = Math.floor((y - store.dragOffset.y) / store.cellSize.height);
// Update sprites if there are any loaded
if (store.sprites.value.length > 0) {
store.updateCellSize();
store.autoArrangeSprites();
// Make sure we stay within bounds
if (canvasEl.value) {
const maxCellX = Math.floor(canvasEl.value.width / store.cellSize.width) - 1;
const maxCellY = Math.floor(canvasEl.value.height / store.cellSize.height) - 1;
const boundedCellX = Math.max(0, Math.min(newCellX, maxCellX));
const boundedCellY = Math.max(0, Math.min(newCellY, maxCellY));
store.draggedSprite.value.x = boundedCellX * store.cellSize.width;
store.draggedSprite.value.y = boundedCellY * store.cellSize.height;
}
}
// Trigger a re-render
store.renderSpritesheetPreview();
}
} catch (error) {
console.error('Error initializing canvas:', error);
}
};
};
onBeforeUnmount(() => {
// Remove global event listeners
window.removeEventListener('keydown', handleKeyDown);
window.removeEventListener('keyup', handleKeyUp);
window.removeEventListener('resize', handleResize);
const handleMouseUp = () => {
store.draggedSprite.value = null;
};
// Remove canvas event listeners
if (canvasEl.value) {
canvasEl.value.removeEventListener('mousedown', handleCanvasMouseDown);
canvasEl.value.removeEventListener('mousemove', handleCanvasMouseMove);
canvasEl.value.removeEventListener('mouseup', handleCanvasMouseUp);
canvasEl.value.removeEventListener('mouseleave', handleCanvasMouseLeave);
canvasEl.value.removeEventListener('contextmenu', preventContextMenu);
}
});
const handleMouseOut = () => {
isTooltipVisible.value = false;
store.draggedSprite.value = null;
};
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Shift') {
store.isShiftPressed.value = true;
}
if (e.key === 'Alt') {
e.preventDefault(); // Prevent browser from focusing address bar
isAltPressed.value = true;
}
// Add keyboard shortcuts for zooming
if (e.ctrlKey || e.metaKey) {
if (e.key === '=' || e.key === '+') {
e.preventDefault();
store.zoomIn();
} else if (e.key === '-') {
e.preventDefault();
store.zoomOut();
} else if (e.key === '0') {
e.preventDefault();
store.resetZoom();
}
}
};
const handleKeyUp = (e: KeyboardEvent) => {
if (e.key === 'Shift') {
store.isShiftPressed.value = false;
}
if (e.key === 'Alt') {
isAltPressed.value = false;
}
};
const handleCanvasMouseDown = (e: MouseEvent) => {
// Middle mouse button or Alt + left click for panning
if (e.button === 1 || (e.button === 0 && isAltPressed.value)) {
e.preventDefault();
isPanning.value = true;
lastPosition.value = { x: e.clientX, y: e.clientY };
} else {
// Regular sprite dragging
handleMouseDown(e);
}
};
const handleCanvasMouseMove = (e: MouseEvent) => {
if (isPanning.value && containerEl.value) {
e.preventDefault();
const dx = e.clientX - lastPosition.value.x;
const dy = e.clientY - lastPosition.value.y;
// Scroll the container in the opposite direction of the mouse movement
containerEl.value.scrollLeft -= dx;
containerEl.value.scrollTop -= dy;
// Update the last position for the next movement
lastPosition.value = { x: e.clientX, y: e.clientY };
} else {
// Handle regular mouse move for sprites and tooltip
handleMouseMove(e);
}
};
const handleCanvasMouseUp = () => {
isPanning.value = false;
handleMouseUp();
};
const handleCanvasMouseLeave = () => {
isPanning.value = false;
handleMouseOut();
};
const preventContextMenu = (e: MouseEvent) => {
e.preventDefault();
};
const setupCanvasEvents = () => {
if (!canvasEl.value) return;
// Set up mouse events for the canvas
canvasEl.value.addEventListener('mousedown', handleCanvasMouseDown);
canvasEl.value.addEventListener('mousemove', handleCanvasMouseMove);
canvasEl.value.addEventListener('mouseup', handleCanvasMouseUp);
canvasEl.value.addEventListener('mouseleave', handleCanvasMouseLeave);
canvasEl.value.addEventListener('contextmenu', preventContextMenu);
};
// Handle window resize to update canvas dimensions
const handleResize = () => {
updateCanvasSize();
};
onMounted(async () => {
// Set up global event listeners
window.addEventListener('keydown', handleKeyDown);
window.addEventListener('keyup', handleKeyUp);
window.addEventListener('resize', handleResize);
// Initialize the canvas
await nextTick();
initializeCanvas();
// Observe container size changes
if ('ResizeObserver' in window) {
const resizeObserver = new ResizeObserver(() => {
updateCanvasSize();
});
if (containerEl.value) {
resizeObserver.observe(containerEl.value);
}
}
});
const initializeCanvas = () => {
if (!canvasEl.value || !containerEl.value) return;
try {
const context = canvasEl.value.getContext('2d');
if (!context) {
console.error('Failed to get 2D context from canvas');
return;
}
// Set canvas and context in the store
store.canvas.value = canvasEl.value;
store.ctx.value = context;
// Set up the checkerboard pattern
setupCheckerboardPattern();
// Set up canvas mouse events
setupCanvasEvents();
// Set the initial canvas size based on container
updateCanvasSize();
// Update sprites if there are any loaded
if (store.sprites.value.length > 0) {
store.updateCellSize();
store.autoArrangeSprites();
store.renderSpritesheetPreview();
}
} catch (error) {
console.error('Error initializing canvas:', error);
}
};
onBeforeUnmount(() => {
// Remove global event listeners
window.removeEventListener('keydown', handleKeyDown);
window.removeEventListener('keyup', handleKeyUp);
window.removeEventListener('resize', handleResize);
// Remove canvas event listeners
if (canvasEl.value) {
canvasEl.value.removeEventListener('mousedown', handleCanvasMouseDown);
canvasEl.value.removeEventListener('mousemove', handleCanvasMouseMove);
canvasEl.value.removeEventListener('mouseup', handleCanvasMouseUp);
canvasEl.value.removeEventListener('mouseleave', handleCanvasMouseLeave);
canvasEl.value.removeEventListener('contextmenu', preventContextMenu);
}
});
</script>
<style scoped>
.cursor-grab {
cursor: grab;
}
.cursor-grab {
cursor: grab;
}
.cursor-grabbing {
cursor: grabbing;
}
</style>
.cursor-grabbing {
cursor: grabbing;
}
</style>

102
src/components/PreviewModal.vue
View File

@ -1,5 +1,7 @@
<template>
<div class="fixed inset-0 flex items-center justify-center z-50" :class="{ 'pointer-events-none': !isModalOpen }">
<!-- Make the outer container always pointer-events-none so clicks pass through -->
<div class="fixed inset-0 flex items-center justify-center z-50 pointer-events-none">
<!-- Apply pointer-events-auto ONLY to the modal itself so it can be interacted with -->
<div class="bg-gray-800 rounded-lg max-w-4xl max-h-[90vh] overflow-auto scrollbar-hide shadow-lg pointer-events-auto" :class="{ invisible: !isModalOpen, visible: isModalOpen }" :style="{ transform: `translate3d(${position.x}px, ${position.y + (isModalOpen ? 0 : -20)}px, 0)` }">
<div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600 cursor-move" @mousedown="startDrag">
<div class="flex items-center gap-2 text-lg font-semibold select-none">
@ -73,6 +75,9 @@
const animation = computed(() => store.animation);
const currentFrame = ref(0);
const position = ref({ x: 0, y: 0 });
const isDragging = ref(false);
const dragOffset = ref({ x: 0, y: 0 });
const currentFrameDisplay = computed(() => {
const totalFrames = Math.max(1, sprites.value.length);
@ -117,7 +122,6 @@
currentFrame.value = 0;
animation.value.currentFrame = 0;
// Make sure the canvas is initialized
await initializeCanvas();
// Set modal open state if not already open
@ -129,18 +133,21 @@
await new Promise(resolve => requestAnimationFrame(resolve));
// Set proper canvas size before rendering
if (animCanvas.value && store.cellSize.width && store.cellSize.height) {
animCanvas.value.width = store.cellSize.width;
animCanvas.value.height = store.cellSize.height;
}
updateCanvasSize();
// Force render the first frame
if (sprites.value.length > 0) {
// Ensure we have the latest sprites
store.renderAnimationFrame(0);
}
};
const updateCanvasSize = () => {
if (animCanvas.value && store.cellSize.width && store.cellSize.height) {
animCanvas.value.width = store.cellSize.width;
animCanvas.value.height = store.cellSize.height;
}
};
const closeModal = () => {
store.isModalOpen.value = false;
@ -181,44 +188,6 @@
}
};
onMounted(() => {
initializeCanvas();
// Setup keyboard shortcuts for the modal
window.addEventListener('keydown', handleKeyDown);
});
const initializeCanvas = async () => {
if (!animCanvas.value) {
console.error('PreviewModal: Animation canvas not found');
return;
}
try {
// Get the 2D context
const context = animCanvas.value.getContext('2d');
if (!context) {
console.error('PreviewModal: Failed to get 2D context from animation canvas');
return;
}
// Set the store references
store.animation.canvas = animCanvas.value;
store.animation.ctx = context;
} catch (error) {
console.error('PreviewModal: Error initializing animation canvas:', error);
}
};
onBeforeUnmount(() => {
window.removeEventListener('keydown', handleKeyDown);
});
// Add these new refs for dragging functionality
const position = ref({ x: 0, y: 0 });
const isDragging = ref(false);
const dragOffset = ref({ x: 0, y: 0 });
const startDrag = (e: MouseEvent) => {
isDragging.value = true;
dragOffset.value = {
@ -248,6 +217,37 @@
window.removeEventListener('mouseup', stopDrag);
};
const initializeCanvas = async () => {
if (!animCanvas.value) {
console.error('PreviewModal: Animation canvas not found');
return;
}
try {
const context = animCanvas.value.getContext('2d');
if (!context) {
console.error('PreviewModal: Failed to get 2D context from animation canvas');
return;
}
store.animation.canvas = animCanvas.value;
store.animation.ctx = context;
} catch (error) {
console.error('PreviewModal: Error initializing animation canvas:', error);
}
};
onMounted(() => {
initializeCanvas();
window.addEventListener('keydown', handleKeyDown);
});
onBeforeUnmount(() => {
window.removeEventListener('keydown', handleKeyDown);
window.removeEventListener('mousemove', handleDrag);
window.removeEventListener('mouseup', stopDrag);
});
// Keep currentFrame in sync with animation.currentFrame
watch(
() => animation.value.currentFrame,
@ -261,12 +261,8 @@
() => sprites.value,
newSprites => {
if (isModalOpen.value && newSprites.length > 0) {
// Update the canvas with the new sprites
if (animCanvas.value && store.cellSize.width && store.cellSize.height) {
animCanvas.value.width = store.cellSize.width;
animCanvas.value.height = store.cellSize.height;
store.renderAnimationFrame(currentFrame.value);
}
updateCanvasSize();
store.renderAnimationFrame(currentFrame.value);
}
},
{ deep: true }
@ -294,12 +290,12 @@
cursor: pointer;
}
/* Optional: Prevent text selection while dragging */
/* Prevent text selection while dragging */
.cursor-move {
user-select: none;
}
/* Add these new styles */
/* Hide scrollbar styles */
.scrollbar-hide {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */

12
src/components/Sidebar.vue
View File

@ -53,15 +53,9 @@
<!-- Zoom Controls -->
<div class="flex flex-wrap gap-3 mb-6">
<div class="text-sm font-medium text-gray-300 mb-2 w-full">Zoom Controls</div>
<button @click="zoomIn" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500">
<i class="fas fa-search-plus"></i> Zoom In
</button>
<button @click="zoomOut" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500">
<i class="fas fa-search-minus"></i> Zoom Out
</button>
<button @click="resetZoom" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500">
<i class="fas fa-sync-alt"></i> Reset Zoom
</button>
<button @click="zoomIn" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-search-plus"></i> Zoom In</button>
<button @click="zoomOut" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-search-minus"></i> Zoom Out</button>
<button @click="resetZoom" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-sync-alt"></i> Reset Zoom</button>
</div>
<div class="flex flex-wrap gap-3 mt-4">

2
src/components/SpriteList.vue
View File

@ -1,7 +1,7 @@
<template>
<div v-if="sprites.length === 0" class="text-center text-gray-400 py-8">No sprites uploaded yet</div>
<div v-else class="grid grid-cols-2 gap-3 max-h-72 overflow-y-auto pr-2">
<div v-else class="grid grid-cols-2 gap-3 max-h-72 overflow-y-auto p-4">
<div v-for="(sprite, index) in sprites" :key="sprite.id" @click="$emit('spriteClicked', sprite.id)" class="border border-gray-600 rounded bg-gray-700 p-2 text-center transition-all cursor-pointer hover:border-blue-500 hover:-translate-y-0.5 hover:shadow-md">
<img :src="sprite.img.src" :alt="sprite.name" class="max-w-full max-h-16 mx-auto mb-2 bg-black bg-opacity-20 rounded" />
<div class="text-xs text-gray-400 truncate">{{ index + 1 }}. {{ truncateName(sprite.name) }}</div>

40
src/composables/useSpritesheetStore.ts
View File

@ -144,11 +144,13 @@ export function useSpritesheetStore() {
canvas.value.width = newWidth;
canvas.value.height = newHeight;
// Emit an event to update the wrapper dimensions
window.dispatchEvent(new CustomEvent('canvas-size-updated', {
detail: { width: newWidth, height: newHeight }
}));
window.dispatchEvent(
new CustomEvent('canvas-size-updated', {
detail: { width: newWidth, height: newHeight },
})
);
} catch (error) {
console.error('Store: Error updating canvas size:', error);
}
@ -191,8 +193,6 @@ export function useSpritesheetStore() {
function renderSpritesheetPreview(showGrid = true) {
if (!ctx.value || !canvas.value) {
console.error('Store: Canvas or context not available for rendering, will retry when ready');
// Set up a small delay and retry when elements might be ready
setTimeout(() => {
if (ctx.value && canvas.value) {
renderSpritesheetPreview(showGrid);
@ -201,26 +201,17 @@ export function useSpritesheetStore() {
return;
}
if (sprites.value.length === 0) {
return;
}
if (sprites.value.length === 0) return;
try {
// Make sure canvas dimensions are set correctly
updateCanvasSize();
// Clear the canvas
ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
// Apply zoom transformation
ctx.value.save();
ctx.value.scale(zoomLevel.value, zoomLevel.value);
if (showGrid) {
drawGrid();
}
// Draw each sprite
// Draw each sprite - remove the zoom scaling from context
sprites.value.forEach((sprite, index) => {
try {
if (!sprite.img) {
@ -229,17 +220,13 @@ export function useSpritesheetStore() {
}
if (sprite.img.complete && sprite.img.naturalWidth !== 0) {
ctx.value!.drawImage(sprite.img, sprite.x, sprite.y);
// Draw the image at its original size
ctx.value!.drawImage(sprite.img, sprite.x, sprite.y, sprite.width, sprite.height);
} else {
console.warn(`Store: Sprite image ${index} not fully loaded, setting onload handler`);
// If image isn't loaded yet, set an onload handler
sprite.img.onload = () => {
if (ctx.value && canvas.value) {
ctx.value.save();
ctx.value.scale(zoomLevel.value, zoomLevel.value);
ctx.value.drawImage(sprite.img, sprite.x, sprite.y);
ctx.value.restore();
ctx.value.drawImage(sprite.img, sprite.x, sprite.y, sprite.width, sprite.height);
}
};
}
@ -247,11 +234,8 @@ export function useSpritesheetStore() {
console.error(`Store: Error rendering sprite at index ${index}:`, spriteError);
}
});
// Restore the canvas state
ctx.value.restore();
} catch (error) {
console.error('Store: Error rendering spritesheet preview:', error);
console.error('Store: Error in renderSpritesheetPreview:', error);
}
}