mirror of
https://github.com/atom/atom.git
synced 2026-04-28 03:01:47 -04:00
192997c8cf
In adding custom gutter APIs, I suggested to @jssln that we associate the gutter model objects with DOM nodes in the view registry to make it easy for package authors to get at the view layer for a particular gutter. She also applied this treatment to the line numbers gutter, which makes sense. However, using the view registry opened up an unexpected wrinkle… When you detach an editor, we need to tear down all the associated view logic because at that point, we don’t know whether the element is about to be reattached or whether it’s going to get garbage collected. In the case where we reattach, we end up constructing a new TextEditorComponent for the element. When this happens, the gutter component requests a DOM node for the gutter from the view registry. Except in this case the DOM element isn’t empty because it was already used by a different component for the same element before it was detached. The fix is simply to always clear out the line numbers to ensure we start in a clean state. @jssln: You should apply this same fix to custom gutters or we’ll see the same issues.
164 lines
5.6 KiB
CoffeeScript
164 lines
5.6 KiB
CoffeeScript
_ = require 'underscore-plus'
|
|
{setDimensionsAndBackground} = require './gutter-component-helpers'
|
|
|
|
WrapperDiv = document.createElement('div')
|
|
|
|
module.exports =
|
|
class LineNumberGutterComponent
|
|
dummyLineNumberNode: null
|
|
|
|
constructor: ({@onMouseDown, @editor, @gutter}) ->
|
|
@lineNumberNodesById = {}
|
|
@visible = true
|
|
|
|
@domNode = atom.views.getView(@gutter)
|
|
@lineNumbersNode = @domNode.firstChild
|
|
@lineNumbersNode.innerHTML = ''
|
|
|
|
@domNode.addEventListener 'click', @onClick
|
|
@domNode.addEventListener 'mousedown', @onMouseDown
|
|
|
|
getDomNode: ->
|
|
@domNode
|
|
|
|
hideNode: ->
|
|
if @visible
|
|
@domNode.style.display = 'none'
|
|
@visible = false
|
|
|
|
showNode: ->
|
|
if not @visible
|
|
@domNode.style.removeProperty('display')
|
|
@visible = true
|
|
|
|
updateSync: (state) ->
|
|
@newState = state.gutters.lineNumberGutter
|
|
@oldState ?= {lineNumbers: {}}
|
|
|
|
@appendDummyLineNumber() unless @dummyLineNumberNode?
|
|
|
|
newDimensionsAndBackgroundState = state.gutters
|
|
setDimensionsAndBackground(@oldState, newDimensionsAndBackgroundState, @lineNumbersNode)
|
|
|
|
if @newState.maxLineNumberDigits isnt @oldState.maxLineNumberDigits
|
|
@updateDummyLineNumber()
|
|
node.remove() for id, node of @lineNumberNodesById
|
|
@oldState = {maxLineNumberDigits: @newState.maxLineNumberDigits, lineNumbers: {}}
|
|
@lineNumberNodesById = {}
|
|
|
|
@updateLineNumbers()
|
|
|
|
###
|
|
Section: Private Methods
|
|
###
|
|
|
|
# This dummy line number element holds the gutter to the appropriate width,
|
|
# since the real line numbers are absolutely positioned for performance reasons.
|
|
appendDummyLineNumber: ->
|
|
WrapperDiv.innerHTML = @buildLineNumberHTML({bufferRow: -1})
|
|
@dummyLineNumberNode = WrapperDiv.children[0]
|
|
@lineNumbersNode.appendChild(@dummyLineNumberNode)
|
|
|
|
updateDummyLineNumber: ->
|
|
@dummyLineNumberNode.innerHTML = @buildLineNumberInnerHTML(0, false)
|
|
|
|
updateLineNumbers: ->
|
|
newLineNumberIds = null
|
|
newLineNumbersHTML = null
|
|
|
|
for id, lineNumberState of @newState.lineNumbers
|
|
if @oldState.lineNumbers.hasOwnProperty(id)
|
|
@updateLineNumberNode(id, lineNumberState)
|
|
else
|
|
newLineNumberIds ?= []
|
|
newLineNumbersHTML ?= ""
|
|
newLineNumberIds.push(id)
|
|
newLineNumbersHTML += @buildLineNumberHTML(lineNumberState)
|
|
@oldState.lineNumbers[id] = _.clone(lineNumberState)
|
|
|
|
if newLineNumberIds?
|
|
WrapperDiv.innerHTML = newLineNumbersHTML
|
|
newLineNumberNodes = _.toArray(WrapperDiv.children)
|
|
|
|
node = @lineNumbersNode
|
|
for id, i in newLineNumberIds
|
|
lineNumberNode = newLineNumberNodes[i]
|
|
@lineNumberNodesById[id] = lineNumberNode
|
|
node.appendChild(lineNumberNode)
|
|
|
|
for id, lineNumberState of @oldState.lineNumbers
|
|
unless @newState.lineNumbers.hasOwnProperty(id)
|
|
@lineNumberNodesById[id].remove()
|
|
delete @lineNumberNodesById[id]
|
|
delete @oldState.lineNumbers[id]
|
|
|
|
return
|
|
|
|
buildLineNumberHTML: (lineNumberState) ->
|
|
{screenRow, bufferRow, softWrapped, top, decorationClasses} = lineNumberState
|
|
if screenRow?
|
|
style = "position: absolute; top: #{top}px;"
|
|
else
|
|
style = "visibility: hidden;"
|
|
className = @buildLineNumberClassName(lineNumberState)
|
|
innerHTML = @buildLineNumberInnerHTML(bufferRow, softWrapped)
|
|
|
|
"<div class=\"#{className}\" style=\"#{style}\" data-buffer-row=\"#{bufferRow}\" data-screen-row=\"#{screenRow}\">#{innerHTML}</div>"
|
|
|
|
buildLineNumberInnerHTML: (bufferRow, softWrapped) ->
|
|
{maxLineNumberDigits} = @newState
|
|
|
|
if softWrapped
|
|
lineNumber = "•"
|
|
else
|
|
lineNumber = (bufferRow + 1).toString()
|
|
|
|
padding = _.multiplyString(' ', maxLineNumberDigits - lineNumber.length)
|
|
iconHTML = '<div class="icon-right"></div>'
|
|
padding + lineNumber + iconHTML
|
|
|
|
updateLineNumberNode: (lineNumberId, newLineNumberState) ->
|
|
oldLineNumberState = @oldState.lineNumbers[lineNumberId]
|
|
node = @lineNumberNodesById[lineNumberId]
|
|
|
|
unless oldLineNumberState.foldable is newLineNumberState.foldable and _.isEqual(oldLineNumberState.decorationClasses, newLineNumberState.decorationClasses)
|
|
node.className = @buildLineNumberClassName(newLineNumberState)
|
|
oldLineNumberState.foldable = newLineNumberState.foldable
|
|
oldLineNumberState.decorationClasses = _.clone(newLineNumberState.decorationClasses)
|
|
|
|
unless oldLineNumberState.top is newLineNumberState.top
|
|
node.style.top = newLineNumberState.top + 'px'
|
|
node.dataset.screenRow = newLineNumberState.screenRow
|
|
oldLineNumberState.top = newLineNumberState.top
|
|
oldLineNumberState.screenRow = newLineNumberState.screenRow
|
|
|
|
buildLineNumberClassName: ({bufferRow, foldable, decorationClasses, softWrapped}) ->
|
|
className = "line-number line-number-#{bufferRow}"
|
|
className += " " + decorationClasses.join(' ') if decorationClasses?
|
|
className += " foldable" if foldable and not softWrapped
|
|
className
|
|
|
|
lineNumberNodeForScreenRow: (screenRow) ->
|
|
for id, lineNumberState of @oldState.lineNumbers
|
|
if lineNumberState.screenRow is screenRow
|
|
return @lineNumberNodesById[id]
|
|
null
|
|
|
|
onMouseDown: (event) =>
|
|
{target} = event
|
|
lineNumber = target.parentNode
|
|
|
|
unless target.classList.contains('icon-right') and lineNumber.classList.contains('foldable')
|
|
@onMouseDown(event)
|
|
|
|
onClick: (event) =>
|
|
{target} = event
|
|
lineNumber = target.parentNode
|
|
|
|
if target.classList.contains('icon-right') and lineNumber.classList.contains('foldable')
|
|
bufferRow = parseInt(lineNumber.getAttribute('data-buffer-row'))
|
|
if lineNumber.classList.contains('folded')
|
|
@editor.unfoldBufferRow(bufferRow)
|
|
else
|
|
@editor.foldBufferRow(bufferRow)
|