mirror of
https://github.com/atom/atom.git
synced 2026-01-23 13:58:08 -05:00
9a81d2ec62
To create a new stacking context we need to isolate the container div. This fixes a visual glitch on the wrap-guide whenever there are more than 5 tiles.
100 lines
3.2 KiB
CoffeeScript
100 lines
3.2 KiB
CoffeeScript
{$$} = require 'space-pen'
|
|
|
|
CursorsComponent = require './cursors-component'
|
|
LinesTileComponent = require './lines-tile-component'
|
|
TiledComponent = require './tiled-component'
|
|
|
|
DummyLineNode = $$(-> @div className: 'line', style: 'position: absolute; visibility: hidden;', => @span 'x')[0]
|
|
|
|
module.exports =
|
|
class LinesComponent extends TiledComponent
|
|
placeholderTextDiv: null
|
|
|
|
constructor: ({@presenter, @hostElement, @useShadowDOM, visible}) ->
|
|
@domNode = document.createElement('div')
|
|
@domNode.classList.add('lines')
|
|
@tilesNode = document.createElement("div")
|
|
# Create a new stacking context, so that tiles z-index does not interfere
|
|
# with other visual elements.
|
|
@tilesNode.style.isolation = "isolate"
|
|
@tilesNode.style.zIndex = 0
|
|
@domNode.appendChild(@tilesNode)
|
|
|
|
@cursorsComponent = new CursorsComponent
|
|
@domNode.appendChild(@cursorsComponent.getDomNode())
|
|
|
|
if @useShadowDOM
|
|
insertionPoint = document.createElement('content')
|
|
insertionPoint.setAttribute('select', '.overlayer')
|
|
@domNode.appendChild(insertionPoint)
|
|
|
|
getDomNode: ->
|
|
@domNode
|
|
|
|
shouldRecreateAllTilesOnUpdate: ->
|
|
@oldState.indentGuidesVisible isnt @newState.indentGuidesVisible
|
|
|
|
beforeUpdateSync: (state) ->
|
|
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
|
|
|
|
afterUpdateSync: (state) ->
|
|
if @newState.placeholderText isnt @oldState.placeholderText
|
|
@placeholderTextDiv?.remove()
|
|
if @newState.placeholderText?
|
|
@placeholderTextDiv = document.createElement('div')
|
|
@placeholderTextDiv.classList.add('placeholder-text')
|
|
@placeholderTextDiv.textContent = @newState.placeholderText
|
|
@domNode.appendChild(@placeholderTextDiv)
|
|
|
|
if @newState.width isnt @oldState.width
|
|
@domNode.style.width = @newState.width + 'px'
|
|
@oldState.width = @newState.width
|
|
|
|
@cursorsComponent.updateSync(state)
|
|
|
|
@oldState.indentGuidesVisible = @newState.indentGuidesVisible
|
|
|
|
buildComponentForTile: (id) -> new LinesTileComponent({id, @presenter})
|
|
|
|
buildEmptyState: ->
|
|
{tiles: {}}
|
|
|
|
getNewState: (state) ->
|
|
state.content
|
|
|
|
getTilesNode: -> @tilesNode
|
|
|
|
measureLineHeightAndDefaultCharWidth: ->
|
|
@domNode.appendChild(DummyLineNode)
|
|
lineHeightInPixels = DummyLineNode.getBoundingClientRect().height
|
|
charWidth = DummyLineNode.firstChild.getBoundingClientRect().width
|
|
@domNode.removeChild(DummyLineNode)
|
|
|
|
@presenter.setLineHeight(lineHeightInPixels)
|
|
@presenter.setBaseCharacterWidth(charWidth)
|
|
|
|
remeasureCharacterWidths: ->
|
|
return unless @presenter.baseCharacterWidth
|
|
|
|
@clearScopedCharWidths()
|
|
@measureCharactersInNewLines()
|
|
|
|
measureCharactersInNewLines: ->
|
|
@presenter.batchCharacterMeasurement =>
|
|
for id, component of @componentsByTileId
|
|
component.measureCharactersInNewLines()
|
|
|
|
return
|
|
|
|
clearScopedCharWidths: ->
|
|
for id, component of @componentsByTileId
|
|
component.clearMeasurements()
|
|
|
|
@presenter.clearScopedCharacterWidths()
|