Implement autoscroll when mouse is dragged on content

This commit is contained in:
Nathan Sobo
2017-03-10 15:44:38 -07:00
committed by Antonio Scandurra
parent 5594c9d82f
commit 35ae3fb08f
2 changed files with 131 additions and 2 deletions

View File

@@ -901,6 +901,65 @@ describe('TextEditorComponent', () => {
didDrag(clientPositionForCharacter(component, 4, 10))
expect(editor.getSelectedScreenRange()).toEqual([[2, 0], [5, 0]])
})
it('autoscrolls the content when dragging near the edge of the screen', async () => {
const {component, editor} = buildComponent({width: 200, height: 200})
const {scroller} = component.refs
spyOn(component, 'handleMouseDragUntilMouseUp')
let previousScrollTop = 0
let previousScrollLeft = 0
function assertScrolledDownAndRight () {
expect(scroller.scrollTop).toBeGreaterThan(previousScrollTop)
previousScrollTop = scroller.scrollTop
expect(scroller.scrollLeft).toBeGreaterThan(previousScrollLeft)
previousScrollLeft = scroller.scrollLeft
}
function assertScrolledUpAndLeft () {
expect(scroller.scrollTop).toBeLessThan(previousScrollTop)
previousScrollTop = scroller.scrollTop
expect(scroller.scrollLeft).toBeLessThan(previousScrollLeft)
previousScrollLeft = scroller.scrollLeft
}
component.didMouseDownOnContent({detail: 1, clientX: 100, clientY: 100})
const [didDrag, didStopDragging] = component.handleMouseDragUntilMouseUp.argsForCall[0]
didDrag({clientX: 199, clientY: 199})
assertScrolledDownAndRight()
didDrag({clientX: 199, clientY: 199})
assertScrolledDownAndRight()
didDrag({clientX: 199, clientY: 199})
assertScrolledDownAndRight()
didDrag({clientX: component.getGutterContainerWidth() + 1, clientY: 1})
assertScrolledUpAndLeft()
didDrag({clientX: component.getGutterContainerWidth() + 1, clientY: 1})
assertScrolledUpAndLeft()
didDrag({clientX: component.getGutterContainerWidth() + 1, clientY: 1})
assertScrolledUpAndLeft()
// Don't artificially update scroll measurements beyond the minimum or
// maximum possible scroll positions
expect(scroller.scrollTop).toBe(0)
expect(scroller.scrollLeft).toBe(0)
didDrag({clientX: component.getGutterContainerWidth() + 1, clientY: 1})
expect(component.measurements.scrollTop).toBe(0)
expect(scroller.scrollTop).toBe(0)
expect(component.measurements.scrollLeft).toBe(0)
expect(scroller.scrollLeft).toBe(0)
const maxScrollTop = scroller.scrollHeight - scroller.clientHeight
const maxScrollLeft = scroller.scrollWidth - scroller.clientWidth
scroller.scrollTop = maxScrollTop
scroller.scrollLeft = maxScrollLeft
await component.getNextUpdatePromise()
didDrag({clientX: 199, clientY: 199})
didDrag({clientX: 199, clientY: 199})
didDrag({clientX: 199, clientY: 199})
expect(component.measurements.scrollTop).toBe(maxScrollTop)
expect(component.measurements.scrollLeft).toBe(maxScrollLeft)
})
})
})