chore: remove dead gesture code (#1632)
parent
5f2b5a584a
commit
d204b6b1fd
|
@ -1,76 +0,0 @@
|
|||
import type { PermissiveMotionProperties } from '@vueuse/motion'
|
||||
import type { Handlers } from '@vueuse/gesture'
|
||||
import { useMotionProperties, useSpring } from '@vueuse/motion'
|
||||
import { useGesture } from '@vueuse/gesture'
|
||||
import type { MaybeRef } from '@vueuse/core'
|
||||
|
||||
export interface CarouselOptions {
|
||||
hasNext: MaybeRef<boolean>
|
||||
hasPrev: MaybeRef<boolean>
|
||||
onPrev: () => void
|
||||
onNext: () => void
|
||||
}
|
||||
|
||||
export const useImageGesture = (
|
||||
domTarget: MaybeRef<HTMLElement>,
|
||||
carouselOptions?: CarouselOptions,
|
||||
) => {
|
||||
const { motionProperties } = useMotionProperties(domTarget, {
|
||||
cursor: 'grab',
|
||||
scale: 1,
|
||||
x: 0,
|
||||
y: 0,
|
||||
})
|
||||
|
||||
const { set } = useSpring(motionProperties as Partial<PermissiveMotionProperties>)
|
||||
|
||||
const handlers: Handlers = {
|
||||
onPinch({ offset: [d] }) {
|
||||
set({ scale: 1 + d / 200 })
|
||||
},
|
||||
onDragStart() {
|
||||
set({ cursor: 'grabbing' })
|
||||
},
|
||||
onDrag({ movement: [x, y], pinching }) {
|
||||
if (!pinching)
|
||||
set({ x, y, cursor: 'grabbing' })
|
||||
},
|
||||
onDragEnd({ vxvy: [vx], pinching }) {
|
||||
if (pinching)
|
||||
return
|
||||
|
||||
set({ cursor: 'grab' })
|
||||
if (carouselOptions) {
|
||||
const isSwipe = Math.abs(vx) > 0.25
|
||||
if (isSwipe) {
|
||||
if (vx > 0 && unref(carouselOptions.hasPrev))
|
||||
carouselOptions.onPrev()
|
||||
|
||||
else if (vx < 0 && unref(carouselOptions.hasNext))
|
||||
carouselOptions.onNext()
|
||||
}
|
||||
}
|
||||
set({ x: 0, y: 0 })
|
||||
},
|
||||
onMove({ movement: [x, y], dragging, pinching }) {
|
||||
if (dragging && !pinching)
|
||||
set({ x, y })
|
||||
},
|
||||
onWheel({ event, dragging, pinching }) {
|
||||
if (!dragging && !pinching && event.altKey) {
|
||||
event.preventDefault()
|
||||
// @ts-expect-error why is ts complaining here (motionProperties.scale)?
|
||||
set({ scale: motionProperties.scale + event.deltaY * 0.001 })
|
||||
}
|
||||
},
|
||||
onDblclick() {
|
||||
set({ scale: 1 })
|
||||
},
|
||||
onTouchstart(event) {
|
||||
if (event.touches === 2)
|
||||
set({ scale: 1 })
|
||||
},
|
||||
}
|
||||
|
||||
useGesture(handlers, { domTarget })
|
||||
}
|
Loading…
Reference in New Issue