From 4493ae2270f3cc1ade2d26750f5499b0e790b6de Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Tue, 15 Aug 2017 16:08:07 -0600
Subject: [PATCH] Only scroll one axis at a time, whichever has the greater
 delta

---
 spec/text-editor-component-spec.js | 34 +++++++++++++++++-------------
 src/text-editor-component.js       | 17 +++++++++------
 2 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js
index 1fd2d7f77..026930c28 100644
--- a/spec/text-editor-component-spec.js
+++ b/spec/text-editor-component-spec.js
@@ -1133,41 +1133,45 @@ describe('TextEditorComponent', () => {
   })
 
   describe('scrolling via the mouse wheel', () => {
-    it('scrolls vertically when deltaY is not 0', () => {
+    it('scrolls vertically or horizontally depending on whether deltaX or deltaY is larger', () => {
       const scrollSensitivity = 30
-      const {component, editor} = buildComponent({height: 50, scrollSensitivity})
+      const {component, editor} = buildComponent({height: 50, width: 50, scrollSensitivity})
 
       {
         const expectedScrollTop = 20 * (scrollSensitivity / 100)
-        component.didMouseWheel({deltaX: 0, deltaY: 20})
+        const expectedScrollLeft = component.getScrollLeft()
+        component.didMouseWheel({deltaX: 5, deltaY: 20})
         expect(component.getScrollTop()).toBe(expectedScrollTop)
-        expect(component.refs.content.style.transform).toBe(`translate(0px, -${expectedScrollTop}px)`)
+        expect(component.getScrollLeft()).toBe(expectedScrollLeft)
+        expect(component.refs.content.style.transform).toBe(`translate(${-expectedScrollLeft}px, ${-expectedScrollTop}px)`)
       }
 
       {
         const expectedScrollTop = component.getScrollTop() - (10 * (scrollSensitivity / 100))
-        component.didMouseWheel({deltaX: 0, deltaY: -10})
+        const expectedScrollLeft = component.getScrollLeft()
+        component.didMouseWheel({deltaX: 5, deltaY: -10})
         expect(component.getScrollTop()).toBe(expectedScrollTop)
-        expect(component.refs.content.style.transform).toBe(`translate(0px, -${expectedScrollTop}px)`)
+        expect(component.getScrollLeft()).toBe(expectedScrollLeft)
+        expect(component.refs.content.style.transform).toBe(`translate(${-expectedScrollLeft}px, ${-expectedScrollTop}px)`)
       }
-    })
-
-    it('scrolls horizontally when deltaX is not 0', () => {
-      const scrollSensitivity = 60
-      const {component, editor} = buildComponent({width: 50, scrollSensitivity})
 
       {
+        global.debug = true
+        const expectedScrollTop = component.getScrollTop()
         const expectedScrollLeft = 20 * (scrollSensitivity / 100)
-        component.didMouseWheel({deltaX: 20, deltaY: 0})
+        component.didMouseWheel({deltaX: 20, deltaY: -10})
+        expect(component.getScrollTop()).toBe(expectedScrollTop)
         expect(component.getScrollLeft()).toBe(expectedScrollLeft)
-        expect(component.refs.content.style.transform).toBe(`translate(-${expectedScrollLeft}px, 0px)`)
+        expect(component.refs.content.style.transform).toBe(`translate(${-expectedScrollLeft}px, ${-expectedScrollTop}px)`)
       }
 
       {
+        const expectedScrollTop = component.getScrollTop()
         const expectedScrollLeft = component.getScrollLeft() - (10 * (scrollSensitivity / 100))
-        component.didMouseWheel({deltaX: -10, deltaY: 0})
+        component.didMouseWheel({deltaX: -10, deltaY: 8})
+        expect(component.getScrollTop()).toBe(expectedScrollTop)
         expect(component.getScrollLeft()).toBe(expectedScrollLeft)
-        expect(component.refs.content.style.transform).toBe(`translate(-${expectedScrollLeft}px, 0px)`)
+        expect(component.refs.content.style.transform).toBe(`translate(${-expectedScrollLeft}px, ${-expectedScrollTop}px)`)
       }
     })
 
diff --git a/src/text-editor-component.js b/src/text-editor-component.js
index 93c69959c..b90be3528 100644
--- a/src/text-editor-component.js
+++ b/src/text-editor-component.js
@@ -1496,8 +1496,14 @@ class TextEditorComponent {
     const scrollSensitivity = this.props.model.getScrollSensitivity() / 100
 
     let {deltaX, deltaY} = event
-    deltaX = deltaX * scrollSensitivity
-    deltaY = deltaY * scrollSensitivity
+
+    if (Math.abs(deltaX) > Math.abs(deltaY)) {
+      deltaX = deltaX * scrollSensitivity
+      deltaY = 0
+    } else {
+      deltaX = 0
+      deltaY = deltaY * scrollSensitivity
+    }
 
     if (this.getPlatform() !== 'darwin' && event.shiftKey) {
       let temp = deltaX
@@ -1505,11 +1511,10 @@ class TextEditorComponent {
       deltaY = temp
     }
 
-    const scrollPositionChanged =
-      this.setScrollLeft(this.getScrollLeft() + deltaX) ||
-      this.setScrollTop(this.getScrollTop() + deltaY)
+    const scrollLeftChanged = deltaX !== 0 && this.setScrollLeft(this.getScrollLeft() + deltaX)
+    const scrollTopChanged = deltaY !== 0 && this.setScrollTop(this.getScrollTop() + deltaY)
 
-    if (scrollPositionChanged) this.updateSync()
+    if (scrollLeftChanged || scrollTopChanged) this.updateSync()
   }
 
   didResize () {