mnogueron / react-easy-panzoom Goto Github PK

Hello, thank you for this library I have enjoyed using it but I am unsure where I need to go to fix this issue I'm having.

I am using react-easy-panzoom as a wrapper component around react-archer elements to be able to pan and zoom around a large flow chart.

At PanZoom zoom level of "1" I can click->drag and pan around the chart and resize the containing window and everything works fine.

The issue is that if I zoom out with the mouse wheel using the PanZoom functionality the react-archer arrows scale properly and I can pan without issue, but then after resizing the window while zoomed out the react-archer arrows seem to rerender at the wrong scale. The further I zoom out and then resize the window the smaller the arrows will scale down to.

https://codesandbox.io/s/react-easy-panzoom-svg-scaling-behavior-g8vcn?fontsize=14

        <div>
          <ArcherContainer strokeColor="red">
            <div style={gridWrapper}>
              <ArcherElement
                id="source"
                relations={[
                  {
                    targetId: "target",
                    targetAnchor: "left",
                    sourceAnchor: "right"
                  }
                ]}
              >
                <div style={boxStyle}>Root</div>
              </ArcherElement>
              <ArcherElement id="target" relations={[]}>
                <div style={boxStyle}>Root</div>
              </ArcherElement>
            </div>
          </ArcherContainer>
        </div>
      </PanZoom>

PanZoom zoom level 1 https://i.imgur.com/xr9RRQr.jpg

zoom out https://i.imgur.com/UjHUJ1m.jpg

resize after zoom out https://i.imgur.com/QcGzQWj.jpg

How to reproduce:
Open the sample stories in safari browser and try to drag the image with the mouse, you will see that it keeps reseting until it finally drags, https://mnogueron.github.io/react-easy-panzoom/?path=/story/react-easy-panzoom--control-ui

Is there a way to set the default zoom level?

Reproduction:

1. Use arrow keys for moving the content
2. Drag content and move it slightly (without releasing)
3. The content jumps back to the initial position (before the arrow key shiftings were applied)

Possible Solution:

It seems like there must be a setState call upon releasing the arrow keys (onKeyUp).

Is it possible to disable only PAN?

First of all, thanks for this awesome library!

I'm using it for the electronic diagram viewer in my Arduino simulator project, and it works like a charm :-)

I'm working with TypeScript, so I created a simple type definition file for the library.
I created it manually based on the documentation in the README, so it may not
be completely accurate, but it does the trick for me.

I'm sharing it below for anyone who might need to use the library with TypeScript
in the future:

declare module 'react-easy-panzoom' {
  interface PanZoom extends React.ReactElement {
    zoomIn(zoomSpeed?: number): void;
    zoomOut(zoomSpeed?: number): void;
    autoCenter(zoom: number, animate?: boolean = true): void;
    reset(): void;
    moveByRatio(x: number, y: number, moveSpeedRatio?: number): void;
    rotate(angle: number | ((prevAngle: number) => number)): void;
  }

  export interface OnStateChangeData {
    x: number;
    y: number;
    scale: number;
    angle: number;
  }

  function PanZoom(props: {
    autoCenter?: boolean;
    autoCenterZoomLevel?: number;
    zoomSpeed?: number;
    doubleZoomSpeed?: number;
    disabled?: boolean;
    disableKeyInteraction?: boolean;
    disableDoubleClickZoom?: boolean;
    disableScrollZoom?: boolean;
    realPinch?: boolean;
    minZoom?: number;
    keyMapping?: { [key: string]: { x: number; y: number; z: number } };
    maxZoom?: number;
    enableBoundingBox?: boolean;
    boundaryRatioVertical?: number;
    boundaryRatioHorizontal?: number;
    noStateUpdate?: boolean;
    onPanStart?: (event: React.MouseEvent) => void;
    onPan?: (event: React.MouseEvent) => void;
    onPanEnd?: (event: React.MouseEvent) => void;
    preventPan?: (event: React.MouseEvent, x: number, y: number) => boolean;
    style?: React.StyleHTMLAttributes;
    onStateChange?: (data: OnStateChangeData) => void;
    children: React.ReactNode;
  }): React.ReactElement;
}

Also, if you are interested, I can create pull request and integrate this type information into the library (it will be a separate file, so it doesn't change the existing source code of the library in any way), so that people who install the package via npm will be able to take advantage of it automatically.

And if not, that's fine too, at least people will be able to refer to this issue and find the type definitions here.

Thanks again for creating and maintaining react-easy-panzoom 👍

I am looking for a way to have to zoom in out feature as well as rotate feature. but all the library i see doesn't have rotate feature. Can you please guide me an way to add this?

Hi! Would it be possible to disable zoom on scroll while still having panning enabled? For reference, I'm trying to create a feature that includes zoom-like features, but still allows the user to scroll regularly if needed.

Hi there! I'm incorporating PanZoom in an application and I have a use case where it would be useful to have a controlled PanZoom component. I would like to be able to absolutely set the position and the scale when some props are updated. It seems to me like this feature could be useful for many use cases.

One way to achieve it right now is to use the zoomAbs method that is actually not documented in the readme (is this on purpose?) and also never used in the PanZoom component itself.

It works fine with this method but I would have expected one of the following:

1. Document the zoomAbs method in the readme.
2. Add some props to achieve this. Something like initialPosition and initialScale.

EDIT: You cannot absolutely set the position using zoomAbs. You can only set the zoom. So I don't see any way to control the position except using ref.setState({x: 10, y: 10}) but this seems like a terrible pattern to me.

Hi! Would it be possible to have a method to get the current transform matrix? (Something like getMatrixTransformString, except instead of taking in arguments and formatting it into a string returning the css transform value?

Thanks in advance :)

First of all, thank you for the awesome library. I would like to ask if there is any function that gives the ability to zoom to the target.
for instance, I give the target node (document.getElementById('target')) to the function and it zoom in to that node. Thanks in advance

There is currently no option available to disable the zoom on a doubleClick.

Furthermore, it would be very helpful to have a callback that is called after any pan/zoom aka interaction has happened.

When panning after having used rotate(), the div shoots away very fast.

Example: https://codesandbox.io/s/react-easy-panzoom-example-926sx

Hey. Thanks for the solution. Is it possible to limit the drag of an element inside a container so that there are no empty indents between the container and the contents?
Now it is possible to drag the contents outside the container so that it will not be visible.
See an example to understand what I mean
https://z3ut.github.io/mouse-wheel-zoom/

Hey,

first, thanks a lot for this cool library!
Unfortunately I encountered an issue, when I try to set the boundaryRatios to 0, or already when the value gets close to it, approximately smaller than 0.3. Then the zoom doesn't work properly anymore and fidgets around weirdly. Does anyone have a solution?
Thanks a lot!

Anton

Hello! Is it possible to have a parameter to the zoomIn and zoomOut methods so they can scale a certain amount? I dug through the code a little and currently it scales by this.props.zoomSpeed * some multiplier, but it would be great to be able to determine a zoom speed separately for these methods :)

Hi, I'm using Panzoom to create a zoomable/pannable canvas that includes draggable elements that can move around the canvas.

I'm having an issue where panning and zooming re-renders all children of <Panzoom>, creating huge performance bottlenecks, especially when there is a large quantity of children.

Is there a way to prevent this? Perhaps wrapping the Panzoom component in a React.memo?

Hi,

I'm developing a tool for a software where i needed to made a version of react-designer(https://github.com/react-designer/react-designer) combined with panZoom, in the 'draw container' i put a background image to guide the user where they have to draw some shapes to highlight some areas of bakground, and it's works very well but, when zooming the draw container, the reference of points 'x' and 'y' of mouseClick got offset, resulting in a shape drawed in another position relation to background, i suppose that is necessary consider zoom in the transform matrix but i'm not sure how to, so could you explain to me the calculations you made on the transform matrix? After this i can work on implementation of this calculus that consider the relative position of the mouse pointer in the zoomed image. Or if exist some way to do that with some feature that PanZoom already have.
If you need more information about this case, i'm glad to provide to you everithing you need to solve this situation.
Thanks

Is there a way to change the default blue border whenever you pan? I'd like to hide it or at least be able to change that color. Right now if even if I set the border color to a different color, it still turns blue when panning.

Video attached.

Panning often scrolls up and down the page instead of panning.

Zooming is very laggy, random or doesn't work at all.

https://puu.sh/ED3Ps/d38a0c1a8d.mp4

Hello, I was wondering if there was a way to explicitly set the scale in the state from outside. I am attempting to create a menu button that will Zoom to 75%, which can be kind tricky using the zoomOut / zoomIn methods. Something like panZoom.current.setScale(0.75)? Apologies if this is documented somewhere already 🙊

I would like to zoom only when I have the pinch motion and after that I would like to zoom out. Like in Instagram.

I tried using the onPanEnd method and there I usedzoomTo (0, 0, 0)and alsoreset ()

How could I solve this?

Reset zoom when done

<PanZoom autoCenter ref={panZoom} 
    onPanEnd={() => {
        console.log(panZoom);
        panZoom.current.zoomTo(0, 0, 0);
        panZoom.current.reset(); 
    }}
>
     <img src={image.url} alt="imagem slider" />
</PanZoom>

Description

Since v73, Chrome is setting mousewheel event listeners to be passive by default. This is breaking the zoom feature as PanZoom make use of onWheel event listener from React that doesn't force the listener to be passive and rely on Chrome implementation.

To fix it we need to use this.container.addEventListener('mousewheel', this.onWheel, { passive: false }) instead of React onWheel listener.

For more details about Chrome's decision: https://developers.google.com/web/updates/2019/02/scrolling-intervention