Merge branch 'develop'

Author: RawZ06

CHANGELOG.md

@@ -0,0 +1,45 @@
+## Changelog
+
+### Current
+- Fix collapse all button (thank to matthieu-crouzet)
+- Add scroll direcly on the current file opened (thank to matthieu-crouzet)
+
+### 18.3.0
+- Make change current file reactive (thank to matthieu-crouzet)
+
+### 18.2.0
+- Update dependencies
+
+### 18.1.0
+- Upgrade to Angular 18
+
+### 17.5.0
+- Add default value (thank to matthieu-crouzet)
+
+### 17.3.0
+- Bug fix publish directory (thank to DustdevDM)
+
+### 17.1.0
+- Migrate to Angular 17
+- Add color to files
+- Add highlight on selected file or folder
+- Add buttons to create file or folder, and collapse all folders
+- Drag & Drop 
+
+### 15.2.0
+- Migrate from yarn to pnpm
+- Create a project with Angular 17 to test the compatibility
+- Passing to standalone components
+- CI/CD with Github Actions
+
+### 15.1.1
+- Add demo on stackblitz in README
+
+### 15.1.0
+- Fix theme in context menu
+
+### 15.0.0
+- Upgrade to Angular 15
+
+### 14.0.0
+- Upgrade to Angular 14

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) {
@@ -140,9 +146,9 @@ export class AppComponent {
     path: string,
     localTree: MonacoTreeElement[]
   ) {
-    const spited = path.split('/');
+    const splitted = path.split('/');
     if (!filename) return;
-    if (spited.length === 1) {
+    if (splitted.length === 1) {
       const file = localTree.find((el) => el.name == path);
       if (!file) return;
       else if (file.content === undefined) {
@@ -157,9 +163,9 @@ export class AppComponent {
         });
       }
     } else {
-      const file = localTree.find((el) => el.name == spited[0]);
+      const file = localTree.find((el) => el.name == splitted[0]);
       if (!file || !file.content) return;
-      this.create(type, filename, spited.slice(1).join('/'), file?.content);
+      this.create(type, filename, splitted.slice(1).join('/'), file?.content);
     }
   }
 

projects/ngx-monaco-tree/README.md

@@ -9,44 +9,7 @@ This is a Tree view based on [monaco-editor](https://github.com/microsoft/monaco
 <img width="387" alt="Screenshot 2022-02-06 at 21 57 31" src="https://user-images.githubusercontent.com/44646690/152701329-f53622ee-d28e-4019-ac70-ae551d36560f.png">
 
 ## Changelog
-
-### Current
-- Update dependencies
-
-### 18.1.0
-- Upgrade to Angular 18
-
-### 17.5.0
-- Add default value (thank to matthieu-crouzet)
-
-### 17.3.0
-- Bug fix publish directory (thank to DustdevDM)
-
-### 17.1.0
-- Migrate to Angular 17
-- Add color to files
-- Add highlight on selected file or folder
-- Add buttons to create file or folder, and collapse all folders
-- Drag & Drop 
-
-### 15.2.0
-- Migrate from yarn to pnpm
-- Create a project with Angular 17 to test the compatibility
-- Passing to standalone components
-- CI/CD with Github Actions
-
-### 15.1.1
-- Add demo on stackblitz in README
-
-### 15.1.0
-- Fix theme in context menu
-
-### 15.0.0
-- Upgrade to Angular 15
-
-### 14.0.0
-- Upgrade to Angular 14
-
+See CHANGELOG.md
 
 ## Features
 

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

@@ -1,4 +1,4 @@
-import {Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
+import {Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges, viewChildren} from '@angular/core';
 import { extensions } from '../../utils/extension-icon';
 import { files } from '../../utils/file-icon';
 import { folders } from '../../utils/folder-icon';
@@ -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) {
@@ -44,6 +43,8 @@ export class MonacoTreeFileComponent implements OnChanges {
 	@Output() contextMenuClick = new EventEmitter<ContextMenuAction>();
   @Output() dragDropFile = new EventEmitter<DragAndDropEvent>();
 
+  private children = viewChildren(MonacoTreeFileComponent);
+
 	open = false;
 	position: [number, number]|undefined = undefined;
 
@@ -56,10 +57,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();
+        }
+      }
     }
 	}
 
@@ -147,6 +156,11 @@ export class MonacoTreeFileComponent implements OnChanges {
 		this.contextMenuClick.emit([event[0], this.name + '/' + event[1]]);
 	}
 
+  collapseAll() {
+    this.children().forEach((child) => child.collapseAll());
+    this.open = false;
+  }
+
 	@HostListener('document:contextmenu', ['$event'])
 	clickOut(event: MouseEvent) {
 		if(!this.eRef.nativeElement.contains(event.target)) {

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, viewChildren } from '@angular/core';
 import { MonacoTreeElement } from './ngx-monaco-tree.type';
 import {ContextMenuAction, DragAndDropEvent} from "./monaco-tree-file/monaco-tree-file.type";
 import {MonacoTreeFileComponent} from "./monaco-tree-file/monaco-tree-file.component";
@@ -32,6 +32,8 @@ export class NgxMonacoTreeComponent {
 
   @Input() currentFile: string|null = null;
 
+  private children = viewChildren(MonacoTreeFileComponent);
+
 	handleClickFile(path: string) {
 		this.clickFile.emit(path);
     this.currentFile = path;
@@ -54,7 +56,6 @@ export class NgxMonacoTreeComponent {
   }
 
   handleCollapseAll() {
-    const tree = JSON.parse(JSON.stringify(this.tree));
-    this.tree = tree;
+    this.children().forEach((child) => child.collapseAll());
   }
 }