761 lines
36 KiB
Vue
761 lines
36 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<div v-if="showContextMenu" @click.stop class="fixed bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-xl z-50 py-1 min-w-[160px] overflow-hidden" :style="{ left: contextMenuX + 'px', top: contextMenuY + 'px' }">
|
|
<button @click="rotateSpriteInMenu(90)" class="w-full px-3 py-1.5 text-left hover:bg-green-50 dark:hover:bg-green-900/30 text-gray-700 dark:text-gray-200 flex items-center gap-2 transition-colors text-sm">
|
|
<i class="fas fa-redo text-green-600 dark:text-green-400 text-xs w-4"></i>
|
|
<span>Rotate +90°</span>
|
|
</button>
|
|
<button @click="flipSpriteInMenu('horizontal')" class="w-full px-3 py-1.5 text-left hover:bg-orange-50 dark:hover:bg-orange-900/30 text-gray-700 dark:text-gray-200 flex items-center gap-2 transition-colors text-sm">
|
|
<i class="fas fa-arrows-alt-h text-orange-600 dark:text-orange-400 text-xs w-4"></i>
|
|
<span>Flip Horizontal</span>
|
|
</button>
|
|
<button @click="flipSpriteInMenu('vertical')" class="w-full px-3 py-1.5 text-left hover:bg-orange-50 dark:hover:bg-orange-900/30 text-gray-700 dark:text-gray-200 flex items-center gap-2 transition-colors text-sm">
|
|
<i class="fas fa-arrows-alt-v text-orange-600 dark:text-orange-400 text-xs w-4"></i>
|
|
<span>Flip Vertical</span>
|
|
</button>
|
|
<button @click="replaceSprite" class="w-full px-3 py-1.5 text-left hover:bg-purple-50 dark:hover:bg-purple-900/30 text-gray-700 dark:text-gray-200 flex items-center gap-2 transition-colors text-sm">
|
|
<i class="fas fa-exchange-alt text-purple-600 dark:text-purple-400 text-xs w-4"></i>
|
|
<span>Replace Sprite</span>
|
|
</button>
|
|
<button @click="openCopyToFrameModal" class="w-full px-3 py-1.5 text-left hover:bg-cyan-50 dark:hover:bg-cyan-900/30 text-gray-700 dark:text-gray-200 flex items-center gap-2 transition-colors text-sm">
|
|
<i class="fas fa-copy text-cyan-600 dark:text-cyan-400 text-xs w-4"></i>
|
|
<span>Copy to Frame...</span>
|
|
</button>
|
|
<button @click="openPixelEditor" class="w-full px-3 py-1.5 text-left hover:bg-indigo-50 dark:hover:bg-indigo-900/30 text-gray-700 dark:text-gray-200 flex items-center gap-2 transition-colors text-sm">
|
|
<i class="fas fa-paint-brush text-indigo-600 dark:text-indigo-400 text-xs w-4"></i>
|
|
<span>Edit in Pixel Editor</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Copy to Frame Modal -->
|
|
<CopyToFrameModal :is-open="showCopyToFrameModal" :layers="props.layers" :initial-layer-id="copyTargetLayerId" @close="closeCopyToFrameModal" @copy="confirmCopyToFrame" />
|
|
</Teleport>
|
|
|
|
<div class="spritesheet-preview w-full h-full" @click="hideContextMenu">
|
|
<div class="flex flex-col lg:flex-row gap-4 h-full min-h-0">
|
|
<div class="flex-1 min-w-0 flex flex-col min-h-0">
|
|
<div
|
|
class="relative bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg overflow-auto flex-1 min-h-[200px] sm:min-h-[300px] max-h-[50vh] lg:max-h-none shadow-sm hover:shadow-md transition-shadow duration-200"
|
|
@mousemove="drag"
|
|
@mouseup="stopDrag"
|
|
@mouseleave="stopDrag"
|
|
@touchmove="handleTouchMove"
|
|
@touchend="stopDrag"
|
|
>
|
|
<div
|
|
ref="previewContainerRef"
|
|
class="relative touch-manipulation inline-block"
|
|
:class="{ 'ring-2 ring-blue-500 ring-offset-2': isDragOver }"
|
|
:style="{
|
|
transform: `scale(${zoom})`,
|
|
transformOrigin: 'top left',
|
|
width: `${cellDimensions.cellWidth}px`,
|
|
height: `${cellDimensions.cellHeight}px`,
|
|
backgroundColor: settingsStore.backgroundColor === 'transparent' ? '#f9fafb' : settingsStore.backgroundColor,
|
|
backgroundImage: previewBackgroundImage,
|
|
backgroundSize: previewBackgroundSize,
|
|
backgroundPosition: previewBackgroundPosition,
|
|
}"
|
|
@dragover.prevent="onDragOver"
|
|
@dragleave="onDragLeave"
|
|
@drop.prevent="onDrop"
|
|
>
|
|
<!-- Background sprites (dimmed for comparison) -->
|
|
<template v-if="showAllSprites">
|
|
<template v-for="i in maxFrames()" :key="`bg-${i - 1}`">
|
|
<template v-if="i - 1 !== currentFrameIndex && !hiddenFrames.includes(i - 1)">
|
|
<template v-for="layer in getVisibleLayers()" :key="`${layer.id}-${i - 1}`">
|
|
<img
|
|
v-if="layer.sprites[i - 1]"
|
|
:src="layer.sprites[i - 1].url"
|
|
class="absolute pointer-events-none"
|
|
:style="{
|
|
left: `${Math.round(getCellPosition(0).x + gridMetrics.negativeSpacing + layer.sprites[i - 1].x)}px`,
|
|
top: `${Math.round(getCellPosition(0).y + gridMetrics.negativeSpacing + layer.sprites[i - 1].y)}px`,
|
|
width: `${Math.round(layer.sprites[i - 1].width)}px`,
|
|
height: `${Math.round(layer.sprites[i - 1].height)}px`,
|
|
opacity: '0.3',
|
|
imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
|
|
transform: `rotate(${layer.sprites[i - 1].rotation || 0}deg) scale(${layer.sprites[i - 1].flipX ? -1 : 1}, ${layer.sprites[i - 1].flipY ? -1 : 1})`,
|
|
}"
|
|
draggable="false"
|
|
/>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
|
|
<!-- Current frame sprites -->
|
|
<template v-for="layer in getVisibleLayers()" :key="layer.id">
|
|
<img
|
|
v-if="layer.sprites[currentFrameIndex]"
|
|
:src="layer.sprites[currentFrameIndex].url"
|
|
class="absolute"
|
|
:class="{ 'cursor-move': isDraggable }"
|
|
:style="{
|
|
left: `${Math.round(getCellPosition(0).x + gridMetrics.negativeSpacing + layer.sprites[currentFrameIndex].x)}px`,
|
|
top: `${Math.round(getCellPosition(0).y + gridMetrics.negativeSpacing + layer.sprites[currentFrameIndex].y)}px`,
|
|
width: `${Math.round(layer.sprites[currentFrameIndex].width)}px`,
|
|
height: `${Math.round(layer.sprites[currentFrameIndex].height)}px`,
|
|
imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
|
|
transform: `rotate(${layer.sprites[currentFrameIndex].rotation || 0}deg) scale(${layer.sprites[currentFrameIndex].flipX ? -1 : 1}, ${layer.sprites[currentFrameIndex].flipY ? -1 : 1})`,
|
|
}"
|
|
@mousedown="startDrag($event, layer.sprites[currentFrameIndex], layer.id)"
|
|
@touchstart="handleTouchStart($event, layer.sprites[currentFrameIndex], layer.id)"
|
|
@contextmenu.prevent="openContextMenu($event, layer.sprites[currentFrameIndex], layer.id)"
|
|
draggable="false"
|
|
/>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Mobile zoom controls -->
|
|
<div class="absolute bottom-3 right-3 flex space-x-2 lg:hidden bg-white/80 dark:bg-gray-800/80 p-2 rounded-lg shadow-md">
|
|
<button @click="increaseZoom" 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="decreaseZoom" 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>
|
|
</div>
|
|
|
|
<!-- Drop zone overlay -->
|
|
<div v-if="isDragOver" class="absolute inset-0 bg-blue-500/20 flex items-center justify-center pointer-events-none z-10 rounded-lg">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg px-4 py-3 flex items-center gap-2 border border-blue-300 dark:border-blue-600">
|
|
<i class="fas fa-plus-circle text-blue-500"></i>
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">Drop to add sprite at frame {{ currentFrameIndex + 1 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:w-80 xl:w-96 flex-shrink-0 lg:h-full lg:min-h-0 flex flex-col">
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden flex-1 flex flex-col lg:overflow-y-auto">
|
|
<!-- Playback Controls -->
|
|
<div class="p-4 border-b border-gray-100 dark:border-gray-700 flex-shrink-0">
|
|
<h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">Playback</h3>
|
|
<div class="flex items-center gap-2">
|
|
<button @click="togglePlayback" class="flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 h-10 rounded-lg transition-all cursor-pointer flex-1 shadow-sm active:scale-95">
|
|
<span v-if="isPlaying" class="flex items-center gap-2 font-medium">
|
|
<i class="fas fa-pause"></i>
|
|
Pause
|
|
</span>
|
|
<span v-else class="flex items-center gap-2 font-medium">
|
|
<i class="fas fa-play"></i>
|
|
Play
|
|
</span>
|
|
</button>
|
|
<button @click="previousFrame" class="btn btn-secondary rounded-lg h-10 w-10" :disabled="isPlaying" :class="{ 'opacity-50 cursor-not-allowed': isPlaying }">
|
|
<i class="fas fa-step-backward"></i>
|
|
</button>
|
|
<button @click="nextFrame" class="btn btn-secondary rounded-lg h-10 w-10" :disabled="isPlaying" :class="{ 'opacity-50 cursor-not-allowed': isPlaying }">
|
|
<i class="fas fa-step-forward"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Animation Settings -->
|
|
<div class="p-4 border-b border-gray-100 dark:border-gray-700 space-y-5 flex-shrink-0">
|
|
<h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1">Animation</h3>
|
|
|
|
<!-- Frame Navigation -->
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Frame</span>
|
|
<span class="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">{{ visibleFrameNumber }} / {{ visibleFramesCount }}</span>
|
|
</div>
|
|
<input type="range" min="0" :max="visibleFrames.length - 1" :value="visibleFrameIndex" @input="handleSliderInput" class="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600" :disabled="isPlaying" :class="{ 'opacity-50': isPlaying }" />
|
|
</div>
|
|
|
|
<!-- FPS Control -->
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Speed (FPS)</span>
|
|
<span class="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">{{ fps }}</span>
|
|
</div>
|
|
<input type="range" min="1" max="60" v-model.number="fps" class="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- View Options -->
|
|
<div class="p-4 space-y-5 flex-1">
|
|
<h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1">View Options</h3>
|
|
|
|
<!-- Zoom Control -->
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Zoom</span>
|
|
<span class="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">{{ Math.round(zoom * 100) }}%</span>
|
|
</div>
|
|
<input type="range" min="0.5" max="5" step="0.1" v-model.number="zoom" class="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600" />
|
|
</div>
|
|
|
|
<!-- Toggles -->
|
|
<div class="space-y-3 pt-2">
|
|
<label class="flex items-center justify-between cursor-pointer group">
|
|
<span class="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors">Pixel perfect</span>
|
|
<div class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" v-model="settingsStore.pixelPerfect" class="sr-only peer" />
|
|
<div
|
|
class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
|
|
></div>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="flex items-center justify-between cursor-pointer group">
|
|
<span class="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors">Reposition mode</span>
|
|
<div class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" v-model="isDraggable" class="sr-only peer" />
|
|
<div
|
|
class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
|
|
></div>
|
|
</div>
|
|
</label>
|
|
|
|
<div class="pl-4 border-l-2 border-gray-100 dark:border-gray-700 transition-all space-y-2" :class="{ 'opacity-50 pointer-events-none': !isDraggable }">
|
|
<label class="flex items-center justify-between cursor-pointer group">
|
|
<span class="text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-800 dark:group-hover:text-gray-200 transition-colors">Apply to all layers</span>
|
|
<input type="checkbox" v-model="repositionAllLayers" class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" :disabled="!isDraggable" />
|
|
</label>
|
|
<label class="flex items-center justify-between cursor-pointer group">
|
|
<span class="text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-800 dark:group-hover:text-gray-200 transition-colors">Arrow key movement</span>
|
|
<input type="checkbox" v-model="arrowKeyMovement" class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" :disabled="!isDraggable" />
|
|
</label>
|
|
</div>
|
|
|
|
<label class="flex items-center justify-between cursor-pointer group">
|
|
<span class="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors">Compare sprites</span>
|
|
<div class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" v-model="showAllSprites" class="sr-only peer" />
|
|
<div
|
|
class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
|
|
></div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current frame offset display -->
|
|
<div v-if="currentFrameSprite" class="px-4 pb-4 flex-shrink-0">
|
|
<div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-100 dark:border-gray-700 flex items-center justify-between">
|
|
<span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Offset</span>
|
|
<span class="text-xs font-mono font-bold text-gray-700 dark:text-gray-200">X: {{ currentFrameSprite.x }} <span class="text-gray-300 dark:text-gray-600 mx-1">|</span> Y: {{ currentFrameSprite.y }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Frame Selection (when Compare sprites is enabled) -->
|
|
<div v-if="showAllSprites" class="border-t border-gray-100 dark:border-gray-700 p-4 flex-shrink-0">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Visible Frames</h3>
|
|
<div class="flex gap-1">
|
|
<button @click="showAllFrames" class="px-2 py-1 text-[10px] font-medium bg-blue-50 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50 rounded transition-colors">All</button>
|
|
<button @click="hideAllFrames" class="px-2 py-1 text-[10px] font-medium bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 rounded transition-colors">None</button>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-700 p-2">
|
|
<div class="max-h-[150px] overflow-y-auto pr-1 custom-scrollbar">
|
|
<div class="space-y-1">
|
|
<div v-for="(sprite, index) in compositeFrames" :key="sprite.id" class="flex items-center gap-3 px-2 py-1.5 hover:bg-white dark:hover:bg-gray-700 cursor-pointer rounded-md transition-colors group" @click="toggleHiddenFrame(index)">
|
|
<input
|
|
type="checkbox"
|
|
:checked="!hiddenFrames.includes(index)"
|
|
class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
|
@click.stop
|
|
@change="toggleHiddenFrame(index)"
|
|
/>
|
|
<div class="w-8 h-8 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded flex items-center justify-center overflow-hidden flex-shrink-0 shadow-sm">
|
|
<img :src="sprite.url" class="max-w-full max-h-full object-contain" :style="{ ...(settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}), transform: `rotate(${sprite.rotation || 0}deg) scale(${sprite.flipX ? -1 : 1}, ${sprite.flipY ? -1 : 1})` }" />
|
|
</div>
|
|
<span class="text-xs font-mono text-gray-600 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100">Frame {{ index + 1 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<input ref="fileInput" type="file" accept="image/*" class="hidden" @change="handleFileChange" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, watch, onUnmounted, computed, toRef } from 'vue';
|
|
import { useSettingsStore } from '@/stores/useSettingsStore';
|
|
import type { Layer, Sprite } from '@/types/sprites';
|
|
import { useZoom } from '@/composables/useZoom';
|
|
import { useAnimationFrames } from '@/composables/useAnimationFrames';
|
|
import { useGridMetrics } from '@/composables/useGridMetrics';
|
|
import { useBackgroundStyles } from '@/composables/useBackgroundStyles';
|
|
import CopyToFrameModal from './utilities/CopyToFrameModal.vue';
|
|
|
|
const props = defineProps<{
|
|
layers: Layer[];
|
|
activeLayerId: string;
|
|
columns: number;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'updateSprite', id: string, x: number, y: number): void;
|
|
(e: 'updateSpriteInLayer', layerId: string, spriteId: string, x: number, y: number): void;
|
|
(e: 'dropSprite', layerId: string, frameIndex: number, files: File[]): void;
|
|
(e: 'rotateSprite', id: string, angle: number): void;
|
|
(e: 'flipSprite', id: string, direction: 'horizontal' | 'vertical'): void;
|
|
(e: 'copySpriteToFrame', spriteId: string, targetLayerId: string, targetFrameIndex: number): void;
|
|
(e: 'replaceSprite', id: string, file: File): void;
|
|
(e: 'openPixelEditor', layerId: string, frameIndex: number): void;
|
|
}>();
|
|
|
|
const previewContainerRef = ref<HTMLDivElement | null>(null);
|
|
|
|
const settingsStore = useSettingsStore();
|
|
|
|
const {
|
|
zoom,
|
|
increase: increaseZoom,
|
|
decrease: decreaseZoom,
|
|
} = useZoom({
|
|
allowedValues: [0.5, 1, 2, 3, 4, 5],
|
|
initial: 1,
|
|
});
|
|
|
|
const getVisibleLayers = () => props.layers.filter(l => l.visible);
|
|
const maxFrames = () => Math.max(0, ...getVisibleLayers().map(l => l.sprites.length));
|
|
|
|
const { currentFrameIndex, isPlaying, fps, hiddenFrames, visibleFrames, visibleFramesCount, visibleFrameIndex, visibleFrameNumber, togglePlayback, nextFrame, previousFrame, handleSliderInput, toggleHiddenFrame, showAllFrames, hideAllFrames, stopAnimation } = useAnimationFrames({
|
|
sprites: () => {
|
|
const len = maxFrames();
|
|
const frames: Sprite[] = [];
|
|
for (let i = 0; i < len; i++) {
|
|
const s = getVisibleLayers().find(l => l.sprites[i])?.sprites[i];
|
|
if (s) frames.push(s);
|
|
}
|
|
return frames;
|
|
},
|
|
onDraw: () => {}, // No longer needed for canvas drawing
|
|
});
|
|
|
|
const isDraggable = ref(false);
|
|
const repositionAllLayers = ref(false);
|
|
const arrowKeyMovement = ref(false);
|
|
const showAllSprites = ref(false);
|
|
const isDragOver = ref(false);
|
|
|
|
const showContextMenu = ref(false);
|
|
const contextMenuX = ref(0);
|
|
const contextMenuY = ref(0);
|
|
const contextMenuSpriteId = ref<string | null>(null);
|
|
const contextMenuLayerId = ref<string | null>(null);
|
|
const fileInput = ref<HTMLInputElement | null>(null);
|
|
const replacingSpriteId = ref<string | null>(null);
|
|
|
|
const showCopyToFrameModal = ref(false);
|
|
const copyTargetLayerId = ref(props.activeLayerId);
|
|
|
|
const onDragOver = () => {
|
|
isDragOver.value = true;
|
|
};
|
|
|
|
const onDragLeave = () => {
|
|
isDragOver.value = false;
|
|
};
|
|
|
|
const onDrop = (event: DragEvent) => {
|
|
isDragOver.value = false;
|
|
|
|
if (!event.dataTransfer?.files.length) return;
|
|
|
|
const files = Array.from(event.dataTransfer.files).filter(file => file.type.startsWith('image/'));
|
|
|
|
if (files.length === 0) return;
|
|
|
|
emit('dropSprite', props.activeLayerId, currentFrameIndex.value, files);
|
|
};
|
|
|
|
const compositeFrames = computed<Sprite[]>(() => {
|
|
const activeLayer = props.layers.find(l => l.id === props.activeLayerId);
|
|
if (!activeLayer) {
|
|
const v = getVisibleLayers();
|
|
const len = maxFrames();
|
|
const arr: Sprite[] = [];
|
|
for (let i = 0; i < len; i++) {
|
|
const s = v.find(l => l.sprites[i])?.sprites[i];
|
|
if (s) arr.push(s);
|
|
}
|
|
return arr;
|
|
}
|
|
return activeLayer.sprites;
|
|
});
|
|
|
|
const currentFrameSprite = computed<Sprite | null>(() => {
|
|
const layer = props.layers.find(l => l.id === props.activeLayerId);
|
|
if (!layer) return null;
|
|
return layer.sprites[currentFrameIndex.value] || null;
|
|
});
|
|
|
|
const { gridMetrics, getCellPosition: getCellPositionHelper } = useGridMetrics({
|
|
layers: toRef(props, 'layers'),
|
|
negativeSpacingEnabled: toRef(settingsStore, 'negativeSpacingEnabled'),
|
|
manualCellSizeEnabled: toRef(settingsStore, 'manualCellSizeEnabled'),
|
|
manualCellWidth: toRef(settingsStore, 'manualCellWidth'),
|
|
manualCellHeight: toRef(settingsStore, 'manualCellHeight'),
|
|
});
|
|
|
|
const getCellPosition = (index: number) => {
|
|
return getCellPositionHelper(index, props.columns, gridMetrics.value);
|
|
};
|
|
|
|
const cellDimensions = computed(() => ({
|
|
cellWidth: gridMetrics.value.maxWidth,
|
|
cellHeight: gridMetrics.value.maxHeight,
|
|
negativeSpacing: gridMetrics.value.negativeSpacing,
|
|
}));
|
|
|
|
const {
|
|
backgroundImage: previewBackgroundImage,
|
|
backgroundSize: previewBackgroundSize,
|
|
backgroundPosition: previewBackgroundPosition,
|
|
} = useBackgroundStyles({
|
|
backgroundColor: toRef(settingsStore, 'backgroundColor'),
|
|
checkerboardEnabled: toRef(settingsStore, 'checkerboardEnabled'),
|
|
darkMode: toRef(settingsStore, 'darkMode'),
|
|
});
|
|
|
|
const getPreviewBackgroundImage = () => previewBackgroundImage.value;
|
|
|
|
const isDragging = ref(false);
|
|
const activeSpriteId = ref<string | null>(null);
|
|
const activeLayerId = ref<string | null>(null);
|
|
const dragStartX = ref(0);
|
|
const dragStartY = ref(0);
|
|
const spritePosBeforeDrag = ref({ x: 0, y: 0 });
|
|
const allSpritesPosBeforeDrag = ref<Map<string, { x: number; y: number }>>(new Map());
|
|
|
|
const startDrag = (event: MouseEvent, sprite: Sprite, layerId: string) => {
|
|
if (!isDraggable.value || !previewContainerRef.value) return;
|
|
|
|
const rect = previewContainerRef.value.getBoundingClientRect();
|
|
const scaleX = previewContainerRef.value.offsetWidth / (rect.width / zoom.value);
|
|
const scaleY = previewContainerRef.value.offsetHeight / (rect.height / zoom.value);
|
|
|
|
const mouseX = ((event.clientX - rect.left) / zoom.value) * scaleX;
|
|
const mouseY = ((event.clientY - rect.top) / zoom.value) * scaleY;
|
|
|
|
if (repositionAllLayers.value) {
|
|
isDragging.value = true;
|
|
activeSpriteId.value = 'ALL_LAYERS'; // Special marker for all layers
|
|
dragStartX.value = mouseX;
|
|
dragStartY.value = mouseY;
|
|
|
|
allSpritesPosBeforeDrag.value.clear();
|
|
const visibleLayers = getVisibleLayers();
|
|
visibleLayers.forEach(layer => {
|
|
const s = layer.sprites[currentFrameIndex.value];
|
|
if (s) {
|
|
allSpritesPosBeforeDrag.value.set(s.id, { x: s.x, y: s.y });
|
|
}
|
|
});
|
|
} else {
|
|
isDragging.value = true;
|
|
activeSpriteId.value = sprite.id;
|
|
activeLayerId.value = layerId;
|
|
dragStartX.value = mouseX;
|
|
dragStartY.value = mouseY;
|
|
spritePosBeforeDrag.value = { x: sprite.x, y: sprite.y };
|
|
}
|
|
};
|
|
|
|
const drag = (event: MouseEvent) => {
|
|
if (!isDragging.value || !activeSpriteId.value || !previewContainerRef.value) return;
|
|
|
|
const rect = previewContainerRef.value.getBoundingClientRect();
|
|
const scaleX = previewContainerRef.value.offsetWidth / (rect.width / zoom.value);
|
|
const scaleY = previewContainerRef.value.offsetHeight / (rect.height / zoom.value);
|
|
|
|
const mouseX = ((event.clientX - rect.left) / zoom.value) * scaleX;
|
|
const mouseY = ((event.clientY - rect.top) / zoom.value) * scaleY;
|
|
|
|
const deltaX = Math.round(mouseX - dragStartX.value);
|
|
const deltaY = Math.round(mouseY - dragStartY.value);
|
|
|
|
const { cellWidth, cellHeight, negativeSpacing } = cellDimensions.value;
|
|
|
|
if (activeSpriteId.value === 'ALL_LAYERS') {
|
|
const visibleLayers = getVisibleLayers();
|
|
visibleLayers.forEach(layer => {
|
|
const sprite = layer.sprites[currentFrameIndex.value];
|
|
if (!sprite) return;
|
|
|
|
const originalPos = allSpritesPosBeforeDrag.value.get(sprite.id);
|
|
if (!originalPos) return;
|
|
|
|
let newX = Math.round(originalPos.x + deltaX);
|
|
let newY = Math.round(originalPos.y + deltaY);
|
|
|
|
newX = Math.max(-negativeSpacing, Math.min(cellWidth - negativeSpacing - sprite.width, newX));
|
|
newY = Math.max(-negativeSpacing, Math.min(cellHeight - negativeSpacing - sprite.height, newY));
|
|
|
|
emit('updateSpriteInLayer', layer.id, sprite.id, newX, newY);
|
|
});
|
|
} else {
|
|
const activeSprite = props.layers.find(l => l.id === activeLayerId.value)?.sprites[currentFrameIndex.value];
|
|
if (!activeSprite || activeSprite.id !== activeSpriteId.value) return;
|
|
|
|
let newX = Math.round(spritePosBeforeDrag.value.x + deltaX);
|
|
let newY = Math.round(spritePosBeforeDrag.value.y + deltaY);
|
|
|
|
newX = Math.max(-negativeSpacing, Math.min(cellWidth - negativeSpacing - activeSprite.width, newX));
|
|
newY = Math.max(-negativeSpacing, Math.min(cellHeight - negativeSpacing - activeSprite.height, newY));
|
|
|
|
emit('updateSprite', activeSpriteId.value, newX, newY);
|
|
}
|
|
};
|
|
|
|
const stopDrag = () => {
|
|
isDragging.value = false;
|
|
activeSpriteId.value = null;
|
|
activeLayerId.value = null;
|
|
};
|
|
|
|
const handleTouchStart = (event: TouchEvent, sprite: Sprite, layerId: string) => {
|
|
if (!isDraggable.value) return;
|
|
|
|
if (event.touches.length === 1) {
|
|
const touch = event.touches[0];
|
|
const mouseEvent = new MouseEvent('mousedown', {
|
|
clientX: touch.clientX,
|
|
clientY: touch.clientY,
|
|
});
|
|
startDrag(mouseEvent, sprite, layerId);
|
|
}
|
|
};
|
|
|
|
const handleTouchMove = (event: TouchEvent) => {
|
|
if (!isDraggable.value) return;
|
|
|
|
if (isDragging.value) {
|
|
event.preventDefault(); // Only prevent default when actually dragging
|
|
}
|
|
|
|
if (event.touches.length === 1) {
|
|
const touch = event.touches[0];
|
|
const mouseEvent = new MouseEvent('mousemove', {
|
|
clientX: touch.clientX,
|
|
clientY: touch.clientY,
|
|
});
|
|
drag(mouseEvent);
|
|
}
|
|
};
|
|
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (!isDraggable.value || !arrowKeyMovement.value) return;
|
|
|
|
const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
|
|
if (!arrowKeys.includes(event.key)) return;
|
|
|
|
event.preventDefault();
|
|
|
|
let deltaX = 0;
|
|
let deltaY = 0;
|
|
const step = event.shiftKey ? 10 : 1; // Hold Shift for larger steps
|
|
|
|
switch (event.key) {
|
|
case 'ArrowUp':
|
|
deltaY = -step;
|
|
break;
|
|
case 'ArrowDown':
|
|
deltaY = step;
|
|
break;
|
|
case 'ArrowLeft':
|
|
deltaX = -step;
|
|
break;
|
|
case 'ArrowRight':
|
|
deltaX = step;
|
|
break;
|
|
}
|
|
|
|
const { cellWidth, cellHeight, negativeSpacing } = cellDimensions.value;
|
|
|
|
if (repositionAllLayers.value) {
|
|
const visibleLayers = getVisibleLayers();
|
|
visibleLayers.forEach(layer => {
|
|
const sprite = layer.sprites[currentFrameIndex.value];
|
|
if (!sprite) return;
|
|
|
|
let newX = Math.round(sprite.x + deltaX);
|
|
let newY = Math.round(sprite.y + deltaY);
|
|
|
|
newX = Math.max(-negativeSpacing, Math.min(cellWidth - negativeSpacing - sprite.width, newX));
|
|
newY = Math.max(-negativeSpacing, Math.min(cellHeight - negativeSpacing - sprite.height, newY));
|
|
|
|
emit('updateSpriteInLayer', layer.id, sprite.id, newX, newY);
|
|
});
|
|
} else {
|
|
const activeLayer = props.layers.find(l => l.id === props.activeLayerId);
|
|
if (!activeLayer) return;
|
|
|
|
const sprite = activeLayer.sprites[currentFrameIndex.value];
|
|
if (!sprite) return;
|
|
|
|
let newX = Math.round(sprite.x + deltaX);
|
|
let newY = Math.round(sprite.y + deltaY);
|
|
|
|
newX = Math.max(-negativeSpacing, Math.min(cellWidth - negativeSpacing - sprite.width, newX));
|
|
newY = Math.max(-negativeSpacing, Math.min(cellHeight - negativeSpacing - sprite.height, newY));
|
|
|
|
emit('updateSprite', sprite.id, newX, newY);
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
stopAnimation();
|
|
window.removeEventListener('keydown', handleKeyDown);
|
|
});
|
|
|
|
watch(
|
|
() => props.layers,
|
|
() => {},
|
|
{ deep: true }
|
|
);
|
|
watch(
|
|
() => props.activeLayerId,
|
|
() => {}
|
|
);
|
|
watch(currentFrameIndex, () => {});
|
|
|
|
const openContextMenu = (event: MouseEvent, sprite: Sprite, layerId: string) => {
|
|
event.preventDefault();
|
|
contextMenuSpriteId.value = sprite.id;
|
|
contextMenuLayerId.value = layerId;
|
|
contextMenuX.value = event.clientX;
|
|
contextMenuY.value = event.clientY;
|
|
showContextMenu.value = true;
|
|
};
|
|
|
|
const hideContextMenu = () => {
|
|
showContextMenu.value = false;
|
|
contextMenuSpriteId.value = null;
|
|
contextMenuLayerId.value = null;
|
|
};
|
|
|
|
const rotateSpriteInMenu = (angle: number) => {
|
|
if (contextMenuSpriteId.value) {
|
|
emit('rotateSprite', contextMenuSpriteId.value, angle);
|
|
}
|
|
hideContextMenu();
|
|
};
|
|
|
|
const flipSpriteInMenu = (direction: 'horizontal' | 'vertical') => {
|
|
if (contextMenuSpriteId.value) {
|
|
emit('flipSprite', contextMenuSpriteId.value, direction);
|
|
}
|
|
hideContextMenu();
|
|
};
|
|
|
|
const openCopyToFrameModal = () => {
|
|
if (contextMenuSpriteId.value) {
|
|
copyTargetLayerId.value = contextMenuLayerId.value || props.activeLayerId;
|
|
showCopyToFrameModal.value = true;
|
|
showContextMenu.value = false;
|
|
}
|
|
};
|
|
|
|
const closeCopyToFrameModal = () => {
|
|
showCopyToFrameModal.value = false;
|
|
};
|
|
|
|
const confirmCopyToFrame = (targetLayerId: string, targetFrameIndex: number) => {
|
|
if (contextMenuSpriteId.value) {
|
|
emit('copySpriteToFrame', contextMenuSpriteId.value, targetLayerId, targetFrameIndex);
|
|
closeCopyToFrameModal();
|
|
contextMenuSpriteId.value = null;
|
|
}
|
|
};
|
|
|
|
const replaceSprite = () => {
|
|
if (contextMenuSpriteId.value && fileInput.value) {
|
|
replacingSpriteId.value = contextMenuSpriteId.value;
|
|
fileInput.value.click();
|
|
hideContextMenu();
|
|
}
|
|
};
|
|
|
|
const handleFileChange = (event: Event) => {
|
|
const input = event.target as HTMLInputElement;
|
|
|
|
if (input.files && input.files.length > 0) {
|
|
const file = input.files[0];
|
|
if (file.type.startsWith('image/') && replacingSpriteId.value) {
|
|
emit('replaceSprite', replacingSpriteId.value, file);
|
|
}
|
|
}
|
|
replacingSpriteId.value = null;
|
|
input.value = '';
|
|
};
|
|
|
|
const openPixelEditor = () => {
|
|
if (contextMenuSpriteId.value && contextMenuLayerId.value) {
|
|
emit('openPixelEditor', contextMenuLayerId.value, currentFrameIndex.value);
|
|
hideContextMenu();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Custom styling for range inputs */
|
|
input[type='range']::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: #3b82f6;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type='range']::-moz-range-thumb {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: #3b82f6;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
/* Custom scrollbar for controls panel */
|
|
.custom-scrollbar::-webkit-scrollbar,
|
|
.lg\:overflow-y-auto::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track,
|
|
.lg\:overflow-y-auto::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb,
|
|
.lg\:overflow-y-auto::-webkit-scrollbar-thumb {
|
|
background-color: rgba(156, 163, 175, 0.5);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover,
|
|
.lg\:overflow-y-auto::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(156, 163, 175, 0.8);
|
|
}
|
|
|
|
:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb,
|
|
:global(.dark) .lg\:overflow-y-auto::-webkit-scrollbar-thumb {
|
|
background-color: rgba(75, 85, 99, 0.5);
|
|
}
|
|
|
|
:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb:hover,
|
|
:global(.dark) .lg\:overflow-y-auto::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(75, 85, 99, 0.8);
|
|
}
|
|
</style>
|