diff --git a/src/line-number-gutter-component.coffee b/src/line-number-gutter-component.coffee index 8eef6bd27..390aba41b 100644 --- a/src/line-number-gutter-component.coffee +++ b/src/line-number-gutter-component.coffee @@ -1,7 +1,7 @@ TiledComponent = require './tiled-component' LineNumbersTileComponent = require './line-numbers-tile-component' WrapperDiv = document.createElement('div') -DummyLineNumberComponent = LineNumbersTileComponent.createDummy() +DomElementsPool = require './dom-elements-pool' module.exports = class LineNumberGutterComponent extends TiledComponent @@ -10,6 +10,10 @@ class LineNumberGutterComponent extends TiledComponent constructor: ({@onMouseDown, @editor, @gutter}) -> @visible = true + @elementsPool = new DomElementsPool + + @dummyLineNumberComponent = LineNumbersTileComponent.createDummy(@elementsPool) + @domNode = atom.views.getView(@gutter) @lineNumbersNode = @domNode.firstChild @lineNumbersNode.innerHTML = '' @@ -60,7 +64,7 @@ class LineNumberGutterComponent extends TiledComponent @oldState.styles = {} @oldState.maxLineNumberDigits = @newState.maxLineNumberDigits - buildComponentForTile: (id) -> new LineNumbersTileComponent({id}) + buildComponentForTile: (id) -> new LineNumbersTileComponent({id, @elementsPool}) ### Section: Private Methods @@ -69,14 +73,14 @@ class LineNumberGutterComponent extends TiledComponent # This dummy line number element holds the gutter to the appropriate width, # since the real line numbers are absolutely positioned for performance reasons. appendDummyLineNumber: -> - DummyLineNumberComponent.newState = @newState - WrapperDiv.innerHTML = DummyLineNumberComponent.buildLineNumberHTML({bufferRow: -1}) - @dummyLineNumberNode = WrapperDiv.children[0] + @dummyLineNumberComponent.newState = @newState + @dummyLineNumberNode = @dummyLineNumberComponent.buildLineNumberNode({bufferRow: -1}) @lineNumbersNode.appendChild(@dummyLineNumberNode) updateDummyLineNumber: -> - DummyLineNumberComponent.newState = @newState - @dummyLineNumberNode.innerHTML = DummyLineNumberComponent.buildLineNumberInnerHTML(0, false) + @dummyLineNumberComponent.newState = @newState + @dummyLineNumberNode.innerHTML = "" + @dummyLineNumberComponent.appendLineNumberInnerNodes(0, false, @dummyLineNumberNode) onMouseDown: (event) => {target} = event diff --git a/src/line-numbers-tile-component.coffee b/src/line-numbers-tile-component.coffee index 703054024..ed08e3727 100644 --- a/src/line-numbers-tile-component.coffee +++ b/src/line-numbers-tile-component.coffee @@ -3,19 +3,18 @@ WrapperDiv = document.createElement('div') module.exports = class LineNumbersTileComponent - @createDummy: -> - new LineNumbersTileComponent({id: -1}) + @createDummy: (elementsPool) -> + new LineNumbersTileComponent({id: -1, elementsPool}) - constructor: ({@id}) -> + constructor: ({@id, @elementsPool}) -> @lineNumberNodesById = {} - @domNode = document.createElement("div") - @domNode.classList.add("tile") + @domNode = @elementsPool.build("div", "tile") @domNode.style.position = "absolute" @domNode.style.display = "block" @domNode.style.top = 0 # Cover the space occupied by a dummy lineNumber destroy: -> - @domNode.remove() + @elementsPool.freeElementAndDescendants(@domNode) getDomNode: -> @domNode @@ -50,7 +49,9 @@ class LineNumbersTileComponent @oldTileState.zIndex = @newTileState.zIndex if @newState.maxLineNumberDigits isnt @oldState.maxLineNumberDigits - node.remove() for id, node of @lineNumberNodesById + for id, node of @lineNumberNodesById + @elementsPool.freeElementAndDescendants(node) + @oldState.tiles[@id] = {lineNumbers: {}} @oldTileState = @oldState.tiles[@id] @lineNumberNodesById = {} @@ -60,11 +61,11 @@ class LineNumbersTileComponent updateLineNumbers: -> newLineNumberIds = null - newLineNumbersHTML = null + newLineNumberNodes = null for id, lineNumberState of @oldTileState.lineNumbers unless @newTileState.lineNumbers.hasOwnProperty(id) - @lineNumberNodesById[id].remove() + @elementsPool.freeElementAndDescendants(@lineNumberNodesById[id]) delete @lineNumberNodesById[id] delete @oldTileState.lineNumbers[id] @@ -73,15 +74,12 @@ class LineNumbersTileComponent @updateLineNumberNode(id, lineNumberState) else newLineNumberIds ?= [] - newLineNumbersHTML ?= "" + newLineNumberNodes ?= [] newLineNumberIds.push(id) - newLineNumbersHTML += @buildLineNumberHTML(lineNumberState) + newLineNumberNodes.push(@buildLineNumberNode(lineNumberState)) @oldTileState.lineNumbers[id] = _.clone(lineNumberState) if newLineNumberIds? - WrapperDiv.innerHTML = newLineNumbersHTML - newLineNumberNodes = _.toArray(WrapperDiv.children) - node = @domNode for id, i in newLineNumberIds lineNumberNode = newLineNumberNodes[i] @@ -90,18 +88,25 @@ class LineNumbersTileComponent return - buildLineNumberHTML: (lineNumberState) -> + buildLineNumberNode: (lineNumberState) -> {screenRow, bufferRow, softWrapped, top, decorationClasses, zIndex} = lineNumberState - if screenRow? - style = "position: absolute; top: #{top}px; z-index: #{zIndex};" - else - style = "visibility: hidden;" + className = @buildLineNumberClassName(lineNumberState) - innerHTML = @buildLineNumberInnerHTML(bufferRow, softWrapped) + lineNumberNode = @elementsPool.build("div", className) + lineNumberNode.dataset.screenRow = screenRow + lineNumberNode.dataset.bufferRow = bufferRow - "
#{innerHTML}
" + if screenRow? + lineNumberNode.style.position = "absolute" + lineNumberNode.style.top = top + "px" + lineNumberNode.style.zIndex = zIndex + else + lineNumberNode.style.visibility = "hidden" - buildLineNumberInnerHTML: (bufferRow, softWrapped) -> + @appendLineNumberInnerNodes(bufferRow, softWrapped, lineNumberNode) + lineNumberNode + + appendLineNumberInnerNodes: (bufferRow, softWrapped, lineNumberNode) -> {maxLineNumberDigits} = @newState if softWrapped @@ -110,8 +115,10 @@ class LineNumbersTileComponent lineNumber = (bufferRow + 1).toString() padding = _.multiplyString(' ', maxLineNumberDigits - lineNumber.length) - iconHTML = '
' - padding + lineNumber + iconHTML + iconRight = @elementsPool.build("div", "icon-right") + + lineNumberNode.innerHTML = padding + lineNumber + lineNumberNode.appendChild(iconRight) updateLineNumberNode: (lineNumberId, newLineNumberState) -> oldLineNumberState = @oldTileState.lineNumbers[lineNumberId]