Make lineOverdrawMargin a property

src/editor-component.coffee

@@ -31,7 +31,7 @@ EditorComponent = React.createClass
 
   render: ->
     {focused, fontSize, lineHeight, fontFamily, showIndentGuide} = @state
-    {editor, cursorBlinkResumeDelay} = @props
+    {editor, cursorBlinkResumeDelay, lineOverdrawMargin} = @props
     maxLineNumberDigits = editor.getScreenLineCount().toString().length
 
     if @isMounted()
@@ -51,14 +51,14 @@ EditorComponent = React.createClass
 
     div className: className, style: {fontSize, lineHeight, fontFamily}, tabIndex: -1,
       GutterComponent {
-        editor, visibleRowRange, maxLineNumberDigits, scrollTop, scrollHeight,
-        lineHeight: lineHeightInPixels, fontSize, fontFamily, @pendingChanges,
-        width: @gutterWidth, onWidthChanged: @onGutterWidthChanged
+        editor, visibleRowRange, lineOverdrawMargin, maxLineNumberDigits, scrollTop,
+        scrollHeight, lineHeight: lineHeightInPixels, fontSize, fontFamily,
+        @pendingChanges, onWidthChanged: @onGutterWidthChanged
       }
 
       EditorScrollViewComponent {
         ref: 'scrollView', editor, fontSize, fontFamily, showIndentGuide,
-        lineHeight: lineHeightInPixels, visibleRowRange, @pendingChanges,
+        lineHeight: lineHeightInPixels, visibleRowRange, lineOverdrawMargin, @pendingChanges,
         scrollTop, scrollLeft, scrollHeight, scrollWidth, @scrollingVertically,
         @cursorsMoved, @selectionChanged, @selectionAdded, cursorBlinkResumeDelay,
         @onInputFocused, @onInputBlurred
@@ -100,6 +100,7 @@ EditorComponent = React.createClass
 
   getDefaultProps: ->
     cursorBlinkResumeDelay: 100
+    lineOverdrawMargin: 8
 
   componentWillMount: ->
     @pendingChanges = []

src/editor-scroll-view-component.coffee

@@ -17,7 +17,7 @@ EditorScrollViewComponent = React.createClass
 
   render: ->
     {editor, fontSize, fontFamily, lineHeight, showIndentGuide} = @props
-    {visibleRowRange, pendingChanges, scrollTop, scrollLeft, scrollHeight, scrollWidth, scrollingVertically} = @props
+    {visibleRowRange, lineOverdrawMargin, pendingChanges, scrollTop, scrollLeft, scrollHeight, scrollWidth, scrollingVertically} = @props
     {selectionChanged, selectionAdded, cursorBlinkResumeDelay, cursorsMoved, onInputFocused, onInputBlurred} = @props
 
     if @isMounted()
@@ -36,7 +36,7 @@ EditorScrollViewComponent = React.createClass
       CursorsComponent({editor, scrollTop, scrollLeft, cursorsMoved, selectionAdded, cursorBlinkResumeDelay})
       LinesComponent {
         ref: 'lines', editor, fontSize, fontFamily, lineHeight, showIndentGuide,
-        visibleRowRange, pendingChanges, scrollTop, scrollLeft, scrollingVertically,
+        visibleRowRange, lineOverdrawMargin, pendingChanges, scrollTop, scrollLeft, scrollingVertically,
         selectionChanged, scrollHeight, scrollWidth
       }
 

src/gutter-component.coffee

@@ -60,10 +60,10 @@ GutterComponent = React.createClass
     @removeNonVisibleLineNumberNodes(visibleLineNumberIds)
 
   appendOrUpdateVisibleLineNumberNodes: ->
-    {editor, visibleRowRange, scrollTop, lineHeight, maxLineNumberDigits} = @props
+    {editor, visibleRowRange, scrollTop, lineHeight, maxLineNumberDigits, lineOverdrawMargin} = @props
     [startRow, endRow] = visibleRowRange
-    startRow = Math.max(0, startRow - 8)
-    endRow = Math.min(editor.getLineCount(), endRow + 8)
+    startRow = Math.max(0, startRow - lineOverdrawMargin)
+    endRow = Math.min(editor.getLineCount(), endRow + lineOverdrawMargin)
 
     newLineNumberIds = null
     newLineNumbersHTML = null

src/lines-component.coffee

@@ -49,10 +49,11 @@ LinesComponent = React.createClass
     @measureCharactersInNewLines() unless @props.scrollingVertically
 
   updateLines: ->
-    {editor, visibleRowRange, showIndentGuide, selectionChanged} = @props
+    {editor, visibleRowRange, showIndentGuide, selectionChanged, lineOverdrawMargin} = @props
     [startRow, endRow] = visibleRowRange
-    startRow = Math.max(0, startRow - 8)
-    endRow = Math.min(editor.getLineCount(), endRow + 8)
+
+    startRow = Math.max(0, startRow - lineOverdrawMargin)
+    endRow = Math.min(editor.getLineCount(), endRow + lineOverdrawMargin)
 
     visibleLines = editor.linesForScreenRows(startRow, endRow - 1)
     @removeNonVisibleLineNodes(visibleLines)

src/react-editor-view.coffee

@@ -1,6 +1,7 @@
 {View, $} = require 'space-pen'
 React = require 'react'
 EditorComponent = require './editor-component'
+{defaults} = require 'underscore-plus'
 
 module.exports =
 class ReactEditorView extends View
@@ -8,7 +9,7 @@ class ReactEditorView extends View
 
   focusOnAttach: false
 
-  constructor: (@editor) ->
+  constructor: (@editor, @props) ->
     super
 
   getEditor: -> @editor
@@ -37,7 +38,8 @@ class ReactEditorView extends View
   afterAttach: (onDom) ->
     return unless onDom
     @attached = true
-    @component = React.renderComponent(EditorComponent({@editor, parentView: this}), @element)
+    props = defaults({@editor, parentView: this}, @props)
+    @component = React.renderComponent(EditorComponent(props), @element)
 
     node = @component.getDOMNode()