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

Focus support for children #25

Closed j1mie closed 2 years ago

j1mie commented 4 years ago

Hi there, I'm wondering if it's possible to focus child components, using this library?

Currently, I'm unable to focus by clicking any element within QuickPinchZoom.

retyui commented 4 years ago

Could you please create a demo to show this issue?

j1mie commented 4 years ago

Sure thing: https://codesandbox.io/s/red-sound-pydro?file=/src/styles.css

retyui commented 4 years ago

This happens when called a next line:

https://github.com/retyui/react-quick-pinch-zoom/blob/84be39f5f90302687a6b4343debb040dbc1dd90f/src/PinchZoom/component.tsx#L862

And you can overwrite this behavior As a workaround https://codesandbox.io/s/naughty-kepler-qxbj4

import QuickPinchZoom from "react-quick-pinch-zoom";

class MyQuickPinchZoom extends  QuickPinchZoom {
   simulate(fn) {
    return mouseEvent => {
      const { pageX, pageY, type } = mouseEvent;
      const isEnd = type === "mouseup";
      const isStart = type === "mousedown";

      if (isStart) {
       // FIXME: To have able focus elemnts
       // mouseEvent.preventDefault();

        this._listenMouseMove = true;
      }

      if (this._listenMouseMove) {
        mouseEvent.touches = isEnd ? [] : [{ pageX, pageY }];

        fn(mouseEvent);
      }

      if (isEnd) {
        this._listenMouseMove = false;
      }
    };
  }
}

// .................

<MyQuickPinchZoom
 ...
/>