@@ -178,6 +181,31 @@ const currentSprite = computed(() => {
return null
})
+// Create computed properties with getters and setters for two-way binding
+const offsetXModel = computed({
+ get: () => currentSprite.value?.offset?.x || 0,
+ set: (value) => {
+ if (isAnimating.value) return
+ const newOffset = {
+ x: value,
+ y: currentSprite.value?.offset?.y || 0
+ }
+ emit('update:tempOffset', currentFrame.value, newOffset)
+ }
+})
+
+const offsetYModel = computed({
+ get: () => currentSprite.value?.offset?.y || 0,
+ set: (value) => {
+ if (isAnimating.value) return
+ const newOffset = {
+ x: currentSprite.value?.offset?.x || 0,
+ y: value
+ }
+ emit('update:tempOffset', currentFrame.value, newOffset)
+ }
+})
+
// Toggle for showing reference sprites
const showReferenceSprites = ref(true)
@@ -276,6 +304,13 @@ function onDrag(event: MouseEvent) {
}
function stopDrag() {
+ if (isDragging.value && currentSprite.value?.offset) {
+ // Ensure the final offset is applied when dragging stops
+ emit('update:tempOffset', currentFrame.value, {
+ x: currentSprite.value.offset.x,
+ y: currentSprite.value.offset.y
+ })
+ }
isDragging.value = false
}
@@ -297,25 +332,25 @@ function updateOffset(event: Event, axis: 'x' | 'y') {
}
watch(
- () => props.frameRate,
- (newValue) => {
- localFrameRate.value = newValue
- updateAnimation()
- },
- { immediate: true }
+ () => props.frameRate,
+ (newValue) => {
+ localFrameRate.value = newValue
+ updateAnimation()
+ },
+ { immediate: true }
)
watch(() => props.sprites, updateAnimation, { immediate: true })
watch(
- () => isAnimating.value,
- (newValue) => {
- if (newValue) {
- updateAnimation()
- } else {
- stopAnimation()
+ () => isAnimating.value,
+ (newValue) => {
+ if (newValue) {
+ updateAnimation()
+ } else {
+ stopAnimation()
+ }
}
- }
)
onMounted(() => {
@@ -328,4 +363,4 @@ onMounted(() => {
onUnmounted(() => {
stopAnimation()
})
-
+
\ No newline at end of file