-
-
- ![]()
-
+
+ }
+}
diff --git a/projects/ngx-monaco-tree/src/lib/monaco-tree-file/monaco-tree-file.component.scss b/projects/ngx-monaco-tree/src/lib/monaco-tree-file/monaco-tree-file.component.scss
index 6798a5d..0194bc6 100644
--- a/projects/ngx-monaco-tree/src/lib/monaco-tree-file/monaco-tree-file.component.scss
+++ b/projects/ngx-monaco-tree/src/lib/monaco-tree-file/monaco-tree-file.component.scss
@@ -45,12 +45,8 @@
background: #e4e6f1;
}
-.monaco-tree-row.hide {
- display: none;
-}
-
.monaco-tree-row.root-2 {
.monaco-tree-icon {
margin-left: 10px;
}
-}
\ No newline at end of file
+}
diff --git a/projects/ngx-monaco-tree/src/lib/monaco-tree-file/monaco-tree-file.component.ts b/projects/ngx-monaco-tree/src/lib/monaco-tree-file/monaco-tree-file.component.ts
index 255e8b2..00a8aef 100644
--- a/projects/ngx-monaco-tree/src/lib/monaco-tree-file/monaco-tree-file.component.ts
+++ b/projects/ngx-monaco-tree/src/lib/monaco-tree-file/monaco-tree-file.component.ts
@@ -1,67 +1,152 @@
-import {Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges, viewChildren} from '@angular/core';
+import { Component, ElementRef, HostListener, OnChanges, SimpleChanges, inject, viewChildren, input, output, model, computed, signal } from '@angular/core';
import { extensions } from '../../utils/extension-icon';
import { files } from '../../utils/file-icon';
import { folders } from '../../utils/folder-icon';
import { MonacoTreeElement } from '../ngx-monaco-tree.type';
import {
- ContextMenuElementSeparator,
- ContextMenuElementText
+ ContextMenuElementSeparator,
+ ContextMenuElementText
} from "../monaco-tree-context-menu/monaco-tree-context-menu.type";
-import {ContextMenuAction, DragAndDropEvent} from "./monaco-tree-file.type";
-import {MonacoTreeContextMenuComponent} from "../monaco-tree-context-menu/monaco-tree-context-menu.component";
-import {NgForOf, NgIf, NgStyle} from "@angular/common";
-import {DragDropModule, CdkDragDrop, CdkDrag, CdkDropList} from '@angular/cdk/drag-drop';
+import { ContextMenuAction, DragAndDropEvent } from "./monaco-tree-file.type";
+import { MonacoTreeContextMenuComponent } from "../monaco-tree-context-menu/monaco-tree-context-menu.component";
+import { NgClass, 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) {
- const tmp = getAbsolutePosition(element.offsetParent);
- r.x += tmp.x;
- r.y += tmp.y;
- }
- return r;
+ const r = { x: element.offsetLeft, y: element.offsetTop };
+ if (element.offsetParent) {
+ const tmp = getAbsolutePosition(element.offsetParent);
+ r.x += tmp.x;
+ r.y += tmp.y;
+ }
+ return r;
};
@Component({
selector: 'monaco-tree-file',
- standalone: true,
- imports: [NgIf, NgForOf, MonacoTreeContextMenuComponent, DragDropModule, NgStyle, CdkDrag, CdkDrag, CdkDropList],
+ imports: [
+ MonacoTreeContextMenuComponent,
+ DragDropModule,
+ NgClass,
+ NgStyle,
+ CdkDrag,
+ CdkDrag,
+ CdkDropList
+ ],
templateUrl: './monaco-tree-file.component.html',
styleUrls: ['./monaco-tree-file.component.scss']
})
export class MonacoTreeFileComponent implements OnChanges {
- @Input() name = '';
- @Input() path = '';
- @Input() color?: string|null|undefined = '';
- @Input() content: MonacoTreeElement[]|undefined|null = undefined;
- @Input() depth = 0;
- @Input() theme: 'vs-dark'|'vs-light' = 'vs-dark';
- @Input() hide = false;
- @Input() current: string|null = null;
-
- @Output() clickFile = new EventEmitter();
- @Output() contextMenuClick = new EventEmitter();
- @Output() dragDropFile = new EventEmitter();
-
- private children = viewChildren(MonacoTreeFileComponent);
-
- open = false;
- position: [number, number]|undefined = undefined;
-
+ private readonly eRef = inject(ElementRef);
+ private readonly children = viewChildren(MonacoTreeFileComponent);
+
+ readonly name = input.required();
+ readonly path = input('');
+ readonly color = input();
+ readonly content = input();
+ readonly depth = input(0);
+ readonly theme = input<'vs-dark' | 'vs-light'>('vs-dark');
+
+ readonly current = model(null);
+
+ readonly contextMenuClick = output();
+ readonly dragDropFile = output();
+
+ readonly open = signal(false);
+ readonly position = signal<[number, number] | undefined>(undefined);
+
+ readonly fullPath = computed(() => `${this.path() ? this.path() + '/' : ''}${this.name()}`);
+ readonly isActive = computed(() => this.current() === this.fullPath());
+ readonly style = computed(() => `margin-left: ${10 * this.depth()}px`);
+ readonly folder = computed(() => Array.isArray(this.content()));
+ readonly icon = computed(() => {
+ if (this.folder()) {
+ const name = this.name();
+ if (Object.keys(folders).includes(name)) {
+ const icon = folders[name as keyof typeof folders];
+ if (this.open()) return icon + '-open'
+ else return icon;
+ }
+ else {
+ if (this.open()) return 'folder-open'
+ else return 'folder';
+ }
+ } else {
+ const name = this.name();
+ if (Object.keys(files).includes(name)) {
+ return files[name as keyof typeof files];
+ } else {
+ let splitted = name.split('.')
+ while (splitted.length > 0) {
+ splitted = splitted.slice(1)
+ const ext = splitted.join('.')
+ if (ext && Object.keys(extensions).includes(ext)) {
+ return extensions[ext as keyof typeof extensions];
+ }
+ }
+ return 'file'
+ }
+ }
+ });
+ readonly colorStyle = computed(() => {
+ const color = this.color();
+ switch (color) {
+ case 'red':
+ return '#c74e39'
+ case 'yellow':
+ return '#e2c08d'
+ case 'green':
+ return '#81b88b'
+ case 'gray':
+ return '#8c8c8c'
+ default:
+ if (color?.startsWith("#")) return color;
+ else if (color) {
+ console.warn("Invalid color ", color, " please use red | yellow | green | gray or a valid hex color with #.")
+ return;
+ } else {
+ return;
+ }
+ }
+ });
- constructor(private eRef: ElementRef) {
- }
+ readonly contextMenu: Array = [
+ {
+ type: "element", name: 'New File', action: () => {
+ this.contextMenuClick.emit(["new_file", this.fullPath()])
+ this.position.set([-1000, -1000]);
+ }
+ },
+ {
+ type: "element", name: 'New Directory', action: () => {
+ this.contextMenuClick.emit(["new_directory", this.fullPath()])
+ this.position.set([-1000, -1000]);
+ }
+ },
+ { type: "separator" },
+ {
+ type: "element", name: 'Rename', action: () => {
+ this.contextMenuClick.emit(["rename_file", this.fullPath()])
+ this.position.set([-1000, -1000]);
+ }
+ },
+ {
+ type: "element", name: 'Delete', action: () => {
+ this.contextMenuClick.emit(["delete_file", this.fullPath()])
+ this.position.set([-1000, -1000]);
+ }
+ }
+ ];
- ngOnChanges(changes: SimpleChanges): void {
+ ngOnChanges(changes: SimpleChanges): void {
if (
changes['current']
- && !!this.current
- && this.current.startsWith(this.path)
+ && this.current()?.startsWith(this.fullPath())
) {
- if (!this.open && this.current !== this.path) {
+ if (!this.open() && !this.isActive()) {
this.toggle(false);
}
- if (this.current === this.path) {
+ if (this.isActive()) {
// Needed as `scrollIntoViewIfNeeded` is not supported on Firefox
if (this.eRef.nativeElement.scrollIntoViewIfNeeded) {
this.eRef.nativeElement.scrollIntoViewIfNeeded();
@@ -70,142 +155,48 @@ export class MonacoTreeFileComponent implements OnChanges {
}
}
}
- }
-
- contextMenu: Array = [
- {type: "element", name: 'New File', action: () => {
- this.contextMenuClick.emit(["new_file", this.name])
- this.position = [-1000, -1000];
- } },
- {type: "element", name: 'New Directory', action: () => {
- this.contextMenuClick.emit(["new_directory", this.name])
- this.position = [-1000, -1000];
- } },
- {type: "separator" },
- {type: "element", name: 'Rename', action: () => {
- this.contextMenuClick.emit(["rename_file", this.name])
- this.position = [-1000, -1000];
- } },
- {type: "element", name: 'Delete', action: () => {
- this.contextMenuClick.emit(["delete_file", this.name])
- this.position = [-1000, -1000];
- } }
- ]
-
-
- get icon() {
- if(this.folder) {
- if(Object.keys(folders).includes(this.name)) {
- const icon = folders[this.name as keyof typeof folders];
- if(this.open) return icon + '-open'
- else return icon;
- }
- else {
- if(this.open) return 'folder-open'
- else return 'folder';
- }
- } else {
- if(Object.keys(files).includes(this.name)) {
- return files[this.name as keyof typeof files];
-
- } else {
- let splitted = this.name.split('.')
- while(splitted.length > 0) {
- splitted = splitted.slice(1)
- const ext = splitted.join('.')
- if(ext && Object.keys(extensions).includes(ext)) {
- return extensions[ext as keyof typeof extensions];
- }
- }
- return 'file'
- }
-
- }
- }
+ }
- toggle(shouldEmit = true) {
- this.open = !this.open;
- if (shouldEmit) {
- this.clickFile.emit(this.name)
+ toggle(shouldChangeCurrent = true) {
+ this.open.update((open) => !open);
+ if (shouldChangeCurrent) {
+ this.current.set(this.fullPath());
}
- }
-
- get style() {
- return 'margin-left: '+ 10*this.depth +'px'
- }
-
- get folder() {
- return this.content !== null && this.content !== undefined
- }
-
- get isActive() {
- return this.current === this.path;
}
- handleClickFile(file: string) {
- this.clickFile.emit(this.name + '/' + file);
- }
-
- handleRightClickFile(event: MouseEvent) {
- event.preventDefault()
- const pos = getAbsolutePosition(event.target);
- this.position = [pos.x + event.offsetX, pos.y + event.offsetY]
- }
-
- handleRightClick(event: ContextMenuAction) {
- this.contextMenuClick.emit([event[0], this.name + '/' + event[1]]);
- }
+ handleRightClickFile(event: MouseEvent) {
+ event.preventDefault()
+ const pos = getAbsolutePosition(event.target);
+ this.position.set([pos.x + event.offsetX, pos.y + event.offsetY]);
+ }
collapseAll() {
this.children().forEach((child) => child.collapseAll());
- this.open = false;
+ this.open.set(false);
}
- @HostListener('document:contextmenu', ['$event'])
- clickOut(event: MouseEvent) {
- if(!this.eRef.nativeElement.contains(event.target)) {
- this.position = [-1000, -1000];
- }
- }
-
- get colorStyle() {
- switch(this.color) {
- case 'red':
- return '#c74e39'
- case 'yellow':
- return '#e2c08d'
- case 'green':
- return '#81b88b'
- case 'gray':
- return '#8c8c8c'
- default:
- if(this.color?.startsWith("#")) return this.color;
- else if(this.color) {
- console.warn("Invalid color ", this.color, " please use red | yellow | green | gray or a valid hex color with #.")
- return null;
- } else {
- return null;
- }
+ @HostListener('document:contextmenu', ['$event'])
+ clickOut(event: MouseEvent) {
+ if (!this.eRef.nativeElement.contains(event.target)) {
+ this.position.set([-1000, -1000]);
}
}
drop($event: CdkDragDrop) {
const file = $event.item.data;
- //Find the container where the file is dropped (thank copilot)
+ // Find the container where the file is dropped (thank copilot)
const containers = document.querySelectorAll('.monaco-tree-file-container');
- let targetContainer: Element|null = null;
- for (const container of Array.from(containers)) {
- const boundingRect = container.getBoundingClientRect();
- if ($event.dropPoint.x >= boundingRect.left && $event.dropPoint.x <= boundingRect.right &&
- $event.dropPoint.y >= boundingRect.top && $event.dropPoint.y <= boundingRect.bottom) {
- targetContainer = container;
- }
- }
-
+ const targetContainer = Array.from(containers).findLast((container) => {
+ const { left, right, bottom, top } = container.getBoundingClientRect();
+ const { x, y } = $event.dropPoint;
+ return x >= left && x <= right && y >= top && y <= bottom;
+ });
if (targetContainer) {
- this.dragDropFile.emit({sourceFile: file, destinationFile: targetContainer.getAttribute('ng-reflect-path') ?? '/'});
+ const path = targetContainer.getAttribute('ng-reflect-path');
+ const name = targetContainer.getAttribute('ng-reflect-name');
+ this.dragDropFile.emit({ sourceFile: file, destinationFile: path ? `${path}/${name}` : '/' });
} else {
- this.dragDropFile.emit({sourceFile: file, destinationFile: '/'});
+ this.dragDropFile.emit({ sourceFile: file, destinationFile: '/' });
}
}
}
diff --git a/projects/ngx-monaco-tree/src/lib/monaco-tree-icons/monaco-tree-icons.component.html b/projects/ngx-monaco-tree/src/lib/monaco-tree-icons/monaco-tree-icons.component.html
index f98575e..5c92ab8 100644
--- a/projects/ngx-monaco-tree/src/lib/monaco-tree-icons/monaco-tree-icons.component.html
+++ b/projects/ngx-monaco-tree/src/lib/monaco-tree-icons/monaco-tree-icons.component.html
@@ -1,4 +1,4 @@
-
{{name}}
+
+
+ @if (folder()) {
+
+ }
+ ![]()
+
-{{name()}}
+