From 5a8c2c67f4eee4867f8da95b74dd3543ba242963 Mon Sep 17 00:00:00 2001
From: Dustan Kasten <dustan.kasten@gmail.com>
Date: Thu, 17 Jul 2014 11:57:24 -0400
Subject: [PATCH] Add experimental mousewheel support

---
 src/primitives/TouchableArea.js | 68 ++++++++++++++++++++++++++++++++-
 1 file changed, 67 insertions(+), 1 deletion(-)

diff --git a/src/primitives/TouchableArea.js b/src/primitives/TouchableArea.js
index 197b0f8..7f840c8 100644
--- a/src/primitives/TouchableArea.js
+++ b/src/primitives/TouchableArea.js
@@ -3,6 +3,14 @@
 var React = require('react');
 
 var TouchableArea = React.createClass({
+  getInitialState: function() {
+    return {
+      cumulativeScroll: {x:0, y:0},
+      gestureStart: {x:0, y:0},
+      isMouseWheeling: false,
+    };
+  },
+
   getDefaultProps: function() {
     return {
       component: React.DOM.div,
@@ -10,6 +18,63 @@ var TouchableArea = React.createClass({
     };
   },
 
+  handleWheel: function(e) {
+    if (!this.props.scroller || !this.props.touchable) {
+      return;
+    }
+
+    if (e.timeStamp) {
+      this.state.lastTimeStamp = e.timeStamp;
+    }
+
+    var self = this;
+    var timeStamp = e.timeStamp || this.state.lastTimeStamp;
+    var scrollDeltaX, scrollDeltaY;
+    if (!this.state.isMouseWheeling) {
+      this.state.isMouseWheeling = true;
+      this.state.cumulativeScroll.x = 0;
+      this.state.cumulativeScroll.y = 0;
+
+      // Start a scroll event
+      this.props.scroller.doTouchStart([{
+        pageX: 0,
+        pageY: 0,
+      }], e.timeStamp);
+      return;
+    }
+
+    // Convert the scrollwheel values to a scroll value
+    scrollDeltaX = e.deltaX / 2;
+    scrollDeltaY = -e.deltaY / 2;
+
+    // If the scroller is constrained to an x axis, convert y scroll to allow single-axis scroll
+    // wheels to scroll constrained content.
+    if (this.props.scrollAxis === 'x') {
+      scrollDeltaX = scrollDeltaY;
+      scrollDeltaY = 0;
+    }
+
+    this.state.cumulativeScroll.x = Math.round(this.state.cumulativeScroll.x + scrollDeltaX);
+    this.state.cumulativeScroll.y = Math.round(this.state.cumulativeScroll.y + scrollDeltaY);
+
+    var pageX = -this.state.gestureStart.x + this.state.cumulativeScroll.x;
+    var pageY = this.state.gestureStart.y + this.state.cumulativeScroll.y;
+
+    this.props.scroller.doTouchMove([{pageX: pageX, pageY: pageY}], timeStamp);
+
+    //_updateScroll(_gestureStart.x + _cumulativeScroll.x, _gestureStart.y + _cumulativeScroll.y, event.timeStamp, event);
+
+    // End scrolling state
+    if (this.state._scrollWheelEndDebouncer) {
+      clearTimeout(this.state._scrollWheelEndDebouncer);
+    }
+    this.state._scrollWheelEndDebouncer = setTimeout(function () {
+      self.props.scroller.doTouchEnd(timeStamp);
+      //_releaseInputCapture();
+      self.state.isMouseWheeling = false;
+    }, 300);
+  },
+
   handleTouchStart: function(e) {
     if (!this.props.scroller || !this.props.touchable) {
       return;
@@ -41,6 +106,7 @@ var TouchableArea = React.createClass({
     var component = this.props.component;
     return this.transferPropsTo(
       <component
+        onWheel={this.handleWheel}
         onTouchStart={this.handleTouchStart}
         onTouchMove={this.handleTouchMove}
         onTouchEnd={this.handleTouchEnd}
@@ -51,4 +117,4 @@ var TouchableArea = React.createClass({
   }
 });
 
-module.exports = TouchableArea;
\ No newline at end of file
+module.exports = TouchableArea;