Pause cursor blink as part of the overall editor update

This ensures we don't perform two updates of the cursors component when
cursors move as part of a larger change, such as typing text.
This commit is contained in:
Nathan Sobo
2014-04-16 13:20:29 -06:00
parent ae9f79bfc4
commit 3a42346e5e
4 changed files with 22 additions and 15 deletions

View File

@@ -26,24 +26,23 @@ CursorsComponent = React.createClass
componentDidMount: ->
{editor} = @props
@subscribe editor, 'cursors-moved', @pauseCursorBlinking
@startBlinkingCursors()
componentWillUnmount: ->
@stopBlinkingCursors()
clearInterval(@cursorBlinkIntervalHandle)
componentWillUpdate: ({cursorsMoved}) ->
@pauseCursorBlinking() if cursorsMoved
startBlinkingCursors: ->
@cursorBlinkIntervalHandle = setInterval(@toggleCursorBlink, @props.cursorBlinkPeriod / 2)
startBlinkingCursorsAfterDelay: null # Created lazily
stopBlinkingCursors: ->
clearInterval(@cursorBlinkIntervalHandle)
@setState(blinkCursorsOff: false)
toggleCursorBlink: -> @setState(blinkCursorsOff: not @state.blinkCursorsOff)
pauseCursorBlinking: ->
@stopBlinkingCursors()
@state.blinkCursorsOff = false
clearInterval(@cursorBlinkIntervalHandle)
@startBlinkingCursorsAfterDelay ?= debounce(@startBlinkingCursors, @props.cursorBlinkResumeDelay)
@startBlinkingCursorsAfterDelay()

View File

@@ -17,6 +17,7 @@ EditorComponent = React.createClass
selectOnMouseMove: false
batchingUpdates: false
updateRequested: false
cursorsMoved: false
render: ->
{focused, fontSize, lineHeight, fontFamily, showIndentGuide} = @state
@@ -31,8 +32,10 @@ EditorComponent = React.createClass
GutterComponent({editor, visibleRowRange, scrollTop, @pendingChanges})
EditorScrollViewComponent {
ref: 'scrollView', editor, visibleRowRange, @pendingChanges, @onInputFocused, @onInputBlurred
cursorBlinkPeriod, cursorBlinkResumeDelay, showIndentGuide, fontSize, fontFamily, lineHeight
ref: 'scrollView', editor, visibleRowRange, @pendingChanges,
showIndentGuide, fontSize, fontFamily, lineHeight,
@cursorsMoved, cursorBlinkPeriod, cursorBlinkResumeDelay,
@onInputFocused, @onInputBlurred
}
ScrollbarComponent
@@ -74,6 +77,7 @@ EditorComponent = React.createClass
componentDidUpdate: ->
@pendingChanges.length = 0
@cursorsMoved = false
@props.parentView.trigger 'editor:display-updated'
observeEditor: ->
@@ -81,6 +85,7 @@ EditorComponent = React.createClass
@subscribe editor, 'batched-updates-started', @onBatchedUpdatesStarted
@subscribe editor, 'batched-updates-ended', @onBatchedUpdatesEnded
@subscribe editor, 'screen-lines-changed', @onScreenLinesChanged
@subscribe editor, 'cursors-moved', @onCursorsMoved
@subscribe editor, 'selection-screen-range-changed', @requestUpdate
@subscribe editor, 'selection-added', @onSelectionAdded
@subscribe editor, 'selection-removed', @onSelectionAdded
@@ -272,7 +277,7 @@ EditorComponent = React.createClass
@updateRequested = false
@batchingUpdates = false
if updateRequested
@forceUpdate()
@requestUpdate()
onScreenLinesChanged: (change) ->
{editor} = @props
@@ -287,6 +292,9 @@ EditorComponent = React.createClass
{editor} = @props
@requestUpdate() if editor.selectionIntersectsVisibleRowRange(selection)
onCursorsMoved: ->
@cursorsMoved = true
getVisibleRowRange: ->
visibleRowRange = @props.editor.getVisibleRowRange()
if @visibleRowOverrides?

View File

@@ -12,7 +12,7 @@ EditorScrollViewComponent = React.createClass
render: ->
{editor, fontSize, fontFamily, lineHeight, showIndentGuide, cursorBlinkPeriod, cursorBlinkResumeDelay} = @props
{visibleRowRange, pendingChanges, onInputFocused, onInputBlurred} = @props
{visibleRowRange, pendingChanges, cursorsMoved, onInputFocused, onInputBlurred} = @props
contentStyle =
height: editor.getScrollHeight()
WebkitTransform: "translate(#{-editor.getScrollLeft()}px, #{-editor.getScrollTop()}px)"
@@ -27,7 +27,7 @@ EditorScrollViewComponent = React.createClass
onBlur: onInputBlurred
div className: 'scroll-view-content', style: contentStyle, onMouseDown: @onMouseDown,
CursorsComponent({editor, cursorBlinkPeriod, cursorBlinkResumeDelay})
CursorsComponent({editor, cursorsMoved, cursorBlinkPeriod, cursorBlinkResumeDelay})
LinesComponent({ref: 'lines', editor, fontSize, fontFamily, lineHeight, visibleRowRange, pendingChanges, showIndentGuide})
div className: 'underlayer',
SelectionsComponent({editor})

View File

@@ -1474,9 +1474,9 @@ class Editor extends Model
@movingCursors = true
@batchUpdates =>
fn(cursor) for cursor in @getCursors()
@mergeCursors()
@movingCursors = false
@emit 'cursors-moved'
@mergeCursors()
@movingCursors = false
@emit 'cursors-moved'
cursorMoved: (event) ->
@emit 'cursor-moved', event