Experimental: view state tracking (v2)

ls1intum · Oct 16, 2024 · 9fad9ad · 9fad9ad
1 parent 188acc7
commit 9fad9ad
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/...app/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.html b/...app/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.html
@@ -45,7 +45,7 @@
         }
         <jhi-monaco-editor
             (textChanged)="onFileTextChanged($event)"
-            [hidden]="!selectedFile() || loadingCount() > 0 || binaryFileSelected()"
+            [hidden]="!selectedFile() || loadingCount() > 0 || binaryFileSelected() || !viewStateReady()"
             [readOnly]="editorLocked()"
             [textChangedEmitDelay]="200"
             #editor

diff --git a/...ebapp/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.ts b/...ebapp/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.ts
@@ -109,6 +109,8 @@ export class CodeEditorMonacoComponent implements OnChanges {
     readonly feedbackInternal = signal<Feedback[]>([]);
     readonly feedbackSuggestionsInternal = signal<Feedback[]>([]);
     readonly lineToFocus = signal<number | undefined>(undefined);
+    readonly showingViewStateOfFile = signal<string | undefined>(undefined);
+    readonly viewStateReady = computed<boolean>(() => this.showingViewStateOfFile() === this.selectedFile());
 
     readonly feedbackForSelectedFile = computed<FeedbackWithLineAndReference[]>(() => {
         return this.filterFeedbackForSelectedFile(this.feedbackInternal()).map((f) => this.attachLineToFeedback(f));
@@ -145,6 +147,7 @@ export class CodeEditorMonacoComponent implements OnChanges {
 
         effect(
             () => {
+                this.selectedFile();
                 const feedbackComponentsAndSuggestions = [...this.inlineFeedbackComponents(), ...this.inlineFeedbackSuggestionComponents()];
                 this.changeDetectorRef.detectChanges();
                 // Wait for change detection to run on the new feedback widgets before passing them to the editor.
@@ -159,6 +162,11 @@ export class CodeEditorMonacoComponent implements OnChanges {
                                 ?.focus();
                             this.lineToFocus.set(undefined);
                         }
+
+                        if (!this.viewStateReady()) {
+                            this.editor().restoreViewStateForCurrentModel();
+                            this.showingViewStateOfFile.set(this.selectedFile());
+                        }
                     });
                 }, 0);
             },
@@ -182,6 +190,7 @@ export class CodeEditorMonacoComponent implements OnChanges {
             this.editor().reset();
         }
         if ((changes.selectedFile && this.selectedFile()) || editorWasRefreshed) {
+            this.editor().saveViewStateForCurrentModel();
             await this.selectFileInEditor(this.selectedFile());
             this.setBuildAnnotations(this.annotationsArray);
             this.newFeedbackLines.set([]);

diff --git a/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts b/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts
@@ -38,6 +38,7 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
      * Elements, models, and actions of the editor.
      */
     models: MonacoEditorTextModel[] = [];
+    modelViewStates: { [modelId: string]: monaco.editor.ICodeEditorViewState | undefined } = {};
     lineWidgets: MonacoEditorLineWidget[] = [];
     buildAnnotations: MonacoEditorBuildAnnotation[] = [];
     lineHighlights: MonacoEditorLineHighlight[] = [];
@@ -202,6 +203,8 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
      * @param languageId The language ID to use for syntax highlighting (will be inferred from the file extension if left out).
      */
     changeModel(fileName: string, newFileContent?: string, languageId?: string) {
+        this.saveViewStateForCurrentModel();
+
         const uri = monaco.Uri.parse(`inmemory://model/${this._editor.getId()}/${fileName}`);
         const model = monaco.editor.getModel(uri) ?? monaco.editor.createModel(newFileContent ?? '', undefined, uri);
 
@@ -220,6 +223,24 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
         this._editor.setModel(model);
     }
 
+    saveViewStateForCurrentModel(): void {
+        const model = this._editor.getModel();
+        if (model) {
+            // The API may return null, which we map to undefined.
+            this.modelViewStates[model.id] = this._editor.saveViewState() ?? undefined;
+        }
+    }
+
+    restoreViewStateForCurrentModel(): void {
+        const model = this._editor.getModel();
+        if (model) {
+            const viewState = this.modelViewStates[model.id];
+            if (viewState) {
+                this._editor.restoreViewState(viewState);
+            }
+        }
+    }
+
     /**
      * Updates the indentation size of the editor in the current model.
      * @param indentSize The size of the indentation in spaces.