Re-measure the line height in pixels when the CSS line-height changes

This commit is contained in:
Kevin Sawicki & Nathan Sobo
2014-05-21 18:21:27 -06:00
parent 9e3ce09658
commit 8ffcdad89a
4 changed files with 24 additions and 12 deletions

View File

@@ -90,6 +90,14 @@ describe "EditorComponent", ->
expect(component.lineNodeForScreenRow(3).offsetTop).toBe 3 * lineHeightInPixels
expect(component.lineNodeForScreenRow(4).offsetTop).toBe 4 * lineHeightInPixels
it "updates the top position of lines when the line height changes", ->
initialLineHeightInPixels = editor.getLineHeightInPixels()
component.setLineHeight(2)
newLineHeightInPixels = editor.getLineHeightInPixels()
expect(newLineHeightInPixels).not.toBe initialLineHeightInPixels
expect(component.lineNodeForScreenRow(1).offsetTop).toBe 1 * newLineHeightInPixels
describe "when showInvisibles is enabled", ->
invisibles = null

View File

@@ -60,7 +60,7 @@ EditorComponent = React.createClass
EditorScrollViewComponent {
ref: 'scrollView', editor, fontSize, fontFamily, showIndentGuide,
lineHeightInPixels, renderedRowRange, @pendingChanges,
lineHeight, lineHeightInPixels, renderedRowRange, @pendingChanges,
scrollTop, scrollLeft, scrollHeight, scrollWidth, @scrollingVertically,
@cursorsMoved, @selectionChanged, @selectionAdded, cursorBlinkPeriod,
cursorBlinkResumeDelay, @onInputFocused, @onInputBlurred, @mouseWheelScreenRow,

View File

@@ -16,7 +16,7 @@ EditorScrollViewComponent = React.createClass
overflowChangedWhilePaused: false
render: ->
{editor, fontSize, fontFamily, lineHeightInPixels, showIndentGuide, invisibles, visible} = @props
{editor, fontSize, fontFamily, lineHeight, lineHeightInPixels, showIndentGuide, invisibles, visible} = @props
{renderedRowRange, pendingChanges, scrollTop, scrollLeft, scrollHeight, scrollWidth, scrollingVertically, mouseWheelScreenRow} = @props
{selectionChanged, selectionAdded, cursorBlinkPeriod, cursorBlinkResumeDelay, cursorsMoved, onInputFocused, onInputBlurred} = @props
@@ -35,8 +35,8 @@ EditorScrollViewComponent = React.createClass
CursorsComponent({editor, scrollTop, scrollLeft, cursorsMoved, selectionAdded, cursorBlinkPeriod, cursorBlinkResumeDelay})
LinesComponent {
ref: 'lines', editor, fontSize, fontFamily, lineHeightInPixels, showIndentGuide,
renderedRowRange, pendingChanges, scrollTop, scrollLeft, scrollingVertically,
ref: 'lines', editor, fontSize, fontFamily, lineHeight, lineHeightInPixels,
showIndentGuide, renderedRowRange, pendingChanges, scrollTop, scrollLeft, scrollingVertically,
selectionChanged, scrollHeight, scrollWidth, mouseWheelScreenRow, invisibles,
visible
}

View File

@@ -33,11 +33,15 @@ LinesComponent = React.createClass
@lineIdsByScreenRow = {}
componentDidMount: ->
@measurelineHeightInPixelsAndCharWidth()
@measureLineHeightInPixelsAndCharWidth()
shouldComponentUpdate: (newProps) ->
return true if newProps.selectionChanged
return true unless isEqualForProperties(newProps, @props, 'renderedRowRange', 'fontSize', 'fontFamily', 'lineHeightInPixels', 'scrollTop', 'scrollLeft', 'showIndentGuide', 'scrollingVertically', 'invisibles', 'visible')
return true unless isEqualForProperties(newProps, @props,
'renderedRowRange', 'fontSize', 'fontFamily', 'lineHeight', 'lineHeightInPixels',
'scrollTop', 'scrollLeft', 'showIndentGuide', 'scrollingVertically', 'invisibles',
'visible'
)
{renderedRowRange, pendingChanges} = newProps
for change in pendingChanges
@@ -46,7 +50,7 @@ LinesComponent = React.createClass
false
componentDidUpdate: (prevProps) ->
@measurelineHeightInPixelsAndCharWidthIfNeeded(prevProps)
@measureLineHeightInPixelsAndCharWidthIfNeeded(prevProps)
@clearScreenRowCaches() unless prevProps.lineHeightInPixels is @props.lineHeightInPixels
@removeLineNodes() unless isEqualForProperties(prevProps, @props, 'showIndentGuide', 'invisibles')
@updateLines()
@@ -198,17 +202,17 @@ LinesComponent = React.createClass
lineNodeForScreenRow: (screenRow) ->
@lineNodesByLineId[@lineIdsByScreenRow[screenRow]]
measurelineHeightInPixelsAndCharWidthIfNeeded: (prevProps) ->
measureLineHeightInPixelsAndCharWidthIfNeeded: (prevProps) ->
{visible} = @props
unless isEqualForProperties(prevProps, @props, 'fontSize', 'fontFamily', 'lineHeightInPixels')
unless isEqualForProperties(prevProps, @props, 'fontSize', 'fontFamily', 'lineHeight')
if visible
@measurelineHeightInPixelsAndCharWidth()
@measureLineHeightInPixelsAndCharWidth()
else
@measureWhenShown = true
@measurelineHeightInPixelsAndCharWidth() if visible and not prevProps.visible and @measureWhenShown
@measureLineHeightInPixelsAndCharWidth() if visible and not prevProps.visible and @measureWhenShown
measurelineHeightInPixelsAndCharWidth: ->
measureLineHeightInPixelsAndCharWidth: ->
@measureWhenShown = false
node = @getDOMNode()
node.appendChild(DummyLineNode)