Merge remote-tracking branch 'origin/master' into cj-paragraph-test

2026-01-23 05:48:10 -05:00 · 2014-05-23 09:23:30 -07:00
parent 7f418e2de4 d1ed176550
commit 3784b77b95
29 changed files with 343 additions and 116 deletions
--- a/src/atom.coffee
+++ b/src/atom.coffee
@@ -24,7 +24,7 @@ WindowEventHandler = require './window-event-handler'
 #  * `atom.config`        - A {Config} instance
 #  * `atom.contextMenu`   - A {ContextMenuManager} instance
 #  * `atom.deserializers` - A {DeserializerManager} instance
-#  * `atom.keymaps`        - A {Keymap} instance
+#  * `atom.keymaps`        - A {KeymapManager} instance
 #  * `atom.menu`          - A {MenuManager} instance
 #  * `atom.packages`      - A {PackageManager} instance
 #  * `atom.project`       - A {Project} instance
@@ -38,8 +38,8 @@ class Atom extends Model

  # Public: Load or create the Atom environment in the given mode.
  #
-  # - mode: Pass 'editor' or 'spec' depending on the kind of environment you
-  #   want to build.
+  # mode - Pass 'editor' or 'spec' depending on the kind of environment you
+  #        want to build.
  #
  # Returns an Atom instance, fully initialized
  @loadOrCreate: (mode) ->
@@ -212,11 +212,11 @@ class Atom extends Model
  # in the dimensions parameter. If x or y are omitted the window will be
  # centered. If height or width are omitted only the position will be changed.
  #
-  # * dimensions:
-  #    + x: The new x coordinate.
-  #    + y: The new y coordinate.
-  #    + width: The new width.
-  #    + height: The new height.
+  # dimensions - An {Object} with the following keys:
+  #   :x - The new x coordinate.
+  #   :y - The new y coordinate.
+  #   :width - The new width.
+  #   :height - The new height.
  setWindowDimensions: ({x, y, width, height}) ->
    if width? and height?
      @setSize(width, height)
--- a/src/cursor-component.coffee
+++ b/src/cursor-component.coffee
@@ -1,5 +1,5 @@
-React = require 'react'
-{div} = require 'reactionary'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'

 module.exports =
 CursorComponent = React.createClass
--- a/src/cursors-component.coffee
+++ b/src/cursors-component.coffee
@@ -1,5 +1,5 @@
-React = require 'react'
-{div} = require 'reactionary'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'
 {debounce, toArray} = require 'underscore-plus'
 SubscriberMixin = require './subscriber-mixin'
 CursorComponent = require './cursor-component'
--- a/src/display-buffer.coffee
+++ b/src/display-buffer.coffee
@@ -23,7 +23,7 @@ class DisplayBuffer extends Model
    manageScrollPosition: false
    softWrap: null
    editorWidthInChars: null
-    lineHeight: null
+    lineHeightInPixels: null
    defaultCharWidth: null
    height: null
    width: null
@@ -198,8 +198,8 @@ class DisplayBuffer extends Model
    @setScrollLeft(scrollRight - @width)
    @getScrollRight()

-  getLineHeight: -> @lineHeight
-  setLineHeight: (@lineHeight) -> @lineHeight
+  getLineHeightInPixels: -> @lineHeightInPixels
+  setLineHeightInPixels: (@lineHeightInPixels) -> @lineHeightInPixels

  getDefaultCharWidth: -> @defaultCharWidth
  setDefaultCharWidth: (@defaultCharWidth) -> @defaultCharWidth
@@ -227,20 +227,20 @@ class DisplayBuffer extends Model
    @charWidthsByScope = {}

  getScrollHeight: ->
-    unless @getLineHeight() > 0
-      throw new Error("You must assign lineHeight before calling ::getScrollHeight()")
+    unless @getLineHeightInPixels() > 0
+      throw new Error("You must assign lineHeightInPixels before calling ::getScrollHeight()")

-    @getLineCount() * @getLineHeight()
+    @getLineCount() * @getLineHeightInPixels()

  getScrollWidth: ->
    (@getMaxLineLength() * @getDefaultCharWidth()) + @getCursorWidth()

  getVisibleRowRange: ->
-    unless @getLineHeight() > 0
-      throw new Error("You must assign a non-zero lineHeight before calling ::getVisibleRowRange()")
+    unless @getLineHeightInPixels() > 0
+      throw new Error("You must assign a non-zero lineHeightInPixels before calling ::getVisibleRowRange()")

-    heightInLines = Math.ceil(@getHeight() / @getLineHeight()) + 1
-    startRow = Math.floor(@getScrollTop() / @getLineHeight())
+    heightInLines = Math.ceil(@getHeight() / @getLineHeightInPixels()) + 1
+    startRow = Math.floor(@getScrollTop() / @getLineHeightInPixels())
    endRow = Math.min(@getLineCount(), startRow + heightInLines)

    [startRow, endRow]
@@ -254,7 +254,7 @@ class DisplayBuffer extends Model
    @intersectsVisibleRowRange(start.row, end.row + 1)

  scrollToScreenRange: (screenRange) ->
-    verticalScrollMarginInPixels = @getVerticalScrollMargin() * @getLineHeight()
+    verticalScrollMarginInPixels = @getVerticalScrollMargin() * @getLineHeightInPixels()
    horizontalScrollMarginInPixels = @getHorizontalScrollMargin() * @getDefaultCharWidth()

    {top, left, height, width} = @pixelRectForScreenRange(screenRange)
@@ -285,11 +285,11 @@ class DisplayBuffer extends Model
    if screenRange.end.row > screenRange.start.row
      top = @pixelPositionForScreenPosition(screenRange.start).top
      left = 0
-      height = (screenRange.end.row - screenRange.start.row + 1) * @getLineHeight()
+      height = (screenRange.end.row - screenRange.start.row + 1) * @getLineHeightInPixels()
      width = @getScrollWidth()
    else
      {top, left} = @pixelPositionForScreenPosition(screenRange.start)
-      height = @getLineHeight()
+      height = @getLineHeightInPixels()
      width = @pixelPositionForScreenPosition(screenRange.end).left - left

    {top, left, width, height}
@@ -512,7 +512,7 @@ class DisplayBuffer extends Model
    targetColumn = screenPosition.column
    defaultCharWidth = @defaultCharWidth

-    top = targetRow * @lineHeight
+    top = targetRow * @lineHeightInPixels
    left = 0
    column = 0
    for token in @lineForRow(targetRow).tokens
@@ -527,7 +527,7 @@ class DisplayBuffer extends Model
    targetTop = pixelPosition.top
    targetLeft = pixelPosition.left
    defaultCharWidth = @defaultCharWidth
-    row = Math.floor(targetTop / @getLineHeight())
+    row = Math.floor(targetTop / @getLineHeightInPixels())
    row = Math.min(row, @getLastRow())
    row = Math.max(0, row)

--- a/src/editor-component.coffee
+++ b/src/editor-component.coffee
@@ -1,5 +1,5 @@
-React = require 'react'
-{div, span} = require 'reactionary'
+React = require 'react-atom-fork'
+{div, span} = require 'reactionary-atom-fork'
 {debounce, defaults} = require 'underscore-plus'
 scrollbarStyle = require 'scrollbar-style'

@@ -31,7 +31,7 @@ EditorComponent = React.createClass
  mouseWheelScreenRow: null

  render: ->
-    {focused, fontSize, lineHeight, fontFamily, showIndentGuide, showInvisibles} = @state
+    {focused, fontSize, lineHeight, fontFamily, showIndentGuide, showInvisibles, visible} = @state
    {editor, cursorBlinkPeriod, cursorBlinkResumeDelay} = @props
    maxLineNumberDigits = editor.getScreenLineCount().toString().length
    invisibles = if showInvisibles then @state.invisibles else {}
@@ -42,7 +42,8 @@ EditorComponent = React.createClass
      scrollWidth = editor.getScrollWidth()
      scrollTop = editor.getScrollTop()
      scrollLeft = editor.getScrollLeft()
-      lineHeightInPixels = editor.getLineHeight()
+      lineHeightInPixels = editor.getLineHeightInPixels()
+      scrollViewHeight = editor.getHeight()
      horizontalScrollbarHeight = editor.getHorizontalScrollbarHeight()
      verticalScrollbarWidth = editor.getVerticalScrollbarWidth()
      verticallyScrollable = editor.verticallyScrollable()
@@ -54,17 +55,17 @@ EditorComponent = React.createClass
    div className: className, style: {fontSize, lineHeight, fontFamily}, tabIndex: -1,
      GutterComponent {
        ref: 'gutter', editor, renderedRowRange, maxLineNumberDigits,
-        scrollTop, scrollHeight, lineHeight: lineHeightInPixels, fontSize, fontFamily,
+        scrollTop, scrollHeight, lineHeight, lineHeightInPixels, fontSize, fontFamily,
        @pendingChanges, onWidthChanged: @onGutterWidthChanged, @mouseWheelScreenRow
      }

      EditorScrollViewComponent {
        ref: 'scrollView', editor, fontSize, fontFamily, showIndentGuide,
-        lineHeight: lineHeightInPixels, renderedRowRange, @pendingChanges,
+        lineHeight, lineHeightInPixels, renderedRowRange, @pendingChanges,
        scrollTop, scrollLeft, scrollHeight, scrollWidth, @scrollingVertically,
        @cursorsMoved, @selectionChanged, @selectionAdded, cursorBlinkPeriod,
        cursorBlinkResumeDelay, @onInputFocused, @onInputBlurred, @mouseWheelScreenRow,
-        invisibles
+        invisibles, visible, scrollViewHeight
      }

      ScrollbarComponent
@@ -106,7 +107,8 @@ EditorComponent = React.createClass
    renderedEndRow = Math.min(editor.getScreenLineCount(), visibleEndRow + lineOverdrawMargin)
    [renderedStartRow, renderedEndRow]

-  getInitialState: -> {}
+  getInitialState: ->
+    visible: true

  getDefaultProps: ->
    cursorBlinkPeriod: 800
@@ -157,7 +159,7 @@ EditorComponent = React.createClass
    @subscribe editor.$height.changes, @requestUpdate
    @subscribe editor.$width.changes, @requestUpdate
    @subscribe editor.$defaultCharWidth.changes, @requestUpdate
-    @subscribe editor.$lineHeight.changes, @requestUpdate
+    @subscribe editor.$lineHeightInPixels.changes, @requestUpdate

  listenForDOMEvents: ->
    node = @getDOMNode()
@@ -262,6 +264,7 @@ EditorComponent = React.createClass
        'editor:scroll-to-cursor': => editor.scrollToCursorPosition()
        'core:page-up': => editor.pageUp()
        'core:page-down': => editor.pageDown()
+        'benchmark:scroll': @runScrollBenchmark

  addCommandListeners: (listenersByCommandName) ->
    {parentView} = @props
@@ -272,6 +275,7 @@ EditorComponent = React.createClass
  observeConfig: ->
    @subscribe atom.config.observe 'editor.fontFamily', @setFontFamily
    @subscribe atom.config.observe 'editor.fontSize', @setFontSize
+    @subscribe atom.config.observe 'editor.lineHeight', @setLineHeight
    @subscribe atom.config.observe 'editor.showIndentGuide', @setShowIndentGuide
    @subscribe atom.config.observe 'editor.invisibles', @setInvisibles
    @subscribe atom.config.observe 'editor.showInvisibles', @setShowInvisibles
@@ -469,3 +473,44 @@ EditorComponent = React.createClass
  lineNodeForScreenRow: (screenRow) -> @refs.scrollView.lineNodeForScreenRow(screenRow)

  lineNumberNodeForScreenRow: (screenRow) -> @refs.gutter.lineNumberNodeForScreenRow(screenRow)
+
+  hide: ->
+    @setState(visible: false)
+
+  show: ->
+    @setState(visible: true)
+
+  runScrollBenchmark: ->
+    unless process.env.NODE_ENV is 'production'
+      ReactPerf = require 'react-atom-fork/lib/ReactDefaultPerf'
+      ReactPerf.start()
+
+    node = @getDOMNode()
+
+    scroll = (delta, done) ->
+      dispatchMouseWheelEvent = ->
+        node.dispatchEvent(new WheelEvent('mousewheel', wheelDeltaX: -0, wheelDeltaY: -delta))
+
+      stopScrolling = ->
+        clearInterval(interval)
+        done?()
+
+      interval = setInterval(dispatchMouseWheelEvent, 10)
+      setTimeout(stopScrolling, 500)
+
+    console.timeline('scroll')
+    scroll 50, ->
+      scroll 100, ->
+        scroll 200, ->
+          scroll 400, ->
+            scroll 800, ->
+              scroll 1600, ->
+                console.timelineEnd('scroll')
+                unless process.env.NODE_ENV is 'production'
+                  ReactPerf.stop()
+                  console.log "Inclusive"
+                  ReactPerf.printInclusive()
+                  console.log "Exclusive"
+                  ReactPerf.printExclusive()
+                  console.log "Wasted"
+                  ReactPerf.printWasted()
--- a/src/editor-scroll-view-component.coffee
+++ b/src/editor-scroll-view-component.coffee
@@ -1,5 +1,5 @@
-React = require 'react'
-{div} = require 'reactionary'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'
 {debounce} = require 'underscore-plus'

 InputComponent = require './input-component'
@@ -16,8 +16,8 @@ EditorScrollViewComponent = React.createClass
  overflowChangedWhilePaused: false

  render: ->
-    {editor, fontSize, fontFamily, lineHeight, showIndentGuide, invisibles} = @props
-    {renderedRowRange, pendingChanges, scrollTop, scrollLeft, scrollHeight, scrollWidth, scrollingVertically, mouseWheelScreenRow} = @props
+    {editor, fontSize, fontFamily, lineHeight, lineHeightInPixels, showIndentGuide, invisibles, visible} = @props
+    {renderedRowRange, pendingChanges, scrollTop, scrollLeft, scrollHeight, scrollWidth, scrollViewHeight, scrollingVertically, mouseWheelScreenRow} = @props
    {selectionChanged, selectionAdded, cursorBlinkPeriod, cursorBlinkResumeDelay, cursorsMoved, onInputFocused, onInputBlurred} = @props

    if @isMounted()
@@ -35,9 +35,10 @@ EditorScrollViewComponent = React.createClass

      CursorsComponent({editor, scrollTop, scrollLeft, cursorsMoved, selectionAdded, cursorBlinkPeriod, cursorBlinkResumeDelay})
      LinesComponent {
-        ref: 'lines', editor, fontSize, fontFamily, lineHeight, showIndentGuide,
-        renderedRowRange, pendingChanges, scrollTop, scrollLeft, scrollingVertically,
-        selectionChanged, scrollHeight, scrollWidth, mouseWheelScreenRow, invisibles
+        ref: 'lines', editor, fontSize, fontFamily, lineHeight, lineHeightInPixels,
+        showIndentGuide, renderedRowRange, pendingChanges, scrollTop, scrollLeft, scrollingVertically,
+        selectionChanged, scrollHeight, scrollWidth, mouseWheelScreenRow, invisibles,
+        visible, scrollViewHeight
      }

  componentDidMount: ->
--- a/src/editor.coffee
+++ b/src/editor.coffee
@@ -149,7 +149,7 @@ class Editor extends Model
    'autoDecreaseIndentForBufferRow', 'toggleLineCommentForBufferRow', 'toggleLineCommentsForBufferRows',
    toProperty: 'languageMode'

-  @delegatesProperties '$lineHeight', '$defaultCharWidth', '$height', '$width',
+  @delegatesProperties '$lineHeightInPixels', '$defaultCharWidth', '$height', '$width',
    '$scrollTop', '$scrollLeft', 'manageScrollPosition', toProperty: 'displayBuffer'

  constructor: ({@softTabs, initialLine, initialColumn, tabLength, softWrap, @displayBuffer, buffer, registerEditor, suppressCursorCreation}) ->
@@ -1867,8 +1867,8 @@ class Editor extends Model
  getHorizontalScrollMargin: -> @displayBuffer.getHorizontalScrollMargin()
  setHorizontalScrollMargin: (horizontalScrollMargin) -> @displayBuffer.setHorizontalScrollMargin(horizontalScrollMargin)

-  getLineHeight: -> @displayBuffer.getLineHeight()
-  setLineHeight: (lineHeight) -> @displayBuffer.setLineHeight(lineHeight)
+  getLineHeightInPixels: -> @displayBuffer.getLineHeightInPixels()
+  setLineHeightInPixels: (lineHeightInPixels) -> @displayBuffer.setLineHeightInPixels(lineHeightInPixels)

  getScopedCharWidth: (scopeNames, char) -> @displayBuffer.getScopedCharWidth(scopeNames, char)
  setScopedCharWidth: (scopeNames, char, width) -> @displayBuffer.setScopedCharWidth(scopeNames, char, width)
--- a/src/gutter-component.coffee
+++ b/src/gutter-component.coffee
@@ -1,5 +1,5 @@
-React = require 'react'
-{div} = require 'reactionary'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'
 {isEqual, isEqualForProperties, multiplyString, toArray} = require 'underscore-plus'
 SubscriberMixin = require './subscriber-mixin'

@@ -33,7 +33,7 @@ GutterComponent = React.createClass
  # non-zero-delta change to the screen lines has occurred within the current
  # visible row range.
  shouldComponentUpdate: (newProps) ->
-    return true unless isEqualForProperties(newProps, @props, 'renderedRowRange', 'scrollTop', 'lineHeight', 'fontSize')
+    return true unless isEqualForProperties(newProps, @props, 'renderedRowRange', 'scrollTop', 'lineHeightInPixels', 'fontSize')

    {renderedRowRange, pendingChanges} = newProps
    for change in pendingChanges when Math.abs(change.screenDelta) > 0 or Math.abs(change.bufferDelta) > 0
@@ -47,7 +47,7 @@ GutterComponent = React.createClass
      @removeLineNumberNodes()

    @measureWidth() unless @lastMeasuredWidth? and isEqualForProperties(oldProps, @props, 'maxLineNumberDigits', 'fontSize', 'fontFamily')
-    @clearScreenRowCaches() unless oldProps.lineHeight is @props.lineHeight
+    @clearScreenRowCaches() unless oldProps.lineHeightInPixels is @props.lineHeightInPixels
    @updateLineNumbers()

  clearScreenRowCaches: ->
@@ -125,8 +125,8 @@ GutterComponent = React.createClass

  buildLineNumberHTML: (bufferRow, softWrapped, maxLineNumberDigits, screenRow) ->
    if screenRow?
-      {lineHeight} = @props
-      style = "position: absolute; top: #{screenRow * lineHeight}px;"
+      {lineHeightInPixels} = @props
+      style = "position: absolute; top: #{screenRow * lineHeightInPixels}px;"
    else
      style = "visibility: hidden;"
    innerHTML = @buildLineNumberInnerHTML(bufferRow, softWrapped, maxLineNumberDigits)
@@ -145,8 +145,8 @@ GutterComponent = React.createClass

  updateLineNumberNode: (lineNumberId, screenRow) ->
    unless @screenRowsByLineNumberId[lineNumberId] is screenRow
-      {lineHeight} = @props
-      @lineNumberNodesById[lineNumberId].style.top = screenRow * lineHeight + 'px'
+      {lineHeightInPixels} = @props
+      @lineNumberNodesById[lineNumberId].style.top = screenRow * lineHeightInPixels + 'px'
      @lineNumberNodesById[lineNumberId].dataset.screenRow = screenRow
      @screenRowsByLineNumberId[lineNumberId] = screenRow
      @lineNumberIdsByScreenRow[screenRow] = lineNumberId
--- a/src/input-component.coffee
+++ b/src/input-component.coffee
@@ -1,7 +1,7 @@
 punycode = require 'punycode'
 {last, isEqual} = require 'underscore-plus'
-React = require 'react'
-{input} = require 'reactionary'
+React = require 'react-atom-fork'
+{input} = require 'reactionary-atom-fork'

 module.exports =
 InputComponent = React.createClass
--- a/src/lines-component.coffee
+++ b/src/lines-component.coffee
@@ -1,5 +1,5 @@
-React = require 'react'
-{div, span} = require 'reactionary'
+React = require 'react-atom-fork'
+{div, span} = require 'reactionary-atom-fork'
 {debounce, isEqual, isEqualForProperties, multiplyString, toArray} = require 'underscore-plus'
 {$$} = require 'space-pen'

@@ -13,16 +13,18 @@ module.exports =
 LinesComponent = React.createClass
  displayName: 'LinesComponent'

+  measureWhenShown: false
+
  render: ->
    if @isMounted()
-      {editor, scrollTop, scrollLeft, scrollHeight, scrollWidth, lineHeight} = @props
+      {editor, scrollTop, scrollLeft, scrollHeight, scrollWidth, lineHeightInPixels, scrollViewHeight} = @props
      style =
-        height: scrollHeight
+        height: Math.max(scrollHeight, scrollViewHeight)
        width: scrollWidth
        WebkitTransform: "translate3d(#{-scrollLeft}px, #{-scrollTop}px, 0px)"

    div {className: 'lines', style},
-      SelectionsComponent({editor, lineHeight}) if @isMounted()
+      SelectionsComponent({editor, lineHeightInPixels}) if @isMounted()

  componentWillMount: ->
    @measuredLines = new WeakSet
@@ -31,11 +33,15 @@ LinesComponent = React.createClass
    @lineIdsByScreenRow = {}

  componentDidMount: ->
-    @measureLineHeightAndCharWidth()
+    @measureLineHeightInPixelsAndCharWidth()

  shouldComponentUpdate: (newProps) ->
    return true if newProps.selectionChanged
-    return true unless isEqualForProperties(newProps, @props,  'renderedRowRange', 'fontSize', 'fontFamily', 'lineHeight', 'scrollTop', 'scrollLeft', 'showIndentGuide', 'scrollingVertically', 'invisibles')
+    return true unless isEqualForProperties(newProps, @props,
+      'renderedRowRange', 'fontSize', 'fontFamily', 'lineHeight', 'lineHeightInPixels',
+      'scrollTop', 'scrollLeft', 'showIndentGuide', 'scrollingVertically', 'invisibles',
+      'visible', 'scrollViewHeight'
+    )

    {renderedRowRange, pendingChanges} = newProps
    for change in pendingChanges
@@ -44,8 +50,8 @@ LinesComponent = React.createClass
    false

  componentDidUpdate: (prevProps) ->
-    @measureLineHeightAndCharWidth() unless isEqualForProperties(prevProps, @props, 'fontSize', 'fontFamily', 'lineHeight')
-    @clearScreenRowCaches() unless prevProps.lineHeight is @props.lineHeight
+    @measureLineHeightInPixelsAndCharWidthIfNeeded(prevProps)
+    @clearScreenRowCaches() unless prevProps.lineHeightInPixels is @props.lineHeightInPixels
    @removeLineNodes() unless isEqualForProperties(prevProps, @props, 'showIndentGuide', 'invisibles')
    @updateLines()
    @clearScopedCharWidths() unless isEqualForProperties(prevProps, @props, 'fontSize', 'fontFamily')
@@ -77,7 +83,6 @@ LinesComponent = React.createClass
        node.removeChild(lineNode)

  appendOrUpdateVisibleLineNodes: (visibleLines, startRow) ->
-    {lineHeight} = @props
    newLines = null
    newLinesHTML = null

@@ -108,9 +113,10 @@ LinesComponent = React.createClass
    @lineNodesByLineId.hasOwnProperty(lineId)

  buildLineHTML: (line, screenRow) ->
-    {editor, mini, showIndentGuide, lineHeight} = @props
+    {editor, mini, showIndentGuide, lineHeightInPixels} = @props
    {tokens, text, lineEnding, fold, isSoftWrapped, indentLevel} = line
-    top = screenRow * lineHeight
+
+    top = screenRow * lineHeightInPixels
    lineHTML = "<div class=\"line\" style=\"position: absolute; top: #{top}px;\" data-screen-row=\"#{screenRow}\">"

    if text is ""
@@ -186,9 +192,9 @@ LinesComponent = React.createClass

  updateLineNode: (line, screenRow) ->
    unless @screenRowsByLineId[line.id] is screenRow
-      {lineHeight} = @props
+      {lineHeightInPixels} = @props
      lineNode = @lineNodesByLineId[line.id]
-      lineNode.style.top = screenRow * lineHeight + 'px'
+      lineNode.style.top = screenRow * lineHeightInPixels + 'px'
      lineNode.dataset.screenRow = screenRow
      @screenRowsByLineId[line.id] = screenRow
      @lineIdsByScreenRow[screenRow] = line.id
@@ -196,15 +202,26 @@ LinesComponent = React.createClass
  lineNodeForScreenRow: (screenRow) ->
    @lineNodesByLineId[@lineIdsByScreenRow[screenRow]]

-  measureLineHeightAndCharWidth: ->
+  measureLineHeightInPixelsAndCharWidthIfNeeded: (prevProps) ->
+    {visible} = @props
+
+    unless isEqualForProperties(prevProps, @props, 'fontSize', 'fontFamily', 'lineHeight')
+      if visible
+        @measureLineHeightInPixelsAndCharWidth()
+      else
+        @measureWhenShown = true
+    @measureLineHeightInPixelsAndCharWidth() if visible and not prevProps.visible and @measureWhenShown
+
+  measureLineHeightInPixelsAndCharWidth: ->
+    @measureWhenShown = false
    node = @getDOMNode()
    node.appendChild(DummyLineNode)
-    lineHeight = DummyLineNode.getBoundingClientRect().height
+    lineHeightInPixels = DummyLineNode.getBoundingClientRect().height
    charWidth = DummyLineNode.firstChild.getBoundingClientRect().width
    node.removeChild(DummyLineNode)

    {editor} = @props
-    editor.setLineHeight(lineHeight)
+    editor.setLineHeightInPixels(lineHeightInPixels)
    editor.setDefaultCharWidth(charWidth)

  measureCharactersInNewLines: ->
--- a/src/pane-view.coffee
+++ b/src/pane-view.coffee
@@ -149,7 +149,7 @@ class PaneView extends View
    hasFocus = @hasFocus()
    item.on? 'title-changed', @activeItemTitleChanged
    view = @viewForItem(item)
-    @itemViews.children().not(view).hide()
+    otherView.hide() for otherView in @itemViews.children().not(view).views()
    @itemViews.append(view) unless view.parent().is(@itemViews)
    view.show() if @attached
    view.focus() if hasFocus
--- a/src/react-editor-view.coffee
+++ b/src/react-editor-view.coffee
@@ -1,5 +1,5 @@
 {View, $} = require 'space-pen'
-React = require 'react'
+React = require 'react-atom-fork'
 EditorComponent = require './editor-component'
 {defaults} = require 'underscore-plus'

@@ -14,7 +14,7 @@ class ReactEditorView extends View

  getEditor: -> @editor

-  Object.defineProperty @::, 'lineHeight', get: -> @editor.getLineHeight()
+  Object.defineProperty @::, 'lineHeight', get: -> @editor.getLineHeightInPixels()
  Object.defineProperty @::, 'charWidth', get: -> @editor.getDefaultCharWidth()

  scrollTop: (scrollTop) ->
@@ -82,3 +82,11 @@ class ReactEditorView extends View
      @component.onFocus()
    else
      @focusOnAttach = true
+
+  hide: ->
+    super
+    @component.hide()
+
+  show: ->
+    super
+    @component.show()
--- a/src/scroll-view.coffee
+++ b/src/scroll-view.coffee
@@ -6,6 +6,8 @@
 # the following events won't be handled by the ScrollView.
 #
 # ## Events
+#   * `core:move-up`
+#   * `core:move-down`
 #   * `core:page-up`
 #   * `core:page-down`
 #   * `core:move-to-top`
@@ -19,6 +21,8 @@
 module.exports =
 class ScrollView extends View
  initialize: ->
+    @on 'core:move-up', => @scrollUp()
+    @on 'core:move-down', => @scrollDown()
    @on 'core:page-up', => @pageUp()
    @on 'core:page-down', => @pageDown()
    @on 'core:move-to-top', => @scrollToTop()
--- a/src/scrollbar-component.coffee
+++ b/src/scrollbar-component.coffee
@@ -1,9 +1,11 @@
-React = require 'react'
-{div} = require 'reactionary'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'
 {extend, isEqualForProperties} = require 'underscore-plus'

 module.exports =
 ScrollbarComponent = React.createClass
+  displayName: 'ScrollbarComponent'
+
  render: ->
    {orientation, className, scrollHeight, scrollWidth, visible} = @props
    {scrollableInOppositeDirection, horizontalScrollbarHeight, verticalScrollbarWidth} = @props
--- a/src/scrollbar-corner-component.coffee
+++ b/src/scrollbar-corner-component.coffee
@@ -1,8 +1,10 @@
-React = require 'react'
-{div} = require 'reactionary'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'

 module.exports =
-ScrollbarComponent = React.createClass
+ScrollbarCornerComponent = React.createClass
+  displayName: 'ScrollbarCornerComponent'
+
  render: ->
    {visible, measuringScrollbars, width, height} = @props

--- a/src/selection-component.coffee
+++ b/src/selection-component.coffee
@@ -1,12 +1,12 @@
-React = require 'react'
-{div} = require 'reactionary'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'

 module.exports =
 SelectionComponent = React.createClass
  displayName: 'SelectionComponent'

  render: ->
-    {editor, screenRange, lineHeight} = @props
+    {editor, screenRange, lineHeightInPixels} = @props
    {start, end} = screenRange
    rowCount = end.row - start.row + 1
    startPixelPosition = editor.pixelPositionForScreenPosition(start)
@@ -19,18 +19,18 @@ SelectionComponent = React.createClass
        @renderMultiLineRegions(startPixelPosition, endPixelPosition, rowCount)

  renderSingleLineRegions: (startPixelPosition, endPixelPosition) ->
-    {lineHeight} = @props
+    {lineHeightInPixels} = @props

    [
      div className: 'region', key: 0, style:
        top: startPixelPosition.top
-        height: lineHeight
+        height: lineHeightInPixels
        left: startPixelPosition.left
        width: endPixelPosition.left - startPixelPosition.left
    ]

  renderMultiLineRegions: (startPixelPosition, endPixelPosition, rowCount) ->
-    {lineHeight} = @props
+    {lineHeightInPixels} = @props
    regions = []
    index = 0

@@ -39,7 +39,7 @@ SelectionComponent = React.createClass
      div className: 'region', key: index++, style:
        top: startPixelPosition.top
        left: startPixelPosition.left
-        height: lineHeight
+        height: lineHeightInPixels
        right: 0
    )

@@ -47,8 +47,8 @@ SelectionComponent = React.createClass
    if rowCount > 2
      regions.push(
        div className: 'region', key: index++, style:
-          top: startPixelPosition.top + lineHeight
-          height: (rowCount - 2) * lineHeight
+          top: startPixelPosition.top + lineHeightInPixels
+          height: (rowCount - 2) * lineHeightInPixels
          left: 0
          right: 0
      )
@@ -57,7 +57,7 @@ SelectionComponent = React.createClass
    regions.push(
      div className: 'region', key: index, style:
        top: endPixelPosition.top
-        height: lineHeight
+        height: lineHeightInPixels
        left: 0
        width: endPixelPosition.left
    )
--- a/src/selections-component.coffee
+++ b/src/selections-component.coffee
@@ -1,5 +1,5 @@
-React = require 'react'
-{div} = require 'reactionary'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'
 SelectionComponent = require './selection-component'

 module.exports =
@@ -10,11 +10,11 @@ SelectionsComponent = React.createClass
    div className: 'selections', @renderSelections()

  renderSelections: ->
-    {editor, lineHeight} = @props
+    {editor, lineHeightInPixels} = @props

    selectionComponents = []
    for selectionId, screenRange of @selectionRanges
-      selectionComponents.push(SelectionComponent({key: selectionId, screenRange, editor, lineHeight}))
+      selectionComponents.push(SelectionComponent({key: selectionId, screenRange, editor, lineHeightInPixels}))
    selectionComponents

  componentWillMount: ->