Merge pull request #14955 from atom/as-line-number-screen-row

Assign screen-row to each line number as a data field
This commit is contained in:
Antonio Scandurra
2017-07-05 14:18:14 +02:00
committed by GitHub
2 changed files with 40 additions and 12 deletions

View File

@@ -667,19 +667,38 @@ describe('TextEditorComponent', () => {
expect(element.classList.contains('has-selection')).toBe(false)
})
it('assigns a buffer-row to each line number as a data field', async () => {
it('assigns buffer-row and screen-row to each line number as data fields', async () => {
const {editor, element, component} = buildComponent()
editor.setSoftWrapped(true)
await component.getNextUpdatePromise()
await setEditorWidthInCharacters(component, 40)
{
const bufferRows = Array.from(element.querySelectorAll('.line-number:not(.dummy)')).map((e) => e.dataset.bufferRow)
const screenRows = Array.from(element.querySelectorAll('.line-number:not(.dummy)')).map((e) => e.dataset.screenRow)
expect(bufferRows).toEqual([
'0', '1', '2', '3', '3', '4', '5', '6', '6', '6',
'7', '8', '8', '8', '9', '10', '11', '11', '12'
])
expect(screenRows).toEqual([
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'10', '11', '12', '13', '14', '15', '16', '17', '18'
])
}
expect(
Array.from(element.querySelectorAll('.line-number:not(.dummy)'))
.map((element) => element.dataset.bufferRow)
).toEqual([
'0', '1', '2', '3', '3', '4', '5', '6', '6', '6',
'7', '8', '8', '8', '9', '10', '11', '11', '12'
])
editor.getBuffer().insert([2, 0], '\n')
await component.getNextUpdatePromise()
{
const bufferRows = Array.from(element.querySelectorAll('.line-number:not(.dummy)')).map((e) => e.dataset.bufferRow)
const screenRows = Array.from(element.querySelectorAll('.line-number:not(.dummy)')).map((e) => e.dataset.screenRow)
expect(bufferRows).toEqual([
'0', '1', '2', '3', '4', '4', '5', '6', '7', '7',
'7', '8', '9', '9', '9', '10', '11', '12', '12', '13'
])
expect(screenRows).toEqual([
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'10', '11', '12', '13', '14', '15', '16', '17', '18', '19'
])
}
})
it('does not blow away class names added to the element by packages when changing the class name', async () => {

View File

@@ -845,6 +845,7 @@ class TextEditorComponent {
const renderedRowCount = this.getRenderedRowCount()
const bufferRows = model.bufferRowsForScreenRows(startRow, endRow)
const screenRows = new Array(renderedRowCount)
const keys = new Array(renderedRowCount)
const foldableFlags = new Array(renderedRowCount)
const softWrappedFlags = new Array(renderedRowCount)
@@ -871,6 +872,7 @@ class TextEditorComponent {
foldableFlags[i] = false
}
screenRows[i] = row
previousBufferRow = bufferRow
}
@@ -878,6 +880,7 @@ class TextEditorComponent {
bufferRows.pop()
this.lineNumbersToRender.bufferRows = bufferRows
this.lineNumbersToRender.screenRows = screenRows
this.lineNumbersToRender.keys = keys
this.lineNumbersToRender.foldableFlags = foldableFlags
this.lineNumbersToRender.softWrappedFlags = softWrappedFlags
@@ -2944,7 +2947,7 @@ class GutterContainerComponent {
if (!isLineNumberGutterVisible) return null
if (hasInitialMeasurements) {
const {maxDigits, keys, bufferRows, softWrappedFlags, foldableFlags} = lineNumbersToRender
const {maxDigits, keys, bufferRows, screenRows, softWrappedFlags, foldableFlags} = lineNumbersToRender
return $(LineNumberGutterComponent, {
ref: 'lineNumberGutter',
element: gutter.getElement(),
@@ -2955,6 +2958,7 @@ class GutterContainerComponent {
maxDigits: maxDigits,
keys: keys,
bufferRows: bufferRows,
screenRows: screenRows,
softWrappedFlags: softWrappedFlags,
foldableFlags: foldableFlags,
decorations: decorationsToRender.lineNumbers,
@@ -2996,7 +3000,7 @@ class LineNumberGutterComponent {
render () {
const {
rootComponent, showLineNumbers, height, width, lineHeight, startRow, endRow, rowsPerTile,
maxDigits, keys, bufferRows, softWrappedFlags, foldableFlags, decorations
maxDigits, keys, bufferRows, screenRows, softWrappedFlags, foldableFlags, decorations
} = this.props
let children = null
@@ -3013,6 +3017,7 @@ class LineNumberGutterComponent {
const softWrapped = softWrappedFlags[j]
const foldable = foldableFlags[j]
const bufferRow = bufferRows[j]
const screenRow = screenRows[j]
let className = 'line-number'
if (foldable) className = className + ' foldable'
@@ -3031,6 +3036,7 @@ class LineNumberGutterComponent {
className,
width,
bufferRow,
screenRow,
number,
nodePool: this.nodePool
}
@@ -3144,12 +3150,13 @@ class LineNumberGutterComponent {
class LineNumberComponent {
constructor (props) {
const {className, width, marginTop, bufferRow, number, nodePool} = props
const {className, width, marginTop, bufferRow, screenRow, number, nodePool} = props
this.props = props
const style = {width: width + 'px'}
if (marginTop != null) style.marginTop = marginTop + 'px'
this.element = nodePool.getElement('DIV', className, style)
this.element.dataset.bufferRow = bufferRow
this.element.dataset.screenRow = screenRow
if (number) this.element.appendChild(nodePool.getTextNode(number))
this.element.appendChild(nodePool.getElement('DIV', 'icon-right', null))
}
@@ -3160,8 +3167,10 @@ class LineNumberComponent {
}
update (props) {
const {nodePool, className, width, marginTop, number} = props
const {nodePool, className, width, marginTop, bufferRow, screenRow, number} = props
if (this.props.bufferRow !== bufferRow) this.element.dataset.bufferRow = bufferRow
if (this.props.screenRow !== screenRow) this.element.dataset.screenRow = screenRow
if (this.props.className !== className) this.element.className = className
if (this.props.width !== width) this.element.style.width = width + 'px'
if (this.props.marginTop !== marginTop) {