|
|
|
@ -1,11 +1,12 @@
|
|
|
|
import { Component, ViewChild } from '@angular/core';
|
|
|
|
import { Component, Input, ViewChild } from '@angular/core';
|
|
|
|
import { CodeExecutionService } from 'src/app/services/codeExecution.service';
|
|
|
|
import { BackendService } from 'src/app/services/backendService.service';
|
|
|
|
import { Compartment } from '@codemirror/state';
|
|
|
|
import { Compartment, StateEffect } from '@codemirror/state';
|
|
|
|
import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor';
|
|
|
|
import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor';
|
|
|
|
import { LanguageDescription } from '@codemirror/language';
|
|
|
|
import { LanguageDescription } from '@codemirror/language';
|
|
|
|
import { CODE_DEFAULTS, LANGUAGES } from '../languages';
|
|
|
|
import { CODE_DEFAULTS, LANGUAGES } from '../languages';
|
|
|
|
import { SafeHTMLPipe } from '../../safe-html.pipe';
|
|
|
|
import { SafeHTMLPipe } from '../../safe-html.pipe';
|
|
|
|
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
|
|
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
|
|
|
|
|
|
import { Router } from '@angular/router';
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
keymap,
|
|
|
|
keymap,
|
|
|
|
highlightSpecialChars,
|
|
|
|
highlightSpecialChars,
|
|
|
|
@ -36,6 +37,12 @@ import {
|
|
|
|
closeBracketsKeymap,
|
|
|
|
closeBracketsKeymap,
|
|
|
|
} from '@codemirror/autocomplete';
|
|
|
|
} from '@codemirror/autocomplete';
|
|
|
|
import { lintKeymap } from '@codemirror/lint';
|
|
|
|
import { lintKeymap } from '@codemirror/lint';
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
|
|
|
Connection,
|
|
|
|
|
|
|
|
getDocument,
|
|
|
|
|
|
|
|
peerExtension,
|
|
|
|
|
|
|
|
} from '../../services/connection.service';
|
|
|
|
|
|
|
|
import { environment } from '../../../environments/environment';
|
|
|
|
|
|
|
|
|
|
|
|
const basicSetup: Extension = (() => [
|
|
|
|
const basicSetup: Extension = (() => [
|
|
|
|
highlightActiveLineGutter(),
|
|
|
|
highlightActiveLineGutter(),
|
|
|
|
@ -88,6 +95,7 @@ export class EditorComponent {
|
|
|
|
get selectedLanguage(): LanguageDescription {
|
|
|
|
get selectedLanguage(): LanguageDescription {
|
|
|
|
return this._selectedLanguage;
|
|
|
|
return this._selectedLanguage;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
set selectedLanguage(value: LanguageDescription) {
|
|
|
|
set selectedLanguage(value: LanguageDescription) {
|
|
|
|
this._selectedLanguage = value;
|
|
|
|
this._selectedLanguage = value;
|
|
|
|
if (value.name in CODE_DEFAULTS) {
|
|
|
|
if (value.name in CODE_DEFAULTS) {
|
|
|
|
@ -100,10 +108,12 @@ export class EditorComponent {
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private _linesNumbers: boolean = true;
|
|
|
|
private _linesNumbers: boolean = true;
|
|
|
|
get linesNumbers() {
|
|
|
|
get linesNumbers() {
|
|
|
|
return this._linesNumbers;
|
|
|
|
return this._linesNumbers;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
set linesNumbers(lines: boolean) {
|
|
|
|
set linesNumbers(lines: boolean) {
|
|
|
|
this._linesNumbers = lines;
|
|
|
|
this._linesNumbers = lines;
|
|
|
|
this.codemirror.editor?.dispatch({
|
|
|
|
this.codemirror.editor?.dispatch({
|
|
|
|
@ -131,21 +141,58 @@ export class EditorComponent {
|
|
|
|
this.languageCompartment.of(this.selectedLanguage.support!),
|
|
|
|
this.languageCompartment.of(this.selectedLanguage.support!),
|
|
|
|
];
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
constructor(private codeExecutionService: CodeExecutionService) {}
|
|
|
|
private client: WebSocket | undefined;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@Input()
|
|
|
|
|
|
|
|
set idRoom(idRoom: string) {
|
|
|
|
|
|
|
|
if (idRoom === undefined) {
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.client = new WebSocket(`${environment.webSocketUrl}/live/${idRoom}`);
|
|
|
|
|
|
|
|
this.client.addEventListener('open', async () => {
|
|
|
|
|
|
|
|
let conn = new Connection(this.client!);
|
|
|
|
|
|
|
|
let { version, doc } = await getDocument(conn);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.codemirror.editor?.dispatch({
|
|
|
|
|
|
|
|
changes: {
|
|
|
|
|
|
|
|
from: 0,
|
|
|
|
|
|
|
|
to: this.codemirror.editor.state.doc.length,
|
|
|
|
|
|
|
|
insert: doc,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
this.codemirror.editor?.dispatch({
|
|
|
|
|
|
|
|
effects: StateEffect.appendConfig.of([peerExtension(version, conn)]),
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
constructor(
|
|
|
|
|
|
|
|
private router: Router,
|
|
|
|
|
|
|
|
private backendService: BackendService
|
|
|
|
|
|
|
|
) {
|
|
|
|
|
|
|
|
backendService.getResult().subscribe((msg) => {
|
|
|
|
|
|
|
|
if (msg.type === 'stdout' || msg.type === 'stderr') {
|
|
|
|
|
|
|
|
this.resultContent += msg.text;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Efface le contenu de l'éditeur
|
|
|
|
// Efface le contenu de l'éditeur
|
|
|
|
clear(): void {
|
|
|
|
clear(): void {
|
|
|
|
this.editorContent = '';
|
|
|
|
this.editorContent = '';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async onCreateRoomButtonClicked() {
|
|
|
|
|
|
|
|
const idRoom = await this.backendService.createRoom(this.editorContent);
|
|
|
|
|
|
|
|
await this.router.navigate([`./editor-live/${idRoom}`]);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onRunButtonClicked() {
|
|
|
|
onRunButtonClicked() {
|
|
|
|
// Le code à exécuter est le contenu de l'éditeur
|
|
|
|
// Le code à exécuter est le contenu de l'éditeur
|
|
|
|
const codeToExecute = this.editorContent;
|
|
|
|
const codeToExecute = this.editorContent;
|
|
|
|
|
|
|
|
|
|
|
|
this.codeExecutionService.executeCode(
|
|
|
|
this.backendService.executeCode(codeToExecute, this.selectedLanguage.name);
|
|
|
|
codeToExecute,
|
|
|
|
|
|
|
|
this.selectedLanguage.name
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.resultContent = '';
|
|
|
|
this.resultContent = '';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
