Testing changing of tab order

package.json

@@ -21,6 +21,7 @@
         "@angular/common": "19.2.0",
         "@angular/compiler": "19.2.0",
         "@angular/core": "19.2.0",
+        "@angular/cdk": "19.2.0",
         "@angular/forms": "19.2.0",
         "@angular/platform-browser": "19.2.0",
         "@angular/platform-browser-dynamic": "19.2.0",

src/app/common/directives/dnd.directive.ts

@@ -10,6 +10,7 @@ import {
 import { NewtonFile } from '../types/file.type';
 
 
+
 @Directive({
     selector: '[dropzone]'
 })
@@ -17,21 +18,24 @@ export class DndDirective {
     @HostBinding('class.fileover') fileOver!: boolean;
     @Output() fileDropped = new EventEmitter<any>();
 
-    @HostListener('dragover', ['$event']) onDragOver(evt: any) {
+    @HostListener('dragover', ['$event'])
+    onDragOver(evt: any) {
         evt.preventDefault();
         evt.stopPropagation();
 
         this.fileOver = true;
     }
 
-    @HostListener('dragleave', ['$event']) public onDragLeave(evt: any) {
+    @HostListener('dragleave', ['$event'])
+    public onDragLeave(evt: any) {
         evt.preventDefault();
         evt.stopPropagation();
 
         this.fileOver = false;
     }
 
-    @HostListener('drop', ['$event']) public ondrop(evt: any) {
+    @HostListener('drop', ['$event'])
+    publicondrop(evt: any) {
         evt.preventDefault();
         evt.stopPropagation();
 

src/app/common/directives/draggable.directive.ts

@@ -0,0 +1,48 @@
+import {
+    Directive,
+    Output,
+    EventEmitter,
+    HostListener
+} from '@angular/core';
+
+
+
+@Directive({
+    selector: '[draggable-item]'
+})
+export class DraggableDirective {
+    @Output() dragStart = new EventEmitter<PointerEvent>();
+    @Output() dragMove  = new EventEmitter<PointerEvent>();
+    @Output() dragEnd   = new EventEmitter<PointerEvent>();
+
+    private dragging    = false;
+    selected: any;
+    
+
+    @HostListener('pointerdown', ['$event'])
+    onPointerDown(event: PointerEvent): void {
+        console.log("pointerdown");
+
+        this.dragStart.emit(event);
+    }
+
+    @HostListener('document:pointermove', ['$event'])
+    onPointerMove(event: PointerEvent): void {
+        if (!this.dragging) return;
+        console.log("pointermove");
+
+        this.dragging = true;
+        this.dragMove.emit(event);
+    }
+
+    @HostListener('document:pointerup', ['$event'])
+    onPointerUp(event: PointerEvent): void {
+        if (!this.dragging) return;
+
+        console.log("pointerup");
+
+        this.dragging = false;
+        this.dragEnd.emit(event);
+    }
+
+}

src/app/editor/tabs/tab/tab.component.html

@@ -1,4 +1,14 @@
+<!--
+
 <span class="tab noselect" title="{{path}}">
     <span class="title" (mouseup)="setTabToEditor()">{{title}}</span>
     <button class="close-button" (mouseup)="closeTab()">X</button>
 </span>
+
+-->
+
+
+<div cdkDrag class="tab noselect" title="{{path}}">
+    <span class="title">{{title}}</span>
+    <button class="close-button">X</button>
+</div>

src/app/editor/tabs/tab/tab.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { CdkDrag } from '@angular/cdk/drag-drop';
 
 import { EditorsService } from '../../../common/services/editor/editors.service';
 
@@ -8,6 +9,7 @@ import { EditorsService } from '../../../common/services/editor/editors.service'
     selector: 'tab',
     standalone: true,
     imports: [
+        CdkDrag
     ],
     templateUrl: './tab.component.html',
     styleUrl: './tab.component.css',

src/app/editor/tabs/tabs.component.css

@@ -0,0 +1,27 @@
+.tab,
+.title,
+.close-button {
+    color: rgba(255, 255, 255, 0.64);
+}
+
+
+.title {
+    margin-left: 2em;
+    margin-right: 2em;
+    font-size: 4em;
+}
+
+.title:hover {
+    cursor: pointer;
+}
+
+.close-button {
+    background: rgba(116, 0, 0, 0.64);
+    border-style: solid;
+    border-color: rgba(0, 0, 0, 0.64);
+    border-width: 1px;
+}
+
+.close-button:hover {
+    background: rgba(256, 0, 0, 0.64);
+}

src/app/editor/tabs/tabs.component.html

@@ -1,2 +1,23 @@
+<!--
 <ng-container #containerRef>
 </ng-container>
+-->
+
+<div #containerRef
+    cdkDropList
+    cdkDropListSortingDisabled
+    cdkDropListLockAxis="x"
+    cdkDropListOrientation="horizontal"
+    (cdkDropListDropped)="dropped($event)"
+>
+
+    <div *ngFor="let tab of tabs"
+        cdkDrag (cdkDragMoved)="moved($event)"
+        class="tab noselect" title="{{tab.path}}" uuid="{{tab.uuid}}"
+        path="{{tab.path}}"
+    >
+        <span class="title" (click)="setTabToEditor($event)">{{tab.title}}</span>
+        <button class="close-button" (click)="closeTab($event)">X</button>
+    </div>
+
+</div>

src/app/editor/tabs/tabs.component.ts

@@ -1,9 +1,15 @@
-import { Component, ElementRef, ViewChild, TemplateRef, ComponentRef, ViewContainerRef } from '@angular/core';
+// import { Component, ElementRef, ViewChild, TemplateRef, ComponentRef, ViewContainerRef } from '@angular/core';
+
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Subject, takeUntil } from 'rxjs';
 
-import { TabComponent } from './tab/tab.component';
+import { EditorsService } from '../../common/services/editor/editors.service';
 import { TabsService } from '../../common/services/editor/tabs/tabs.service';
 
+// import { TabComponent } from './tab/tab.component';
+
 import { ServiceMessage } from '../../common/types/service-message.type';
 
 
@@ -12,6 +18,9 @@ import { ServiceMessage } from '../../common/types/service-message.type';
     selector: 'tabs',
     standalone: true,
     imports: [
+        CommonModule,
+        CdkDropList,
+        CdkDrag,
     ],
     templateUrl: './tabs.component.html',
     styleUrl: './tabs.component.css',
@@ -22,16 +31,20 @@ import { ServiceMessage } from '../../common/types/service-message.type';
 export class TabsComponent {
     private unsubscribe = new Subject<void>();
 
-    @ViewChild('containerRef', {read: ViewContainerRef}) containerRef!: ViewContainerRef;
+    // @ViewChild('containerRef', {read: ViewContainerRef}) containerRef!: ViewContainerRef;
-    tabs: Map<string, ComponentRef<TabComponent>>;
+    // tabs: Map<string, ComponentRef<TabComponent>>;
     activeTab!: string;
+    tabs: any[] = [];
+    newIndex: number = -1;
 
 
-    constructor(private tabsService: TabsService) {
+    constructor(
-        this.tabs = new Map<string, ComponentRef<TabComponent>>();
+        private editorsService: EditorsService,
+        private tabsService: TabsService
+    ) {
+        // this.tabs = new Map<string, ComponentRef<TabComponent>>();
     }
 
-
     public ngAfterViewInit(): void {
         this.tabsService.getData$().pipe(
             takeUntil(this.unsubscribe)
@@ -41,20 +54,59 @@ export class TabsComponent {
         });
     }
 
-    ngOnDestroy() {
+    ngOnDestroy(): void {
         this.unsubscribe.next();
         this.unsubscribe.complete();
     }
 
-    private createTab(title: string, uuid: string, path: string) {
+    private createTab(title: string, uuid: string, path: string): void {
-        const component = this.containerRef.createComponent(TabComponent);
+        this.tabs.push({title: title, path: path, uuid: uuid})
-        component.instance.title = title;
+    }
-        component.instance.path  = path;
-        component.instance.ref   = component;
 
-        this.tabs.set(uuid, component)
+//    private createTab(title: string, uuid: string, path: string) {
+//        const component = this.containerRef.createComponent(TabComponent);
+//        component.instance.title = title;
+//        component.instance.path  = path;
+//        component.instance.ref   = component;
 
-        return component;
+//        this.tabs.set(uuid, component)
+
+//        return component;
+//    }
+
+
+    setTabToEditor(event: any): void {
+        const fpath = event.srcElement.parentElement.getAttribute("title");
+        this.editorsService.setTabToEditor(fpath);
+    }
+
+    closeTab(event: any): void {
+        const fpath = event.srcElement.parentElement.getAttribute("title");
+
+        this.editorsService.closeTab(fpath);
+        for (let i = 0; i < this.tabs.length; i++) {
+            if (this.tabs[i].path == fpath) {
+                this.tabs.splice(i, 1);
+            }
+        }
+
+    }
+
+    moved(event: any): void {
+        if (event.event.target.hasAttribute("title")) {
+            for (let i = 0; i < this.tabs.length; i++) {
+                if (this.tabs[i].path == event.event.target.getAttribute("title")) {
+                    this.newIndex = i;
+                }
+            }
+        }
+    }
+
+    dropped(event: CdkDragDrop<any>): void {
+        moveItemInArray(this.tabs, event.previousIndex, this.newIndex);
+        this.newIndex = -1;
+        // event.currentIndex not updating for some reason...
+        // moveItemInArray(this.tabs, event.previousIndex, event.currentIndex);
     }
 
 }