Merge pull request #53 from matthieu-crouzet/feat/scroll-to-current-file

feat: scroll current file into the view

Author: RawZ06

projects/ngx-monaco-tree-test/src/app/app.component.ts

@@ -5,6 +5,8 @@ import {CommonModule} from "@angular/common";
 import {NgxMonacoTreeComponent} from "../../../ngx-monaco-tree/src/lib/ngx-monaco-tree.component";
 import {DragAndDropEvent} from "../../../ngx-monaco-tree/src/lib/monaco-tree-file/monaco-tree-file.type";
 
+const TOO_MANY_FILES_IN_FOLDER = 200;
+
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -44,6 +46,10 @@ export class AppComponent {
             { name: 'environment.ts' },
           ],
         },
+        {
+          name: 'folder-with-too-many-files',
+          content: Array.from({ length: TOO_MANY_FILES_IN_FOLDER }).map((_, index) => ({ name: `file_${index + 1}.ts`}))
+        },
         {
           name: 'favicon.ico',
         },
@@ -76,9 +82,9 @@ export class AppComponent {
   ];
 
   changeCurrentFile() {
-    this.currentFile = this.currentFile === 'src/environments/environment.ts'
+    this.currentFile = this.currentFile === `src/folder-with-too-many-files/file_${TOO_MANY_FILES_IN_FOLDER}.ts`
       ? 'src/app/app.component.html'
-      : 'src/environments/environment.ts';
+      : `src/folder-with-too-many-files/file_${TOO_MANY_FILES_IN_FOLDER}.ts`;
   }
 
   handleContextMenu(action: ContextMenuAction) {

projects/ngx-monaco-tree/src/lib/monaco-tree-file/monaco-tree-file.component.ts

@@ -12,7 +12,6 @@ import {MonacoTreeContextMenuComponent} from "../monaco-tree-context-menu/monaco
 import {NgForOf, NgIf, NgStyle} from "@angular/common";
 import {DragDropModule, CdkDragDrop, CdkDrag, CdkDropList} from '@angular/cdk/drag-drop';
 
-
 function getAbsolutePosition(element: any) {
 	const r = { x: element.offsetLeft, y: element.offsetTop };
 	if (element.offsetParent) {
@@ -56,10 +55,18 @@ export class MonacoTreeFileComponent implements OnChanges {
       changes['current']
       && !!this.current
       && this.current.startsWith(this.path)
-      && !this.open
-      && this.current !== this.path
     ) {
-      this.toggle(false);
+      if (!this.open && this.current !== this.path) {
+        this.toggle(false);
+      }
+      if (this.current === this.path) {
+        // Needed as `scrollIntoViewIfNeeded` is not supported on Firefox
+        if (this.eRef.nativeElement.scrollIntoViewIfNeeded) {
+          this.eRef.nativeElement.scrollIntoViewIfNeeded();
+        } else {
+          this.eRef.nativeElement.scrollIntoView();
+        }
+      }
     }
 	}