From 956de01b07516f3f52b832aff6de85201d2d01f1 Mon Sep 17 00:00:00 2001 From: rebornix Date: Mon, 14 Nov 2016 17:39:25 -0800 Subject: [PATCH] Add add/del mark to marginDomNode in diff view zone --- .../browser/viewParts/viewZones/viewZones.ts | 2 +- .../editor/browser/widget/diffEditorWidget.ts | 49 ++++++++++++++++--- .../editor/browser/widget/media/addition.svg | 1 + .../editor/browser/widget/media/deletion.svg | 1 + .../browser/widget/media/diffEditor.css | 16 ++++++ 5 files changed, 62 insertions(+), 7 deletions(-) create mode 100644 src/vs/editor/browser/widget/media/addition.svg create mode 100644 src/vs/editor/browser/widget/media/deletion.svg diff --git a/src/vs/editor/browser/viewParts/viewZones/viewZones.ts b/src/vs/editor/browser/viewParts/viewZones/viewZones.ts index 1fb668ff891..d79a83ccc48 100644 --- a/src/vs/editor/browser/viewParts/viewZones/viewZones.ts +++ b/src/vs/editor/browser/viewParts/viewZones/viewZones.ts @@ -344,7 +344,7 @@ export class ViewZones extends ViewPart { StyleMutator.setDisplay(zone.delegate.domNode, newDisplay); if (zone.delegate.marginDomNode) { - StyleMutator.setTop(zone.delegate.marginDomNode, newTop); + StyleMutator.setTop(zone.delegate.marginDomNode, newTop - ctx.viewportTop); StyleMutator.setHeight(zone.delegate.marginDomNode, newHeight); StyleMutator.setDisplay(zone.delegate.marginDomNode, newDisplay); } diff --git a/src/vs/editor/browser/widget/diffEditorWidget.ts b/src/vs/editor/browser/widget/diffEditorWidget.ts index 46630684f54..098c91d3e00 100644 --- a/src/vs/editor/browser/widget/diffEditorWidget.ts +++ b/src/vs/editor/browser/widget/diffEditorWidget.ts @@ -847,8 +847,12 @@ export class DiffEditorWidget extends EventEmitter implements editorBrowser.IDif clonedOptions.scrollbar = clonedOptions.scrollbar || {}; clonedOptions.scrollbar.vertical = 'visible'; clonedOptions.folding = false; + clonedOptions.glyphMargin = false; clonedOptions.codeLens = false; clonedOptions.fixedOverflowWidgets = true; + if (typeof options.fontSize !== 'undefined') { + clonedOptions.lineDecorationsWidth = 0.8 * options.fontSize; + } return clonedOptions; } @@ -1492,8 +1496,14 @@ class DiffEdtorWidgetSideBySide extends DiffEditorWidgetStyle implements IDiffEd let lineChange = lineChanges[i]; if (isChangeOrDelete(lineChange)) { - - result.decorations.push(createDecoration(lineChange.originalStartLineNumber, 1, lineChange.originalEndLineNumber, Number.MAX_VALUE, 'line-delete', true)); + result.decorations.push({ + range: new Range(lineChange.originalStartLineNumber, 1, lineChange.originalEndLineNumber, Number.MAX_VALUE), + options: { + className: 'line-delete', + linesDecorationsClassName: 'my-deleted', + isWholeLine: true + } + }); if (!isChangeOrInsert(lineChange) || !lineChange.charChanges) { result.decorations.push(createDecoration(lineChange.originalStartLineNumber, 1, lineChange.originalEndLineNumber, Number.MAX_VALUE, 'char-delete', true)); } @@ -1553,7 +1563,14 @@ class DiffEdtorWidgetSideBySide extends DiffEditorWidgetStyle implements IDiffEd if (isChangeOrInsert(lineChange)) { - result.decorations.push(createDecoration(lineChange.modifiedStartLineNumber, 1, lineChange.modifiedEndLineNumber, Number.MAX_VALUE, 'line-insert', true)); + result.decorations.push({ + range: new Range(lineChange.modifiedStartLineNumber, 1, lineChange.modifiedEndLineNumber, Number.MAX_VALUE), + options: { + className: 'line-insert', + linesDecorationsClassName: 'my-added', + isWholeLine: true + } + }); if (!isChangeOrDelete(lineChange) || !lineChange.charChanges) { result.decorations.push(createDecoration(lineChange.modifiedStartLineNumber, 1, lineChange.modifiedEndLineNumber, Number.MAX_VALUE, 'char-insert', true)); } @@ -1699,7 +1716,14 @@ class DiffEdtorWidgetInline extends DiffEditorWidgetStyle implements IDiffEditor // Add decorations & overview zones if (isChangeOrInsert(lineChange)) { - result.decorations.push(createDecoration(lineChange.modifiedStartLineNumber, 1, lineChange.modifiedEndLineNumber, Number.MAX_VALUE, 'line-insert', true)); + result.decorations.push({ + range: new Range(lineChange.modifiedStartLineNumber, 1, lineChange.modifiedEndLineNumber, Number.MAX_VALUE), + options: { + className: 'line-insert', + linesDecorationsClassName: 'my-added', + isWholeLine: true + } + }); result.overviewZones.push(new editorCommon.OverviewRulerZone( lineChange.modifiedStartLineNumber, @@ -1774,7 +1798,6 @@ class InlineViewZonesComputer extends ViewZonesComputer { _produceModifiedFromDiff(lineChange: editorCommon.ILineChange, lineChangeOriginalLength: number, lineChangeModifiedLength: number): IMyViewZone { let decorations: InlineDecoration[] = []; - if (lineChange.charChanges) { for (let j = 0, lengthJ = lineChange.charChanges.length; j < lengthJ; j++) { let charChange = lineChange.charChanges[j]; @@ -1788,8 +1811,16 @@ class InlineViewZonesComputer extends ViewZonesComputer { } let html: string[] = []; + let marginHTML: string[] = []; + let lineDecorationsWidth = this.modifiedEditorConfiguration.layoutInfo.decorationsWidth; + let lineHeight = this.modifiedEditorConfiguration.lineHeight; for (let lineNumber = lineChange.originalStartLineNumber; lineNumber <= lineChange.originalEndLineNumber; lineNumber++) { html = html.concat(this.renderOriginalLine(lineNumber - lineChange.originalStartLineNumber, this.originalModel, this.modifiedEditorConfiguration, this.modifiedEditorTabSize, lineNumber, decorations)); + + let index = lineNumber - lineChange.originalStartLineNumber; + marginHTML = marginHTML.concat([ + `
` + ]); } let domNode = document.createElement('div'); @@ -1797,11 +1828,17 @@ class InlineViewZonesComputer extends ViewZonesComputer { domNode.innerHTML = html.join(''); Configuration.applyFontInfoSlow(domNode, this.modifiedEditorConfiguration.fontInfo); + let marginDomNode = document.createElement('div'); + marginDomNode.className = 'inline-deleted-margin-view-zone'; + marginDomNode.innerHTML = marginHTML.join(''); + Configuration.applyFontInfoSlow(marginDomNode, this.modifiedEditorConfiguration.fontInfo); + return { shouldNotShrink: true, afterLineNumber: (lineChange.modifiedEndLineNumber === 0 ? lineChange.modifiedStartLineNumber : lineChange.modifiedStartLineNumber - 1), heightInLines: lineChangeOriginalLength, - domNode: domNode + domNode: domNode, + marginDomNode: marginDomNode }; } diff --git a/src/vs/editor/browser/widget/media/addition.svg b/src/vs/editor/browser/widget/media/addition.svg new file mode 100644 index 00000000000..bdecdb0e45b --- /dev/null +++ b/src/vs/editor/browser/widget/media/addition.svg @@ -0,0 +1 @@ +Layer 1 \ No newline at end of file diff --git a/src/vs/editor/browser/widget/media/deletion.svg b/src/vs/editor/browser/widget/media/deletion.svg new file mode 100644 index 00000000000..f5d128b2df8 --- /dev/null +++ b/src/vs/editor/browser/widget/media/deletion.svg @@ -0,0 +1 @@ +Layer 1 \ No newline at end of file diff --git a/src/vs/editor/browser/widget/media/diffEditor.css b/src/vs/editor/browser/widget/media/diffEditor.css index 50108a207d2..d462b46bf41 100644 --- a/src/vs/editor/browser/widget/media/diffEditor.css +++ b/src/vs/editor/browser/widget/media/diffEditor.css @@ -49,6 +49,22 @@ .monaco-editor .char-insert { background: rgba(155, 185, 85, 0.2); } + +.my-added, .my-deleted { + background-size: 100%; + background-repeat: no-repeat; + background-position: 0; +} +.inline-deleted-margin-view-zone { + text-align: right; +} +.my-added { + background-image: url('addition.svg'); +} +.my-deleted { + background-image: url('deletion.svg'); +} + .monaco-editor.hc-black .line-insert, .monaco-editor.hc-black .char-insert { background: none; -- GitLab