diff --git a/src/cursors-component.coffee b/src/cursors-component.coffee new file mode 100644 index 000000000..76c7f6ee5 --- /dev/null +++ b/src/cursors-component.coffee @@ -0,0 +1,44 @@ +React = require 'react' +{div} = require 'reactionary' +{debounce} = require 'underscore-plus' +SubscriberMixin = require './subscriber-mixin' +CursorComponent = require './cursor-component' + + +module.exports = +CursorsComponent = React.createClass + mixins: [SubscriberMixin] + + cursorBlinkIntervalHandle: null + + render: -> + {editor} = @props + {blinkCursorsOff} = @state + + div className: 'cursors', + for selection in editor.getSelections() when editor.selectionIntersectsVisibleRowRange(selection) + CursorComponent(cursor: selection.cursor, blinkOff: blinkCursorsOff) + + getInitialState: -> + blinkCursorsOff: false + + componentDidMount: -> + {editor} = @props + @subscribe editor, 'cursors-moved', @pauseCursorBlinking + @startBlinkingCursors() + + 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() + @startBlinkingCursorsAfterDelay ?= debounce(@startBlinkingCursors, @props.cursorBlinkResumeDelay) + @startBlinkingCursorsAfterDelay() diff --git a/src/editor-scroll-view-component.coffee b/src/editor-scroll-view-component.coffee index a5a46c17d..bc0d48157 100644 --- a/src/editor-scroll-view-component.coffee +++ b/src/editor-scroll-view-component.coffee @@ -1,20 +1,16 @@ React = require 'react' ReactUpdates = require 'react/lib/ReactUpdates' -{div, span} = require 'reactionary' -{debounce, isEqual, multiplyString, pick} = require 'underscore-plus' +{div} = require 'reactionary' InputComponent = require './input-component' LinesComponent = require './lines-component' -CursorComponent = require './cursor-component' +CursorsComponent = require './cursors-component' SelectionComponent = require './selection-component' -SubscriberMixin = require './subscriber-mixin' module.exports = EditorScrollViewComponent = React.createClass - mixins: [SubscriberMixin] - render: -> - {editor, fontSize, fontFamily, lineHeight, showIndentGuide} = @props + {editor, fontSize, fontFamily, lineHeight, showIndentGuide, cursorBlinkPeriod, cursorBlinkResumeDelay} = @props {visibleRowRange, onInputFocused, onInputBlurred} = @props contentStyle = height: editor.getScrollHeight() @@ -30,17 +26,10 @@ EditorScrollViewComponent = React.createClass onBlur: onInputBlurred div className: 'scroll-view-content', style: contentStyle, onMouseDown: @onMouseDown, - @renderCursors() + CursorsComponent({editor, cursorBlinkPeriod, cursorBlinkResumeDelay}) LinesComponent({ref: 'lines', editor, fontSize, fontFamily, lineHeight, visibleRowRange, showIndentGuide}) @renderUnderlayer() - renderCursors: -> - {editor} = @props - {blinkCursorsOff} = @state - - for selection in editor.getSelections() when editor.selectionIntersectsVisibleRowRange(selection) - CursorComponent(cursor: selection.cursor, blinkOff: blinkCursorsOff) - renderUnderlayer: -> {editor} = @props @@ -48,32 +37,13 @@ EditorScrollViewComponent = React.createClass for selection in editor.getSelections() when editor.selectionIntersectsVisibleRowRange(selection) SelectionComponent({selection}) - getInitialState: -> - blinkCursorsOff: false - componentDidMount: -> @getDOMNode().addEventListener 'overflowchanged', @updateModelDimensions - @subscribe @props.editor, 'cursors-moved', @pauseCursorBlinking @updateModelDimensions() - @startBlinkingCursors() focus: -> @refs.input.focus() - startBlinkingCursors: -> - @cursorBlinkIntervalHandle = setInterval(@toggleCursorBlink, @props.cursorBlinkPeriod / 2) - - stopBlinkingCursors: -> - clearInterval(@cursorBlinkIntervalHandle) - @setState(blinkCursorsOff: false) - - toggleCursorBlink: -> @setState(blinkCursorsOff: not @state.blinkCursorsOff) - - pauseCursorBlinking: -> - @stopBlinkingCursors() - @startBlinkingCursorsAfterDelay ?= debounce(@startBlinkingCursors, @props.cursorBlinkResumeDelay) - @startBlinkingCursorsAfterDelay() - getHiddenInputPosition: -> {editor} = @props