Renamed code widget; moved modal to common folder
This commit is contained in:
211
src/app/editor/code-view/view.base.ts
Normal file
211
src/app/editor/code-view/view.base.ts
Normal file
@@ -0,0 +1,211 @@
|
||||
import { Directive, ElementRef, Input, ViewChild, inject } from '@angular/core';
|
||||
import * as uuid from 'uuid';
|
||||
|
||||
import { InfoBarService } from '../../common/services/editor/info-bar/info-bar.service';
|
||||
import { FilesModalService } from '../../common/services/editor/modals/files-modal.service';
|
||||
import { TabsService } from '../../common/services/editor/tabs/tabs.service';
|
||||
import { EditorsService } from '../../common/services/editor/editors.service';
|
||||
import { FilesService } from '../../common/services/editor/files.service';
|
||||
|
||||
import { EditorSettings } from "../../common/configs/editor.config";
|
||||
import { NewtonFile } from '../../common/types/file.type';
|
||||
|
||||
import { ServiceMessage } from '../../common/types/service-message.type';
|
||||
|
||||
|
||||
|
||||
@Directive()
|
||||
export class CodeViewBase {
|
||||
public uuid: string = uuid.v4();
|
||||
@Input() public isDefault: boolean = false;
|
||||
public leftSiblingUUID!: string;
|
||||
public rightSiblingUUID!: string;
|
||||
|
||||
protected infoBarService: InfoBarService = inject(InfoBarService);
|
||||
protected filesModalService: FilesModalService = inject(FilesModalService);
|
||||
protected tabsService: TabsService = inject(TabsService);
|
||||
protected editorsService: EditorsService = inject(EditorsService);
|
||||
protected filesService: FilesService = inject(FilesService);
|
||||
|
||||
@ViewChild('editor') editorElm!: ElementRef;
|
||||
@Input() editorSettings!: typeof EditorSettings;
|
||||
|
||||
public editor!: any;
|
||||
public activeFile!: NewtonFile;
|
||||
|
||||
public cutBuffer: string = "";
|
||||
public timerId: number = -1;
|
||||
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
|
||||
public selectLeftEditor() {
|
||||
let message = new ServiceMessage();
|
||||
message.action = "select-left-editor";
|
||||
message.editorUUID = this.uuid;
|
||||
|
||||
this.editorsService.sendMessage(message);
|
||||
}
|
||||
|
||||
public selectRightEditor() {
|
||||
let message = new ServiceMessage();
|
||||
message.action = "select-right-editor";
|
||||
message.editorUUID = this.uuid;
|
||||
|
||||
this.editorsService.sendMessage(message);
|
||||
}
|
||||
|
||||
public moveSessionLeft() {
|
||||
let message = new ServiceMessage();
|
||||
message.action = "move-session-left";
|
||||
message.editorUUID = this.uuid;
|
||||
|
||||
this.editorsService.sendMessage(message);
|
||||
}
|
||||
|
||||
public moveSessionRight() {
|
||||
let message = new ServiceMessage();
|
||||
message.action = "move-session-right";
|
||||
message.editorUUID = this.uuid;
|
||||
|
||||
this.editorsService.sendMessage(message);
|
||||
}
|
||||
|
||||
public addActiveStyling() {
|
||||
this.editorElm.nativeElement.classList.add("active-editor")
|
||||
}
|
||||
|
||||
public removeActiveStyling() {
|
||||
this.editorElm.nativeElement.classList.remove("active-editor")
|
||||
}
|
||||
|
||||
public openCommandPalette2() {
|
||||
this.editor.execCommand("openCommandPalette");
|
||||
}
|
||||
|
||||
public showKeyShortcuts() {
|
||||
this.editor.showKeyboardShortcuts();
|
||||
}
|
||||
|
||||
public search() {
|
||||
console.log(this.editor.session.getMode()["$id"]);
|
||||
}
|
||||
|
||||
public showFilesList() {
|
||||
let paths = this.filesService.getAllPaths();
|
||||
let stubPaths = [];
|
||||
|
||||
for (let i = 0; i < paths.length; i++) {
|
||||
let fpath = paths[i];
|
||||
if (fpath.length > 67) {
|
||||
fpath = "..." + fpath.slice(fpath.length - 67, fpath.length);
|
||||
}
|
||||
stubPaths.push(fpath);
|
||||
}
|
||||
|
||||
this.editor.prompt("",
|
||||
{
|
||||
name: "Files:",
|
||||
placeholder: "Search...",
|
||||
getCompletions: (search) => {
|
||||
let query = search.getValue();
|
||||
let result = [];
|
||||
|
||||
if (!query) return stubPaths;
|
||||
|
||||
for (let i = 0; i < stubPaths.length; i++) {
|
||||
if (stubPaths[i].includes(query)) {
|
||||
result.push(stubPaths[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
onAccept: (data) => {
|
||||
let fpath = data.value;
|
||||
let path = "";
|
||||
|
||||
for (let i = 0; i < stubPaths.length; i++) {
|
||||
if (stubPaths[i] === fpath) {
|
||||
path = paths[i];
|
||||
}
|
||||
}
|
||||
|
||||
if (!path) return;
|
||||
|
||||
this.activeFile = this.filesService.get(path);
|
||||
this.editor.setSession(this.activeFile.session);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
public destroySession() {
|
||||
this.editor.session.destroy();
|
||||
}
|
||||
|
||||
public toggleFullScreen() {
|
||||
window.main.toggleFullScreen();
|
||||
}
|
||||
|
||||
public zoomIn() {
|
||||
this.editor.setFontSize(
|
||||
parseInt(this.editor.getFontSize()) + 1
|
||||
)
|
||||
}
|
||||
|
||||
public zoomOut() {
|
||||
this.editor.setFontSize(
|
||||
parseInt(this.editor.getFontSize()) - 1
|
||||
)
|
||||
}
|
||||
|
||||
public movelinesUp() {
|
||||
this.editor.execCommand("movelinesup");
|
||||
}
|
||||
|
||||
public movelinesDown() {
|
||||
this.editor.execCommand("movelinesdown");
|
||||
}
|
||||
|
||||
public duplicateLines() {
|
||||
this.editor.execCommand("copylinesdown");
|
||||
}
|
||||
|
||||
public cutText() {
|
||||
let cutText = this.editor.getSelectedText();
|
||||
this.editor.remove();
|
||||
navigator.clipboard.writeText(cutText).catch(() => {
|
||||
console.error("Unable to cut text...");
|
||||
});
|
||||
}
|
||||
|
||||
public copyText() {
|
||||
let copyText = this.editor.getSelectedText();
|
||||
navigator.clipboard.writeText(copyText).catch(() => {
|
||||
console.error("Unable to copy text...");
|
||||
});
|
||||
}
|
||||
|
||||
public pasteText() {
|
||||
navigator.clipboard.readText().then((pasteText) => {
|
||||
this.editor.insert(pasteText, true);
|
||||
});
|
||||
}
|
||||
|
||||
protected updateInfoBar() {
|
||||
this.infoBarService.setInfoBarFPath(this.activeFile?.path)
|
||||
this.infoBarService.setInfoBarCursorPos(
|
||||
this.editor.getCursorPosition()
|
||||
);
|
||||
this.infoBarService.setInfoBarFType(
|
||||
this.editor.session.getMode()["$id"]
|
||||
);
|
||||
}
|
||||
|
||||
private quit() {
|
||||
window.main.quit();
|
||||
}
|
||||
}
|
||||
28
src/app/editor/code-view/view.component.css
Normal file
28
src/app/editor/code-view/view.component.css
Normal file
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
.editor {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.editor {
|
||||
height: 100vh;
|
||||
width: auto;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
.editor {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.active-editor {
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-color: rgba(124, 124, 124, 1);
|
||||
}
|
||||
2
src/app/editor/code-view/view.component.html
Normal file
2
src/app/editor/code-view/view.component.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<div class="editor" #editor >
|
||||
</div>
|
||||
223
src/app/editor/code-view/view.component.ts
Normal file
223
src/app/editor/code-view/view.component.ts
Normal file
@@ -0,0 +1,223 @@
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
// Import Ace and its modes/themes so that `ace` global is defined
|
||||
import * as ace from "ace-builds/src-noconflict/ace";
|
||||
import "ace-builds/src-noconflict/ext-settings_menu";
|
||||
import "ace-builds/src-noconflict/ext-keybinding_menu";
|
||||
import "ace-builds/src-noconflict/ext-command_bar";
|
||||
import "ace-builds/src-noconflict/ext-prompt";
|
||||
import "ace-builds/src-noconflict/ext-language_tools";
|
||||
//import "ace-builds/src-noconflict/theme-one_dark";
|
||||
//import "ace-builds/src-noconflict/theme-penguins_in_space";
|
||||
import "ace-builds/src-noconflict/theme-gruvbox";
|
||||
|
||||
import { CodeViewBase } from './view.base';
|
||||
|
||||
import { NewtonFile } from '../../common/types/file.type';
|
||||
import { ServiceMessage } from '../../common/types/service-message.type';
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'code-view',
|
||||
standalone: true,
|
||||
imports: [
|
||||
],
|
||||
templateUrl: './view.component.html',
|
||||
styleUrl: './view.component.css',
|
||||
host: {
|
||||
'class': 'col'
|
||||
}
|
||||
})
|
||||
export class CodeViewComponent extends CodeViewBase {
|
||||
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.editorsService.set(this.uuid, this);
|
||||
}
|
||||
|
||||
|
||||
private ngAfterViewInit(): void {
|
||||
if (this.isDefault) {
|
||||
this.editorsService.setActiveEditor(this.uuid);
|
||||
this.addActiveStyling();
|
||||
}
|
||||
|
||||
this.loadAce();
|
||||
}
|
||||
|
||||
private loadAce(): void {
|
||||
this.configAceAndBindToElement()
|
||||
this.loadAceKeyBindings();
|
||||
this.loadAceEventBindings();
|
||||
}
|
||||
|
||||
private configAceAndBindToElement(): void {
|
||||
this.editorSettings = this.editorsService.editorSettings;
|
||||
|
||||
ace.config.set('basePath', this.editorSettings.BASE_PATH);
|
||||
|
||||
this.editor = ace.edit( this.editorElm.nativeElement );
|
||||
this.editor.setOptions( this.editorSettings.CONFIG );
|
||||
}
|
||||
|
||||
private loadAceKeyBindings(): void {
|
||||
let keyBindings = [];
|
||||
for (let i = 0; i < this.editorSettings.KEYBINDINGS.length; i++) {
|
||||
let keyBinding = this.editorSettings.KEYBINDINGS[i];
|
||||
keyBindings.push(
|
||||
{
|
||||
name: keyBinding.name,
|
||||
bindKey: keyBinding.bindKey,
|
||||
exec: (keyBinding.name && keyBinding?.service) ?
|
||||
() => (
|
||||
this[keyBinding?.service][keyBinding.name]()
|
||||
)
|
||||
:
|
||||
(this[keyBinding.name]) ?
|
||||
() => (
|
||||
this[keyBinding.name]()
|
||||
)
|
||||
:
|
||||
() => (
|
||||
console.log(
|
||||
`Name: ${keyBinding.name}, is not mapping to a method OR mapping to a Service: ${keyBinding?.service} and Name: ${keyBinding.name}.`
|
||||
)
|
||||
)
|
||||
,
|
||||
readOnly: keyBinding.readOnly
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
this.editor.commands.addCommands( keyBindings );
|
||||
}
|
||||
|
||||
private loadAceEventBindings(): void {
|
||||
|
||||
// Note: https://ajaxorg.github.io/ace-api-docs/interfaces/ace.Ace.EditorEvents.html
|
||||
this.editor.on("focus", (e) => {
|
||||
let message = new ServiceMessage();
|
||||
message.action = "set-active-editor";
|
||||
message.editorUUID = this.uuid;
|
||||
|
||||
this.editorsService.sendMessage(message);
|
||||
|
||||
this.updateInfoBar();
|
||||
});
|
||||
|
||||
this.editor.on("click", () => {
|
||||
this.updateInfoBar();
|
||||
});
|
||||
|
||||
this.editor.on("input", () => {
|
||||
this.updateInfoBar();
|
||||
});
|
||||
|
||||
this.editor.on("keyboardActivity", (e) => {
|
||||
switch(e.command.name) {
|
||||
case "golineup":
|
||||
case "golinedown":
|
||||
case "gotoleft":
|
||||
case "gotoright":
|
||||
this.infoBarService.setInfoBarCursorPos(
|
||||
this.editor.getCursorPosition()
|
||||
);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
this.editor.on("change", () => {
|
||||
if (!this.activeFile) return;
|
||||
|
||||
let message = new ServiceMessage();
|
||||
message.action = "file-changed";
|
||||
message.filePath = this.activeFile.path;
|
||||
this.tabsService.sendMessage(message);
|
||||
});
|
||||
|
||||
this.editor.on("changeSession", (session) => {
|
||||
this.updateInfoBar();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
public newSession() {
|
||||
this.activeFile = null;
|
||||
let session = ace.createEditSession([""]);
|
||||
this.editor.setSession(session);
|
||||
}
|
||||
|
||||
protected openFiles() {
|
||||
let startDir = "";
|
||||
if (this.activeFile) {
|
||||
let pathParts = this.activeFile.path.split("/");
|
||||
pathParts.pop();
|
||||
startDir = pathParts.join( '/' );
|
||||
}
|
||||
|
||||
window.fs.openFiles(startDir);
|
||||
}
|
||||
|
||||
protected saveFile() {
|
||||
if (!this.activeFile) {
|
||||
this.saveFileAs();
|
||||
return;
|
||||
}
|
||||
|
||||
const text = this.activeFile.session.getValue();
|
||||
window.fs.saveFile(this.activeFile.path, text);
|
||||
}
|
||||
|
||||
protected saveFileAs() {
|
||||
window.fs.saveFileAs().then((path: string) => {
|
||||
if (!path) return;
|
||||
|
||||
let file: NewtonFile = new File([""], path, {});
|
||||
const text = this.editor.session.getValue();
|
||||
|
||||
window.fs.saveFile(path, text);
|
||||
this.filesService.addFile(
|
||||
path,
|
||||
file,
|
||||
false,
|
||||
text
|
||||
).then(() => {
|
||||
this.activeFile = this.filesService.get(path);
|
||||
this.editor.setSession(this.activeFile.session);
|
||||
this.filesService.addTab(this.activeFile);
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
protected cutToBuffer() {
|
||||
if (this.timerId) { clearTimeout(this.timerId); }
|
||||
|
||||
const cursorPosition = this.editor.getCursorPosition();
|
||||
let lineText = this.editor.session.getLine(cursorPosition.row);
|
||||
this.cutBuffer += `${lineText}\n`;
|
||||
|
||||
this.editor.session.removeFullLines(cursorPosition.row, cursorPosition.row)
|
||||
this.setBufferClearTimeout();
|
||||
}
|
||||
|
||||
protected pasteCutBuffer() {
|
||||
if (this.timerId) { clearTimeout(this.timerId); }
|
||||
|
||||
this.editor.insert(this.cutBuffer, true);
|
||||
this.setBufferClearTimeout();
|
||||
}
|
||||
|
||||
private setBufferClearTimeout(timeout: number = 5000) {
|
||||
this.timerId = setTimeout(() => {
|
||||
this.cutBuffer = "";
|
||||
this.timerId = -1;
|
||||
}, timeout);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user