|
|
@ -23,7 +23,7 @@ import { Ace } from 'ace-builds'; |
|
|
import { DialogComponent } from '@shared/components/dialog.component'; |
|
|
import { DialogComponent } from '@shared/components/dialog.component'; |
|
|
import { Router } from '@angular/router'; |
|
|
import { Router } from '@angular/router'; |
|
|
import { ContentType, contentTypesMap } from '@shared/models/constants'; |
|
|
import { ContentType, contentTypesMap } from '@shared/models/constants'; |
|
|
import { getAce } from '@shared/models/ace/ace.models'; |
|
|
import { getAce, updateEditorSize } from '@shared/models/ace/ace.models'; |
|
|
import { Observable } from 'rxjs/internal/Observable'; |
|
|
import { Observable } from 'rxjs/internal/Observable'; |
|
|
import { beautifyJs } from '@shared/models/beautify.models'; |
|
|
import { beautifyJs } from '@shared/models/beautify.models'; |
|
|
import { of } from 'rxjs'; |
|
|
import { of } from 'rxjs'; |
|
|
@ -40,40 +40,38 @@ export interface EventContentDialogData { |
|
|
templateUrl: './event-content-dialog.component.html', |
|
|
templateUrl: './event-content-dialog.component.html', |
|
|
styleUrls: ['./event-content-dialog.component.scss'] |
|
|
styleUrls: ['./event-content-dialog.component.scss'] |
|
|
}) |
|
|
}) |
|
|
export class EventContentDialogComponent extends DialogComponent<EventContentDialogData> implements OnInit, OnDestroy { |
|
|
export class EventContentDialogComponent extends DialogComponent<EventContentDialogComponent> implements OnInit, OnDestroy { |
|
|
|
|
|
|
|
|
@ViewChild('eventContentEditor', {static: true}) |
|
|
@ViewChild('eventContentEditor', {static: true}) |
|
|
eventContentEditorElmRef: ElementRef; |
|
|
eventContentEditorElmRef: ElementRef; |
|
|
|
|
|
|
|
|
content: string; |
|
|
|
|
|
title: string; |
|
|
title: string; |
|
|
contentType: ContentType; |
|
|
showBorder = false; |
|
|
aceEditor: Ace.Editor; |
|
|
|
|
|
|
|
|
private contentType: ContentType; |
|
|
|
|
|
private aceEditor: Ace.Editor; |
|
|
|
|
|
|
|
|
constructor(protected store: Store<AppState>, |
|
|
constructor(protected store: Store<AppState>, |
|
|
protected router: Router, |
|
|
protected router: Router, |
|
|
@Inject(MAT_DIALOG_DATA) public data: EventContentDialogData, |
|
|
@Inject(MAT_DIALOG_DATA) public data: EventContentDialogData, |
|
|
public dialogRef: MatDialogRef<EventContentDialogComponent>, |
|
|
protected dialogRef: MatDialogRef<EventContentDialogComponent>, |
|
|
private renderer: Renderer2) { |
|
|
private renderer: Renderer2) { |
|
|
super(store, router, dialogRef); |
|
|
super(store, router, dialogRef); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
ngOnInit(): void { |
|
|
this.content = this.data.content; |
|
|
|
|
|
this.title = this.data.title; |
|
|
this.title = this.data.title; |
|
|
this.contentType = this.data.contentType; |
|
|
this.contentType = this.data.contentType; |
|
|
|
|
|
|
|
|
this.createEditor(this.eventContentEditorElmRef, this.content); |
|
|
this.createEditor(this.eventContentEditorElmRef, this.data.content); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
ngOnDestroy(): void { |
|
|
ngOnDestroy(): void { |
|
|
if (this.aceEditor) { |
|
|
this.aceEditor?.destroy(); |
|
|
this.aceEditor.destroy(); |
|
|
|
|
|
} |
|
|
|
|
|
super.ngOnDestroy(); |
|
|
super.ngOnDestroy(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
isJson(str) { |
|
|
private isJson(str: string) { |
|
|
try { |
|
|
try { |
|
|
return isLiteralObject(JSON.parse(str)); |
|
|
return isLiteralObject(JSON.parse(str)); |
|
|
} catch (e) { |
|
|
} catch (e) { |
|
|
@ -81,78 +79,53 @@ export class EventContentDialogComponent extends DialogComponent<EventContentDia |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
createEditor(editorElementRef: ElementRef, content: string) { |
|
|
private createEditor(editorElementRef: ElementRef, content: string) { |
|
|
const editorElement = editorElementRef.nativeElement; |
|
|
const editorElement = editorElementRef.nativeElement; |
|
|
let mode = 'java'; |
|
|
let mode = 'java'; |
|
|
let content$: Observable<string> = null; |
|
|
let content$: Observable<string> = null; |
|
|
if (this.contentType) { |
|
|
if (this.contentType) { |
|
|
mode = contentTypesMap.get(this.contentType).code; |
|
|
mode = contentTypesMap.get(this.contentType).code; |
|
|
if (this.contentType === ContentType.JSON && content) { |
|
|
if (this.contentType === ContentType.JSON && content) { |
|
|
content$ = beautifyJs(content, {indent_size: 4}); |
|
|
content$ = beautifyJs(content, {indent_size: 2}); |
|
|
} else if (this.contentType === ContentType.BINARY && content) { |
|
|
} else if (this.contentType === ContentType.BINARY && content) { |
|
|
try { |
|
|
try { |
|
|
const decodedData = base64toString(content); |
|
|
const decodedData = base64toString(content); |
|
|
if (this.isJson(decodedData)) { |
|
|
if (this.isJson(decodedData)) { |
|
|
mode = 'json'; |
|
|
mode = 'json'; |
|
|
content$ = beautifyJs(decodedData, {indent_size: 4}); |
|
|
content$ = beautifyJs(decodedData, {indent_size: 2}); |
|
|
} else { |
|
|
} else { |
|
|
content$ = of(decodedData); |
|
|
content$ = of(decodedData); |
|
|
} |
|
|
} |
|
|
} catch (e) {} |
|
|
} catch (e) {/**/} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
if (!content$) { |
|
|
if (!content$) { |
|
|
content$ = of(content); |
|
|
content$ = of(content); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
content$.subscribe( |
|
|
content$.subscribe((processedContent) => { |
|
|
(processedContent) => { |
|
|
const isJSON = mode === 'json' && processedContent !== '{}'; |
|
|
let editorOptions: Partial<Ace.EditorOptions> = { |
|
|
this.showBorder = isJSON; |
|
|
mode: `ace/mode/${mode}`, |
|
|
const editorOptions: Partial<Ace.EditorOptions> = { |
|
|
theme: 'ace/theme/github', |
|
|
mode: `ace/mode/${mode}`, |
|
|
showGutter: false, |
|
|
theme: 'ace/theme/github', |
|
|
showPrintMargin: false, |
|
|
showGutter: isJSON, |
|
|
readOnly: true |
|
|
showFoldWidgets: true, |
|
|
}; |
|
|
foldStyle: 'markbeginend', |
|
|
|
|
|
showPrintMargin: false, |
|
|
const advancedOptions = { |
|
|
readOnly: true, |
|
|
enableSnippets: false, |
|
|
enableSnippets: false, |
|
|
enableBasicAutocompletion: false, |
|
|
enableBasicAutocompletion: false, |
|
|
enableLiveAutocompletion: false |
|
|
enableLiveAutocompletion: false, |
|
|
}; |
|
|
}; |
|
|
|
|
|
getAce().subscribe( |
|
|
editorOptions = {...editorOptions, ...advancedOptions}; |
|
|
(ace) => { |
|
|
getAce().subscribe( |
|
|
this.aceEditor = ace.edit(editorElement, editorOptions); |
|
|
(ace) => { |
|
|
this.aceEditor.session.setUseWrapMode(false); |
|
|
this.aceEditor = ace.edit(editorElement, editorOptions); |
|
|
this.aceEditor.setValue(processedContent, -1); |
|
|
this.aceEditor.session.setUseWrapMode(false); |
|
|
updateEditorSize(editorElement, processedContent, this.aceEditor, this.renderer, {showGutter: isJSON}); |
|
|
this.aceEditor.setValue(processedContent, -1); |
|
|
} |
|
|
this.updateEditorSize(editorElement, processedContent, this.aceEditor); |
|
|
) |
|
|
} |
|
|
}); |
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
updateEditorSize(editorElement: any, content: string, editor: Ace.Editor) { |
|
|
|
|
|
let newHeight = 400; |
|
|
|
|
|
let newWidth = 600; |
|
|
|
|
|
if (content && content.length > 0) { |
|
|
|
|
|
const lines = content.split('\n'); |
|
|
|
|
|
newHeight = 17 * lines.length + 16; |
|
|
|
|
|
let maxLineLength = 0; |
|
|
|
|
|
lines.forEach((row) => { |
|
|
|
|
|
const line = row.replace(/\t/g, ' ').replace(/\n/g, ''); |
|
|
|
|
|
const lineLength = line.length; |
|
|
|
|
|
maxLineLength = Math.max(maxLineLength, lineLength); |
|
|
|
|
|
}); |
|
|
|
|
|
newWidth = 9 * maxLineLength + 16; |
|
|
|
|
|
} |
|
|
|
|
|
// newHeight = Math.min(400, newHeight);
|
|
|
|
|
|
this.renderer.setStyle(editorElement, 'minHeight', newHeight.toString() + 'px'); |
|
|
|
|
|
this.renderer.setStyle(editorElement, 'height', newHeight.toString() + 'px'); |
|
|
|
|
|
this.renderer.setStyle(editorElement, 'width', newWidth.toString() + 'px'); |
|
|
|
|
|
editor.resize(); |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
Vladyslav Prykhodko
9 months ago
GitHub