Merge pull request #2757 from atom/ns-better-default-decorations

Improve default decorations for cursor and selection lines in React editor
This commit is contained in:
Nathan Sobo
2014-06-28 16:04:12 +01:00
3 changed files with 237 additions and 271 deletions

View File

@@ -262,14 +262,22 @@ EditorComponent = React.createClass
for markerId, decorations of decorationsByMarkerId
marker = editor.getMarker(markerId)
screenRange = null
headScreenRow = null
if marker.isValid()
for decoration in decorations
if editor.decorationMatchesType(decoration, 'gutter') or editor.decorationMatchesType(decoration, 'line')
screenRange ?= marker.getScreenRange()
headScreenRow ?= marker.getHeadScreenPosition().row
startRow = screenRange.start.row
endRow = screenRange.end.row
endRow-- if not screenRange.isEmpty() and screenRange.end.column == 0
for screenRow in [startRow..endRow]
continue if decoration.onlyHead and screenRow isnt headScreenRow
if screenRange.isEmpty()
continue if decoration.onlyNonEmpty
else
continue if decoration.onlyEmpty
decorationsByScreenRow[screenRow] ?= []
decorationsByScreenRow[screenRow].push decoration

View File

@@ -1085,17 +1085,29 @@ class Editor extends Model
@displayBuffer.decorationsForScreenRowRange(startScreenRow, endScreenRow)
# Public: Adds a decoration that tracks a {Marker}. When the marker moves,
# is invalidated, or is destroyed, the decoration will be updated to reflect the marker's state.
# is invalidated, or is destroyed, the decoration will be updated to reflect
# the marker's state.
#
# There are a few supported decoration types:
# * `gutter`: `{type: 'gutter', class: 'linter-error'}` Will add a class to the gutter rows associated with the marker.
# * `line`: `{type: 'line', class: 'linter-error'}` Will add a class to the editor lines associated with the marker.
# * `highlight`: `{type: 'highlight', class: 'linter-error'}` Will highlight the region of the buffer associated with the marker. Your specified class will be added to the highlight.
#
# marker - the {Marker} you want this decoration to follow
# decoration - the {Object} decoration eg. `{type: 'gutter', class: 'linter-error'}`
#
# Returns nothing
# marker - A {Marker} you want this decoration to follow.
# decoration - An {Object} representing the decoration eg. `{type: 'gutter', class: 'linter-error'}`
# The decoration can contain the following keys:
# * type: There are a few supported decoration types:
# * `gutter`: Applies the decoration to the line numbers spanned by the
# marker.
# * `line`: Applies the decoration to the lines spanned by the marker.
# * `highlight`: Applies the decoration to a "highlight" behind the
# marked range. When the user selects text, the selection is
# visualized with a highlight decoration internally.
# * class: This CSS class will be applied to the decorated line number,
# line, or highlight.
# * onlyHead: If `true`, the decoration will only be applied to the head
# of the marker. Only applicable to the `line` and `gutter` types.
# * onlyEmpty: If `true`, the decoration will only be applied if the
# associated marker is empty. Only applicable to the `line` and
# `gutter` types.
# * onlyNonEmpty: If `true`, the decoration will only be applied if the
# associated marker is non-empty. Only applicable to the `line` and
# gutter types.
addDecorationForMarker: (marker, decoration) ->
@displayBuffer.addDecorationForMarker(marker, decoration)
@@ -1238,7 +1250,9 @@ class Editor extends Model
addCursor: (marker) ->
cursor = new Cursor(editor: this, marker: marker)
@cursors.push(cursor)
@addDecorationForMarker(marker, type: ['gutter', 'line'], class: 'cursor-line')
@addDecorationForMarker(marker, type: 'gutter', class: 'cursor-line')
@addDecorationForMarker(marker, type: 'gutter', class: 'cursor-line-no-selection', onlyHead: true, onlyEmpty: true)
@addDecorationForMarker(marker, type: 'line', class: 'cursor-line', onlyEmpty: true)
@emit 'cursor-added', cursor
cursor