Always honor scroll intent on mousewheel

This commit introduces a change in the way we respond to mousewheel
events. In particular, if `delta * scrollSensitivity` is less than 1 or
greater than -1, we will round it up or down in an attempt to honor the
user's scroll intent.
This commit is contained in:
Antonio Scandurra
2017-08-29 13:39:11 +02:00
parent 90f872ae1c
commit 76e2e03139
2 changed files with 40 additions and 3 deletions

View File

@@ -1209,7 +1209,6 @@ describe('TextEditorComponent', () => {
}
{
global.debug = true
const expectedScrollTop = component.getScrollTop()
const expectedScrollLeft = 20 * (scrollSensitivity / 100)
component.didMouseWheel({deltaX: 20, deltaY: -10})
@@ -1228,6 +1227,40 @@ describe('TextEditorComponent', () => {
}
})
it('always scrolls by a minimum of 1, even when the delta is small or the scroll sensitivity is low', () => {
const scrollSensitivity = 10
const {component, editor} = buildComponent({height: 50, width: 50, scrollSensitivity})
{
component.didMouseWheel({deltaX: 0, deltaY: 3})
expect(component.getScrollTop()).toBe(1)
expect(component.getScrollLeft()).toBe(0)
expect(component.refs.content.style.transform).toBe(`translate(0px, -1px)`)
}
{
component.didMouseWheel({deltaX: 4, deltaY: 0})
expect(component.getScrollTop()).toBe(1)
expect(component.getScrollLeft()).toBe(1)
expect(component.refs.content.style.transform).toBe(`translate(-1px, -1px)`)
}
editor.update({scrollSensitivity: 100})
{
component.didMouseWheel({deltaX: 0, deltaY: -0.3})
expect(component.getScrollTop()).toBe(0)
expect(component.getScrollLeft()).toBe(1)
expect(component.refs.content.style.transform).toBe(`translate(-1px, 0px)`)
}
{
component.didMouseWheel({deltaX: -0.1, deltaY: 0})
expect(component.getScrollTop()).toBe(0)
expect(component.getScrollLeft()).toBe(0)
expect(component.refs.content.style.transform).toBe(`translate(0px, 0px)`)
}
})
it('inverts deltaX and deltaY when holding shift on Windows and Linux', async () => {
const scrollSensitivity = 50
const {component, editor} = buildComponent({height: 50, width: 50, scrollSensitivity})