From 084838926db84ee28cf8d3c4ac8a40ebfbd758e2 Mon Sep 17 00:00:00 2001 From: James Allen Date: Tue, 8 Nov 2016 17:31:08 +0000 Subject: [PATCH] Add in dashed line callouts for changes and comments --- .../track-changes/TrackChangesManager.coffee | 126 ++++++++---------- .../web/public/stylesheets/app/editor.less | 17 ++- 2 files changed, 72 insertions(+), 71 deletions(-) diff --git a/services/web/public/coffee/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.coffee b/services/web/public/coffee/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.coffee index 0a241fcde5..77a07d9bcb 100644 --- a/services/web/public/coffee/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.coffee +++ b/services/web/public/coffee/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.coffee @@ -103,22 +103,22 @@ define [ expected_markers = [] for change in @changesTracker.changes op = change.op - marker_id = @changeIdToMarkerIdMap[change.id] + {background_marker_id} = @changeIdToMarkerIdMap[change.id] start = @_shareJsOffsetToAcePosition(op.p) if op.i? end = @_shareJsOffsetToAcePosition(op.p + op.i.length) else if op.d? end = start expected_markers.push { - marker_id, start, end + marker_id: background_marker_id, start, end } for comment in @changesTracker.comments - marker_id = @changeIdToMarkerIdMap[comment.id] + {background_marker_id} = @changeIdToMarkerIdMap[comment.id] start = @_shareJsOffsetToAcePosition(comment.offset) end = @_shareJsOffsetToAcePosition(comment.offset + comment.length) expected_markers.push { - marker_id, start, end + marker_id: background_marker_id, start, end } for {marker_id, start, end} in expected_markers @@ -163,34 +163,9 @@ define [ y = screen_position.row * renderer.lineHeight entry.screenPos = { y } @$scope.$apply() - - _onInsertAdded: (change) -> - 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() + _makeZeroWidthRange: (position) -> 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 # that are empty. So we monkey patch the range to tell Ace it's not empty. # This is the code we need to trick: @@ -202,16 +177,39 @@ define [ range.isEmpty = () -> false 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 klass = "track-changes-deleted-marker" - style = "border-color: #{colorScheme.cursor}" - marker_id = session.addMarker ace_range, klass, (html, range, left, top, config) -> - markerLayer.drawSingleLineMarker(html, range, "#{klass} ace_start", config, 0, style) + background_range = @_makeZeroWidthRange(position) + background_marker_id = session.addMarker background_range, klass, (html, range, left, top, config) -> + 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() _onInsertRemoved: (change) -> @@ -231,33 +229,10 @@ define [ end = @_shareJsOffsetToAcePosition(comment.offset + comment.length) session = @editor.getSession() doc = session.getDocument() - ace_range = new Range(start.row, start.column, end.row, end.column) - - hue = ColorManager.getHueForUserId(comment.metadata.user_id) - colorScheme = ColorManager.getColorScheme(hue, @element) - 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() + background_range = new Range(start.row, start.column, end.row, end.column) + background_marker_id = session.addMarker background_range, "track-changes-comment-marker", "text" + callout_marker_id = @_createCalloutMarker(start, "track-changes-comment-marker-callout") + @changeIdToMarkerIdMap[comment.id] = { background_marker_id, callout_marker_id } @updateReviewEntriesScope() _aceRangeToShareJs: (range) -> @@ -290,8 +265,6 @@ define [ return {row:row, column:offset} _onChangesMoved: (changes) -> - session = @editor.getSession() - markers = session.getMarkers() # TODO: PERFORMANCE: Only run through the Ace lines once, and calculate all # change positions as we go. for change in changes @@ -300,9 +273,24 @@ define [ end = @_shareJsOffsetToAcePosition(change.op.p + change.op.i.length) else end = start - marker_id = @changeIdToMarkerIdMap[change.id] - marker = markers[marker_id] - marker.range.start = start - marker.range.end = end + @_updateMarker(change.id, start, end) @editor.renderer.updateBackMarkers() @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 diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 702ee8338b..d702106ddd 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -144,21 +144,34 @@ .track-changes-added-marker { border-radius: 0; position: absolute; - border-bottom: 1px dashed green; 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 { border-radius: 0; position: absolute; - border-bottom: 1px dashed orange; background-color: #fde5b7; } + .track-changes-comment-marker-callout { + border-radius: 0; + position: absolute; + border-bottom: 1px dashed orange; + } .track-changes-deleted-marker { border-radius: 0; position: absolute; border-left: 2px dotted red; margin-left: -1px; } + .track-changes-deleted-marker-callout { + border-radius: 0; + position: absolute; + border-bottom: 1px dashed red; + } .remote-cursor { position: absolute; border-left: 2px solid transparent;