ajainarayanan / react-pan-zoom Goto Github PK

View Code? Open in Web Editor NEW

35.0 1.0 14.0 1.81 MB

Generic html wrapper for pan and zoom feature for react canvas like components

License: MIT License

TypeScript 57.88% HTML 1.04% JavaScript 41.09%

react pan zoom zoom-anything pan-anything

react-pan-zoom's Introduction

React Pan & Zoom

A simple pan and zoom for canvas like elements in react.

Demo

Installation

> yarn add @ajainarayanan/react-pan-zoom

Usage

import ReactPanZoom from "@ajainarayanan/react-pan-zoom";
class MyComponent extends React.PureComponent {

  public render() {
    return (
      <ReactPanZoom>
        <img src="some/src/for/image.png" />
      </ReactPanZoom>
    );
  }
}

Props

zoom : Provide zoom level for the cavnas'ish element. 1 by default
dx : Provide the initial x co-ordinate to pan the underlying element to be. 0 by default
dy : Provide the initial y co-ordinate to pan the underlying element to be. 0 by default

For more information on what dx and dy mean please refer here (tx == dx and ty == dy).

react-pan-zoom's People

Contributors

Stargazers

Watchers

Forkers

xingjia01 mahefnawy nsallis gomezhyuuga hyogman star1122 vicfrolov sublet rabrenio bsextion wittech nfinished perkinj

react-pan-zoom's Issues

Can't reset the component's position

Hello, I am trying to reposition my component by using the onPan callback function like in your example https://codesandbox.io/s/q8wl1joow9
It seems that by using ReactPanZoom instead of StyledReactPanZoom , the component's position cannot be changed.
The component's state of DX and DY is updated , but the transform-matrix's values (4,5) seems not to update in the DOM.
The zoom and pan features are working!

Regards, M.F

Suggestion on Example

Move StyledReactPanZoom outside of render otherwise a new component is recreated on every render.

const StyledReactPanZoom = styled(ReactPanZoom)`
  ${Container};
`;

export default class ReactPanZoomDemo extends React.PureComponent {

import problems

Hi
I added your component to my project
yarn add react-pan-zoom

but I have this error when I try to import it

import ReactPanZoom from 'react-pan-zoom';

Unable to resolve path to module 'react-pan-zoom'.eslint(import/no-unresolved)
Missing file extension for "react-pan-zoom"eslint(import/extensions)

What i do wrong ?

onPan vs onPanStart vs onPanEnd

Right now the onPan prop functions more like an onPanEnd in the sense that it only triggers after the user mouses up.

onPan should continuously feed events as the user pans. So I'm thinking rather than the current onPan, we should have:

onPan (continuous)
onPanStart (on mouse down)
onPanEnd (on mouse up)

Restrict zoom to a container

Hi,

Whenever I zoom into the image; it gradually starts covering the whole browser window. Is it possible to restrict the image inside a container and whenever zoomed in; it does not cover the whole browser window

Ability to opt out of re-centering to initial position?

After upgrading to v0.0.4, I noticed that when I try to pan via multiple drags, the object keeps snapping back to center after the first drag.

Seems like this behavior was introduced in v0.0.4 via #7.

Is it possible to opt out of this behavior? I'd like my project to be on the latest v0.0.4 but I currently have to stick with v0.0.3 to avoid this behavior.

Thanks!

Zoom in/out on scroll

How would one go about adding zoom in/out on scroll for this component? I tried adding an event listener on a scroll event, but the panning triggers the scroll event, causing panning + zooming to be triggered simultaneously (ideally, the user interaction for zooming would be independent of their dragging interactions for panning).

Enable/Disable drag behavior

Can we have a capability to enable/disable drag functionality ..?