From f33051da339f2914a4e2854f55724a3f84acb196 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Fri, 18 Aug 2017 20:53:58 -0600 Subject: [PATCH] Fix highlight end pixel position calculation Previously, we were calculating the position preceding block decorations for the row following the end of the highlighted range, but that's actually wrong. We just want the position following block decorations of the end of the highlighted range, plus one line height. This prevents us from incorrectly rendering the end of highlight after block decorations that immediately follow the end of the highlighted range. --- spec/text-editor-component-spec.js | 16 ++++++++++++++++ src/text-editor-component.js | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js index e65e09e5d..1c37c549d 100644 --- a/spec/text-editor-component-spec.js +++ b/spec/text-editor-component-spec.js @@ -1697,6 +1697,22 @@ describe('TextEditorComponent', () => { await component.getNextUpdatePromise() expect(Array.from(marker1Region.parentElement.children).indexOf(marker1Region)).toBe(0) }) + + it('correctly positions highlights that end on rows preceding block decorations', async () => { + const {editor, element, component} = buildComponent() + + const item = document.createElement('div') + item.style.height = '30px' + editor.decorateMarker(editor.markBufferPosition([4, 0]), { + type: 'block', position: 'after', item + }) + editor.setSelectedBufferRange([[3, 0], [4, Infinity]]) + await component.getNextUpdatePromise() + + const regions = element.querySelectorAll('.selection .region') + expect(regions[0].offsetTop).toBe(3 * component.getLineHeight()) + expect(regions[1].offsetTop).toBe(4 * component.getLineHeight()) + }) }) describe('overlay decorations', () => { diff --git a/src/text-editor-component.js b/src/text-editor-component.js index e89bcd509..3c9e5b569 100644 --- a/src/text-editor-component.js +++ b/src/text-editor-component.js @@ -1316,7 +1316,7 @@ class TextEditorComponent { const {start, end} = highlight.screenRange highlight.startPixelTop = this.pixelPositionAfterBlocksForRow(start.row) highlight.startPixelLeft = this.pixelLeftForRowAndColumn(start.row, start.column) - highlight.endPixelTop = this.pixelPositionBeforeBlocksForRow(end.row + 1) + highlight.endPixelTop = this.pixelPositionBeforeBlocksForRow(end.row) + this.getLineHeight() highlight.endPixelLeft = this.pixelLeftForRowAndColumn(end.row, end.column) } this.decorationsToRender.highlights.set(tileRow, highlights)