From ae059912e1845642c6bd21f376384ec83c0c21d5 Mon Sep 17 00:00:00 2001 From: itdominator <1itdominator@gmail.com> Date: Tue, 1 Jul 2025 01:10:14 -0500 Subject: [PATCH] Fixing keybinding select and move of session; moved modals around; cleanup --- package.json | 5 +- src/app/app.component.ts | 2 +- .../diff-modal.component.css} | 0 .../modals/diffs/diff-modal.component.html | 28 ++++++++ .../modals/diffs/diff-modal.component.ts | 69 +++++++++++++++++++ .../modals/files/files-modal.component.css | 16 +++++ .../{ => files}/files-modal.component.html | 0 .../{ => files}/files-modal.component.ts | 6 +- src/app/common/configs/editor.config.ts | 1 + .../common/services/editor/editors.service.ts | 4 +- src/app/editor/code-view/view.base.ts | 9 +++ 11 files changed, 132 insertions(+), 8 deletions(-) rename src/app/common/components/modals/{files-modal.component.css => diffs/diff-modal.component.css} (100%) create mode 100644 src/app/common/components/modals/diffs/diff-modal.component.html create mode 100644 src/app/common/components/modals/diffs/diff-modal.component.ts create mode 100644 src/app/common/components/modals/files/files-modal.component.css rename src/app/common/components/modals/{ => files}/files-modal.component.html (100%) rename src/app/common/components/modals/{ => files}/files-modal.component.ts (89%) diff --git a/package.json b/package.json index dea9dbc..fd0026b 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "@angular/forms": "19.2.0", "@angular/platform-browser": "19.2.0", "ace-builds": "1.41.0", + "ace-diff": "3.0.3", "ace-linters": "1.5.3", "bootstrap": "5.3.6", "bootstrap-icons": "1.12.1", @@ -73,7 +74,7 @@ "karma-coverage": "2.2.0", "karma-jasmine": "5.1.0", "karma-jasmine-html-reporter": "2.1.0", - "typescript": "5.7.2", - "tslib": "2.3.0" + "tslib": "2.3.0", + "typescript": "5.7.2" } } \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2948efc..0a1cf7c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; import { InfoBarComponent } from './editor/info-bar/info-bar.component'; import { TabsComponent } from './editor/tabs/tabs.component'; import { EditorsComponent } from './editor/editors.component'; -import { FilesModalComponent } from "./common/components/modals/files-modal.component"; +import { FilesModalComponent } from "./common/components/modals/files/files-modal.component"; diff --git a/src/app/common/components/modals/files-modal.component.css b/src/app/common/components/modals/diffs/diff-modal.component.css similarity index 100% rename from src/app/common/components/modals/files-modal.component.css rename to src/app/common/components/modals/diffs/diff-modal.component.css diff --git a/src/app/common/components/modals/diffs/diff-modal.component.html b/src/app/common/components/modals/diffs/diff-modal.component.html new file mode 100644 index 0000000..856b298 --- /dev/null +++ b/src/app/common/components/modals/diffs/diff-modal.component.html @@ -0,0 +1,28 @@ + \ No newline at end of file diff --git a/src/app/common/components/modals/diffs/diff-modal.component.ts b/src/app/common/components/modals/diffs/diff-modal.component.ts new file mode 100644 index 0000000..fac35da --- /dev/null +++ b/src/app/common/components/modals/diffs/diff-modal.component.ts @@ -0,0 +1,69 @@ +import { Component, inject } from "@angular/core"; +import { CommonModule } from "@angular/common"; + +import { Subject, takeUntil } from 'rxjs'; + +import * as bootstrap from "bootstrap"; + +import AceDiff from 'ace-diff'; + +import 'ace-diff/dist/ace-diff.min.css'; +import 'ace-diff/dist/ace-diff-dark.min.css'; + + + +@Component({ + selector: 'diff-modal', + standalone: true, + imports: [ + CommonModule + ], + templateUrl: './diff-modal.component.html', + styleUrl: './diff-modal.component.css', + host: { + 'class': '' + } +}) +export class DiffModalComponent { + + diffModal!: bootstrap.Modal; + + + constructor() { + } + + + private ngAfterViewInit(): void { + this.loadDiffView(); + this.loadSubscribers(); + } + + private loadDiffView() { + // Notes: https://github.com/ace-diff/ace-diff + // https://ajaxorg.github.io/ace-api-docs/classes/src_ext_diff_diff_view.DiffView.html#scrollB + /* + const differ = new AceDiff({ + ace: window.ace + element: '.diff-view', + left: { + content: 'your first file content here', + }, + right: { + content: 'your second file content here', + }, + }); + */ + } + + private loadSubscribers() { + } + + private createModal() { + this.diffModal = new bootstrap.Modal("#diffModal", {}); + } + + public showModal() { + this.diffModal?.toggle(); + } + +} \ No newline at end of file diff --git a/src/app/common/components/modals/files/files-modal.component.css b/src/app/common/components/modals/files/files-modal.component.css new file mode 100644 index 0000000..0f2a2b5 --- /dev/null +++ b/src/app/common/components/modals/files/files-modal.component.css @@ -0,0 +1,16 @@ +.modal-column { + min-height: 24em; + max-height: 24em; + overflow: auto; +} + +.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); +} \ No newline at end of file diff --git a/src/app/common/components/modals/files-modal.component.html b/src/app/common/components/modals/files/files-modal.component.html similarity index 100% rename from src/app/common/components/modals/files-modal.component.html rename to src/app/common/components/modals/files/files-modal.component.html diff --git a/src/app/common/components/modals/files-modal.component.ts b/src/app/common/components/modals/files/files-modal.component.ts similarity index 89% rename from src/app/common/components/modals/files-modal.component.ts rename to src/app/common/components/modals/files/files-modal.component.ts index 1973c7e..069a1c1 100644 --- a/src/app/common/components/modals/files-modal.component.ts +++ b/src/app/common/components/modals/files/files-modal.component.ts @@ -5,10 +5,10 @@ import { Subject, takeUntil } from 'rxjs'; import * as bootstrap from "bootstrap"; -import { FilesModalService } from "../../services/editor/modals/files-modal.service"; -import { TabsService } from '../../services/editor/tabs/tabs.service'; +import { FilesModalService } from "../../../services/editor/modals/files-modal.service"; +import { TabsService } from '../../../services/editor/tabs/tabs.service'; -import { ServiceMessage } from '../../types/service-message.type'; +import { ServiceMessage } from '../../../types/service-message.type'; diff --git a/src/app/common/configs/editor.config.ts b/src/app/common/configs/editor.config.ts index 764686a..6058834 100644 --- a/src/app/common/configs/editor.config.ts +++ b/src/app/common/configs/editor.config.ts @@ -10,6 +10,7 @@ export const EditorSettings: any = { theme: "ace/theme/gruvbox", mode: "ace/mode/text", printMarginColumn: 80, + enableCodeLens: true, enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, diff --git a/src/app/common/services/editor/editors.service.ts b/src/app/common/services/editor/editors.service.ts index 8efe5ba..5a4ce76 100644 --- a/src/app/common/services/editor/editors.service.ts +++ b/src/app/common/services/editor/editors.service.ts @@ -45,11 +45,11 @@ export class EditorsService { this.editors.set(uuid, component); - if (Object.keys(this.editors).length < 1) return; + if (Array.from(this.editors.keys()).length <= 1) return; + let _editors = this.getEditorsAsArray(); let leftEditor = null; let rightEditor = null; - let _editors = this.getEditorsAsArray(); for (let i = 0; i < _editors.length; i++) { if (_editors[i].uuid !== uuid) continue; diff --git a/src/app/editor/code-view/view.base.ts b/src/app/editor/code-view/view.base.ts index 278c456..15d2e41 100644 --- a/src/app/editor/code-view/view.base.ts +++ b/src/app/editor/code-view/view.base.ts @@ -155,6 +155,15 @@ export class CodeViewBase { this.editor.renderer.showLineNumbers = false; this.editor.renderer.setShowGutter(false); +/* + this.editor.on("click", (event) => { + let editorComponent = this.editorsService.getActiveEditorComponent(); + }); + + this.editor.session.on("changeScrollTop", (event) => { + }); +*/ + this.editor.setReadOnly(true); this.editor.setFontSize(2); this.editor.setHighlightActiveLine(false);