Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

show margin glyphs for diff editor

Browse Source
This commit is contained in:
Dan Percic 2021-11-11 15:58:57 +02:00
parent fdcca6af65
commit c1f8778e95
2 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/red-ui/src/app/modules/shared/components/editor/editor.component.scss
View File

@ -4,3 +4,9 @@ ngx-monaco-editor {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
::ng-deep ngx-monaco-diff-editor .arrow-left {
background: darkred;
cursor: pointer;
z-index: 1;
}

25
apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
View File

@ -4,8 +4,18 @@ import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorCon
import ICodeEditor = monaco.editor.ICodeEditor; import ICodeEditor = monaco.editor.ICodeEditor;
import IDiffEditor = monaco.editor.IDiffEditor; import IDiffEditor = monaco.editor.IDiffEditor;
import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration; import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
import ILineChange = monaco.editor.ILineChange;
const MIN_WORD_LENGTH = 2; const MIN_WORD_LENGTH = 2;
const lineChangeToDecoration = ({ originalEndLineNumber, originalStartLineNumber }: ILineChange) =>
({
range: new monaco.Range(originalStartLineNumber, 1, originalEndLineNumber, 1),
options: {
glyphMarginClassName: 'arrow-left',
isWholeLine: true,
},
} as IModelDeltaDecoration);
const isPositive = (lineChange: ILineChange) => lineChange.originalEndLineNumber - lineChange.originalStartLineNumber >= 0;
@Component({ @Component({
selector: 'redaction-editor', selector: 'redaction-editor',
@ -52,6 +62,7 @@ export class EditorComponent implements OnInit, OnChanges {
this.editorOptions = { this.editorOptions = {
theme: 'vs', theme: 'vs',
language: 'text/plain', language: 'text/plain',
glyphMargin: true,
automaticLayout: true, automaticLayout: true,
readOnly: !this.canEdit, readOnly: !this.canEdit,
}; };
@ -63,6 +74,7 @@ export class EditorComponent implements OnInit, OnChanges {
onDiffEditorInit(editor: IDiffEditor): void { onDiffEditorInit(editor: IDiffEditor): void {
this.diffEditor = editor; this.diffEditor = editor;
this._addMarginButtons();
} }
onCodeEditorInit(editor: ICodeEditor): void { onCodeEditorInit(editor: ICodeEditor): void {
@ -89,6 +101,19 @@ export class EditorComponent implements OnInit, OnChanges {
this.currentEntries = [...this.initialEntries]; this.currentEntries = [...this.initialEntries];
} }
private _addMarginButtons() {
let glyphDecorations = [];
this.diffEditor.onDidUpdateDiff(() => {
/**
* Sometimes diff editor thinks that there's a change that ends on line 0 and starts on line 2000 or so.
* We must get all change that started on a line and ended on the same or greater line
* Otherwise margin buttons will have an odd behaviour
*/
const decorations = this.diffEditor.getLineChanges().filter(isPositive).map(lineChangeToDecoration);
glyphDecorations = this.diffEditor.getOriginalEditor().deltaDecorations(glyphDecorations, decorations);
});
}
private _isNew(entry: string): boolean { private _isNew(entry: string): boolean {
return this.initialEntries.indexOf(entry) < 0 && entry?.trim().length > 0; return this.initialEntries.indexOf(entry) < 0 && entry?.trim().length > 0;
} }