Blink cursors based on presenter state

Signed-off-by: Max Brunsfeld <maxbrunsfeld@gmail.com>
This commit is contained in:
Nathan Sobo
2015-01-23 10:26:00 -07:00
parent b412c2642d
commit 3b93f3d71b
3 changed files with 23 additions and 49 deletions

View File

@@ -776,18 +776,23 @@ describe "TextEditorComponent", ->
cursorsNode = componentNode.querySelector('.cursors')
expect(cursorsNode.classList.contains('blink-off')).toBe false
advanceClock(component.props.cursorBlinkPeriod / 2)
nextAnimationFrame()
expect(cursorsNode.classList.contains('blink-off')).toBe true
advanceClock(component.props.cursorBlinkPeriod / 2)
nextAnimationFrame()
expect(cursorsNode.classList.contains('blink-off')).toBe false
# Stop blinking after moving the cursor
editor.moveRight()
nextAnimationFrame()
expect(cursorsNode.classList.contains('blink-off')).toBe false
advanceClock(component.props.cursorBlinkResumeDelay)
advanceClock(component.props.cursorBlinkPeriod / 2)
nextAnimationFrame()
expect(cursorsNode.classList.contains('blink-off')).toBe true
it "does not render cursors that are associated with non-empty selections", ->

View File

@@ -7,51 +7,14 @@ CursorComponent = require './cursor-component'
module.exports =
CursorsComponent = React.createClass
displayName: 'CursorsComponent'
mixins: [SubscriberMixin]
cursorBlinkIntervalHandle: null
render: ->
{presenter, defaultCharWidth} = @props
{blinkOff} = @state
{presenter} = @props
className = 'cursors'
className += ' blink-off' if blinkOff
className += ' blink-off' if presenter?.state.content.blinkCursorsOff
div {className},
if presenter?
for key, pixelRect of presenter.state.content.cursors
CursorComponent({key, pixelRect})
getInitialState: ->
blinkOff: false
componentDidMount: ->
@startBlinkingCursors()
componentWillUnmount: ->
@stopBlinkingCursors()
componentWillUpdate: (newProps) ->
cursorsMoved = @props.cursorPixelRects? and
isEqualForProperties(newProps, @props, 'defaultCharWidth', 'scopedCharacterWidthsChangeCount') and
not isEqual(newProps.cursorPixelRects, @props.cursorPixelRects)
@pauseCursorBlinking() if cursorsMoved
startBlinkingCursors: ->
@toggleCursorBlinkHandle = setInterval(@toggleCursorBlink, @props.cursorBlinkPeriod / 2) if @isMounted()
startBlinkingCursorsAfterDelay: null # Created lazily
stopBlinkingCursors: ->
clearInterval(@toggleCursorBlinkHandle)
toggleCursorBlink: ->
@setState(blinkOff: not @state.blinkOff)
pauseCursorBlinking: ->
@state.blinkOff = false
@stopBlinkingCursors()
@startBlinkingCursorsAfterDelay ?= debounce(@startBlinkingCursors, @props.cursorBlinkResumeDelay)
@startBlinkingCursorsAfterDelay()

View File

@@ -226,16 +226,22 @@ TextEditorComponent = React.createClass
@performedInitialMeasurement = true
@updatesPaused = false
{editor, lineOverdrawMargin} = @props
@presenter ?= new TextEditorPresenter
model: editor
clientHeight: editor.getHeight()
clientWidth: editor.getWidth()
scrollTop: editor.getScrollTop()
scrollLeft: editor.getScrollLeft()
lineHeight: editor.getLineHeightInPixels()
baseCharacterWidth: editor.getDefaultCharWidth()
lineOverdrawMargin: lineOverdrawMargin
{editor, lineOverdrawMargin, cursorBlinkPeriod, cursorBlinkResumeDelay} = @props
unless @presenter?
@presenter = new TextEditorPresenter
model: editor
clientHeight: editor.getHeight()
clientWidth: editor.getWidth()
scrollTop: editor.getScrollTop()
scrollLeft: editor.getScrollLeft()
lineHeight: editor.getLineHeightInPixels()
baseCharacterWidth: editor.getDefaultCharWidth()
lineOverdrawMargin: lineOverdrawMargin
cursorBlinkPeriod: cursorBlinkPeriod
cursorBlinkResumeDelay: cursorBlinkResumeDelay
@presenter.onDidUpdateState(@requestUpdate)
@forceUpdate() if @canUpdate()