ajainarayanan / react-pan-zoom Goto Github PK
View Code? Open in Web Editor NEWGeneric html wrapper for pan and zoom feature for react canvas like components
License: MIT License
Generic html wrapper for pan and zoom feature for react canvas like components
License: MIT License
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 {
Can we have a capability to enable/disable drag functionality ..?
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
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 ?
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
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)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!
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).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.