Render • instead of line number for soft-wrapped lines

spec/editor-component-spec.coffee

@@ -51,8 +51,9 @@ describe "EditorComponent", ->
       expect(spacers[1].offsetHeight).toBe (editor.getScreenLineCount() - 8) * lineHeightInPixels
 
   describe "gutter rendering", ->
+    nbsp = String.fromCharCode(160)
+
     it "renders the currently-visible line numbers", ->
-      nbsp = String.fromCharCode(160)
       node.style.height = 4.5 * lineHeightInPixels + 'px'
       component.updateAllDimensions()
 
@@ -75,6 +76,21 @@ describe "EditorComponent", ->
       expect(spacers[0].offsetHeight).toBe 2 * lineHeightInPixels
       expect(spacers[1].offsetHeight).toBe (editor.getScreenLineCount() - 8) * lineHeightInPixels
 
+    it "renders • characters for soft-wrapped lines", ->
+      editor.setSoftWrap(true)
+      node.style.height = 4.5 * lineHeightInPixels + 'px'
+      node.style.width = 30 * charWidth + 'px'
+      component.updateAllDimensions()
+
+      lines = node.querySelectorAll('.line-number')
+      expect(lines.length).toBe 6
+      expect(lines[0].textContent).toBe "#{nbsp}1"
+      expect(lines[1].textContent).toBe "#{nbsp}•"
+      expect(lines[2].textContent).toBe "#{nbsp}2"
+      expect(lines[3].textContent).toBe "#{nbsp}•"
+      expect(lines[4].textContent).toBe "#{nbsp}3"
+      expect(lines[5].textContent).toBe "#{nbsp}•"
+
   describe "cursor rendering", ->
     it "renders the currently visible cursors", ->
       cursor1 = editor.getCursor()

src/display-buffer.coffee

@@ -105,7 +105,11 @@ class DisplayBuffer extends Model
   setHeight: (@height) -> @height
 
   getWidth: -> @width
-  setWidth: (@width) -> @width
+  setWidth: (newWidth) ->
+    oldWidth = @width
+    @width = newWidth
+    @updateWrappedScreenLines() if newWidth isnt oldWidth and @softWrap
+    @width
 
   getScrollTop: -> @scrollTop
   setScrollTop: (scrollTop) ->
@@ -192,12 +196,19 @@ class DisplayBuffer extends Model
       if editorWidthInChars isnt previousWidthInChars and @softWrap
         @updateWrappedScreenLines()
 
-  getSoftWrapColumn: ->
-    if atom.config.get('editor.softWrapAtPreferredLineLength')
-      Math.min(@editorWidthInChars, atom.config.getPositiveInt('editor.preferredLineLength', @editorWidthInChars))
+  getEditorWidthInChars: ->
+    width = @getWidth()
+    if width? and @defaultCharWidth > 0
+      Math.floor(width / @defaultCharWidth)
     else
       @editorWidthInChars
 
+  getSoftWrapColumn: ->
+    if atom.config.get('editor.softWrapAtPreferredLineLength')
+      Math.min(@getEditorWidthInChars(), atom.config.getPositiveInt('editor.preferredLineLength', @getEditorWidthInChars()))
+    else
+      @getEditorWidthInChars()
+
   # Gets the screen line for the given screen row.
   #
   # screenRow - A {Number} indicating the screen row.

src/editor-component.coffee

@@ -49,11 +49,20 @@ EditorCompont = React.createClass
       height: editor.getScrollHeight()
       WebkitTransform: "translateY(#{-editor.getScrollTop()}px)"
 
+    wrapCount = 0
     div className: 'line-numbers', style: style, [
       div className: 'spacer', key: 'top-spacer', style: {height: precedingHeight}
       (for bufferRow in @props.editor.bufferRowsForScreenRows(startRow, endRow - 1)
-        lineNumber = bufferRow + 1
-        LineNumberComponent({lineNumber, maxDigits, key: lineNumber}))...
+        if bufferRow is lastBufferRow
+          lineNumber = '•'
+          key = "#{bufferRow}-#{++wrapCount}"
+        else
+          lastBufferRow = bufferRow
+          wrapCount = 0
+          lineNumber = (bufferRow + 1).toString()
+          key = bufferRow.toString()
+
+        LineNumberComponent({lineNumber, maxDigits, key}))...
       div className: 'spacer', key: 'bottom-spacer', style: {height: followingHeight}
     ]
 
@@ -380,7 +389,18 @@ EditorCompont = React.createClass
   clearVisibleRowOverridesAfterDelay: null
 
   onOverflowChanged: ->
-    @props.editor.setHeight(@refs.scrollView.getDOMNode().clientHeight)
+    {editor} = @props
+    {height, width} = @measureScrollViewDimensions()
+
+    if height isnt editor.getHeight()
+      editor.setHeight(height)
+      update = true
+
+    if width isnt editor.getWidth()
+      editor.setWidth(width)
+      update = true
+
+    @requestUpdate() if update
 
   onScreenLinesChanged: ({start, end}) ->
     {editor} = @props
@@ -497,7 +517,6 @@ LineNumberComponent = React.createClass
 
   buildInnerHTML: ->
     {lineNumber, maxDigits} = @props
-    lineNumber = lineNumber.toString()
     if lineNumber.length < maxDigits
       padding = multiplyString('&nbsp;', maxDigits - lineNumber.length)
       padding + lineNumber + @iconDivHTML