search

retyui / react-quick-pinch-zoom

A react component that providing multi-touch gestures for zooming and dragging on any DOM element.
https://react-quick-pinch-zoom.netlify.app/
310 stars 47 forks source link

Way to block dragging completely and allow only zooming? #67

Open hy2850 opened 1 year ago

hy2850 commented 1 year ago

Hello, I only need the zooming functionality but there seems no way to block the dragging events and only allow zooming. All the event listener props for drag events onDragStart/End/Update doesn't seem to provide a way to disable the event. Is this supported at all? If not, can you suggest me an alternative?

Thanks in advance

aminemohyeddine commented 1 year ago

hello @hy2850 , declare a ref globally : const dragXY = useRef({}) inside onUpdate in the top add : if (dragXY.current?.scale !== scale) { dragXY.current = { x, scale, y } }

update make3dTransformValue line to : make3dTransformValue({ x: dragXY.current?.x || x, y:dragXY.current?.y || y, scale })

i hope this will help , i'm stuck with a really complicated cases :'(

retyui commented 1 year ago

I see, welcome to PR if you can fix it!

also you can try an alternative library: https://github.com/prc5/react-zoom-pan-pinch