Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | 69x 69x 69x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 2x 2x 1x | import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { autorun, IReactionDisposer } from 'mobx';
import { DiffEditorModel, MonacoEditorModule } from 'ngx-monaco-editor';
import { ResizeHandleDirective } from '../../directive/resize-handle.directive';
import { ConfigService } from '../../service/config.service';
import { Store } from '../../store/store';
import { formatBundleDiff, formatDiff } from '../../util/diff';
import { Ref } from '../../model/ref';
import { Ext } from '../../model/ext';
import { User } from '../../model/user';
import { Plugin } from '../../model/plugin';
import { Template } from '../../model/template';
import { Mod } from '../../model/tag';
@Component({
selector: 'app-diff',
templateUrl: './diff.component.html',
styleUrl: './diff.component.scss',
host: { 'class': 'diff-editor' },
imports: [MonacoEditorModule, ResizeHandleDirective]
})
export class DiffComponent<T extends Ref | Ext | User | Plugin | Template | Mod> implements OnInit, OnDestroy {
private disposers: IReactionDisposer[] = [];
@Input()
original!: T;
@Input()
modified!: T;
@Input()
readOnly = false;
@Input()
resizable = true;
@Input()
fullHeight = false;
@Output()
modifiedChange = new EventEmitter<T>();
originalModel: DiffEditorModel = { code: '', language: 'json' };
modifiedModel: DiffEditorModel = { code: '', language: 'json' };
options: any = {
language: 'json',
automaticLayout: true,
renderSideBySide: !this.config.mobile,
};
constructor(
public config: ConfigService,
private store: Store,
) {
this.disposers.push(autorun(() => {
this.options = {
...this.options,
theme: store.darkTheme ? 'vs-dark' : 'vs',
readOnly: this.readOnly,
}
}));
}
ngOnInit() {
const entity = this.original && (this.original.hasOwnProperty('url') || this.original.hasOwnProperty('tag'));
this.originalModel = {
code: (entity ? formatDiff : formatBundleDiff)(this.original as any),
language: 'json'
};
this.modifiedModel = {
code: (entity ? formatDiff : formatBundleDiff)(this.modified as any),
language: 'json'
};
}
ngOnDestroy() {
for (const dispose of this.disposers) dispose();
this.disposers.length = 0;
}
initEditor(editor: any) {
editor.onDidUpdateDiff(() => {
this.modifiedModel.code = editor.getModel().modified.getValue();
});
}
getModifiedContent(): T | null {
try {
return JSON.parse(this.modifiedModel.code);
} catch (e) {
// TODO: Show error in editor
return null;
}
}
}
|