diff --git a/src/cursors-component.coffee b/src/cursors-component.coffee index bf704a1a5..e11019d6c 100644 --- a/src/cursors-component.coffee +++ b/src/cursors-component.coffee @@ -1,37 +1,23 @@ -React = require 'react-atom-fork' -{div} = require 'reactionary-atom-fork' -{debounce, toArray, isEqualForProperties, isEqual} = require 'underscore-plus' -SubscriberMixin = require './subscriber-mixin' - module.exports = -CursorsComponent = React.createClass - displayName: 'CursorsComponent' +class CursorsComponent oldState: null - cursorNodesById: null - render: -> - div className: 'cursors' - - componentWillMount: -> + constructor: (@presenter) -> @cursorNodesById = {} - - componentDidMount: -> - @updateSync() - - componentDidUpdate: -> + @domNode = document.createElement('div') + @domNode.classList.add('cursors') @updateSync() updateSync: -> - node = @getDOMNode() - newState = @props.presenter.state.content + newState = @presenter.state.content @oldState ?= {cursors: {}} # update blink class if newState.blinkCursorsOff isnt @oldState.blinkCursorsOff if newState.blinkCursorsOff - node.classList.add 'blink-off' + @domNode.classList.add 'blink-off' else - node.classList.remove 'blink-off' + @domNode.classList.remove 'blink-off' @oldState.blinkCursorsOff = newState.blinkCursorsOff # remove cursors @@ -47,7 +33,7 @@ CursorsComponent = React.createClass cursorNode = document.createElement('div') cursorNode.classList.add('cursor') @cursorNodesById[id] = cursorNode - node.appendChild(cursorNode) + @domNode.appendChild(cursorNode) @updateCursorNode(id, cursorState) updateCursorNode: (id, newCursorState) -> diff --git a/src/lines-component.coffee b/src/lines-component.coffee index 1f830038f..d7d41cbdc 100644 --- a/src/lines-component.coffee +++ b/src/lines-component.coffee @@ -31,7 +31,6 @@ LinesComponent = React.createClass div {className: 'lines', style}, div className: 'placeholder-text', placeholderText if placeholderText? - CursorsComponent {presenter} HighlightsComponent {presenter} getTransform: -> @@ -51,17 +50,22 @@ LinesComponent = React.createClass @renderedDecorationsByLineId = {} componentDidMount: -> + node = @getDOMNode() + + @cursorsComponent = new CursorsComponent(@props.presenter) + node.appendChild(@cursorsComponent.domNode) + if @props.useShadowDOM insertionPoint = document.createElement('content') insertionPoint.setAttribute('select', '.overlayer') - @getDOMNode().appendChild(insertionPoint) + node.appendChild(insertionPoint) insertionPoint = document.createElement('content') insertionPoint.setAttribute('select', 'atom-overlay') @overlayManager = new OverlayManager(@props.hostElement) - @getDOMNode().appendChild(insertionPoint) + node.appendChild(insertionPoint) else - @overlayManager = new OverlayManager(@getDOMNode()) + @overlayManager = new OverlayManager(node) componentDidUpdate: -> {visible, presenter} = @props @@ -70,6 +74,8 @@ LinesComponent = React.createClass @updateLineNodes() @measureCharactersInNewLines() if visible and not @newState.scrollingVertically + @cursorsComponent.updateSync() + @overlayManager?.render(@props) @oldState.indentGuidesVisible = @newState.indentGuidesVisible