Moved tab component logic to service; handle move session to select next tab
This commit is contained in:
parent
051e42bfa3
commit
f94ac677a9
@ -1,6 +1,9 @@
|
|||||||
import { Injectable } from '@angular/core';
|
import { Injectable, inject } from '@angular/core';
|
||||||
|
import { moveItemInArray } from '@angular/cdk/drag-drop';
|
||||||
import { BehaviorSubject, ReplaySubject, Observable } from 'rxjs';
|
import { BehaviorSubject, ReplaySubject, Observable } from 'rxjs';
|
||||||
|
|
||||||
|
import { EditorsService } from '../editors.service';
|
||||||
|
|
||||||
import { ServiceMessage } from '../../../types/service-message.type';
|
import { ServiceMessage } from '../../../types/service-message.type';
|
||||||
|
|
||||||
|
|
||||||
@ -10,9 +13,103 @@ import { ServiceMessage } from '../../../types/service-message.type';
|
|||||||
export class TabsService {
|
export class TabsService {
|
||||||
private messageSubject: ReplaySubject<ServiceMessage> = new ReplaySubject<ServiceMessage>(1);
|
private messageSubject: ReplaySubject<ServiceMessage> = new ReplaySubject<ServiceMessage>(1);
|
||||||
|
|
||||||
|
private editorsService: EditorsService = inject(EditorsService);
|
||||||
|
|
||||||
|
tabs: any[] = [];
|
||||||
|
newIndex: number = -1;
|
||||||
|
|
||||||
constructor() {}
|
constructor() {}
|
||||||
|
|
||||||
|
|
||||||
|
public push(tabData: {}): void {
|
||||||
|
this.tabs.push(tabData);
|
||||||
|
}
|
||||||
|
|
||||||
|
public closeTab(fpath: string): void {
|
||||||
|
this.sendEditorsServiceAMessage("close-tab", fpath);
|
||||||
|
|
||||||
|
for (let i = 0; i < this.tabs.length; i++) {
|
||||||
|
if (this.tabs[i].path == fpath) {
|
||||||
|
this.splice(i);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public sendEditorsServiceAMessage(action: string, fpath: string) {
|
||||||
|
let message = new ServiceMessage();
|
||||||
|
message.action = action;
|
||||||
|
message.filePath = fpath;
|
||||||
|
|
||||||
|
this.editorsService.sendMessage(message);
|
||||||
|
}
|
||||||
|
|
||||||
|
public getLeftSiblingTab(fpath: string): string {
|
||||||
|
let size = this.tabs.length;
|
||||||
|
let i = 0;
|
||||||
|
|
||||||
|
for (; i < size; i++) {
|
||||||
|
if (this.tabs[i].path == fpath) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( !(size > 1) ) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( i === 0 ) {
|
||||||
|
return this.tabs[i + 1].path;
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.tabs[i - 1].path;
|
||||||
|
}
|
||||||
|
|
||||||
|
public getRightSiblingTab(fpath: string): string {
|
||||||
|
let size = this.tabs.length;
|
||||||
|
let i = 0;
|
||||||
|
|
||||||
|
for (; i < size; i++) {
|
||||||
|
if (this.tabs[i].path == fpath) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( !(size > 1) ) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( i === (size - 1) ) {
|
||||||
|
return this.tabs[i - 1].path;
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.tabs[i + 1].path;
|
||||||
|
}
|
||||||
|
|
||||||
|
public setNewTargetIndex(fpath: string): void {
|
||||||
|
for (let i = 0; i < this.tabs.length; i++) {
|
||||||
|
if (this.tabs[i].path == fpath) {
|
||||||
|
this.newIndex = i;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public move(oldIndex: number): void {
|
||||||
|
if (this.newIndex == -1) return;
|
||||||
|
|
||||||
|
moveItemInArray(this.tabs, oldIndex, this.newIndex);
|
||||||
|
this.newIndex = -1;
|
||||||
|
|
||||||
|
// event.currentIndex not updating for some reason...
|
||||||
|
// moveItemInArray(this.tabs, event.previousIndex, event.currentIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
public splice(index: number): void {
|
||||||
|
this.tabs.splice(index, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
public sendMessage(data: ServiceMessage): void {
|
public sendMessage(data: ServiceMessage): void {
|
||||||
this.messageSubject.next(data);
|
this.messageSubject.next(data);
|
||||||
}
|
}
|
||||||
|
@ -150,7 +150,7 @@ export class CodeViewBase {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public destroySession() {
|
public destroySession() {
|
||||||
this.editor.session.destroy();
|
this.tabsService.closeTab(this.activeFile.path);
|
||||||
}
|
}
|
||||||
|
|
||||||
public toggleFullScreen() {
|
public toggleFullScreen() {
|
||||||
|
@ -77,7 +77,17 @@ export class EditorsComponent {
|
|||||||
|
|
||||||
siblingComponent.assignSession(editorComponent.activeFile);
|
siblingComponent.assignSession(editorComponent.activeFile);
|
||||||
|
|
||||||
editorComponent.newSession();
|
let targetPath = this.tabsService.getRightSiblingTab(
|
||||||
|
editorComponent.activeFile.path
|
||||||
|
)
|
||||||
|
if (targetPath) {
|
||||||
|
editorComponent.assignSession(
|
||||||
|
this.filesService.get(targetPath)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
editorComponent.newSession();
|
||||||
|
}
|
||||||
|
|
||||||
siblingComponent.editor.focus()
|
siblingComponent.editor.focus()
|
||||||
} else if (message.action === "move-session-right") {
|
} else if (message.action === "move-session-right") {
|
||||||
let editorComponent = this.editorsService.get(message.editorUUID);
|
let editorComponent = this.editorsService.get(message.editorUUID);
|
||||||
@ -91,7 +101,17 @@ export class EditorsComponent {
|
|||||||
|
|
||||||
siblingComponent.assignSession(editorComponent.activeFile);
|
siblingComponent.assignSession(editorComponent.activeFile);
|
||||||
|
|
||||||
editorComponent.newSession();
|
let targetPath = this.tabsService.getRightSiblingTab(
|
||||||
|
editorComponent.activeFile.path
|
||||||
|
)
|
||||||
|
if (targetPath) {
|
||||||
|
editorComponent.assignSession(
|
||||||
|
this.filesService.get(targetPath)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
editorComponent.newSession();
|
||||||
|
}
|
||||||
|
|
||||||
siblingComponent.editor.focus()
|
siblingComponent.editor.focus()
|
||||||
} else if (message.action === "set-active-editor") {
|
} else if (message.action === "set-active-editor") {
|
||||||
this.editorsService.getActiveEditorComponent().removeActiveStyling();
|
this.editorsService.getActiveEditorComponent().removeActiveStyling();
|
||||||
|
@ -1,9 +1,8 @@
|
|||||||
import { Component, ChangeDetectorRef, inject } from '@angular/core';
|
import { Component, ChangeDetectorRef, inject } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
|
import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
|
||||||
import { Subject, takeUntil } from 'rxjs';
|
import { Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
import { EditorsService } from '../../common/services/editor/editors.service';
|
|
||||||
import { TabsService } from '../../common/services/editor/tabs/tabs.service';
|
import { TabsService } from '../../common/services/editor/tabs/tabs.service';
|
||||||
|
|
||||||
import { ServiceMessage } from '../../common/types/service-message.type';
|
import { ServiceMessage } from '../../common/types/service-message.type';
|
||||||
@ -27,13 +26,10 @@ import { ServiceMessage } from '../../common/types/service-message.type';
|
|||||||
export class TabsComponent {
|
export class TabsComponent {
|
||||||
private unsubscribe: Subject<void> = new Subject();
|
private unsubscribe: Subject<void> = new Subject();
|
||||||
|
|
||||||
private editorsService: EditorsService = inject(EditorsService);
|
|
||||||
private tabsService: TabsService = inject(TabsService);
|
private tabsService: TabsService = inject(TabsService);
|
||||||
private changeDetectorRef: ChangeDetectorRef = inject(ChangeDetectorRef);
|
private changeDetectorRef: ChangeDetectorRef = inject(ChangeDetectorRef);
|
||||||
|
|
||||||
activeTab!: string;
|
tabs: any[] = this.tabsService.tabs;
|
||||||
tabs: any[] = [];
|
|
||||||
newIndex: number = -1;
|
|
||||||
|
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
@ -74,18 +70,18 @@ export class TabsComponent {
|
|||||||
let target = event.target;
|
let target = event.target;
|
||||||
|
|
||||||
if ( target.classList.contains("tab") ) {
|
if ( target.classList.contains("tab") ) {
|
||||||
this.sendEditorsServiceAMessage(
|
this.tabsService.sendEditorsServiceAMessage(
|
||||||
"set-tab-to-editor",
|
"set-tab-to-editor",
|
||||||
event.srcElement.getAttribute("title")
|
event.srcElement.getAttribute("title")
|
||||||
);
|
);
|
||||||
|
|
||||||
} else if ( target.classList.contains("title") ) {
|
} else if ( target.classList.contains("title") ) {
|
||||||
this.sendEditorsServiceAMessage(
|
this.tabsService.sendEditorsServiceAMessage(
|
||||||
"set-tab-to-editor",
|
"set-tab-to-editor",
|
||||||
event.srcElement.parentElement.getAttribute("title")
|
event.srcElement.parentElement.getAttribute("title")
|
||||||
);
|
);
|
||||||
} else if ( target.classList.contains("close-button") ) {
|
} else if ( target.classList.contains("close-button") ) {
|
||||||
this.closeTab(
|
this.tabsService.closeTab(
|
||||||
event.srcElement.parentElement.getAttribute("title")
|
event.srcElement.parentElement.getAttribute("title")
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -93,21 +89,10 @@ export class TabsComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public createTab(title: string, uuid: string, path: string): void {
|
public createTab(title: string, uuid: string, path: string): void {
|
||||||
this.tabs.push({title: title, uuid: uuid, path: path});
|
this.tabsService.push({title: title, uuid: uuid, path: path});
|
||||||
this.changeDetectorRef.detectChanges();
|
this.changeDetectorRef.detectChanges();
|
||||||
}
|
}
|
||||||
|
|
||||||
public closeTab(fpath: string): void {
|
|
||||||
this.sendEditorsServiceAMessage("close-tab", fpath);
|
|
||||||
|
|
||||||
for (let i = 0; i < this.tabs.length; i++) {
|
|
||||||
if (this.tabs[i].path == fpath) {
|
|
||||||
this.tabs.splice(i, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
private moved(event: any): void {
|
private moved(event: any): void {
|
||||||
let target = event.event.target;
|
let target = event.event.target;
|
||||||
let fpath = "";
|
let fpath = "";
|
||||||
@ -120,31 +105,11 @@ export class TabsComponent {
|
|||||||
fpath = target.getAttribute("title")
|
fpath = target.getAttribute("title")
|
||||||
)
|
)
|
||||||
|
|
||||||
for (let i = 0; i < this.tabs.length; i++) {
|
this.tabsService.setNewTargetIndex(fpath);
|
||||||
if (this.tabs[i].path == fpath) {
|
|
||||||
this.newIndex = i;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
protected dropped(event: CdkDragDrop<any>): void {
|
protected dropped(event: CdkDragDrop<any>): void {
|
||||||
if (this.newIndex == -1) return;
|
this.tabsService.move(event.previousIndex);
|
||||||
|
|
||||||
moveItemInArray(this.tabs, event.previousIndex, this.newIndex);
|
|
||||||
this.newIndex = -1;
|
|
||||||
|
|
||||||
// event.currentIndex not updating for some reason...
|
|
||||||
// moveItemInArray(this.tabs, event.previousIndex, event.currentIndex);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
private sendEditorsServiceAMessage(action: string, fpath: string) {
|
|
||||||
let message = new ServiceMessage();
|
|
||||||
message.action = action;
|
|
||||||
message.filePath = fpath;
|
|
||||||
|
|
||||||
this.editorsService.sendMessage(message);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user