root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated mobile UX

Browse Source
This commit is contained in:
root
2025-05-18 17:14:56 +02:00
parent e3205d500d
commit b33b172644
11 changed files with 785 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/SpriteCanvas.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="space-y-4">
<div class="flex justify-between items-center">
<div class="flex items-center gap-4">
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 sm:gap-0">
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 w-full sm:w-auto">
<div class="flex items-center">
<input id="pixel-perfect" type="checkbox" v-model="settingsStore.pixelPerfect" class="mr-2" @change="drawCanvas" />
<label for="pixel-perfect" class="dark:text-gray-200">Pixel perfect rendering (for pixel art)</label>
<input id="pixel-perfect" type="checkbox" v-model="settingsStore.pixelPerfect" class="mr-2 w-4 h-4" @change="drawCanvas" />
<label for="pixel-perfect" class="dark:text-gray-200 text-sm sm:text-base">Pixel perfect rendering</label>
</div>
<div class="flex items-center">
<input id="allow-cell-swap" type="checkbox" v-model="allowCellSwap" class="mr-2" />
<label for="allow-cell-swap" class="dark:text-gray-200">Allow moving between cells</label>
<input id="allow-cell-swap" type="checkbox" v-model="allowCellSwap" class="mr-2 w-4 h-4" />
<label for="allow-cell-swap" class="dark:text-gray-200 text-sm sm:text-base">Allow moving between cells</label>
</div>
<!-- Add new checkbox for showing all sprites -->
<div class="flex items-center">
@@ -28,8 +28,23 @@
</div>
</div>
<div class="relative border border-gray-300 dark:border-gray-600 rounded-lg">
<canvas ref="canvasRef" @mousedown="startDrag" @mousemove="drag" @mouseup="stopDrag" @mouseleave="stopDrag" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="stopDrag" class="w-full" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}"></canvas>
<div class="relative border border-gray-300 dark:border-gray-600 rounded-lg overflow-auto">
<div class="canvas-container touch-manipulation" :style="{ transform: `scale(${zoom})`, transformOrigin: 'top left' }">
<canvas ref="canvasRef" @mousedown="startDrag" @mousemove="drag" @mouseup="stopDrag" @mouseleave="stopDrag" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="stopDrag" class="w-full" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}"></canvas>
</div>
<!-- Mobile zoom controls -->
<div class="absolute bottom-3 right-3 flex space-x-2 sm:hidden bg-white/80 dark:bg-gray-800/80 p-2 rounded-lg shadow-md">
<button @click="zoomIn" class="p-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-100 rounded-lg transition-colors">
<i class="fas fa-plus"></i>
</button>
<button @click="zoomOut" class="p-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-100 rounded-lg transition-colors">
<i class="fas fa-minus"></i>
</button>
<button @click="resetZoom" class="p-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-100 rounded-lg transition-colors">
<i class="fas fa-expand"></i>
</button>
</div>
<!-- Offset indicators overlay -->
<div v-if="canvasRef" class="absolute top-0 left-0 pointer-events-none w-full h-full">
@@ -276,10 +291,33 @@
drawCanvas();
};
// Add zoom functionality for mobile
const zoom = ref(1);
const minZoom = 0.5;
const maxZoom = 3;
const zoomStep = 0.25;
const zoomIn = () => {
zoom.value = Math.min(maxZoom, zoom.value + zoomStep);
};
const zoomOut = () => {
zoom.value = Math.max(minZoom, zoom.value - zoomStep);
};
const resetZoom = () => {
zoom.value = 1;
};
// Improved touch handling
const handleTouchStart = (event: TouchEvent) => {
event.preventDefault();
// Don't prevent default to allow scrolling
if (event.touches.length === 1) {
const touch = event.touches[0];
const rect = canvasRef.value?.getBoundingClientRect();
if (!rect) return;
// Adjust for zoom
const mouseEvent = {
clientX: touch.clientX,
clientY: touch.clientY,
@@ -290,7 +328,11 @@
};
const handleTouchMove = (event: TouchEvent) => {
event.preventDefault();
// Only prevent default when we're actually dragging
if (isDragging.value) {
event.preventDefault();
}
if (event.touches.length === 1) {
const touch = event.touches[0];
const mouseEvent = {