From 1f768a21f0eeb24e38d72b94820440baae4c1f68 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Tue, 22 Apr 2014 11:10:48 -0600 Subject: [PATCH] Update absolute position of lines and line numbers when text changes When lines are inserted or removed, we need to manually shift the on-screen lines since everything is absolutely positioned now. --- spec/editor-component-spec.coffee | 33 +++++++++++++++++++++++++++++++ src/gutter-component.coffee | 2 +- src/lines-component.coffee | 2 +- 3 files changed, 35 insertions(+), 2 deletions(-) diff --git a/spec/editor-component-spec.coffee b/spec/editor-component-spec.coffee index ab3708ea2..7ae9765eb 100644 --- a/spec/editor-component-spec.coffee +++ b/spec/editor-component-spec.coffee @@ -56,6 +56,21 @@ describe "EditorComponent", -> expect(lineNodes[0].textContent).toBe editor.lineForScreenRow(2).text expect(lineNodes[5].textContent).toBe editor.lineForScreenRow(7).text + it "updates absolute positions of subsequent lines when lines are inserted or removed", -> + editor.getBuffer().deleteRows(0, 1) + lineNodes = node.querySelectorAll('.line') + expect(lineNodes[0].offsetTop).toBe 0 + expect(lineNodes[1].offsetTop).toBe 1 * lineHeightInPixels + expect(lineNodes[2].offsetTop).toBe 2 * lineHeightInPixels + + editor.getBuffer().insert([0, 0], '\n\n') + lineNodes = node.querySelectorAll('.line') + expect(lineNodes[0].offsetTop).toBe 0 + expect(lineNodes[1].offsetTop).toBe 1 * lineHeightInPixels + expect(lineNodes[2].offsetTop).toBe 2 * lineHeightInPixels + expect(lineNodes[3].offsetTop).toBe 3 * lineHeightInPixels + expect(lineNodes[4].offsetTop).toBe 4 * lineHeightInPixels + describe "when indent guides are enabled", -> beforeEach -> component.setShowIndentGuide(true) @@ -137,6 +152,24 @@ describe "EditorComponent", -> expect(lineNumberNodes[0].textContent).toBe "#{nbsp}3" expect(lineNumberNodes[5].textContent).toBe "#{nbsp}8" + it "updates absolute positions of subsequent line numbers when lines are inserted or removed", -> + editor.getBuffer().insert([0, 0], '\n\n') + + lineNumberNodes = node.querySelectorAll('.line-number') + expect(lineNumberNodes[0].offsetTop).toBe 0 + expect(lineNumberNodes[1].offsetTop).toBe 1 * lineHeightInPixels + expect(lineNumberNodes[2].offsetTop).toBe 2 * lineHeightInPixels + expect(lineNumberNodes[3].offsetTop).toBe 3 * lineHeightInPixels + expect(lineNumberNodes[4].offsetTop).toBe 4 * lineHeightInPixels + + editor.getBuffer().insert([0, 0], '\n\n') + lineNumberNodes = node.querySelectorAll('.line-number') + expect(lineNumberNodes[0].offsetTop).toBe 0 + expect(lineNumberNodes[1].offsetTop).toBe 1 * lineHeightInPixels + expect(lineNumberNodes[2].offsetTop).toBe 2 * lineHeightInPixels + expect(lineNumberNodes[3].offsetTop).toBe 3 * lineHeightInPixels + expect(lineNumberNodes[4].offsetTop).toBe 4 * lineHeightInPixels + it "renders • characters for soft-wrapped lines", -> editor.setSoftWrap(true) node.style.height = 4.5 * lineHeightInPixels + 'px' diff --git a/src/gutter-component.coffee b/src/gutter-component.coffee index ffb5399ef..82c1f9be2 100644 --- a/src/gutter-component.coffee +++ b/src/gutter-component.coffee @@ -80,4 +80,4 @@ LineNumberComponent = React.createClass iconDivHTML: '
' shouldComponentUpdate: (newProps) -> - not isEqualForProperties(newProps, @props, 'lineHeight') + not isEqualForProperties(newProps, @props, 'lineHeight', 'screenRow') diff --git a/src/lines-component.coffee b/src/lines-component.coffee index 3d0da5bef..844670f32 100644 --- a/src/lines-component.coffee +++ b/src/lines-component.coffee @@ -137,4 +137,4 @@ LineComponent = React.createClass "#{scopeTree.getValueAsHtml({hasIndentGuide: @props.showIndentGuide})}" shouldComponentUpdate: (newProps) -> - not isEqualForProperties(newProps, @props, 'showIndentGuide', 'lineHeight') + not isEqualForProperties(newProps, @props, 'showIndentGuide', 'lineHeight', 'screenRow')