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

MainContent preview border

Browse Source
This commit is contained in:
Dennis Postma 2025-04-03 04:19:12 +02:00
parent 5218669744
commit 1c7a7db299
2 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/MainContent.vue
View File

@ -34,6 +34,9 @@
const canvasEl = ref<HTMLCanvasElement | null>(null);
const containerEl = ref<HTMLDivElement | null>(null);
// Access the preview border settings
const previewBorder = computed(() => store.previewBorder);
// Panning state
const isPanning = ref(false);
const isAltPressed = ref(false);
@ -85,6 +88,17 @@
}
);
// Watch for changes in border settings to update the canvas
watch(
() => previewBorder.value,
() => {
if (store.sprites.value.length > 0) {
store.renderSpritesheetPreview();
}
},
{ deep: true }
);
const setupCheckerboardPattern = () => {
if (!canvasEl.value) return;

20
src/composables/useSpritesheetStore.ts
View File

@ -255,11 +255,31 @@ export function useSpritesheetStore() {
if (sprite.img.complete && sprite.img.naturalWidth !== 0) {
// Draw the image at its original size
ctx.value!.drawImage(sprite.img, sprite.x, sprite.y, sprite.width, sprite.height);
// Draw border around the cell if enabled (preview only)
if (previewBorder.enabled) {
const cellX = Math.floor(sprite.x / cellSize.width) * cellSize.width;
const cellY = Math.floor(sprite.y / cellSize.height) * cellSize.height;
ctx.value!.strokeStyle = previewBorder.color;
ctx.value!.lineWidth = previewBorder.width / zoomLevel.value; // Adjust for zoom
ctx.value!.strokeRect(cellX, cellY, cellSize.width, cellSize.height);
}
} else {
console.warn(`Store: Sprite image ${index} not fully loaded, setting onload handler`);
sprite.img.onload = () => {
if (ctx.value && canvas.value) {
ctx.value.drawImage(sprite.img, sprite.x, sprite.y, sprite.width, sprite.height);
// Draw border around the cell if enabled (preview only)
if (previewBorder.enabled) {
const cellX = Math.floor(sprite.x / cellSize.width) * cellSize.width;
const cellY = Math.floor(sprite.y / cellSize.height) * cellSize.height;
ctx.value.strokeStyle = previewBorder.color;
ctx.value.lineWidth = previewBorder.width / zoomLevel.value; // Adjust for zoom
ctx.value.strokeRect(cellX, cellY, cellSize.width, cellSize.height);
}
}
};
}