From 7769c464da25f3fc94a5c798a10082ac3e889b42 Mon Sep 17 00:00:00 2001 From: Antonio Scandurra Date: Thu, 4 Jun 2015 10:50:46 +0200 Subject: [PATCH] Extract `TiledComponent` --- src/lines-component.coffee | 67 +++++++------------------------------- src/tiled-component.coffee | 58 +++++++++++++++++++++++++++++++++ 2 files changed, 69 insertions(+), 56 deletions(-) create mode 100644 src/tiled-component.coffee diff --git a/src/lines-component.coffee b/src/lines-component.coffee index 23f1c0015..233a4575b 100644 --- a/src/lines-component.coffee +++ b/src/lines-component.coffee @@ -3,21 +3,15 @@ CursorsComponent = require './cursors-component' HighlightsComponent = require './highlights-component' TileComponent = require './tile-component' +TiledComponent = require './tiled-component' DummyLineNode = $$(-> @div className: 'line', style: 'position: absolute; visibility: hidden;', => @span 'x')[0] -cloneObject = (object) -> - clone = {} - clone[key] = value for key, value of object - clone - module.exports = -class LinesComponent +class LinesComponent extends TiledComponent placeholderTextDiv: null constructor: ({@presenter, @hostElement, @useShadowDOM, visible}) -> - @tileComponentsByTileId = {} - @domNode = document.createElement('div') @domNode.classList.add('lines') @@ -35,18 +29,10 @@ class LinesComponent getDomNode: -> @domNode - updateSync: (state) -> - @newState = state.content - @oldState ?= {tiles: {}} - - if @newState.scrollHeight isnt @oldState.scrollHeight - @domNode.style.height = @newState.scrollHeight + 'px' - @oldState.scrollHeight = @newState.scrollHeight - - if @newState.backgroundColor isnt @oldState.backgroundColor - @domNode.style.backgroundColor = @newState.backgroundColor - @oldState.backgroundColor = @newState.backgroundColor + shouldRecreateAllTilesOnUpdate: -> + @oldState.indentGuidesVisible isnt @newState.indentGuidesVisible + afterUpdateSync: (state) -> if @newState.placeholderText isnt @oldState.placeholderText @placeholderTextDiv?.remove() if @newState.placeholderText? @@ -55,47 +41,16 @@ class LinesComponent @placeholderTextDiv.textContent = @newState.placeholderText @domNode.appendChild(@placeholderTextDiv) - @removeTileNodes() unless @oldState.indentGuidesVisible is @newState.indentGuidesVisible - @updateTileNodes() - - if @newState.scrollWidth isnt @oldState.scrollWidth - @domNode.style.width = @newState.scrollWidth + 'px' - @oldState.scrollWidth = @newState.scrollWidth - @cursorsComponent.updateSync(state) @highlightsComponent.updateSync(state) @oldState.indentGuidesVisible = @newState.indentGuidesVisible @oldState.scrollWidth = @newState.scrollWidth - removeTileNodes: -> - @removeTileNode(id) for id of @oldState.tiles - return + buildComponentForTile: (id) -> new TileComponent({id, @presenter}) - removeTileNode: (id) -> - node = @tileComponentsByTileId[id].getDomNode() - - node.remove() - delete @tileComponentsByTileId[id] - delete @oldState.tiles[id] - - updateTileNodes: -> - for id of @oldState.tiles - unless @newState.tiles.hasOwnProperty(id) - @removeTileNode(id) - - for id, tileState of @newState.tiles - if @oldState.tiles.hasOwnProperty(id) - tileComponent = @tileComponentsByTileId[id] - else - tileComponent = @tileComponentsByTileId[id] = new TileComponent({id, @presenter}) - - @domNode.appendChild(tileComponent.getDomNode()) - @oldState.tiles[id] = cloneObject(tileState) - - tileComponent.updateSync(@newState) - - return + buildEmptyState: -> + {tiles: {}} measureLineHeightAndDefaultCharWidth: -> @domNode.appendChild(DummyLineNode) @@ -114,13 +69,13 @@ class LinesComponent measureCharactersInNewLines: -> @presenter.batchCharacterMeasurement => - for id, component of @tileComponentsByTileId + for id, component of @componentsByTileId component.measureCharactersInNewLines() return clearScopedCharWidths: -> - for id, component of @tileComponentsByTileId + for id, component of @componentsByTileId component.clearMeasurements() @presenter.clearScopedCharacterWidths() @@ -128,4 +83,4 @@ class LinesComponent lineNodeForScreenRow: (screenRow) -> tile = @presenter.tileForRow(screenRow) - @tileComponentsByTileId[tile]?.lineNodeForScreenRow(screenRow) + @componentsByTileId[tile]?.lineNodeForScreenRow(screenRow) diff --git a/src/tiled-component.coffee b/src/tiled-component.coffee new file mode 100644 index 000000000..ad7322013 --- /dev/null +++ b/src/tiled-component.coffee @@ -0,0 +1,58 @@ +cloneObject = (object) -> + clone = {} + clone[key] = value for key, value of object + clone + +module.exports = +class TiledComponent + componentsByTileId: {} + + updateSync: (state) -> + @newState = state.content + @oldState ?= @buildEmptyState() + + if @newState.scrollHeight isnt @oldState.scrollHeight + @domNode.style.height = @newState.scrollHeight + 'px' + @oldState.scrollHeight = @newState.scrollHeight + + if @newState.backgroundColor isnt @oldState.backgroundColor + @domNode.style.backgroundColor = @newState.backgroundColor + @oldState.backgroundColor = @newState.backgroundColor + + if @newState.scrollWidth isnt @oldState.scrollWidth + @domNode.style.width = @newState.scrollWidth + 'px' + @oldState.scrollWidth = @newState.scrollWidth + + @removeTileNodes() if @shouldRecreateAllTilesOnUpdate() + @updateTileNodes() + + @afterUpdateSync(state) + + removeTileNodes: -> + @removeTileNode(id) for id of @oldState.tiles + return + + removeTileNode: (id) -> + node = @componentsByTileId[id].getDomNode() + + node.remove() + delete @componentsByTileId[id] + delete @oldState.tiles[id] + + updateTileNodes: -> + for id of @oldState.tiles + unless @newState.tiles.hasOwnProperty(id) + @removeTileNode(id) + + for id, tileState of @newState.tiles + if @oldState.tiles.hasOwnProperty(id) + component = @componentsByTileId[id] + else + component = @componentsByTileId[id] = @buildComponentForTile(id) + + @domNode.appendChild(component.getDomNode()) + @oldState.tiles[id] = cloneObject(tileState) + + component.updateSync(@newState) + + return