style: use requestAnimationFrame for auto pan

[auroranil]

Using requestAnimationFrame provides smoother auto panning than using setInterval with a large interval.

Delta values have been reduced so that the speed of the auto pan is roughly the same as before (but without the large jumps).

[chrvadala]

Thanks for your PR. It seems a really good improvement. I gonna make some tests then I'll merge.

[auroranil]

Also resolves #31, thanks to @brentoneill

[chrvadala]

Hi @auroranil, I've just tested your work (sorry for the delay). It works well. The auto pan feature is absolutely better.
About the zoom limits feature, I think that doesn't contain the mobile support. We need to add it to guarantee a consistent behaviour also on smartphones and tablets.

I think that to do it, we can just change interactions-touch.js:13 to use the zoom features available in zoom.js:15. Thought?

[auroranil]

I have manually tested this, and it works on both my web browser (Chrome) as well as an iPad (Safari).

I refactored the codebase, so that scaleFactorMin and scaleFactorMax are both set into the value variable, rather than passing the prop variable around in several functions.

For zoom, fitSelection and onMultiTouch functions, there are two zoom limit checks. The first one prevents zoom from occurring, and subsequently the unwanted translations with no changes in zoom levels. The second one enforces the zoom level limits, by clamping a and d values so that it lies in the bound [scaleFactorMin, scaleFactorMax].

If scaleFactorMin or scaleFactorMax are unspecified, then it allows infinite zoom out or in, respectively.

[chrvadala]

Great job man! I'm going to merge and publish!

[chrvadala]

Released with v2.15.0

[auroranil]

I have changed this to let as I was modifying this variable at some point in development, but now there is no reason for this change. Although it's no big deal, I should be using const.

[auroranil]

Originally I was passing props around for scaleFactorMin and scaleFactorMax values, but now they are being passed through the value argument.

I forgot to remove these props arguments in zoom and stopZooming functions. That should not be there.

[chrvadala]

The point about this change is that I'm not sure that set scaleFactorMin and scaleFactorMax in the value object is the right way to handle this two props. These are two statics props and probably they don't change in the component lifecycle. Talking about refactor I think that the previous way to pass them was better.

[auroranil]

This runs the auto pan loop when component mounts, whether or not the user is actually auto panning. We should refactor the code so that auto pan loop only runs when the user hovers on one or more of the auto pan regions.

I have not thoroughly check the performance metrics, so we should consider optimising the code if the performance drop is too large.

[chrvadala]

I see... to handle this we can use the mouseEnter and mouseLeave callbacks

react-svg-pan-zoom/src/viewer.js

Lines 290 to 298 in 5ee9741

	onMouseEnter={ event => {
	if (detectTouch()) return;
	let nextValue = onMouseEnterOrLeave(event, this.ViewerDOM, this.getTool(), this.getValue(), this.props);
	if (this.getValue() !== nextValue) this.setValue(nextValue);
	}}
	onMouseLeave={ event => {
	let nextValue = onMouseEnterOrLeave(event, this.ViewerDOM, this.getTool(), this.getValue(), this.props);
	if (this.getValue() !== nextValue) this.setValue(nextValue);
	}}

but I think that it isn't really necessary. I suppose that usually there's at most one running instance of it (2, 3 in some complex situations). It should not cause a performance drop.