Manually config tileSize

Dealing with a manually entered `tileSize` is actually easier to reason about,
therefore we no longer calculate it based on `tileCount.`

spec/text-editor-component-spec.coffee

@@ -1920,13 +1920,23 @@ describe "TextEditorComponent", ->
       component.measureDimensions()
       nextAnimationFrame()
 
-      linesNode = componentNode.querySelector('.lines')
-      expect(linesNode.style['-webkit-transform']).toBe "translate3d(0px, 0px, 0px)"
+      tilesNodes = componentNode.querySelectorAll(".tile")
+
+      top = 0
+      for tileNode in tilesNodes
+        expect(tileNode.style['-webkit-transform']).toBe "translate3d(0px, #{top}px, 0px)"
+        top += tileNode.offsetHeight
+
       expect(horizontalScrollbarNode.scrollLeft).toBe 0
 
       editor.setScrollLeft(100)
       nextAnimationFrame()
-      expect(linesNode.style['-webkit-transform']).toBe "translate3d(-100px, 0px, 0px)"
+
+      top = 0
+      for tileNode in tilesNodes
+        expect(tileNode.style['-webkit-transform']).toBe "translate3d(-100px, #{top}px, 0px)"
+        top += tileNode.offsetHeight
+
       expect(horizontalScrollbarNode.scrollLeft).toBe 100
 
     it "updates the scrollLeft of the model when the scrollLeft of the horizontal scrollbar changes", ->
@@ -2508,7 +2518,7 @@ describe "TextEditorComponent", ->
 
       advanceClock(atom.views.documentPollingInterval)
       nextAnimationFrame()
-      expect(componentNode.querySelectorAll('.line')).toHaveLength(4 + lineOverdrawMargin + 1)
+      expect(componentNode.querySelectorAll('.line')).toHaveLength(6)
 
       gutterWidth = componentNode.querySelector('.gutter').offsetWidth
       componentNode.style.width = gutterWidth + 14 * charWidth + editor.getVerticalScrollbarWidth() + 'px'

spec/text-editor-presenter-spec.coffee

@@ -342,26 +342,26 @@ describe "TextEditorPresenter", ->
           expectValues presenter.getState().hiddenInput, {top: 3 * 10, left: 6 * 10}
 
           expectStateUpdate presenter, -> presenter.setScrollTop(15)
-          expectValues presenter.getState().hiddenInput, {top: 0, left: 6 * 10}
+          expectValues presenter.getState().hiddenInput, {top: (3 * 10) - 15, left: 6 * 10}
 
           expectStateUpdate presenter, -> presenter.setScrollLeft(35)
-          expectValues presenter.getState().hiddenInput, {top: 0, left: 0}
+          expectValues presenter.getState().hiddenInput, {top: (3 * 10) - 15, left: (6 * 10) - 35}
 
           expectStateUpdate presenter, -> presenter.setScrollTop(40)
-          expectValues presenter.getState().hiddenInput, {top: 0, left: 0}
+          expectValues presenter.getState().hiddenInput, {top: 0, left: (6 * 10) - 35}
 
           expectStateUpdate presenter, -> presenter.setScrollLeft(70)
           expectValues presenter.getState().hiddenInput, {top: 0, left: 0}
 
           expectStateUpdate presenter, -> editor.setCursorBufferPosition([11, 43])
-          expectValues presenter.getState().hiddenInput, {top: 0, left: 30}
+          expectValues presenter.getState().hiddenInput, {top: 11 * 10 - editor.getScrollTop(), left: 43 * 10 - editor.getScrollLeft()}
 
           newCursor = null
           expectStateUpdate presenter, -> newCursor = editor.addCursorAtBufferPosition([6, 10])
-          expectValues presenter.getState().hiddenInput, {top: 0, left: 20}
+          expectValues presenter.getState().hiddenInput, {top: (6 * 10) - editor.getScrollTop(), left: (10 * 10) - editor.getScrollLeft()}
 
           expectStateUpdate presenter, -> newCursor.destroy()
-          expectValues presenter.getState().hiddenInput, {top: 30, left: 300 - 10}
+          expectValues presenter.getState().hiddenInput, {top: 50 - 10, left: 300 - 10}
 
           expectStateUpdate presenter, -> presenter.setFocused(false)
           expectValues presenter.getState().hiddenInput, {top: 0, left: 0}
@@ -663,7 +663,7 @@ describe "TextEditorPresenter", ->
           presenter.getState().content.tiles[tileRow].lines[lineId]
 
         it "contains states for tiles that are visible on screen", ->
-          presenter = buildPresenter(explicitHeight: 6, scrollTop: 0, lineHeight: 1, tileCount: 3)
+          presenter = buildPresenter(explicitHeight: 6, scrollTop: 0, lineHeight: 1, tileSize: 2)
 
           expectValues presenter.getState().content.tiles[0], {
             top: 0
@@ -681,12 +681,12 @@ describe "TextEditorPresenter", ->
           expect(presenter.getState().content.tiles[8]).toBeUndefined()
 
         it "includes state for all tiles if no external ::explicitHeight is assigned", ->
-          presenter = buildPresenter(explicitHeight: null, tileCount: 12, tileOverdrawMargin: 1)
+          presenter = buildPresenter(explicitHeight: null, tileSize: 2)
           expect(presenter.getState().content.tiles[0]).toBeDefined()
           expect(presenter.getState().content.tiles[12]).toBeDefined()
 
         it "is empty until all of the required measurements are assigned", ->
-          presenter = buildPresenter(explicitHeight: null, lineHeight: null, scrollTop: null, tileCount: 3)
+          presenter = buildPresenter(explicitHeight: null, lineHeight: null, scrollTop: null)
           expect(presenter.getState().content.tiles).toEqual({})
 
           presenter.setExplicitHeight(25)
@@ -699,7 +699,7 @@ describe "TextEditorPresenter", ->
           expect(presenter.getState().content.tiles).not.toEqual({})
 
         it "updates when ::scrollTop changes", ->
-          presenter = buildPresenter(explicitHeight: 6, scrollTop: 0, lineHeight: 1, tileCount: 3)
+          presenter = buildPresenter(explicitHeight: 6, scrollTop: 0, lineHeight: 1, tileSize: 2)
 
           expect(presenter.getState().content.tiles[0]).toBeDefined()
           expect(presenter.getState().content.tiles[2]).toBeDefined()
@@ -717,7 +717,7 @@ describe "TextEditorPresenter", ->
           expect(presenter.getState().content.tiles[10]).toBeUndefined()
 
         it "updates when ::explicitHeight changes", ->
-          presenter = buildPresenter(explicitHeight: 6, scrollTop: 0, lineHeight: 1, tileCount: 3)
+          presenter = buildPresenter(explicitHeight: 6, scrollTop: 0, lineHeight: 1, tileSize: 2)
 
           expect(presenter.getState().content.tiles[0]).toBeDefined()
           expect(presenter.getState().content.tiles[2]).toBeDefined()
@@ -736,7 +736,7 @@ describe "TextEditorPresenter", ->
 
 
         it "updates when ::lineHeight changes", ->
-          presenter = buildPresenter(explicitHeight: 6, scrollTop: 0, lineHeight: 1, tileCount: 3)
+          presenter = buildPresenter(explicitHeight: 6, scrollTop: 0, lineHeight: 1, tileSize: 2)
 
           expect(presenter.getState().content.tiles[0]).toBeDefined()
           expect(presenter.getState().content.tiles[2]).toBeDefined()
@@ -752,7 +752,7 @@ describe "TextEditorPresenter", ->
           expect(presenter.getState().content.tiles[6]).toBeUndefined()
 
         it "updates when the editor's content changes", ->
-          presenter = buildPresenter(explicitHeight: 25, scrollTop: 10, lineHeight: 10, tileCount: 3, tileOverdrawMargin: 1)
+          presenter = buildPresenter(explicitHeight: 25, scrollTop: 10, lineHeight: 10, tileSize: 2)
 
           expectStateUpdate presenter, -> buffer.insert([2, 0], "hello\nworld\n")
 
@@ -775,7 +775,7 @@ describe "TextEditorPresenter", ->
           }
 
         it "does not remove out-of-view tiles corresponding to ::mouseWheelScreenRow until ::stoppedScrollingDelay elapses", ->
-          presenter = buildPresenter(explicitHeight: 6, scrollTop: 0, lineHeight: 1, tileCount: 3, stoppedScrollingDelay: 200)
+          presenter = buildPresenter(explicitHeight: 6, scrollTop: 0, lineHeight: 1, tileSize: 2, stoppedScrollingDelay: 200)
 
           expect(presenter.getState().content.tiles[0]).toBeDefined()
           expect(presenter.getState().content.tiles[6]).toBeDefined()
@@ -804,7 +804,7 @@ describe "TextEditorPresenter", ->
           expect(presenter.getState().content.tiles[4]).toBeUndefined()
 
         it "does not preserve deleted on-screen tiles even if they correspond to ::mouseWheelScreenRow", ->
-          presenter = buildPresenter(explicitHeight: 6, scrollTop: 0, lineHeight: 1, tileCount: 3, stoppedScrollingDelay: 200)
+          presenter = buildPresenter(explicitHeight: 6, scrollTop: 0, lineHeight: 1, tileSize: 2, stoppedScrollingDelay: 200)
 
           presenter.setMouseWheelScreenRow(2)
 

src/text-editor-component.coffee

@@ -18,7 +18,7 @@ class TextEditorComponent
   scrollSensitivity: 0.4
   cursorBlinkPeriod: 800
   cursorBlinkResumeDelay: 100
-  lineOverdrawMargin: 15
+  tileSize: 12
 
   pendingScrollTop: null
   pendingScrollLeft: null
@@ -36,8 +36,8 @@ class TextEditorComponent
   gutterComponent: null
   mounted: true
 
-  constructor: ({@editor, @hostElement, @rootElement, @stylesElement, @useShadowDOM, lineOverdrawMargin}) ->
-    @lineOverdrawMargin = lineOverdrawMargin if lineOverdrawMargin?
+  constructor: ({@editor, @hostElement, @rootElement, @stylesElement, @useShadowDOM, tileSize}) ->
+    @tileSize = tileSize if tileSize?
     @disposables = new CompositeDisposable
 
     @observeConfig()
@@ -47,7 +47,7 @@ class TextEditorComponent
       model: @editor
       scrollTop: @editor.getScrollTop()
       scrollLeft: @editor.getScrollLeft()
-      lineOverdrawMargin: lineOverdrawMargin
+      tileSize: tileSize
       cursorBlinkPeriod: @cursorBlinkPeriod
       cursorBlinkResumeDelay: @cursorBlinkResumeDelay
       stoppedScrollingDelay: 200

src/text-editor-element.coffee

@@ -15,7 +15,7 @@ class TextEditorElement extends HTMLElement
   componentDescriptor: null
   component: null
   attached: false
-  lineOverdrawMargin: null
+  tileSize: null
   focusOnAttach: false
 
   createdCallback: ->
@@ -110,7 +110,7 @@ class TextEditorElement extends HTMLElement
       rootElement: @rootElement
       stylesElement: @stylesElement
       editor: @model
-      lineOverdrawMargin: @lineOverdrawMargin
+      tileSize: @tileSize
       useShadowDOM: @useShadowDOM
     )
     @rootElement.appendChild(@component.getDomNode())

src/text-editor-presenter.coffee

@@ -15,12 +15,12 @@ class TextEditorPresenter
   constructor: (params) ->
     {@model, @autoHeight, @explicitHeight, @contentFrameWidth, @scrollTop, @scrollLeft, @boundingClientRect, @windowWidth, @windowHeight, @gutterWidth} = params
     {horizontalScrollbarHeight, verticalScrollbarWidth} = params
-    {@lineHeight, @baseCharacterWidth, @lineOverdrawMargin, @backgroundColor, @gutterBackgroundColor, @tileCount} = params
+    {@lineHeight, @baseCharacterWidth, @backgroundColor, @gutterBackgroundColor, @tileSize} = params
     {@cursorBlinkPeriod, @cursorBlinkResumeDelay, @stoppedScrollingDelay, @focused} = params
     @measuredHorizontalScrollbarHeight = horizontalScrollbarHeight
     @measuredVerticalScrollbarWidth = verticalScrollbarWidth
     @gutterWidth ?= 0
-    @tileCount ?= 4
+    @tileSize ?= 12
 
     @disposables = new CompositeDisposable
     @emitter = new Emitter
@@ -66,7 +66,6 @@ class TextEditorPresenter
     @updateScrollbarDimensions()
     @updateStartRow()
     @updateEndRow()
-    @updateTileSize()
 
     @updateFocusedState() if @shouldUpdateFocusedState
     @updateHeightState() if @shouldUpdateHeightState
@@ -224,7 +223,6 @@ class TextEditorPresenter
     @updateScrollbarDimensions()
     @updateStartRow()
     @updateEndRow()
-    @updateTileSize()
 
     @updateFocusedState()
     @updateHeightState()
@@ -285,8 +283,6 @@ class TextEditorPresenter
     {top, left, height, width} = @pixelRectForScreenRange(lastCursor.getScreenRange())
 
     if @focused
-      top -= @scrollTop
-      left -= @scrollLeft
       @state.hiddenInput.top = Math.max(Math.min(top, @clientHeight - height), 0)
       @state.hiddenInput.left = Math.max(Math.min(left, @clientWidth - width), 0)
     else
@@ -603,12 +599,6 @@ class TextEditorPresenter
     endRow = startRow + visibleLinesCount
     @endRow = Math.min(@model.getScreenLineCount(), endRow)
 
-  updateTileSize: ->
-    return unless @height? and @lineHeight? and @tileCount?
-
-    @tileSize = Math.floor(@height / @lineHeight / @tileCount)
-    @tileSize = Math.max(1, @tileSize)
-
   updateScrollWidth: ->
     return unless @contentWidth? and @clientWidth?
 

src/text-editor-view.coffee

@@ -60,7 +60,7 @@ class TextEditorView extends View
           placeholderText: placeholderText
 
       element = new TextEditorElement
-      element.lineOverdrawMargin = props?.lineOverdrawMargin
+      element.tileSize = props?.tileSize
       element.setAttribute(name, value) for name, value of attributes if attributes?
       element.setModel(model)
       return element.__spacePenView

src/tile-component.coffee

@@ -21,6 +21,7 @@ class TileComponent
     @screenRowsByLineId = {}
     @lineIdsByScreenRow = {}
     @domNode = document.createElement("div")
+    @domNode.classList.add("tile")
     @domNode.style.position = "absolute"
     @domNode.style.display = "block"