Make React/Html element responding to pan/pinch gestures

شرح پروژه

In this simple app: https://codesandbox.io/s/gestures-vwgtqz?file=/src/App.tsx:263-850 There's a div with "Gestures" class applied. The requirements are: - make content of this div zoomable & draggable; - on touch devices pinch gesture should perform zoom in/out; - on touch devices only two-fingers gesture should perform the pan/drag; one finger gesture should perform standard browser scroll, so list can be scrolled; - basically on touch devices two-fingers gesture should allow to zoom and drag the content; - on devices with the mouse/touchpad press and move should perform the drag; - on devices with the mouse/touchpad ctrl+scroll/wheel should perform zoom in/out; - on devices with the mouse/touchpad scrolling over the content without ctrl key held should be detected and passed to React (e.g. as an event), so the hint about ctrl key can be shown; - on touch devices single finger pan should be detected and passed to React (e.g. as an event), so the hint about two fingers gesture can be shown; - moving of the content should be smooth, even if there's a lot of the content; - if the content contains an input element, e.g. button, it should receive press event; - it should be possible to set initial zoom scale; - it should be possible to configure if content can/cannot go off the edges of the parent; - code should be written with TypeScript; - dragging/zooming should feel natural; Basically it should behave the same as the map here: https://developers.google.com/maps/documentation/embed/get-started Solution can be done with 3rd party libraries but preferably nothing heavy

مهارت ها و تخصص های مورد نیاز

درباره کارفرما

سلینا

عضویت دو سال پیش

39 پروژه ثبت شده ،

0 پروژه در حال انجام ،

0 پروژه آماده دریافت پیشنهاد ،

نرخ پذیرش پیشنهاد 51%