woutervh- / react-pan-and-zoom-hoc Goto Github PK

I'm trying to use this with SVGs and it doesn't seem to work. Here is a demo:

https://codesandbox.io/s/mq47r2nwop

One culprit I see is this check for HTML element: https://github.com/woutervh-/react-pan-and-zoom-hoc/blob/master/src/panAndZoomHoc.tsx#L73 which would exclude SVG elements.

I'm trying to use it in this project reaviz that I built and replace my custom code with this lib: https://github.com/jask-oss/reaviz/blob/master/src/common/ZoomPan/ChartZoomPan.tsx

It would be nice if there was a onZoomEnd event. I've implemented it in the past like:

onZoom() {
     .... stuff...

    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => {
      this.onZoomEnd();
    }, 500);
}

Is it possible to add an option to disable zooming on scroll? I have a use case that requires both scrolling using the mouse wheel and panning. Thank you very much!

I receive TypeError: this.componentRef.current.addEventListener is not a function when attempting the Unmanaged Example from the Readme while using React 16.5.

The error is thrown from panAndZoomHoc.tsx#L75

if (this.componentRef.current) {
  this.componentRef.current.removeEventListener('wheel', this.handleWheel);
}

Using Chrome debugger, it appears this.componentRef.current returns the component itself and not a DOM reference:

Purportedly we're supposed to use ReactDOM.findDOMNode(component) to get the DOM reference from a component.

I would like to prevent panning while the mouse is inside this red area to allow some drag and drop features:

To accomplish this, I added some Listeners for all events react-pan-and-zoom-hoc registers. Inside of this listeners, I try to call event.preventDefault();:

<div
    className={styles.selectedProductImageRenderer}
    style={wrapperStyle}
    onMouseDown={(event) => {
        event.preventDefault();
        event.stopPropagation();
        return false;
    }}
    onMouseUp={(event) => {
        event.preventDefault();
        event.stopPropagation();
        return false;
    }}
    onMouseMove={(event) => {
        event.preventDefault();
        event.stopPropagation();
        return false;
    }}
    onTouchStart={(event) => {
        event.preventDefault();
        event.stopPropagation();
        return false;
    }}
>
    foo
</div>

This seems to work as far as defaultPrevented is set to true when I use my event listeners (Screenshot is the output of console.log('handleMouseMove', event); ):

Then I thought it would be an easy task by just adding something like event.defaultPrevented in handleMouseDown, handleMouseMove and handleMouseUp like this:

         handleMouseDown = (event: MouseEvent | TouchEvent) => {
-            if (!this.panning && !this.boxZoom) {
+            if (!this.panning && !this.boxZoom && !event.defaultPrevented) {

        handleMouseMove = (event: MouseEvent | TouchEvent) => {
-            if (this.panning || this.boxZoom) {
+            if ((this.panning || this.boxZoom) && !event.defaultPrevented) {

        handleMouseUp = (event: MouseEvent | TouchEvent) => {
-            if (this.panning || this.boxZoom) {
+            if ((this.panning || this.boxZoom) && !event.defaultPrevented) {

Am I missing something? Would be nice to get an basic support of event.defaultPrevented. I think event.defaultPrevented is kinda private so I cannot access it.

For some reasons, on touch devices sometimes normalizeTouchPosition gets called while event.targetTouches contains zero items. This will make this code to fail since the first item (targetTouches[0]) does not exist:

const position = {
    clientX: ('targetTouches' in event) ? event.targetTouches[0].pageX : event.clientX,
    clientY: ('targetTouches' in event) ? event.targetTouches[0].pageY : event.clientY
};

The error then is

undefined is not an object (evaluating 'event.targetTouches[0].pageX')

There are a way to change a pan move control?
Like hold click mouse for move the pan. Or function like move or not? if scale is 1 can move?

We have a large svg map component on which we zoom but it zooms more onto the upper left corner instead of where the mouse pointer is supposed to be. Is there an easy way to set the mouse pointer as the center of the zoom or maybe set the zooming onto a fixed point so it always zooms on the center and not based on the mouse position?

In newer versions of react, componentWillReceiveProps has been deprecated and this line triggers this warning.

Currently when importing react-pan-and-zoom-hoc, TypeScript throws an error: Type 'keyof T' does not satisfy the constraint 'string'

Here's a thread on the subject.

This kinda relates to https://github.com/woutervh-/react-pan-and-zoom-hoc/issues/12 but I want to leave it here for discussions. As described in this stackoverflow post and the documentation of "addEventListener" touchmove stopped to be cancelable using event.preventDefault() until we register the event listender like this:

document.addEventListener('touchmove', this.handleMouseMove, {passive: false});

In my opinion its ok the keep this like the current version, but maybe there should be an option to "enable" the {passive: false}-flag?

When panning and your mouse leaves the bounds of the component, you expect the panning to stop.
When you release the mouse and re-enter the component, it is still panning, even though the user isn't holding the mouse down.
A more expected behaviour is that the panning simply stops when you leave the component.

I just found that there is a difference in using react-pan-and-zoom-hoc with mouse or with touch. As you can see in this video, everything works well when using the mouse. But when touch is used, the movement is kinda "reset". Also it seems that a similar issue like https://github.com/woutervh-/react-pan-and-zoom-hoc/issues/17 still exists?

Thanks for the quick update to #5.

After updating to the latest 1.3.0, zooming is broken for me. I see that there were changes to fix #4, but it was working for me before in my project. Here is a demo using 1.1.11 with zooming working.

Here is where I implement react-pan-and-zoom-hoc. Do you see where I am going wrong? In my handlePanAndZoom callback I've tried changing:

const zoomXOffset = prevXoffset + (prevXoffset - xOffset);
const zoomYOffset = prevYOffset + (prevYOffset - yOffset);

to:

const zoomXOffset = xOffset;
const zoomYOffset = yOffset;

Please remove console.log(clientX, clientY); console.log from panAndZoomHoc.tsx, line 162.

Is printing info on each click