-
-
Notifications
You must be signed in to change notification settings - Fork 127
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
style: use requestAnimationFrame for auto pan #71
Conversation
This occurs when scrolling with the mouse wheel.
Delta values have been reduced so that the speed of the auto pan is roughly the same. Using requestAnimationFrame provides smoother auto panning than using setInterval with a large interval.
Thanks for your PR. It seems a really good improvement. I gonna make some tests then I'll merge. |
Also resolves #31, thanks to @brentoneill |
Hi @auroranil, I've just tested your work (sorry for the delay). It works well. The auto pan feature is absolutely better. 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? |
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 For If scaleFactorMin or scaleFactorMax are unspecified, then it allows infinite zoom out or in, respectively. |
Great job man! I'm going to merge and publish! |
Released with v2.15.0 |
@@ -19,7 +20,12 @@ function onMultiTouch(event, ViewerDOM, tool, value, props) { | |||
const pinchPointDistance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); | |||
const previousPointDistance = hasPinchPointDistance(value) ? value.pinchPointDistance : pinchPointDistance; | |||
const svgPoint = getSVGPoint(value, (x1 + x2) / 2, (y1 + y2) / 2); | |||
const distanceFactor = pinchPointDistance/previousPointDistance; | |||
let distanceFactor = pinchPointDistance/previousPointDistance; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
.
@@ -29,7 +29,7 @@ export function onMouseDown(event, ViewerDOM, tool, value, props, coords = null) | |||
switch (tool) { | |||
case TOOL_ZOOM_OUT: | |||
let SVGPoint = getSVGPoint(value, x, y); | |||
nextValue = zoom(value, SVGPoint.x, SVGPoint.y, 1 / props.scaleFactor); | |||
nextValue = zoom(value, SVGPoint.x, SVGPoint.y, 1 / props.scaleFactor, props); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
} | ||
}, 200); | ||
this.autoPanIsRunning = true; | ||
requestAnimationFrame(this.autoPanLoop); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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); | |
}} |
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).