From dc847a481372e4fcb9cbbaa23a2a9a9342b41f9f Mon Sep 17 00:00:00 2001
From: Niels van Hoorn <nvh@nvh.io>
Date: Tue, 2 Aug 2016 16:09:30 +0200
Subject: [PATCH] Let mouseWheel events obey scrollHorizontal and
 scrollVertical

Fixes https://github.com/koenbok/Framer/issues/288
---
 framer/Components/ScrollComponent.coffee | 14 +++++++--
 test/tests/ScrollComponentTest.coffee    | 37 ++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/framer/Components/ScrollComponent.coffee b/framer/Components/ScrollComponent.coffee
index 99d18d086..ed9517bd5 100644
--- a/framer/Components/ScrollComponent.coffee
+++ b/framer/Components/ScrollComponent.coffee
@@ -357,6 +357,15 @@ class exports.ScrollComponent extends Layer
 			@off(Events.MouseWheel, @_onMouseWheel)
 
 	_onMouseWheel: (event) =>
+		deltaX = 0
+		deltaY = 0
+		if @scrollHorizontal
+			deltaX = event.wheelDeltaX
+		if @scrollVertical
+			deltaY = event.wheelDeltaY
+
+		if deltaX == 0 and deltaY == 0
+			return
 
 		if not @_mouseWheelScrolling
 			@_mouseWheelScrolling = true
@@ -367,9 +376,10 @@ class exports.ScrollComponent extends Layer
 		{minX, maxX, minY, maxY} = @content.draggable._calculateConstraints(
 			@content.draggable.constraints)
 
+
 		point =
-			x: Utils.clamp(@content.x + (event.wheelDeltaX * @mouseWheelSpeedMultiplier), minX, maxX)
-			y: Utils.clamp(@content.y + (event.wheelDeltaY * @mouseWheelSpeedMultiplier), minY, maxY)
+			x: Utils.clamp(@content.x + (deltaX * @mouseWheelSpeedMultiplier), minX, maxX)
+			y: Utils.clamp(@content.y + (deltaY * @mouseWheelSpeedMultiplier), minY, maxY)
 
 		@content.point = point
 
diff --git a/test/tests/ScrollComponentTest.coffee b/test/tests/ScrollComponentTest.coffee
index 236e88b02..7c350207c 100644
--- a/test/tests/ScrollComponentTest.coffee
+++ b/test/tests/ScrollComponentTest.coffee
@@ -35,6 +35,43 @@ describe "ScrollComponent", ->
 		copy = instance.copy()
 		copy.scrollHorizontal.should.be.false
 
+	describe "scolling with mousEvents", ->
+		it "should work", ->
+			scroll = new ScrollComponent size: 200
+			new Layer
+				width: 400
+				height: 400
+				parent: scroll.content
+			scroll.mouseWheelEnabled = true
+			scroll.emit(Events.MouseWheel, {wheelDeltaX: -75, wheelDeltaY: -150})
+			scroll.content.x.should.equal -75
+			scroll.content.y.should.equal -150
+
+		it "should respect scrollHorizontal = false", ->
+			scroll = new ScrollComponent size: 200
+			new Layer
+				width: 400
+				height: 400
+				parent: scroll.content
+			scroll.mouseWheelEnabled = true
+			scroll.scrollHorizontal = false
+			scroll.emit(Events.MouseWheel, {wheelDeltaX: -75, wheelDeltaY: -150})
+			scroll.content.x.should.equal 0
+			scroll.content.y.should.equal -150
+
+		it "should respect scrollVertial = false", ->
+			scroll = new ScrollComponent size: 200
+			new Layer
+				width: 400
+				height: 400
+				parent: scroll.content
+			scroll.mouseWheelEnabled = true
+			scroll.scrollVertical = false
+			scroll.emit(Events.MouseWheel, {wheelDeltaX: -75, wheelDeltaY: -150})
+			scroll.content.x.should.equal -75
+			scroll.content.y.should.equal 0
+
+
 	describe "wrap", ->
 
 		it "should use the wrapped layer as content layer when there are children", ->