From 942dd03bd0c623a5ea9140306cb886726d8d0a07 Mon Sep 17 00:00:00 2001 From: Antonio Scandurra Date: Wed, 5 Jul 2017 11:11:44 +0200 Subject: [PATCH 1/2] Assign screen-row to each line number as a data field --- spec/text-editor-component-spec.js | 21 +++++++++++++-------- src/text-editor-component.js | 13 ++++++++++--- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js index 862018cf8..83246ae91 100644 --- a/spec/text-editor-component-spec.js +++ b/spec/text-editor-component-spec.js @@ -667,19 +667,24 @@ 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' - ]) }) it('does not blow away class names added to the element by packages when changing the class name', async () => { diff --git a/src/text-editor-component.js b/src/text-editor-component.js index ce332ed67..641585348 100644 --- a/src/text-editor-component.js +++ b/src/text-editor-component.js @@ -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)) } From bcaf6553253b6833a661e48a38241d840cfc694a Mon Sep 17 00:00:00 2001 From: Antonio Scandurra Date: Wed, 5 Jul 2017 11:12:48 +0200 Subject: [PATCH 2/2] Update buffer-row and screen-row data fields on each line number node --- spec/text-editor-component-spec.js | 14 ++++++++++++++ src/text-editor-component.js | 4 +++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js index 83246ae91..54a7e327a 100644 --- a/spec/text-editor-component-spec.js +++ b/spec/text-editor-component-spec.js @@ -685,6 +685,20 @@ describe('TextEditorComponent', () => { ]) } + 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 () => { diff --git a/src/text-editor-component.js b/src/text-editor-component.js index 641585348..8599c5b49 100644 --- a/src/text-editor-component.js +++ b/src/text-editor-component.js @@ -3167,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) {