Comments (7)
I just posted a new version with the feature (1.3.0). Use the prop "mouseDownAllowOutside" to enable the feature. Only available while using the "mouseDown" activation method. This allows the component to remain active and continue tracking positions (up to their limits) while outside of the tracked area. It will behave the same as the "touch" activation method.
from react-input-position.
Looking at the code it looks that it could be done by skipping mouseLeave() (not sure about the corresponding touch event) to prevent that. Is it possible to customize it?
from react-input-position.
Skipping mouseLeave would keep it active, but it still wouldn't track any mouse events while the cursor is outside of the area. For example, if the user triggers mouse down, leaves the area, and then releases the mouse, the component would remain active (waiting for a mouse up event inside the area).
This behavior could be fixed by using some global event listeners instead, but I'm trying to limit that for the sake of performance. I don't want to affect other people's projects that are using this component, but you could fork it and make those changes.
I'll continue thinking of a way to handle this with an option. In the meantime, is there anywhere I can see your project to get a better feel for what you are trying to achieve? Even if it's just screen captures of your component in action. Is it close to any of the components in my other project, react-image-magnifiers?
from react-input-position.
Thanks for the quick reply, it's pretty close to the simple magnifier. I'm thinking of adding a single event listener (one per event) on the window and retrieve the image that was clicked to see how it goes. Basically I'll have a list of images that would need to be zoomed in over the entire screen.
from react-input-position.
I'm not sure which magnifier you're referring to. I don't have a "simple magnifier". My project's demo page can be found here: https://adamrisberg.github.io/react-image-magnifiers/
from react-input-position.
I was referring to the first on your demo page
from react-input-position.
I came up with a way to support the feature you requested. It'll allow the component to stay active and continue handling mouse events outside of the tracked area. It should be done some time tonight.
I tested the touch version of this and it seems to work already. Although I have only tried it on a simulated device. Have you tested the touch version? If so, did it work the way you needed it to?
from react-input-position.
Related Issues (3)
- zoom drag on mouseDown? HOT 2
- React 17/18 Support HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-input-position.