keep the active state outside of the original control until mouse up or touch is over

[PlopTheReal]

I'm implementing a fullscreen zoom from a much smaller image. As I've done a zoom feature based on mouseDown, I'd like to keep the active state until the mouse is released or the touch is over.
Currently when reaching the borders of the small image it turns the zoom off (active false) making it hard to look around the edges.

Would it be possible to implement such behavior?

[PlopTheReal]

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?

[AdamRisberg]

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?

[PlopTheReal]

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.

[AdamRisberg]

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/

[PlopTheReal]

I was referring to the first on your demo page

[AdamRisberg]

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?

[AdamRisberg]

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.