From 3c69fd2d49ccde2fe0b70574bfd806e926f94304 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Thu, 27 Mar 2014 21:58:14 -0600
Subject: [PATCH] Handle mouse wheel and make some tweaks to improve scroll
 performance

---
 package.json                |  2 +-
 src/editor-component.coffee | 26 +++++++++++++++++---------
 static/editor.less          |  4 ++++
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index d3df2c153..db8e868c8 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "property-accessors": "1.x",
     "q": "^1.0.1",
     "random-words": "0.0.1",
-    "reactionary": "^0.6.0",
+    "reactionary": "^0.7.0",
     "runas": "0.5.x",
     "scandal": "0.15.2",
     "scoped-property-store": "^0.8.0",
diff --git a/src/editor-component.coffee b/src/editor-component.coffee
index 5a37e974b..f6df307f2 100644
--- a/src/editor-component.coffee
+++ b/src/editor-component.coffee
@@ -10,7 +10,8 @@ React.createClass
   render: ->
     div class: 'editor',
       div class: 'scroll-view', ref: 'scrollView',
-        div @renderVisibleLines()
+        div class: 'overlayer'
+        @renderVisibleLines()
       div class: 'vertical-scrollbar', ref: 'verticalScrollbar', onScroll: @onVerticalScroll,
         div outlet: 'verticalScrollbarContent', style: {height: @getScrollHeight()}
 
@@ -20,11 +21,12 @@ React.createClass
     lineCount = @props.editor.getScreenLineCount()
     followingHeight = (lineCount - endRow) * @state.lineHeight
 
-    div class: 'lines', ref: 'lines', style: {top: -@state.scrollTop},
-      div class: 'spacer', style: {height: precedingHeight}
-      for tokenizedLine in @props.editor.linesForScreenRows(startRow, endRow - 1)
-        LineComponent({tokenizedLine, key: tokenizedLine.id})
-      div class: 'spacer', style: {height: followingHeight}
+    div class: 'lines', ref: 'lines', style: {WebkitTransform: "translateY(#{-@state.scrollTop}px)"}, [
+      div class: 'spacer', key: 'top-spacer', style: {height: precedingHeight}
+      (for tokenizedLine in @props.editor.linesForScreenRows(startRow, endRow - 1)
+        LineComponent({tokenizedLine, key: tokenizedLine.id}))...
+      div class: 'spacer', key: 'bottom-spacer', style: {height: followingHeight}
+    ]
 
   getInitialState: ->
     height: 0
@@ -34,10 +36,12 @@ React.createClass
 
   componentDidMount: ->
     @props.editor.on 'screen-lines-changed', @onScreenLinesChanged
+    @refs.scrollView.getDOMNode().addEventListener 'mousewheel', @onMousewheel
     @updateAllDimensions()
 
   componentWillUnmount: ->
     @props.editor.off 'screen-lines-changed', @onScreenLinesChanged
+    @getDOMNode().removeEventListener 'mousewheel', @onMousewheel
 
   componentWilUpdate: (nextProps, nextState) ->
     if nextState.scrollTop?
@@ -47,6 +51,10 @@ React.createClass
     scrollTop = @refs.verticalScrollbar.getDOMNode().scrollTop
     @setState({scrollTop})
 
+  onMousewheel: (event) ->
+    @refs.verticalScrollbar.getDOMNode().scrollTop -= event.wheelDeltaY
+    event.preventDefault()
+
   onScreenLinesChanged: ({start, end}) =>
     [visibleStart, visibleEnd] = @getVisibleRowRange()
     @forceUpdate() unless end < visibleStart or visibleEnd <= start
@@ -66,8 +74,6 @@ React.createClass
     lineHeight = @measureLineHeight()
     {height, width} = @measureScrollViewDimensions()
 
-    console.log "updating dimensions", {lineHeight, height, width}
-
     @setState({lineHeight, height, width})
 
   measureScrollViewDimensions: ->
@@ -92,6 +98,8 @@ LineComponent = React.createClass
   renderScopeTree: (scopeTree) ->
     if scopeTree.scope?
       span class: scopeTree.scope.split('.').join(' '),
-        scopeTree.children.map (child) => @renderScopeTree(child)
+        scopeTree.children.map((child) => @renderScopeTree(child))...
     else
       span scopeTree.value
+
+  shouldComponentUpdate: -> false
diff --git a/static/editor.less b/static/editor.less
index 97a17cd50..4dd99e728 100644
--- a/static/editor.less
+++ b/static/editor.less
@@ -134,6 +134,10 @@
 .editor .overlayer {
   z-index: 2;
   position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 .editor .line {