useGesture

<script setup>
import { ref } from 'vue'
import { useGesture, VView, VText } from '@thelacanians/vue-native-runtime'

const viewRef = ref()

const { pan, isGesturing } = useGesture(viewRef, {
  pan: true,
  pinch: true,
})

// pan.value = { translationX, translationY, velocityX, velocityY, state }
// isGesturing.value = true while gesture is active
</script>

<template>
  <VView 
    ref="viewRef"
    :style="{ 
      flex: 1, 
      justifyContent: 'center', 
      alignItems: 'center',
      backgroundColor: '#f0f0f0'
    }"
  >
    <VText v-if="pan">
      Pan: {{ pan.translationX.toFixed(0) }}, {{ pan.translationY.toFixed(0) }}
    </VText>
    <VText v-else>Start panning...</VText>
  </VView>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useGesture, VView, VText } from '@thelacanians/vue-native-runtime'

const viewRef = ref()
const offsetX = ref(0)
const offsetY = ref(0)

const { pan, isGesturing } = useGesture(viewRef, { pan: true })

// Update position on pan
const style = computed(() => ({
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: isGesturing.value ? '#007AFF' : '#666',
  transform: [
    { translateX: offsetX.value + (pan.value?.translationX ?? 0) },
    { translateY: offsetY.value + (pan.value?.translationY ?? 0) },
  ],
}))

function onPanEnd() {
  if (pan.value?.state === 'ended') {
    offsetX.value += pan.value.translationX
    offsetY.value += pan.value.translationY
  }
}
</script>

<template>
  <VView :style="{ flex: 1, backgroundColor: '#f5f5f5' }">
    <VView ref="viewRef" :style="style">
      <VText :style="{ color: '#fff' }">
        {{ isGesturing ? 'Dragging...' : 'Drag me!' }}
      </VText>
    </VView>
  </VView>
</template>

<script setup>
import { ref } from 'vue'
import { useGesture, VView, VText } from '@thelacanians/vue-native-runtime'

const viewRef = ref()

// The view follows the finger natively; the callback still fires for state/`ended`.
const { pan } = useGesture(viewRef, { pan: { nativeDrive: true } })

function onPanEnd() {
  if (pan.value?.state === 'ended') {
    // Commit or snap the final position via a style update here.
  }
}
</script>

<template>
  <VView ref="viewRef" :style="{ width: 120, height: 120, backgroundColor: '#007AFF' }" />
</template>

<script setup>
import { ref, computed } from 'vue'
import { useGesture, VView, VText, VImage } from '@thelacanians/vue-native-runtime'

const imageRef = ref()
const scale = ref(1)

const { pinch } = useGesture(imageRef, { pinch: true })

const imageStyle = computed(() => ({
  width: 300,
  height: 300,
  transform: [{ scale: scale.value * (pinch.value?.scale ?? 1) }],
}))

function onPinchEnd() {
  if (pinch.value?.state === 'ended') {
    scale.value *= pinch.value.scale
  }
}
</script>

<template>
  <VView :style="{ flex: 1, justifyContent: 'center', alignItems: 'center' }">
    <VImage 
      ref="imageRef"
      :source="{ uri: 'https://example.com/image.jpg' }"
      :style="imageStyle"
    />
    <VText :style="{ marginTop: 16 }">
      Scale: {{ (scale.value * (pinch.value?.scale ?? 1)).toFixed(2) }}
    </VText>
  </VView>
</template>

<script setup>
import { ref } from 'vue'
import { useGesture, VView, VText, VImage } from '@thelacanians/vue-native-runtime'

const images = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg',
]

const currentIndex = ref(0)
const containerRef = ref()

const { swipeLeft, swipeRight } = useGesture(containerRef, {
  swipeLeft: true,
  swipeRight: true,
})

// React to swipes
import { watch } from 'vue'
watch(swipeLeft, (state) => {
  if (state) {
    currentIndex.value = Math.min(currentIndex.value + 1, images.length - 1)
  }
})

watch(swipeRight, (state) => {
  if (state) {
    currentIndex.value = Math.max(currentIndex.value - 1, 0)
  }
})
</script>

<template>
  <VView ref="containerRef" :style="{ flex: 1, justifyContent: 'center', alignItems: 'center' }">
    <VImage 
      :source="{ uri: images[currentIndex] }"
      :style="{ width: 300, height: 300 }"
    />
    <VText :style="{ marginTop: 16 }">
      {{ currentIndex + 1 }} / {{ images.length }} - Swipe to navigate
    </VText>
  </VView>
</template>

<script setup>
import { ref } from 'vue'
import { useComposedGestures, VView, VText } from '@thelacanians/vue-native-runtime'

const viewRef = ref()

const { 
  pan, 
  pinch, 
  rotate,
  isGesturing,
  isPinchingAndRotating,
  isPanningAndPinching 
} = useComposedGestures(viewRef)
</script>

<template>
  <VView ref="viewRef" :style="{ flex: 1, justifyContent: 'center', alignItems: 'center' }">
    <VText v-if="isPinchingAndRotating">Pinching + Rotating!</VText>
    <VText v-else-if="isPanningAndPinching">Panning + Pinching!</VText>
    <VText v-else-if="isGesturing">Gesture active</VText>
    <VText v-else>Use two fingers to transform</VText>
  </VView>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useGesture, VView } from '@thelacanians/vue-native-runtime'

const viewRef = ref()
const { attach, on, detach } = useGesture()

onMounted(() => {
  attach(viewRef)
  
  // Manual event binding
  const disposePress = on('press', (state) => {
    console.log('Pressed at', state.locationX, state.locationY)
  })
  
  const disposePan = on('pan', (state) => {
    if (state.state === 'ended') {
      console.log('Pan ended with velocity:', state.velocityX, state.velocityY)
    }
  })
  
  // Cleanup on unmount (optional - onUnmounted handles this)
  // disposePress()
  // disposePan()
})
</script>

<template>
  <VView ref="viewRef" :style="{ flex: 1 }">
    <!-- content -->
  </VView>
</template>