github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add in dashed line callouts for changes and comments

Browse source
This commit is contained in:
James Allen 2016-11-08 17:31:08 +00:00
parent 4f8055d998
commit 084838926d
2 changed files with 72 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
services/web/public/coffee/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.coffee
View file

@ -103,22 +103,22 @@ define [
expected_markers = [] expected_markers = []
for change in @changesTracker.changes for change in @changesTracker.changes
op = change.op op = change.op
marker_id = @changeIdToMarkerIdMap[change.id] {background_marker_id} = @changeIdToMarkerIdMap[change.id]
start = @_shareJsOffsetToAcePosition(op.p) start = @_shareJsOffsetToAcePosition(op.p)
if op.i? if op.i?
end = @_shareJsOffsetToAcePosition(op.p + op.i.length) end = @_shareJsOffsetToAcePosition(op.p + op.i.length)
else if op.d? else if op.d?
end = start end = start
expected_markers.push { expected_markers.push {
marker_id, start, end marker_id: background_marker_id, start, end
} }
for comment in @changesTracker.comments for comment in @changesTracker.comments
marker_id = @changeIdToMarkerIdMap[comment.id] {background_marker_id} = @changeIdToMarkerIdMap[comment.id]
start = @_shareJsOffsetToAcePosition(comment.offset) start = @_shareJsOffsetToAcePosition(comment.offset)
end = @_shareJsOffsetToAcePosition(comment.offset + comment.length) end = @_shareJsOffsetToAcePosition(comment.offset + comment.length)
expected_markers.push { expected_markers.push {
marker_id, start, end marker_id: background_marker_id, start, end
} }
for {marker_id, start, end} in expected_markers for {marker_id, start, end} in expected_markers
@ -164,33 +164,8 @@ define [
entry.screenPos = { y } entry.screenPos = { y }
@$scope.$apply() @$scope.$apply()
_onInsertAdded: (change) -> _makeZeroWidthRange: (position) ->
start = @_shareJsOffsetToAcePosition(change.op.p)
end = @_shareJsOffsetToAcePosition(change.op.p + change.op.i.length)
session = @editor.getSession()
doc = session.getDocument()
ace_range = new Range(start.row, start.column, end.row, end.column)
hue = ColorManager.getHueForUserId(change.metadata.user_id)
colorScheme = ColorManager.getColorScheme(hue, @element)
markerLayer = @editor.renderer.$markerBack
klass = "track-changes-added-marker"
style = "border-color: #{colorScheme.cursor}"
marker_id = session.addMarker ace_range, klass, (html, range, left, top, config) ->
if range.isMultiLine()
markerLayer.drawTextMarker(html, range, klass, config, style)
else
markerLayer.drawSingleLineMarker(html, range, "#{klass} ace_start", config, 0, style)
@changeIdToMarkerIdMap[change.id] = marker_id
@updateReviewEntriesScope()
_onDeleteAdded: (change) ->
position = @_shareJsOffsetToAcePosition(change.op.p)
session = @editor.getSession()
doc = session.getDocument()
ace_range = new Range(position.row, position.column, position.row, position.column) ace_range = new Range(position.row, position.column, position.row, position.column)
# Our delete marker is zero characters wide, but Ace doesn't draw ranges # Our delete marker is zero characters wide, but Ace doesn't draw ranges
# that are empty. So we monkey patch the range to tell Ace it's not empty. # that are empty. So we monkey patch the range to tell Ace it's not empty.
# This is the code we need to trick: # This is the code we need to trick:
@ -202,16 +177,39 @@ define [
range.isEmpty = () -> range.isEmpty = () ->
false false
return range return range
return ace_range
_createCalloutMarker: (position, klass) ->
session = @editor.getSession()
callout_range = @_makeZeroWidthRange(position)
markerLayer = @editor.renderer.$markerBack
callout_marker_id = session.addMarker callout_range, klass, (html, range, left, top, config) ->
markerLayer.drawSingleLineMarker(html, range, "#{klass} ace_start", config, 0, "width: auto; right: 0;")
_onInsertAdded: (change) ->
start = @_shareJsOffsetToAcePosition(change.op.p)
end = @_shareJsOffsetToAcePosition(change.op.p + change.op.i.length)
session = @editor.getSession()
doc = session.getDocument()
background_range = new Range(start.row, start.column, end.row, end.column)
background_marker_id = session.addMarker background_range, "track-changes-added-marker", "text"
callout_marker_id = @_createCalloutMarker(start, "track-changes-added-marker-callout")
@changeIdToMarkerIdMap[change.id] = { background_marker_id, callout_marker_id }
@updateReviewEntriesScope()
_onDeleteAdded: (change) ->
position = @_shareJsOffsetToAcePosition(change.op.p)
session = @editor.getSession()
doc = session.getDocument()
hue = ColorManager.getHueForUserId(change.metadata.user_id)
colorScheme = ColorManager.getColorScheme(hue, @element)
markerLayer = @editor.renderer.$markerBack markerLayer = @editor.renderer.$markerBack
klass = "track-changes-deleted-marker" klass = "track-changes-deleted-marker"
style = "border-color: #{colorScheme.cursor}" background_range = @_makeZeroWidthRange(position)
marker_id = session.addMarker ace_range, klass, (html, range, left, top, config) -> background_marker_id = session.addMarker background_range, klass, (html, range, left, top, config) ->
markerLayer.drawSingleLineMarker(html, range, "#{klass} ace_start", config, 0, style) markerLayer.drawSingleLineMarker(html, range, "#{klass} ace_start", config, 0, "")
@changeIdToMarkerIdMap[change.id] = marker_id callout_marker_id = @_createCalloutMarker(position, "track-changes-deleted-marker-callout")
@changeIdToMarkerIdMap[change.id] = { background_marker_id, callout_marker_id }
@updateReviewEntriesScope() @updateReviewEntriesScope()
_onInsertRemoved: (change) -> _onInsertRemoved: (change) ->
@ -231,33 +229,10 @@ define [
end = @_shareJsOffsetToAcePosition(comment.offset + comment.length) end = @_shareJsOffsetToAcePosition(comment.offset + comment.length)
session = @editor.getSession() session = @editor.getSession()
doc = session.getDocument() doc = session.getDocument()
ace_range = new Range(start.row, start.column, end.row, end.column) background_range = new Range(start.row, start.column, end.row, end.column)
background_marker_id = session.addMarker background_range, "track-changes-comment-marker", "text"
hue = ColorManager.getHueForUserId(comment.metadata.user_id) callout_marker_id = @_createCalloutMarker(start, "track-changes-comment-marker-callout")
colorScheme = ColorManager.getColorScheme(hue, @element) @changeIdToMarkerIdMap[comment.id] = { background_marker_id, callout_marker_id }
markerLayer = @editor.renderer.$markerBack
klass = "track-changes-comment-marker"
style = "border-color: #{colorScheme.cursor}"
marker_id = session.addMarker ace_range, klass, (html, range, left, top, config) ->
if range.isMultiLine()
markerLayer.drawTextMarker(html, range, klass, config, style)
else
markerLayer.drawSingleLineMarker(html, range, "#{klass} ace_start", config, 0, style)
@changeIdToMarkerIdMap[comment.id] = marker_id
@updateReviewEntriesScope()
_onCommentMoved: (comment) ->
start = @_shareJsOffsetToAcePosition(comment.offset)
end = @_shareJsOffsetToAcePosition(comment.offset + comment.length)
session = @editor.getSession()
ace_range = new Range(start.row, start.column, end.row, end.column)
marker_id = @changeIdToMarkerIdMap[comment.id]
markers = session.getMarkers()
marker = markers[marker_id]
marker.range.start = start
marker.range.end = end
@editor.renderer.updateBackMarkers()
@updateReviewEntriesScope() @updateReviewEntriesScope()
_aceRangeToShareJs: (range) -> _aceRangeToShareJs: (range) ->
@ -290,8 +265,6 @@ define [
return {row:row, column:offset} return {row:row, column:offset}
_onChangesMoved: (changes) -> _onChangesMoved: (changes) ->
session = @editor.getSession()
markers = session.getMarkers()
# TODO: PERFORMANCE: Only run through the Ace lines once, and calculate all # TODO: PERFORMANCE: Only run through the Ace lines once, and calculate all
# change positions as we go. # change positions as we go.
for change in changes for change in changes
@ -300,9 +273,24 @@ define [
end = @_shareJsOffsetToAcePosition(change.op.p + change.op.i.length) end = @_shareJsOffsetToAcePosition(change.op.p + change.op.i.length)
else else
end = start end = start
marker_id = @changeIdToMarkerIdMap[change.id] @_updateMarker(change.id, start, end)
marker = markers[marker_id]
marker.range.start = start
marker.range.end = end
@editor.renderer.updateBackMarkers() @editor.renderer.updateBackMarkers()
@updateReviewEntriesScope() @updateReviewEntriesScope()
_onCommentMoved: (comment) ->
start = @_shareJsOffsetToAcePosition(comment.offset)
end = @_shareJsOffsetToAcePosition(comment.offset + comment.length)
@_updateMarker(comment.id, start, end)
@editor.renderer.updateBackMarkers()
@updateReviewEntriesScope()
_updateMarker: (change_id, start, end) ->
session = @editor.getSession()
markers = session.getMarkers()
{background_marker_id, callout_marker_id} = @changeIdToMarkerIdMap[change_id]
background_marker = markers[background_marker_id]
background_marker.range.start = start
background_marker.range.end = end
callout_marker = markers[callout_marker_id]
callout_marker.range.start = start
callout_marker.range.end = start

17
services/web/public/stylesheets/app/editor.less
View file

@ -144,21 +144,34 @@
.track-changes-added-marker { .track-changes-added-marker {
border-radius: 0; border-radius: 0;
position: absolute; position: absolute;
border-bottom: 1px dashed green;
background-color: hsl(100, 70%, 85%); background-color: hsl(100, 70%, 85%);
} }
.track-changes-added-marker-callout {
border-radius: 0;
position: absolute;
border-bottom: 1px dashed green;
}
.track-changes-comment-marker { .track-changes-comment-marker {
border-radius: 0; border-radius: 0;
position: absolute; position: absolute;
border-bottom: 1px dashed orange;
background-color: #fde5b7; background-color: #fde5b7;
} }
.track-changes-comment-marker-callout {
border-radius: 0;
position: absolute;
border-bottom: 1px dashed orange;
}
.track-changes-deleted-marker { .track-changes-deleted-marker {
border-radius: 0; border-radius: 0;
position: absolute; position: absolute;
border-left: 2px dotted red; border-left: 2px dotted red;
margin-left: -1px; margin-left: -1px;
} }
.track-changes-deleted-marker-callout {
border-radius: 0;
position: absolute;
border-bottom: 1px dashed red;
}
.remote-cursor { .remote-cursor {
position: absolute; position: absolute;
border-left: 2px solid transparent; border-left: 2px solid transparent;