From 186a6fb456598382752e3a085a395cb3b9acc2ae Mon Sep 17 00:00:00 2001 From: R0tenur Date: Wed, 23 Mar 2022 11:50:43 +0100 Subject: [PATCH 01/55] keep theme tags in index --- frontend/src/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/index.html b/frontend/src/index.html index b83de47..a8df16d 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -7,7 +7,8 @@ - + + From 025eed6061cf0547aeb1e9a6ceaca9af2d604208 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Wed, 23 Mar 2022 11:51:10 +0100 Subject: [PATCH 02/55] add helper css --- frontend/src/styles.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index e984c35..9c83a8c 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -19,3 +19,12 @@ body { justify-content: center; align-items: center; } +.flex { + display: flex; +} +.justify-content-between { + justify-content: space-between; +} +.muted { + color: rgb(115, 115, 115); +} From 821a826a101108c259d02536a25b421589700ff1 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Wed, 23 Mar 2022 11:52:58 +0100 Subject: [PATCH 03/55] ignore fake service from code coverage --- frontend/src/app/services/fake-db.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/services/fake-db.service.ts b/frontend/src/app/services/fake-db.service.ts index 8a94979..ffcca2e 100644 --- a/frontend/src/app/services/fake-db.service.ts +++ b/frontend/src/app/services/fake-db.service.ts @@ -1,4 +1,4 @@ -/* istanbul ignore */ +/* istanbul ignore file */ import { Injectable } from '@angular/core'; @Injectable({ From 04901660bc0e12ad16ff273523f0f2cc1e1ccf16 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Wed, 23 Mar 2022 12:41:05 +0100 Subject: [PATCH 04/55] add basic state handling with history --- frontend/src/app/state/state.spec.ts | 126 +++++++++++++++++++++++++++ frontend/src/app/state/state.ts | 38 ++++++++ 2 files changed, 164 insertions(+) create mode 100644 frontend/src/app/state/state.spec.ts create mode 100644 frontend/src/app/state/state.ts diff --git a/frontend/src/app/state/state.spec.ts b/frontend/src/app/state/state.spec.ts new file mode 100644 index 0000000..58e6cae --- /dev/null +++ b/frontend/src/app/state/state.spec.ts @@ -0,0 +1,126 @@ +import { fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { State } from './state'; + +describe('State', () => { + let state: State; + const value: Dummy = { prop: 'dummy' }; + beforeEach(() => { + TestBed.configureTestingModule({}); + state = new State(); + }); + + it('should be created', () => { + expect(state).toBeTruthy(); + }); + + it('should return set value', done => { + + // Act + state.set(value); + + state.select$.subscribe(v => { + // Assert + expect(v?.prop).toEqual(value.prop); + done(); + }); + + }); + + it('clear should clear state', fakeAsync(() => { + // Arrange + let returned: Dummy | undefined; + let set = false; + state.select$.subscribe(v => { + returned = v; + set = true; + }); + + // Act + state.set(value); + + tick(); + state.clear(); + tick(); + + // Assert + expect(set).toBeTrue(); + expect(returned).toBe(undefined as any as Dummy); + + })); + + it('undo sets previous value', () => { + // Arrange + const first: Dummy = { prop: 'first' }; + const second: Dummy = { prop: 'second' }; + + let returned: Dummy | undefined; + let set = false; + state.select$.subscribe(v => { + returned = v; + set = true; + }); + + // Act + state.set(first); + state.set(second); + state.undo(); + + // Assert + expect(set).toBeTrue(); + expect(returned?.prop).toBe(first.prop); + + }); + + it('redo sets next value', () => { + // Arrange + const first: Dummy = { prop: 'first' }; + const second: Dummy = { prop: 'second' }; + + let returned: Dummy | undefined; + let set = false; + state.select$.subscribe(v => { + returned = v; + set = true; + }); + + // Act + state.set(first); + state.set(second); + state.undo(); + state.redo(); + + // Assert + expect(set).toBeTrue(); + expect(returned?.prop).toBe(second.prop); + + }); + it('set purges the history ahead', () => { + // Arrange + const first: Dummy = { prop: 'first' }; + const second: Dummy = { prop: 'second' }; + const third: Dummy = { prop: 'third' }; + + let returned: Dummy | undefined; + let set = false; + state.select$.subscribe(v => { + returned = v; + set = true; + }); + + // Act + state.set(first); + state.set(second); + state.undo(); + state.set(third); + state.redo(); + + // Assert + expect(set).toBeTrue(); + expect(returned?.prop).toBe(third.prop); + + }); +}); + +interface Dummy { + prop: string; +} diff --git a/frontend/src/app/state/state.ts b/frontend/src/app/state/state.ts new file mode 100644 index 0000000..d00d350 --- /dev/null +++ b/frontend/src/app/state/state.ts @@ -0,0 +1,38 @@ +import { Observable, BehaviorSubject } from 'rxjs'; + +export class State { + public get select$(): Observable { + return this.state.asObservable(); + } + private currentHistoryIndex = 0; + private history: T[] = [undefined as any as T]; + private readonly state: BehaviorSubject = new BehaviorSubject(undefined as any as T); + constructor() { + } + public set(newState: T): void { + if (this.currentHistoryIndex < this.history.length - 1) { + this.history.slice(0, this.currentHistoryIndex); + } + + this.history.push(newState); + this.currentHistoryIndex = this.history.length - 1; + this.state.next(newState); + } + + public clear(): void { + this.state.next(undefined as any as T); + } + public undo(): void { + if (this.currentHistoryIndex > 0) { + this.currentHistoryIndex--; + this.state.next(this.history[this.currentHistoryIndex]); + } + } + public redo(): void { + + if (this.currentHistoryIndex < this.history.length - 1) { + this.currentHistoryIndex++; + this.state.next(this.history[this.currentHistoryIndex]); + } + } +} From 5c6bdaaae1a83324d5e1bcd6e0d232b29616c42e Mon Sep 17 00:00:00 2001 From: R0tenur Date: Wed, 23 Mar 2022 12:41:36 +0100 Subject: [PATCH 05/55] add basic state handling with history --- frontend/src/app/services/state.token.ts | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 frontend/src/app/services/state.token.ts diff --git a/frontend/src/app/services/state.token.ts b/frontend/src/app/services/state.token.ts new file mode 100644 index 0000000..8038046 --- /dev/null +++ b/frontend/src/app/services/state.token.ts @@ -0,0 +1,22 @@ +/* istanbul ignore file */ +import { InjectionToken } from '@angular/core'; +import { State } from '../state/state'; + +const states: Record = {}; + +export const StateInjector = (key: string) => { + return new InjectionToken>( + key, + { + providedIn: 'root', + factory: () => { + if (states.hasOwnProperty(key)) { + return states[key]; + } + states[key] = new State(); + + return states[key]; + }, + } + ); +}; From f0d78d7510999455e26c3c81fcb0ded6c5a36df4 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Wed, 23 Mar 2022 12:42:02 +0100 Subject: [PATCH 06/55] ignore tokens in code coverage --- frontend/src/app/services/mermaid.token.ts | 1 + frontend/src/app/services/window.token.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/frontend/src/app/services/mermaid.token.ts b/frontend/src/app/services/mermaid.token.ts index 7d69125..9cf063f 100644 --- a/frontend/src/app/services/mermaid.token.ts +++ b/frontend/src/app/services/mermaid.token.ts @@ -1,3 +1,4 @@ +/* istanbul ignore file */ import { InjectionToken } from '@angular/core'; import { Mermaid } from 'mermaid'; import mermaid from 'mermaid'; diff --git a/frontend/src/app/services/window.token.ts b/frontend/src/app/services/window.token.ts index 2a35b51..9e9f00b 100644 --- a/frontend/src/app/services/window.token.ts +++ b/frontend/src/app/services/window.token.ts @@ -1,3 +1,4 @@ +/* istanbul ignore file */ import { InjectionToken } from '@angular/core'; export const WINDOW = new InjectionToken( From 0b80ac22361e1bdfafcf1475ae586127a4763a5e Mon Sep 17 00:00:00 2001 From: R0tenur Date: Wed, 23 Mar 2022 12:44:45 +0100 Subject: [PATCH 07/55] throw away alertservice and use generic state instead --- frontend/src/app/app-testing.module.ts | 4 +- .../app/components/alert/alert.component.html | 4 +- .../components/alert/alert.component.spec.ts | 12 ++-- .../app/components/alert/alert.component.ts | 12 ++-- frontend/src/app/models/error.model.ts | 1 + .../src/app/services/alert.service.spec.ts | 56 ------------------- frontend/src/app/services/alert.service.ts | 23 -------- .../app/services/data-studio.service.spec.ts | 24 ++++---- .../src/app/services/data-studio.service.ts | 10 ++-- 9 files changed, 41 insertions(+), 105 deletions(-) delete mode 100644 frontend/src/app/services/alert.service.spec.ts delete mode 100644 frontend/src/app/services/alert.service.ts diff --git a/frontend/src/app/app-testing.module.ts b/frontend/src/app/app-testing.module.ts index b90e8db..0299392 100644 --- a/frontend/src/app/app-testing.module.ts +++ b/frontend/src/app/app-testing.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; +import { RouterTestingModule } from '@angular/router/testing'; import { ButtonComponent } from './components/button/button.component'; import { MERMAID } from './services/mermaid.token'; @@ -41,9 +42,10 @@ const fakeMermaidProvider = ({ ], imports: [ FormsModule, + RouterTestingModule.withRoutes([]), ], providers: [fakeWindowProvider], - exports: [ButtonComponent, FormsModule] + exports: [ButtonComponent, FormsModule, RouterTestingModule] }) export class AppTestingModule { } diff --git a/frontend/src/app/components/alert/alert.component.html b/frontend/src/app/components/alert/alert.component.html index 7c8f445..2a9ea59 100644 --- a/frontend/src/app/components/alert/alert.component.html +++ b/frontend/src/app/components/alert/alert.component.html @@ -1,4 +1,4 @@ -
+

An error occured!

@@ -34,5 +34,5 @@

Report it here: https://github.com/R0tenur/visualization/issues

- Dismiss + Dismiss

diff --git a/frontend/src/app/components/alert/alert.component.spec.ts b/frontend/src/app/components/alert/alert.component.spec.ts index 6be7d52..fb31e5f 100644 --- a/frontend/src/app/components/alert/alert.component.spec.ts +++ b/frontend/src/app/components/alert/alert.component.spec.ts @@ -3,16 +3,17 @@ import { By } from '@angular/platform-browser'; import { BehaviorSubject, Subject } from 'rxjs'; import { Status } from '../../../../../shared/models/status.enum'; import { AppTestingModule } from '../../app-testing.module'; -import { ChartError } from '../../models/error.model'; -import { AlertService } from '../../services/alert.service'; +import { ChartError, ChartErrorKey } from '../../models/error.model'; import { DataStudioService } from '../../services/data-studio.service'; +import { StateInjector } from '../../services/state.token'; +import { State } from '../../state/state'; import { AlertComponent } from './alert.component'; describe('AlertComponent', () => { let component: AlertComponent; let fixture: ComponentFixture; - let alertService: AlertService; + let alertService: State; let dataStudioService: DataStudioService; const alertSubject: Subject = new Subject(); const markdownSubject: BehaviorSubject = new BehaviorSubject(undefined as any as string); @@ -20,6 +21,7 @@ describe('AlertComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [AlertComponent], + providers: [{ provide: StateInjector(ChartErrorKey), useValue: new State()}], imports: [AppTestingModule], }) .compileComponents(); @@ -27,8 +29,8 @@ describe('AlertComponent', () => { afterEach(() => alertSubject.next(undefined)); beforeEach(() => { - alertService = TestBed.inject(AlertService); - spyOnProperty(alertService, 'Alert$').and.returnValue(alertSubject.asObservable()); + alertService = TestBed.inject>(StateInjector(ChartErrorKey)); + spyOnProperty(alertService, 'select$').and.returnValue(alertSubject.asObservable()); dataStudioService = TestBed.inject(DataStudioService); spyOnProperty(dataStudioService, 'Markdown$').and.returnValue(markdownSubject.asObservable()); diff --git a/frontend/src/app/components/alert/alert.component.ts b/frontend/src/app/components/alert/alert.component.ts index f4499f8..e6dee6d 100644 --- a/frontend/src/app/components/alert/alert.component.ts +++ b/frontend/src/app/components/alert/alert.component.ts @@ -1,7 +1,8 @@ -import { Component } from '@angular/core'; -import { ChartError } from '../../models/error.model'; -import { AlertService } from '../../services/alert.service'; +import { Component, Inject } from '@angular/core'; +import { ChartError, ChartErrorKey } from '../../models/error.model'; import { DataStudioService } from '../../services/data-studio.service'; +import { StateInjector } from '../../services/state.token'; +import { State} from '../../state/state'; @Component({ selector: 'app-alert', @@ -9,7 +10,10 @@ import { DataStudioService } from '../../services/data-studio.service'; styleUrls: ['./alert.component.scss'] }) export class AlertComponent { - constructor(public readonly alertService: AlertService, public readonly az: DataStudioService) {} + constructor( + @Inject(StateInjector(ChartErrorKey)) public readonly state: State, + public readonly az: DataStudioService) { } + public exportMarkdown(markdown: string): void { this.az.saveCommand({ mermaid: markdown }); } diff --git a/frontend/src/app/models/error.model.ts b/frontend/src/app/models/error.model.ts index 8499491..e2da7a7 100644 --- a/frontend/src/app/models/error.model.ts +++ b/frontend/src/app/models/error.model.ts @@ -1,5 +1,6 @@ import { Status } from '../../../../shared/models/status.enum'; +export const ChartErrorKey = 'ChartErrorKey'; export interface ChartError { status: Status; errors: string[]; diff --git a/frontend/src/app/services/alert.service.spec.ts b/frontend/src/app/services/alert.service.spec.ts deleted file mode 100644 index 40d8e4d..0000000 --- a/frontend/src/app/services/alert.service.spec.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { fakeAsync, TestBed, tick } from '@angular/core/testing'; -import { take } from 'rxjs/operators'; -import { Status } from '../../../../shared/models/status.enum'; -import { ChartError } from '../models/error.model'; - -import { AlertService } from './alert.service'; - -describe('AlertService', () => { - let alertService: AlertService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - alertService = TestBed.inject(AlertService); - }); - - it('should be created', () => { - expect(alertService).toBeTruthy(); - }); - describe('showError', () => { - it('should trigger alert', done => { - // Arrange - const chartError = createChartError(); - - // Act - alertService.showError(chartError); - alertService.Alert$.pipe(take(1)).subscribe(alert => { - // Assert - expect(alert).toBe(chartError); - done(); - }); - }); - }); - - describe('dismissError', () => { - it('should dismiss alert', (done) => { - // Arrange - const chartError = createChartError(); - // Act - alertService.showError(chartError); - alertService.dismissError(); - alertService.Alert$.pipe(take(1)).subscribe(alert => { - // Assert - expect(alert).toBeUndefined(); - done(); - }); - }); - }); - - const createChartError = (errorMessage: string = 'err') => { - const errors = [errorMessage]; - const rawData = 'rawData'; - const status = Status.Error; - const chartError: ChartError = { errors, rawData, status }; - return chartError; - }; -}); diff --git a/frontend/src/app/services/alert.service.ts b/frontend/src/app/services/alert.service.ts deleted file mode 100644 index 41ae772..0000000 --- a/frontend/src/app/services/alert.service.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Injectable } from '@angular/core'; -import { Observable, BehaviorSubject } from 'rxjs'; -import { ChartError } from '../models/error.model'; - -@Injectable({ - providedIn: 'root' -}) -export class AlertService { - - public get Alert$(): Observable { - return this.alert$.asObservable(); - } - - private alert$: BehaviorSubject = new BehaviorSubject(undefined as any as ChartError); - - public showError(error: ChartError): void { - this.alert$.next(error); - } - - public dismissError(): void { - this.alert$.next(undefined as any as ChartError); - } -} diff --git a/frontend/src/app/services/data-studio.service.spec.ts b/frontend/src/app/services/data-studio.service.spec.ts index 1418534..477043e 100644 --- a/frontend/src/app/services/data-studio.service.spec.ts +++ b/frontend/src/app/services/data-studio.service.spec.ts @@ -1,7 +1,6 @@ import { fakeAsync, TestBed, tick } from '@angular/core/testing'; import { Status } from '../../../../shared/models/status.enum'; import { AppTestingModule } from '../app-testing.module'; -import { AlertService } from './alert.service'; import { DataStudioService } from './data-studio.service'; import { WINDOW } from './window.token'; @@ -9,18 +8,23 @@ import { Subject, Subscription } from 'rxjs'; import { Mermaid } from 'mermaid'; import { MERMAID } from './mermaid.token'; import { Exportable } from '../models/exportable.model'; +import { StateInjector } from './state.token'; +import { ChartError, ChartErrorKey } from '../models/error.model'; +import { State } from '../state/state'; describe('DataStudioService', () => { let dataStudioService: DataStudioService; - let alert: AlertService; + let alert: State; let windowRef: Window; let mermaid: Mermaid; beforeEach(() => { TestBed.configureTestingModule({ - imports: [AppTestingModule] + imports: [AppTestingModule], + providers: [{ provide: StateInjector(ChartErrorKey), useValue: new State() }], + }); - alert = TestBed.inject(AlertService); + alert = TestBed.inject(StateInjector(ChartErrorKey)); windowRef = TestBed.inject(WINDOW); mermaid = TestBed.inject(MERMAID); dataStudioService = TestBed.inject(DataStudioService); @@ -97,7 +101,7 @@ describe('DataStudioService', () => { }); it('should trigger error alert when status error', fakeAsync(() => { // Arrange - spyOn(alert, 'showError'); + spyOn(alert, 'set'); const statusSubscription = dataStudioService.Status$.subscribe(); const status = Status.Error; @@ -115,7 +119,7 @@ describe('DataStudioService', () => { tick(); // Assert - expect(alert.showError).toHaveBeenCalledWith({ status, errors, rawData: JSON.stringify(rawData) }); + expect(alert.set).toHaveBeenCalledWith({ status, errors, rawData: JSON.stringify(rawData) }); statusSubscription.unsubscribe(); })); describe('Database$', () => { @@ -131,7 +135,7 @@ describe('DataStudioService', () => { }); it('should render mermaid to svg', fakeAsync(() => { // Arrange - spyOn(alert, 'showError'); + spyOn(alert, 'set'); const markdown = 'dummyMarkdown'; const svg = 'dummySVG'; @@ -147,13 +151,13 @@ describe('DataStudioService', () => { tick(); // Assert - expect(alert.showError).not.toHaveBeenCalled(); + expect(alert.set).not.toHaveBeenCalled(); expect(database).toEqual({ svg, mermaid: markdown }); })); it('should propagate mermaid errors to alert', fakeAsync(() => { // Arrange - spyOn(alert, 'showError'); + spyOn(alert, 'set'); const markdown = 'dummyMarkdown'; const errorMsg = 'errorMessage'; @@ -170,7 +174,7 @@ describe('DataStudioService', () => { tick(); // Assert - expect(alert.showError).toHaveBeenCalled(); + expect(alert.set).toHaveBeenCalled(); })); }); diff --git a/frontend/src/app/services/data-studio.service.ts b/frontend/src/app/services/data-studio.service.ts index 061d97f..18fabf8 100644 --- a/frontend/src/app/services/data-studio.service.ts +++ b/frontend/src/app/services/data-studio.service.ts @@ -2,11 +2,13 @@ import { Inject, Injectable } from '@angular/core'; import { concat, fromEvent, Observable, ReplaySubject, Subject } from 'rxjs'; import { filter, map, switchMap, tap } from 'rxjs/operators'; import { Status } from '../../../../shared/models/status.enum'; -import { AlertService } from './alert.service'; import { Exportable } from '../models/exportable.model'; import { WINDOW } from './window.token'; import { MERMAID } from './mermaid.token'; import { Mermaid } from 'mermaid'; +import { State } from '../state/state'; +import { ChartError, ChartErrorKey } from '../models/error.model'; +import { StateInjector } from './state.token'; declare const acquireVsCodeApi: () => ({ postMessage: (message: any) => void; }); @@ -50,13 +52,13 @@ export class DataStudioService { constructor( @Inject(WINDOW) private readonly window: Window, @Inject(MERMAID) private readonly mermaid: Mermaid, - private readonly alert: AlertService) { + @Inject(StateInjector(ChartErrorKey)) public readonly alert: State) { this.initializeMermaid(); const azEvent$ = fromEvent(this.window, 'message').pipe( tap(event => { if (event.data.status === Status.Error) { - this.alert.showError({ + this.alert.set({ status: event.data.status, errors: event.data.errors, rawData: JSON.stringify(event.data.rawData) @@ -122,7 +124,7 @@ export class DataStudioService { this.clientStatus$.next(Status.GeneratingSvg); } catch (e: any) { this.clientStatus$.next(Status.Error); - this.alert.showError({ + this.alert.set({ status: Status.Complete, errors: [ e.message, From 7141437b11629d7f421940cc19695f0bbaa87cac Mon Sep 17 00:00:00 2001 From: R0tenur Date: Wed, 23 Mar 2022 20:34:08 +0100 Subject: [PATCH 08/55] add support for context menu --- .../context-menu/context-menu.component.html | 7 ++ .../context-menu/context-menu.component.scss | 29 ++++++++ .../context-menu.component.spec.ts | 68 +++++++++++++++++++ .../context-menu/context-menu.component.ts | 18 +++++ frontend/src/app/models/context-menu.model.ts | 16 +++++ 5 files changed, 138 insertions(+) create mode 100644 frontend/src/app/components/context-menu/context-menu.component.html create mode 100644 frontend/src/app/components/context-menu/context-menu.component.scss create mode 100644 frontend/src/app/components/context-menu/context-menu.component.spec.ts create mode 100644 frontend/src/app/components/context-menu/context-menu.component.ts create mode 100644 frontend/src/app/models/context-menu.model.ts diff --git a/frontend/src/app/components/context-menu/context-menu.component.html b/frontend/src/app/components/context-menu/context-menu.component.html new file mode 100644 index 0000000..e659fe8 --- /dev/null +++ b/frontend/src/app/components/context-menu/context-menu.component.html @@ -0,0 +1,7 @@ +
+
    +
  • + {{item.label}}{{item.shortcut ? item.shortcut : ''}} +
    • +
+
diff --git a/frontend/src/app/components/context-menu/context-menu.component.scss b/frontend/src/app/components/context-menu/context-menu.component.scss new file mode 100644 index 0000000..eaed054 --- /dev/null +++ b/frontend/src/app/components/context-menu/context-menu.component.scss @@ -0,0 +1,29 @@ +.context-menu { + position: absolute; + width: 200px; + z-index: 9999999; + border: 1px solid rgb(146, 143, 143); + border-radius: .5rem; + font-size: .8em; + padding-top: .4rem; + padding-bottom: .4rem; + cursor: grab; +} + +ul { + list-style-type: none; + line-height: 150%; + padding-left: 0; + margin-top: 0; + margin-bottom: 0; +} +li { + margin-left: .2rem; + margin-right: .2rem; + border-radius: .3rem; + text-indent: -2em; + padding-left: 2.5em; + &:hover { + background-color: gray; + } +} diff --git a/frontend/src/app/components/context-menu/context-menu.component.spec.ts b/frontend/src/app/components/context-menu/context-menu.component.spec.ts new file mode 100644 index 0000000..12a44b5 --- /dev/null +++ b/frontend/src/app/components/context-menu/context-menu.component.spec.ts @@ -0,0 +1,68 @@ +import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { BehaviorSubject } from 'rxjs'; +import { ContextMenu, contextMenuStateKey } from '../../models/context-menu.model'; +import { ContextMenuService } from '../../services/context-menu.service'; +import { StateInjector } from '../../services/state.token'; +import { State } from '../../state/state'; + +import { ContextMenuComponent } from './context-menu.component'; + +describe('ContextMenuComponent', () => { + let component: ContextMenuComponent; + let fixture: ComponentFixture; + let state: State; + let contextMenuSubject: BehaviorSubject; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ContextMenuComponent], + providers: [{ provide: StateInjector(contextMenuStateKey), useValue: new State() }], + + }) + .compileComponents(); + }); + + beforeEach(() => { + contextMenuSubject = new BehaviorSubject(undefined as any as ContextMenu); + state = TestBed.inject(StateInjector(contextMenuStateKey)); + spyOnProperty(state, 'select$').and.returnValue(contextMenuSubject.asObservable()); + fixture = TestBed.createComponent(ContextMenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should not show menu when not open', () => { + expect(fixture.nativeElement.querySelector('.context-menu')).toBeFalsy(); + }); + + it('should show menu when value', () => { + // Act + contextMenuSubject.next({items: [], position: { x: 1, y: 1 }}); + fixture.detectChanges(); + + // Assert + expect(fixture.nativeElement.querySelector('.context-menu')).toBeTruthy(); + }); + + it('should trigger event when clicked', fakeAsync(() => { + // Arragne + const menuItem = { label: 'dummy', event: jasmine.createSpy() }; + spyOn(state, 'clear'); + + // Act + contextMenuSubject.next({ items: [menuItem], position: { x: 1, y: 1 } }); + fixture.detectChanges(); + tick(); + const listItem = fixture.nativeElement.querySelector('li'); + listItem.click(); + tick(); + + // Assert + expect(menuItem.event).toHaveBeenCalled(); + expect(state.clear).toHaveBeenCalled(); + })); +}); diff --git a/frontend/src/app/components/context-menu/context-menu.component.ts b/frontend/src/app/components/context-menu/context-menu.component.ts new file mode 100644 index 0000000..7185b98 --- /dev/null +++ b/frontend/src/app/components/context-menu/context-menu.component.ts @@ -0,0 +1,18 @@ +import { Component, Inject } from '@angular/core'; +import { ContextMenu, ContextMenuItem, contextMenuStateKey } from '../../models/context-menu.model'; +import { StateInjector } from '../../services/state.token'; +import { State } from '../../state/state'; + +@Component({ + selector: 'app-context-menu', + templateUrl: './context-menu.component.html', + styleUrls: ['./context-menu.component.scss'] +}) +export class ContextMenuComponent { + + constructor(@Inject(StateInjector(contextMenuStateKey)) public readonly state: State) { } + public handleEvent(item: ContextMenuItem): void { + item.event(); + this.state.clear(); + } +} diff --git a/frontend/src/app/models/context-menu.model.ts b/frontend/src/app/models/context-menu.model.ts new file mode 100644 index 0000000..afbaf41 --- /dev/null +++ b/frontend/src/app/models/context-menu.model.ts @@ -0,0 +1,16 @@ +import { Position } from './position.model'; + +export const contextMenuStateKey = 'ContextMenuState'; + +export interface ContextMenu { + items: ContextMenuItem[]; + position: Position; +} + +export interface ContextMenuItem { + label: string; + shortcut?: string; + event: () => void; + subMenu?: ContextMenu; +} + From 143e81b4fed1429597a6f1c0554b64dee1b29670 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 24 Mar 2022 12:07:03 +0100 Subject: [PATCH 09/55] add position --- frontend/src/app/models/position.model.ts | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 frontend/src/app/models/position.model.ts diff --git a/frontend/src/app/models/position.model.ts b/frontend/src/app/models/position.model.ts new file mode 100644 index 0000000..09614ba --- /dev/null +++ b/frontend/src/app/models/position.model.ts @@ -0,0 +1,4 @@ +export interface Position { + x: number; + y: number; +} From 627d707721219664d86b3f182c722cd3063c0dd6 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Mon, 28 Mar 2022 21:30:03 +0200 Subject: [PATCH 10/55] add basic and probably temporary menu to reach builder --- .../src/app/components/bar/bar.component.html | 2 + .../app/components/bar/bar.component.spec.ts | 37 +++++++++++++++++++ .../src/app/components/bar/bar.component.ts | 16 ++++++++ 3 files changed, 55 insertions(+) create mode 100644 frontend/src/app/components/bar/bar.component.html create mode 100644 frontend/src/app/components/bar/bar.component.spec.ts create mode 100644 frontend/src/app/components/bar/bar.component.ts diff --git a/frontend/src/app/components/bar/bar.component.html b/frontend/src/app/components/bar/bar.component.html new file mode 100644 index 0000000..33cd2e5 --- /dev/null +++ b/frontend/src/app/components/bar/bar.component.html @@ -0,0 +1,2 @@ +OverviewBuilder (Beta) +
diff --git a/frontend/src/app/components/bar/bar.component.spec.ts b/frontend/src/app/components/bar/bar.component.spec.ts new file mode 100644 index 0000000..42fdc91 --- /dev/null +++ b/frontend/src/app/components/bar/bar.component.spec.ts @@ -0,0 +1,37 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { Router } from '@angular/router'; +import { AppTestingModule } from '../../app-testing.module'; + +import { BarComponent } from './bar.component'; + +describe('BarComponent', () => { + let component: BarComponent; + let fixture: ComponentFixture; + let router: Router; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AppTestingModule], + declarations: [BarComponent] + }) + .compileComponents(); + }); + + beforeEach(() => { + router = TestBed.inject(Router); + spyOn(router, 'navigate'); + fixture = TestBed.createComponent(BarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + it('should navigate to path', () => { + // Act + component.navigate('/builder'); + // Assert + expect(router.navigate).toHaveBeenCalledWith(['/builder']); + }); +}); diff --git a/frontend/src/app/components/bar/bar.component.ts b/frontend/src/app/components/bar/bar.component.ts new file mode 100644 index 0000000..ef2be80 --- /dev/null +++ b/frontend/src/app/components/bar/bar.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-bar', + templateUrl: './bar.component.html', +}) +export class BarComponent { + + constructor(private readonly router: Router) { } + + public navigate(route: string): void { + this.router.navigate([route]); + } + +} From 264d0b0d3ce7dd4b3dbac926ad83a3b8831cc52d Mon Sep 17 00:00:00 2001 From: R0tenur Date: Mon, 28 Mar 2022 21:33:05 +0200 Subject: [PATCH 11/55] get rid of input from mermaid viewer and make it self sustained --- .../mermaid-viewer.component.html | 15 +-- .../mermaid-viewer.component.spec.ts | 3 +- .../mermaid-viewer.component.ts | 101 ++++++++++++------ 3 files changed, 76 insertions(+), 43 deletions(-) diff --git a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.html b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.html index 43c1bcd..e04b8c5 100644 --- a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.html +++ b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.html @@ -1,8 +1,11 @@ -Reset zoom -
-
- -
+
+ Export + Reset zoom +
+
+ +
-
+
+
diff --git a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.spec.ts b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.spec.ts index 573396b..ad10bf7 100644 --- a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.spec.ts +++ b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.spec.ts @@ -18,8 +18,7 @@ describe('MermaidViewerComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(MermaidViewerComponent); component = fixture.componentInstance; - component.darkmode = true; - component.svg = sampleSvg; + fixture.detectChanges(); }); diff --git a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts index 9a0c731..bb5b0b0 100644 --- a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts +++ b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts @@ -1,23 +1,24 @@ -import { AfterViewInit, Component, ElementRef, HostListener, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { Component, HostListener, OnDestroy } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { BehaviorSubject, Observable, Subscription } from 'rxjs'; +import { take } from 'rxjs/operators'; +import { Exportable } from '../../models/exportable.model'; +import { DataStudioService } from '../../services/data-studio.service'; @Component({ selector: 'app-mermaid-viewer', templateUrl: './mermaid-viewer.component.html', styleUrls: ['./mermaid-viewer.component.scss'] }) -export class MermaidViewerComponent implements OnInit, AfterViewInit, OnDestroy { +export class MermaidViewerComponent implements OnDestroy { private readonly mermaidSvgId: string = 'mermaidSvgChart'; - @Input() public darkmode!: boolean; - @Input() public svg!: string; - @Input() public safeSvg!: SafeHtml; - @ViewChild('svgContainer') - svgContainer!: ElementRef; public get ViewBoxString(): string { return `${this.viewBox.value.x / this.scale} ${this.viewBox.value.y / this.scale} ${this.viewBox.value.w / this.scale} ${this.viewBox.value.h / this.scale}`; } + public get Database$(): Observable { + return this.dataStudioService.Database$; + } - private viewBoxSubscription!: Subscription; + public safeSvg!: SafeHtml; private svgElement!: SVGElement; private isPanning = false; private viewBox: BehaviorSubject = new BehaviorSubject(null); @@ -25,17 +26,22 @@ export class MermaidViewerComponent implements OnInit, AfterViewInit, OnDestroy public scale = 0.8; private startPoint: { x: number, y: number } = { x: 0, y: 0 }; private endPoint: { x: number, y: number } = { x: 0, y: 0 }; - public get Svg$(): Observable<(SafeHtml | null)> { - return this.svg$.asObservable(); - } - public svg$: BehaviorSubject = new BehaviorSubject(null); - constructor(public readonly sanitizer: DomSanitizer) { } - ngOnInit(): void { - this.safeSvg = this.sanitizer.bypassSecurityTrustHtml(this.svg); - } - public ngAfterViewInit(): void { - this.setupSvgHandling(); + private loaded = false; + public database: Exportable | undefined; + private viewBoxSubscription!: Subscription; + + + constructor(private readonly sanitizer: DomSanitizer, private readonly dataStudioService: DataStudioService) { + this.dataStudioService + .Database$.pipe(take(1)).subscribe(d => { + if (!this.database) { + this.database = d; + this.safeSvg = this.safeHtml(d.svg); + + } + }); } + public ngOnDestroy(): void { if (this.viewBoxSubscription) { this.viewBoxSubscription.unsubscribe(); @@ -49,10 +55,16 @@ export class MermaidViewerComponent implements OnInit, AfterViewInit, OnDestroy public refreshZoom(): void { this.viewBox.next(this.viewBox.value); } + public exportSvg(svg: string, markdown: string): void { + this.dataStudioService.saveCommand({ chart: svg, mermaid: markdown }); + } @HostListener('body:wheel', ['$event']) public refreshZoom2(e: WheelEvent): void { + if (!this.loaded) { + return; + } this.scale += (-e.deltaY / 100); if (this.scale < 0.1) { @@ -65,23 +77,11 @@ export class MermaidViewerComponent implements OnInit, AfterViewInit, OnDestroy this.viewBox.next(this.viewBox.value); } - private setupSvgHandling(): void { - this.svgElement = document.querySelector('#' + this.mermaidSvgId) as any as SVGElement; - this.svgSize = { w: this.svgElement.clientWidth, h: this.svgElement.clientHeight }; - this.viewBox.next({ x: 0, y: 0, ...this.svgSize }); - this.startPoint = { x: 0, y: 0 }; - this.endPoint = { x: 0, y: 0 }; - document.getElementById(this.mermaidSvgId)?.removeAttribute('style'); - document.getElementById(this.mermaidSvgId)?.removeAttribute('height'); - document.getElementById(this.mermaidSvgId)?.removeAttribute('width'); - setTimeout(() => { - this.viewBoxSubscription = this.viewBox.asObservable().subscribe(() => { - document.getElementById(this.mermaidSvgId)?.setAttribute('viewBox', this.ViewBoxString); - }); - }, 60); - } @HostListener('body:mousedown', ['$event']) private startPan(e: MouseEvent): boolean { + if (!this.loaded) { + return true; + } if (!(e.target as any).classList.contains('zoom')) { this.isPanning = true; this.startPoint = { x: e.x, y: e.y }; @@ -90,7 +90,7 @@ export class MermaidViewerComponent implements OnInit, AfterViewInit, OnDestroy } @HostListener('body:mousemove', ['$event']) private panning(e: MouseEvent): boolean { - if (this.isPanning) { + if (this.isPanning && this.loaded) { this.endPoint = { x: e.x, y: e.y }; let dx = (this.startPoint.x - this.endPoint.x - 5) / (10); let dy = (this.startPoint.y - this.endPoint.y - 5) / (10); @@ -112,9 +112,40 @@ export class MermaidViewerComponent implements OnInit, AfterViewInit, OnDestroy } @HostListener('body:mouseup', ['$event']) private panEnd(): boolean { - if (this.isPanning) { + if (this.isPanning && this.loaded) { + this.isPanning = false; } return true; } + + private setupSvgHandling(): void { + setTimeout(() => { + this.svgElement = document.querySelector('#' + this.mermaidSvgId) as any as SVGElement; + this.removeMermaidAttributes(); + this.svgSize = { w: this.svgElement.clientWidth, h: this.svgElement.clientHeight }; + this.viewBox.next({ x: 0, y: 0, ...this.svgSize }); + this.startPoint = { x: 0, y: 0 }; + this.endPoint = { x: 0, y: 0 }; + this.loaded = true; + }, 40); + + setTimeout(() => { + this.viewBoxSubscription = this.viewBox.asObservable().subscribe(() => { + document.getElementById(this.mermaidSvgId)?.setAttribute('viewBox', this.ViewBoxString); + }); + + }, 200); + } + private safeHtml(svg: string): SafeHtml { + this.setupSvgHandling(); + return this.sanitizer.bypassSecurityTrustHtml(svg); + } + + private removeMermaidAttributes(): void { + document.getElementById(this.mermaidSvgId)?.removeAttribute('style'); + document.getElementById(this.mermaidSvgId)?.removeAttribute('height'); + document.getElementById(this.mermaidSvgId)?.removeAttribute('width'); + document.getElementById(this.mermaidSvgId)?.removeAttribute('viewBox'); + } } From 393da17f0af0e6a2f9e75a924efecc167b04bc9b Mon Sep 17 00:00:00 2001 From: R0tenur Date: Mon, 28 Mar 2022 21:37:56 +0200 Subject: [PATCH 12/55] add border to prevent button rezise on hover --- frontend/src/app/components/button/button.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/components/button/button.component.scss b/frontend/src/app/components/button/button.component.scss index 4797985..8927ceb 100644 --- a/frontend/src/app/components/button/button.component.scss +++ b/frontend/src/app/components/button/button.component.scss @@ -4,7 +4,7 @@ text-decoration: none; background: none; padding: 10px; - + border: 2px solid var(--vscode-background); display: inline-block; transition: all 0.4s ease 0s; border: none; From 661fd57f708d2107da1ea32bfa2173838ed582cd Mon Sep 17 00:00:00 2001 From: R0tenur Date: Wed, 30 Mar 2022 12:42:40 +0200 Subject: [PATCH 13/55] add basic add and rename features --- .../src/app/services/builder.service.spec.ts | 110 ++++++++++++++++++ frontend/src/app/services/builder.service.ts | 68 +++++++++++ 2 files changed, 178 insertions(+) create mode 100644 frontend/src/app/services/builder.service.spec.ts create mode 100644 frontend/src/app/services/builder.service.ts diff --git a/frontend/src/app/services/builder.service.spec.ts b/frontend/src/app/services/builder.service.spec.ts new file mode 100644 index 0000000..595af12 --- /dev/null +++ b/frontend/src/app/services/builder.service.spec.ts @@ -0,0 +1,110 @@ +import { TestBed } from '@angular/core/testing'; +import { BehaviorSubject } from 'rxjs'; +import { builderKey } from '../models/builder.model'; +import { Column } from '../models/column.model'; +import { Table } from '../models/table-svg.model'; +import { State } from '../state/state'; + +import { BuilderService } from './builder.service'; +import { StateInjector } from './state.token'; + +describe('BuilderService', () => { + let service: BuilderService; + let state: State; + let stateSubject: BehaviorSubject; + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [{ provide: StateInjector(builderKey), useValue: new State() }], + }); + state = TestBed.inject>(StateInjector(builderKey)); + spyOn(state, 'set'); + stateSubject = new BehaviorSubject(undefined as any as Table[]); + spyOnProperty(state, 'select$').and.returnValue(stateSubject.asObservable()); + service = TestBed.inject(BuilderService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); + + describe('setTable', () => { + it('should set as new array', () => { + // Arrange + const arr = [new Table('table', 'dummy')]; + // Act + service.setTables(arr); + expect(state.set).toHaveBeenCalledWith(arr); + }); + }); + + describe('addTable', () => { + it('should add table', async () => { + // Arrange + const arr = [new Table('table', 'dummy')]; + stateSubject.next(arr); + const newTable = new Table('new table', 'dummy'); + + // Act + await service.addTable(newTable); + + // Assert + expect(state.set).toHaveBeenCalledWith([...arr, newTable]); + }); + }); + + describe('renameTable', () => { + it('should rename table', async () => { + // Arrange + const table = new Table('table', 'dummy'); + const arr = [table]; + stateSubject.next(arr); + const newName = 'new name'; + + // Act + await service.renameTable(table, newName); + + // Assert + expect(state.set).toHaveBeenCalledWith([new Table(newName, 'dummy')]); + }); + }); + + describe('addColumn', () => { + it('should add column', async () => { + // Arrange + const table = new Table('table', 'dummy'); + const arr = [table]; + stateSubject.next(arr); + const newName = 'new name'; + + // Act + await service.addColumn(table, newName); + + // Assert + const expected = new Table('table', 'dummy'); + expected.columns.push(new Column(0, table, newName)); + expect(state.set).toHaveBeenCalledWith([expected]); + }); + }); + + describe('renameColumn', () => { + it('should rename column', async () => { + // Arrange + const table = new Table('table', 'dummy'); + const arr = [table]; + stateSubject.next(arr); + const oldName = 'old name'; + const newName = 'new name'; + await service.addColumn(table, oldName); + + const column = new Column(0, table, oldName); + // Act + await service.renameColumn(table, column, newName); + + // Assert + const expected = new Table('table', 'dummy'); + expected.columns.push(new Column(0, table, newName)); + expect(state.set).toHaveBeenCalledWith([expected]); + }); + }); + +}); diff --git a/frontend/src/app/services/builder.service.ts b/frontend/src/app/services/builder.service.ts new file mode 100644 index 0000000..a806efe --- /dev/null +++ b/frontend/src/app/services/builder.service.ts @@ -0,0 +1,68 @@ +import { Inject, Injectable } from '@angular/core'; +import { take } from 'rxjs/operators'; +import { builderKey } from '../models/builder.model'; +import { Column } from '../models/column.model'; +import { Table } from '../models/table-svg.model'; +import { State } from '../state/state'; +import { StateInjector } from './state.token'; + +@Injectable({ + providedIn: 'root' +}) +export class BuilderService { + + constructor(@Inject(StateInjector(builderKey)) public readonly state: State) { + this.state.set([]); + } + public setTables(tables: Table[]): void { + this.state.set([...tables]); + } + public async addTable(table: Table): Promise { + const tables = await this.getTables(); + if (tables) { + this.state.set([...tables, table]); + } + } + + public async renameTable(table: Table, newName: string): Promise { + const tables = await this.getTables(); + if (tables) { + const tableIndex = tables.findIndex(t => t.name === table.name && t.schema === table.schema); + tables[tableIndex].name = newName; + this.state.set(tables); + } + } + public async addColumn(table: Table, columnName: string): Promise { + const tables = await this.getTables(); + if (tables) { + const tableRef = tables.find(t => t.name === table.name && t.schema === table.schema); + if (!tableRef) { return; } + + const column = new Column( + tableRef.columns.length, + tableRef, + columnName); + + tableRef.columns.push(column); + + this.state.set(tables); + } + } + + public async renameColumn(table: Table, column: Column, newName: string): Promise { + const tables = await this.getTables(); + if (tables) { + const tableRef = tables.find(t => t.name === table.name && t.schema === table.schema); + if (!tableRef) { return; } + + tableRef.columns[column.index].name = newName; + + this.state.set(tables); + } + } + private async getTables(): Promise { + const tables = await this.state.select$.pipe(take(1)).toPromise(); + + return [...tables]; + } +} From 11c9706e516c06e244a89cbe1e5df1a131f73f18 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Wed, 30 Mar 2022 12:43:08 +0200 Subject: [PATCH 14/55] remove unsused test file for dev stuff --- .../dev-bar/dev-bar.component.spec.ts | 27 ------------------- 1 file changed, 27 deletions(-) delete mode 100644 frontend/src/app/components/dev-bar/dev-bar.component.spec.ts diff --git a/frontend/src/app/components/dev-bar/dev-bar.component.spec.ts b/frontend/src/app/components/dev-bar/dev-bar.component.spec.ts deleted file mode 100644 index 3f43eda..0000000 --- a/frontend/src/app/components/dev-bar/dev-bar.component.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { AppTestingModule } from '../../app-testing.module'; - -import { DevBarComponent } from './dev-bar.component'; - -describe('DevBarComponent', () => { - let component: DevBarComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [DevBarComponent], - imports: [AppTestingModule], - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(DevBarComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); From 985df8ecb3990e4ec593b9c3c100d3c8511c693d Mon Sep 17 00:00:00 2001 From: R0tenur Date: Wed, 30 Mar 2022 12:44:42 +0200 Subject: [PATCH 15/55] ignore testing module from coverage --- frontend/src/app/app-testing.module.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/app-testing.module.ts b/frontend/src/app/app-testing.module.ts index 0299392..77677d8 100644 --- a/frontend/src/app/app-testing.module.ts +++ b/frontend/src/app/app-testing.module.ts @@ -1,5 +1,6 @@ +/* istanbul ignore file */ import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterTestingModule } from '@angular/router/testing'; import { ButtonComponent } from './components/button/button.component'; @@ -41,11 +42,11 @@ const fakeMermaidProvider = ({ ButtonComponent, ], imports: [ - FormsModule, RouterTestingModule.withRoutes([]), + ReactiveFormsModule ], providers: [fakeWindowProvider], - exports: [ButtonComponent, FormsModule, RouterTestingModule] + exports: [ButtonComponent, RouterTestingModule, ReactiveFormsModule] }) export class AppTestingModule { } From 4bc248fb66dc166ac38ebff1503ed5c3feeeeaa9 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Wed, 30 Mar 2022 12:50:35 +0200 Subject: [PATCH 16/55] set more suitable constants for the chart --- frontend/src/app/settings/constants.ts | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/frontend/src/app/settings/constants.ts b/frontend/src/app/settings/constants.ts index 581aed6..7f8a69c 100644 --- a/frontend/src/app/settings/constants.ts +++ b/frontend/src/app/settings/constants.ts @@ -4,25 +4,29 @@ const border = '--vscode-editorWidget-border'; const getCssVariable = (variable: string) => getComputedStyle(document.documentElement) .getPropertyValue(variable); + export interface Constants { tableWidth: number; padding: number; - margin: number; - headerHeight: number; + titleMargin: number; + titleHeight: number; + columnHeight: number; + columnMargin: number; fontSize: number; - tablesOnRow: number; + borderWidth: number; backgroundColor: string; fontColor: string; borderColor: string; } export default { tableWidth: 200, - padding: 25, - margin: 30, - headerHeight: 60, - fontSize: 12, - tablesOnRow: 4, - backgroundColor: getCssVariable(background), - fontColor: getCssVariable(forground), - borderColor: getCssVariable(border), + padding: 18, + titleMargin: 30, + titleHeight: 25, + borderWidth: 2, + columnHeight: 20, + fontSize: 16, + backgroundColor: getCssVariable(background) || getComputedStyle(document.body).backgroundColor, + fontColor: getCssVariable(forground) || getComputedStyle(document.body).color, + borderColor: getCssVariable(border) || getComputedStyle(document.body).color, } as Constants; From 8461c4fa279923fccdf7df6b10d891c3f59e140b Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 15:38:08 +0200 Subject: [PATCH 17/55] add models for new builder --- frontend/src/app/models/add-relation.model.ts | 8 ++ frontend/src/app/models/builder.model.ts | 1 + frontend/src/app/models/column.model.ts | 24 ++++++ frontend/src/app/models/relation.model.ts | 73 +++++++++++++++++++ frontend/src/app/models/rename.model.ts | 11 +++ frontend/src/app/models/svg-position.model.ts | 6 ++ frontend/src/app/models/table-svg.model.ts | 57 +++++++++++++++ 7 files changed, 180 insertions(+) create mode 100644 frontend/src/app/models/add-relation.model.ts create mode 100644 frontend/src/app/models/builder.model.ts create mode 100644 frontend/src/app/models/column.model.ts create mode 100644 frontend/src/app/models/relation.model.ts create mode 100644 frontend/src/app/models/rename.model.ts create mode 100644 frontend/src/app/models/svg-position.model.ts create mode 100644 frontend/src/app/models/table-svg.model.ts diff --git a/frontend/src/app/models/add-relation.model.ts b/frontend/src/app/models/add-relation.model.ts new file mode 100644 index 0000000..a75e229 --- /dev/null +++ b/frontend/src/app/models/add-relation.model.ts @@ -0,0 +1,8 @@ +import { Column } from './column.model'; +import { Position } from './position.model'; +export const addRelationKey = 'columnRelationKey'; + +export interface AddRelation { + column: Column; + position: Position; +} diff --git a/frontend/src/app/models/builder.model.ts b/frontend/src/app/models/builder.model.ts new file mode 100644 index 0000000..ae253cb --- /dev/null +++ b/frontend/src/app/models/builder.model.ts @@ -0,0 +1 @@ +export const builderKey = 'builderKey'; diff --git a/frontend/src/app/models/column.model.ts b/frontend/src/app/models/column.model.ts new file mode 100644 index 0000000..f107d59 --- /dev/null +++ b/frontend/src/app/models/column.model.ts @@ -0,0 +1,24 @@ +import constants from '../settings/constants'; +import { SvgPosition } from './svg-position.model'; +import { Table } from './table-svg.model'; + +export class Column implements SvgPosition { + public readonly width = constants.tableWidth; + public readonly height = constants.columnHeight; + public get xBox(): number { + return this.table.x; + } + public get xText(): number { + return this.table.x + constants.padding; + } + public get yBox(): number { + return this.table.y + this.table.titleHeight + (this.height * (this.index)); + } + public get yText(): number { + return this.table.y + this.table.titleHeight + (this.height * (this.index) + constants.padding); + } + constructor( + public readonly index: number, + public readonly table: Table, + public name: string) { } +} diff --git a/frontend/src/app/models/relation.model.ts b/frontend/src/app/models/relation.model.ts new file mode 100644 index 0000000..da0d3a7 --- /dev/null +++ b/frontend/src/app/models/relation.model.ts @@ -0,0 +1,73 @@ +import { Table } from './table-svg.model'; +import { Column } from './column.model'; +export const relationStateKey = 'relationStateKey'; +export class Relation { + public get tablesHasPositions(): boolean { + return this.toTable.hasPosition && this.fromTable.hasPosition; + } + public get fromArrowXStart(): number { + return this.fromToTheRight ? this.from.xBox - 14 : this.from.xBox + this.from.width + 14; + } + public get fromArrowXEnd(): number { + return this.fromToTheRight ? this.from.xBox - 6 : this.from.xBox + this.from.width + 6; + } + public get fromArrowYUpEnd(): number { + return this.fromToTheRight ? this.from.yBox + 5 : this.from.yBox + 15; + } + public get fromArrowYDownEnd(): number { + return this.fromToTheRight ? this.from.yBox + 15 : this.from.yBox + 5; + } + + public get toArrowXStart(): number { + return this.fromToTheRight ? this.to.xBox + this.to.width + 2 : this.to.xBox - 2; + } + public get toArrowXEnd(): number { + return this.fromToTheRight ? this.to.xBox + this.to.width + 10 : this.to.xBox - 10; + } + public get toArrowYUpEnd(): number { + return this.fromToTheRight ? this.to.yBox + 15 : this.to.yBox + 5; + } + public get toArrowYDownEnd(): number { + return this.fromToTheRight ? this.to.yBox + 5 : this.to.yBox + 15; + } + + public get fromXStart(): number { + return this.fromToTheRight ? this.from.xBox - 20 : this.from.xBox + this.from.width + 20; + } + public get fromXEnd(): number { + return this.fromToTheRight ? this.from.xBox : this.from.xBox + this.from.width; + } + public get fromX(): number { + return this.fromXStart; + } + public get fromY(): number { + return this.from.yBox + 10; + + } + public get toX(): number { + return this.toXStart; + } + public get toXStart(): number { + return this.fromToTheRight ? this.toXEnd + 20 : this.toXEnd - 20; + } + public get toXEnd(): number { + return this.fromToTheRight ? this.to.xBox + this.to.width : this.to.xBox; + } + public get toY(): number { + return this.to.yBox + 10; + } + public get fromTable(): Table { + return this.from.table; + } + private get fromToTheRight(): boolean { + return this.from.table.x > this.to.table.x + this.to.width / 2; + } + + constructor(private readonly from: Column, private readonly to: Column) { + from.table.fromRelations.push(this); + to.table.toRelations.push(this); + } + public get toTable(): Table { + return this.from.table; + } +} diff --git a/frontend/src/app/models/rename.model.ts b/frontend/src/app/models/rename.model.ts new file mode 100644 index 0000000..b51e66c --- /dev/null +++ b/frontend/src/app/models/rename.model.ts @@ -0,0 +1,11 @@ + +import { Column } from './column.model'; +import { Position } from './position.model'; +import { Table } from './table-svg.model'; + +export const renameKey = 'renameModel'; +export interface Rename { + position: Position; + table?: Table; + column?: Column; +} diff --git a/frontend/src/app/models/svg-position.model.ts b/frontend/src/app/models/svg-position.model.ts new file mode 100644 index 0000000..459928e --- /dev/null +++ b/frontend/src/app/models/svg-position.model.ts @@ -0,0 +1,6 @@ +export interface SvgPosition { + xBox: number; + xText: number; + yBox: number; + yText: number; +} diff --git a/frontend/src/app/models/table-svg.model.ts b/frontend/src/app/models/table-svg.model.ts new file mode 100644 index 0000000..fbf5c96 --- /dev/null +++ b/frontend/src/app/models/table-svg.model.ts @@ -0,0 +1,57 @@ +import constants from '../settings/constants'; +import { Column } from './column.model'; +import { Relation } from './relation.model'; + +export class Table { + public get x(): number { + return this.xPosition ?? 0; + } + public set x(value: number) { + this.xPosition = value; + } + public get xText(): number { + return this.x + constants.padding; + } + public get y(): number { + return this.yPosition ?? 0; + } + public set y(value: number) { + this.yPosition = value; + } + public get yText(): number { + return this.y + constants.padding; + } + public get yBox(): number { + return this.y; + } + public get height(): number { + return this.titleHeight + this.columns.length * constants.columnHeight; + } + public get bottomPosition(): number { + return this.y + this.height; + } + public get rightXPosition(): number { + return this.x + this.width; + } + public get hasPosition(): boolean { + return this.xPosition !== undefined && this.yPosition !== undefined; + } + + public readonly fromRelations: Relation[] = []; + public readonly toRelations: Relation[] = []; + public readonly columns: Column[] = []; + public readonly width = constants.tableWidth; + public readonly titleHeight = constants.titleHeight; + + private xPosition: number | undefined; + private yPosition: number | undefined; + constructor( + public name: string, + public readonly schema: string) { + } + public setPosition(x: number, y: number): void { + this.x = x; + this.y = y; + } +} + From 0c064ced7b2a68e4c10db5cca4b14d6682952ed8 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 15:39:09 +0200 Subject: [PATCH 18/55] add component for basic context menu --- .../app/components/context-menu/context-menu.component.html | 2 +- .../src/app/components/context-menu/context-menu.component.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/context-menu/context-menu.component.html b/frontend/src/app/components/context-menu/context-menu.component.html index e659fe8..02a38c5 100644 --- a/frontend/src/app/components/context-menu/context-menu.component.html +++ b/frontend/src/app/components/context-menu/context-menu.component.html @@ -1,4 +1,4 @@ -
+
  • {{item.label}}{{item.shortcut ? item.shortcut : ''}} diff --git a/frontend/src/app/components/context-menu/context-menu.component.ts b/frontend/src/app/components/context-menu/context-menu.component.ts index 7185b98..d7e2b69 100644 --- a/frontend/src/app/components/context-menu/context-menu.component.ts +++ b/frontend/src/app/components/context-menu/context-menu.component.ts @@ -1,6 +1,7 @@ import { Component, Inject } from '@angular/core'; import { ContextMenu, ContextMenuItem, contextMenuStateKey } from '../../models/context-menu.model'; import { StateInjector } from '../../services/state.token'; +import constants from '../../settings/constants'; import { State } from '../../state/state'; @Component({ @@ -9,7 +10,7 @@ import { State } from '../../state/state'; styleUrls: ['./context-menu.component.scss'] }) export class ContextMenuComponent { - + constants = constants; constructor(@Inject(StateInjector(contextMenuStateKey)) public readonly state: State) { } public handleEvent(item: ContextMenuItem): void { item.event(); From d203fcd5296a1f397470af8d85cd0b829adfd454 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 15:39:39 +0200 Subject: [PATCH 19/55] add more stuff to mocked window --- frontend/src/app/app-testing.module.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/app/app-testing.module.ts b/frontend/src/app/app-testing.module.ts index 77677d8..9075afb 100644 --- a/frontend/src/app/app-testing.module.ts +++ b/frontend/src/app/app-testing.module.ts @@ -9,6 +9,8 @@ import { WINDOW } from './services/window.token'; let list: (e: Event) => void; const fakeWindowProvider = ({ provide: WINDOW, useFactory: () => ({ + innerHeight: 100, + innerWidth: 100, removeEventListener: (type: string, listener: () => void) => { list = undefined as any as (e: Event) => void; }, From 9693f1cc4b87f504e40355deba387cea0dee3aaa Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 15:40:22 +0200 Subject: [PATCH 20/55] add service for context menu --- .../app/services/context-menu.service.spec.ts | 16 +++ .../src/app/services/context-menu.service.ts | 102 ++++++++++++++++++ 2 files changed, 118 insertions(+) create mode 100644 frontend/src/app/services/context-menu.service.spec.ts create mode 100644 frontend/src/app/services/context-menu.service.ts diff --git a/frontend/src/app/services/context-menu.service.spec.ts b/frontend/src/app/services/context-menu.service.spec.ts new file mode 100644 index 0000000..d40f881 --- /dev/null +++ b/frontend/src/app/services/context-menu.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ContextMenuService } from './context-menu.service'; + +describe('ContextMenuService', () => { + let service: ContextMenuService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ContextMenuService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/services/context-menu.service.ts b/frontend/src/app/services/context-menu.service.ts new file mode 100644 index 0000000..db2df14 --- /dev/null +++ b/frontend/src/app/services/context-menu.service.ts @@ -0,0 +1,102 @@ +import { Inject, Injectable } from '@angular/core'; +import { AddRelation, addRelationKey } from '../models/add-relation.model'; +import { Column } from '../models/column.model'; +import { ContextMenu, ContextMenuItem, contextMenuStateKey } from '../models/context-menu.model'; +import { Position } from '../models/position.model'; +import { Rename, renameKey } from '../models/rename.model'; +import { Table } from '../models/table-svg.model'; +import { BuilderService } from '../services/builder.service'; + +import { State } from '../state/state'; +import { StateInjector } from './state.token'; + +@Injectable({ + providedIn: 'root' +}) +export class ContextMenuService { + private tableIndex = 0; + private colunmnIndex = 0; + constructor( + @Inject(StateInjector(contextMenuStateKey)) public readonly contextMenuState: State, + @Inject(StateInjector(renameKey)) public readonly renameState: State, + public readonly builderState: BuilderService, + @Inject(StateInjector(addRelationKey)) public readonly columnRelationState: State, + ) { } + + public table(x: number, y: number, table: Table): boolean { + const menu = this.baseMenu(x, y); + + menu.items.push(this.addColumnItem(table)); + menu.items.push(this.addTableItem()); + menu.items.push(this.addRenameTableItem({ x, y }, table)); + + this.contextMenuState.set(menu); + return false; + } + public column(x: number, y: number, column: Column): boolean { + const menu = this.baseMenu(x, y); + + menu.items.push(this.addColumnItem(column.table)); + menu.items.push({ + label: 'Add relation', shortcut: '⌘ +', event: (() => this.columnRelationState.set({ + position: { + x, + y, + }, + column + })).bind(this) + }); + menu.items.push(this.addTableItem()); + menu.items.push(this.addRenameColumnItem({ x, y }, column.table, column)); + menu.items.push(this.addRenameTableItem({ x, y }, column.table)); + this.contextMenuState.set(menu); + return false; + } + + public none(x: number, y: number): boolean { + const menu = this.baseMenu(x, y); + + menu.items.push(this.addTableItem()); + this.contextMenuState.set(menu); + + return false; + } + public clear(): void { + this.contextMenuState.clear(); + } + private addTableItem(): ContextMenuItem { + return { + label: 'Add table', + event: (() => this.builderState.addTable( + new Table('untitled' + this.tableIndex++, 'dbo'))).bind(this) + }; + } + private addColumnItem(table: Table): ContextMenuItem { + return { + label: 'Add column', + event: (() => this.builderState.addColumn(table, 'untitled' + this.colunmnIndex++)).bind(this) + }; + } + + private addRenameTableItem(position: Position, table: Table): ContextMenuItem { + return { + label: 'Rename table', + event: (() => this.renameState.set({ position, table, column: undefined })).bind(this) + }; + } + private addRenameColumnItem(position: Position, table: Table, column: Column): ContextMenuItem { + return { + label: 'Rename column', + event: (() => this.renameState.set({ position, table, column })).bind(this) + }; + } + private baseMenu(x: number, y: number): ContextMenu { + return { + position: { + x, + y, + }, + items: [] + }; + } +} From 56c63c4a4baa902b7b0be1816efe835c59ce8f47 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 15:41:08 +0200 Subject: [PATCH 21/55] add rename modal --- .../rename-modal/rename-modal.component.html | 8 ++ .../rename-modal/rename-modal.component.scss | 11 ++ .../rename-modal.component.spec.ts | 103 ++++++++++++++++++ .../rename-modal/rename-modal.component.ts | 43 ++++++++ 4 files changed, 165 insertions(+) create mode 100644 frontend/src/app/components/rename-modal/rename-modal.component.html create mode 100644 frontend/src/app/components/rename-modal/rename-modal.component.scss create mode 100644 frontend/src/app/components/rename-modal/rename-modal.component.spec.ts create mode 100644 frontend/src/app/components/rename-modal/rename-modal.component.ts diff --git a/frontend/src/app/components/rename-modal/rename-modal.component.html b/frontend/src/app/components/rename-modal/rename-modal.component.html new file mode 100644 index 0000000..e947159 --- /dev/null +++ b/frontend/src/app/components/rename-modal/rename-modal.component.html @@ -0,0 +1,8 @@ +
    +
    + + + {{focusInput()}} +
    +
    diff --git a/frontend/src/app/components/rename-modal/rename-modal.component.scss b/frontend/src/app/components/rename-modal/rename-modal.component.scss new file mode 100644 index 0000000..a8dda10 --- /dev/null +++ b/frontend/src/app/components/rename-modal/rename-modal.component.scss @@ -0,0 +1,11 @@ +.rename { + position: absolute; + width: 200px; + z-index: 9999999; + border: 1px solid rgb(146, 143, 143); + border-radius: .5rem; + font-size: .8em; + padding-top: .4rem; + padding-bottom: .4rem; + cursor: grab; +} diff --git a/frontend/src/app/components/rename-modal/rename-modal.component.spec.ts b/frontend/src/app/components/rename-modal/rename-modal.component.spec.ts new file mode 100644 index 0000000..c1b2a3c --- /dev/null +++ b/frontend/src/app/components/rename-modal/rename-modal.component.spec.ts @@ -0,0 +1,103 @@ +import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { BehaviorSubject } from 'rxjs'; +import { Column } from '../../models/column.model'; +import { Rename, renameKey } from '../../models/rename.model'; +import { Table } from '../../models/table-svg.model'; +import { BuilderService } from '../../services/builder.service'; +import { StateInjector } from '../../services/state.token'; +import { State } from '../../state/state'; + +import { RenameModalComponent } from './rename-modal.component'; + +describe('RenameModalComponent', () => { + let component: RenameModalComponent; + let fixture: ComponentFixture; + let renameState: State; + let renameStateSubject: BehaviorSubject; + let builderService: BuilderService; + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [RenameModalComponent], + providers: [{ provide: StateInjector(renameKey), useValue: new State() }], + }) + .compileComponents(); + }); + + beforeEach(() => { + renameStateSubject = new BehaviorSubject(undefined as any as Rename); + renameState = TestBed.inject>(StateInjector(renameKey)); + builderService = TestBed.inject(BuilderService); + spyOnProperty(renameState, 'select$').and.returnValue(renameStateSubject.asObservable()); + fixture = TestBed.createComponent(RenameModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should not be visible when no rename', () => { + // Assert + expect(fixture.nativeElement.querySelector('rename')).toBeFalsy(); + }); + + it('should be visible when rename', () => { + // Act + renameStateSubject.next({ position, table: new Table('table', 'dummy') }); + fixture.detectChanges(); + // Assert + expect(fixture.nativeElement.querySelector('.rename')).toBeTruthy(); + }); + + + describe('setName', () => { + it('should clear state when set', () => { + // Arrange + spyOn(renameState, 'clear'); + // Act + component.setName({ position, table: new Table('table', 'dummy') }, 'new name'); + // Assert + expect(renameState.clear).toHaveBeenCalled(); + }); + it('should rename table when no column', () => { + // Arrange + spyOn(builderService, 'renameTable').and.returnValue(Promise.resolve()); + spyOn(builderService, 'renameColumn').and.returnValue(Promise.resolve()); + const table = new Table('table', 'dummy'); + // Act + component.setName({ position, table }, 'new name'); + // Assert + expect(builderService.renameTable).toHaveBeenCalledOnceWith(table, 'new name'); + expect(builderService.renameColumn).not.toHaveBeenCalled(); + }); + it('should rename column when exists', () => { + // Arrange + spyOn(builderService, 'renameTable').and.returnValue(Promise.resolve()); + spyOn(builderService, 'renameColumn').and.returnValue(Promise.resolve()); + const table = new Table('table', 'dummy'); + const column = new Column(0, table, 'dummy'); + // Act + component.setName({ position, table, column }, 'new name'); + // Assert + expect(builderService.renameTable).not.toHaveBeenCalled(); + expect(builderService.renameColumn).toHaveBeenCalledOnceWith(table, column, 'new name'); + }); + + it('should do nothing when no table or column', () => { + // Arrange + spyOn(builderService, 'renameTable').and.returnValue(Promise.resolve()); + spyOn(builderService, 'renameColumn').and.returnValue(Promise.resolve()); + // Act + component.setName({ position }, 'new name'); + // Assert + expect(builderService.renameTable).not.toHaveBeenCalled(); + expect(builderService.renameColumn).not.toHaveBeenCalled(); + }); + }); + + const position = { + x: 0, + y: 0, + }; +}); diff --git a/frontend/src/app/components/rename-modal/rename-modal.component.ts b/frontend/src/app/components/rename-modal/rename-modal.component.ts new file mode 100644 index 0000000..eaaad84 --- /dev/null +++ b/frontend/src/app/components/rename-modal/rename-modal.component.ts @@ -0,0 +1,43 @@ +import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core'; +import { Rename, renameKey } from '../../models/rename.model'; +import { BuilderService } from '../../services/builder.service'; +import { StateInjector } from '../../services/state.token'; +import constants from '../../settings/constants'; +import { State } from '../../state/state'; + +@Component({ + selector: 'app-rename-modal', + templateUrl: './rename-modal.component.html', + styleUrls: ['./rename-modal.component.scss'] +}) +export class RenameModalComponent { + public constants = constants; + @ViewChild('renameInput') public renameInput!: ElementRef; + constructor( + @Inject(StateInjector(renameKey)) public readonly state: State, + private readonly builderService: BuilderService) { } + public setName(rename: Rename, newName: string): void { + this.state.clear(); + if (rename.table) { + if (rename.column) { + this.builderService.renameColumn(rename.table, rename.column, newName); + return; + } + this.builderService.renameTable(rename.table, newName); + } + + } + public focusInput(): string { + this.delay(0).then(() => { + if (this.renameInput) + { + this.renameInput.nativeElement.focus(); + } + }); + + return ''; + } + private delay(ms: number): Promise { + return new Promise(resolve => setTimeout(resolve, ms)); + } +} From e27f9ddb474108cf22e569acac4b250ccf226f80 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 15:42:05 +0200 Subject: [PATCH 22/55] WIP first steps to the new svg engine --- .../components/chart/chart.component.spec.ts | 154 ++++++++++++++++++ .../app/components/chart/chart.component.svg | 32 ++++ .../app/components/chart/chart.component.ts | 113 +++++++++++++ 3 files changed, 299 insertions(+) create mode 100644 frontend/src/app/components/chart/chart.component.spec.ts create mode 100644 frontend/src/app/components/chart/chart.component.svg create mode 100644 frontend/src/app/components/chart/chart.component.ts diff --git a/frontend/src/app/components/chart/chart.component.spec.ts b/frontend/src/app/components/chart/chart.component.spec.ts new file mode 100644 index 0000000..acfad2b --- /dev/null +++ b/frontend/src/app/components/chart/chart.component.spec.ts @@ -0,0 +1,154 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { AppTestingModule } from '../../app-testing.module'; +import { Column } from '../../models/column.model'; +import { Table } from '../../models/table-svg.model'; +import { BuilderService } from '../../services/builder.service'; +import { ContextMenuService } from '../../services/context-menu.service'; + +import { ChartComponent } from './chart.component'; + +describe('ChartComponent', () => { + let component: ChartComponent; + let fixture: ComponentFixture; + let builderService: BuilderService; + let contextMenuService: ContextMenuService; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ChartComponent], + imports: [AppTestingModule] + }) + .compileComponents(); + }); + + beforeEach(() => { + builderService = TestBed.inject(BuilderService); + contextMenuService = TestBed.inject(ContextMenuService); + spyOn(builderService, 'setTables'); + fixture = TestBed.createComponent(ChartComponent); + component = fixture.componentInstance; + component.tables = []; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + describe('contextMenu', () => { + const table = new Table('table', 'schema'); + const clientx = 400; + const clienty = 400; + const mouseEvent = new MouseEvent('MouseEvent', { + clientX: clientx, + clientY: clienty, + }); + beforeEach(() => { + spyOn(contextMenuService, 'none'); + spyOn(contextMenuService, 'table'); + spyOn(contextMenuService, 'column'); + }); + it('should call none when no table or column', () => { + // Act + component.contextMenu(mouseEvent); + // Assert + expect(contextMenuService.none).toHaveBeenCalledOnceWith(mouseEvent.clientX, mouseEvent.clientY); + expect(contextMenuService.table).not.toHaveBeenCalled(); + expect(contextMenuService.column).not.toHaveBeenCalled(); + }); + + it('should call table when no column', () => { + // Act + component.contextMenu(mouseEvent, table); + // Assert + expect(contextMenuService.table).toHaveBeenCalledOnceWith(mouseEvent.clientX, mouseEvent.clientY, table); + expect(contextMenuService.none).not.toHaveBeenCalled(); + expect(contextMenuService.column).not.toHaveBeenCalled(); + }); + + it('should call column', () => { + // Arrange + const column = new Column(0, table, 'name'); + // Act + component.contextMenu(mouseEvent, table, column); + // Assert + expect(contextMenuService.column).toHaveBeenCalledOnceWith(mouseEvent.clientX, mouseEvent.clientY, column); + expect(contextMenuService.table).not.toHaveBeenCalled(); + expect(contextMenuService.none).not.toHaveBeenCalled(); + }); + }); + describe('drag and drop', () => { + let table: Table; + + beforeEach(() => { + table = new Table('table', 'schema'); + }); + + it('should change coordinates for table', () => { + // Arrange + table.x = 100; + table.y = 100; + + const startEvent = new MouseEvent('DragStart', { clientX: 100, clientY: 100 }); + const dragEvent = new MouseEvent('DragStart', { clientX: 10, clientY: 10 }); + const endEvent = new MouseEvent('DragStart', { clientX: 0, clientY: 0 }); + + // Act + component.dragStart(startEvent, table); + component.drag(dragEvent); + component.dragEnd(endEvent); + // Assert + expect(table.x).toBe(10); + expect(table.y).toBe(10); + }); + }); + describe('refreshZoom', () => { + + it('should zoom out', () => { + // Arrange + const initalScale = component.scale; + const wheelEvent = new WheelEvent('WheelEvent', { + deltaY: 10 + }); + // Act + component.refreshZoom(wheelEvent); + // Assert + expect(component.scale).toBe(initalScale - 0.1); + }); + + it('should zoom in', () => { + // Arrange + const initalScale = component.scale; + const wheelEvent = new WheelEvent('WheelEvent', { + deltaY: -10 + }); + // Act + component.refreshZoom(wheelEvent); + // Assert + expect(component.scale).toBe(initalScale + 0.1); + }); + + it('should not go out of lower bound', () => { + // Arrange + const initalScale = component.scale; + const wheelEvent = new WheelEvent('WheelEvent', { + deltaY: 1000 + }); + // Act + component.refreshZoom(wheelEvent); + // Assert + expect(component.scale).toBe(0.1); + }); + + it('should not go out of upper bound', () => { + // Arrange + const initalScale = component.scale; + const wheelEvent = new WheelEvent('WheelEvent', { + deltaY: -1000 + }); + // Act + component.refreshZoom(wheelEvent); + // Assert + expect(component.scale).toBe(4); + }); + }); +}); diff --git a/frontend/src/app/components/chart/chart.component.svg b/frontend/src/app/components/chart/chart.component.svg new file mode 100644 index 0000000..d2c4a1a --- /dev/null +++ b/frontend/src/app/components/chart/chart.component.svg @@ -0,0 +1,32 @@ + + + + + {{table.schema}}.{{table.name}} + + + + + + + {{column.name}} + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/components/chart/chart.component.ts b/frontend/src/app/components/chart/chart.component.ts new file mode 100644 index 0000000..ba5c6b1 --- /dev/null +++ b/frontend/src/app/components/chart/chart.component.ts @@ -0,0 +1,113 @@ +import { Component, ElementRef, HostListener, Inject, Input, ViewChild } from '@angular/core'; +import { BehaviorSubject, Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { Table } from '../../models/table-svg.model'; +import { Relation, relationStateKey } from '../../models/relation.model'; +import { ContextMenuService } from '../../services/context-menu.service'; +import { Column } from '../../models/column.model'; +import { BuilderService } from '../../services/builder.service'; +import { WINDOW } from '../../services/window.token'; +import constants from '../../settings/constants'; +import { StateInjector } from '../../services/state.token'; +import { State } from '../../state/state'; + +@Component({ + selector: 'app-chart', + templateUrl: './chart.component.svg' +}) +export class ChartComponent { + public readonly constants = constants; + + @ViewChild('svg') + svg!: ElementRef; + @Input() + public tables: Table[] = []; + + public get viewBoxString$(): Observable { + return this.viewBox.pipe(map(x => `${x.x / this.scale} ${x.y / this.scale} ${x.w / this.scale} ${x.h / this.scale}`)); + + } + + private viewBox: BehaviorSubject = new BehaviorSubject(undefined); + public svgSize: any = { w: 0, h: 0 }; + public scale = 0.8; + + private dragging: Table | undefined; + private dragDeltaX = 0; + private dragDeltaY = 0; + + constructor( + @Inject(WINDOW) private readonly window: Window, + @Inject(StateInjector(relationStateKey)) public readonly relationState: State, + private readonly builderService: BuilderService, + private readonly contextMenuService: ContextMenuService) { + this.svgSize = { w: this.window.innerWidth, h: this.window.innerHeight }; + this.viewBox.next({ x: 0, y: 0, ...this.svgSize }); + this.scale = 0.8; + } + + public contextMenu(e: MouseEvent, table?: Table, column?: Column): boolean { + if (column) { + return this.contextMenuService.column(e.clientX, e.clientY, column); + } + if (table) { + return this.contextMenuService.table(e.clientX, e.clientY, table); + } + return this.contextMenuService.none(e.clientX, e.clientY); + + } + public dragStart(e: MouseEvent, table: Table): void { + this.dragging = table; + this.dragDeltaX = e.x - table.x; + this.dragDeltaY = e.y - table.y; + + } + public drag(e: MouseEvent): void { + if (this.dragging) { + const deltaX = e.x - this.dragDeltaX; + const deltaY = e.y - this.dragDeltaY; + + this.dragging.x = deltaX; + this.dragging.y = deltaY; + } + } + public dragEnd(_: MouseEvent): void { + if (this.dragging) { + this.builderService.setTables(this.tables); + this.dragging = undefined; + this.dragDeltaX = 0; + this.dragDeltaY = 0; + } + } + @HostListener('body:wheel', ['$event']) + public refreshZoom(e: WheelEvent): void { + + this.scale += (-e.deltaY / 100); + + if (this.scale < 0.1) { + this.scale = 0.1; + } + + if (this.scale > 4) { + this.scale = 4; + } + this.viewBox.next(this.viewBox.value); + } + +} + + +export interface DatabaseTable { + Name: string; + Schema: string; + Columns: DatabaseColumn[]; +} + +export interface DatabaseColumn { + Name: string; + ReferenceColumn: string; + ReferenceTable: string; + ForeignKey: string; +} + + From fb9d9b77e52fdf35b7831ee880ecc9d780b4af52 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 15:43:02 +0200 Subject: [PATCH 23/55] docs: add more to the description in package.json --- backend/package.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/backend/package.json b/backend/package.json index 4956d11..dcab1db 100644 --- a/backend/package.json +++ b/backend/package.json @@ -1,7 +1,7 @@ { "name": "schema-visualization", "displayName": "Schema Visualization", - "description": "Visualization of databases", + "description": "Entity relationship diagram, visualization of databases. Create ERD diagrams from a database schema. Or, create a schema from an ERD diagram.", "version": "0.8.4", "publisher": "R0tenur", "license": "MIT", diff --git a/package.json b/package.json index 1f1cb54..a68fbc0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "schema-visualization", "displayName": "Schema Visualization", - "description": "Visualization of databases", + "description": "Entity relationship diagram, visualization of databases. Create ERD diagrams from a database schema. Or, create a schema from an ERD diagram.", "version": "0.8.4", "publisher": "R0tenur", "license": "MIT", From ae4b2cd066df7f4b7e9ca88e85632f2d8b75639f Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 15:43:47 +0200 Subject: [PATCH 24/55] add top component for the builder --- .../components/builder/builder.component.html | 3 +++ .../builder/builder.component.spec.ts | 27 +++++++++++++++++++ .../components/builder/builder.component.ts | 15 +++++++++++ 3 files changed, 45 insertions(+) create mode 100644 frontend/src/app/components/builder/builder.component.html create mode 100644 frontend/src/app/components/builder/builder.component.spec.ts create mode 100644 frontend/src/app/components/builder/builder.component.ts diff --git a/frontend/src/app/components/builder/builder.component.html b/frontend/src/app/components/builder/builder.component.html new file mode 100644 index 0000000..58eb7c0 --- /dev/null +++ b/frontend/src/app/components/builder/builder.component.html @@ -0,0 +1,3 @@ +
    + +
    diff --git a/frontend/src/app/components/builder/builder.component.spec.ts b/frontend/src/app/components/builder/builder.component.spec.ts new file mode 100644 index 0000000..9eaedb6 --- /dev/null +++ b/frontend/src/app/components/builder/builder.component.spec.ts @@ -0,0 +1,27 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BuilderComponent } from './builder.component'; + +describe('BuilderComponent', () => { + let component: BuilderComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [BuilderComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(BuilderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/components/builder/builder.component.ts b/frontend/src/app/components/builder/builder.component.ts new file mode 100644 index 0000000..5c79061 --- /dev/null +++ b/frontend/src/app/components/builder/builder.component.ts @@ -0,0 +1,15 @@ +import { Component, Inject } from '@angular/core'; +import { builderKey } from '../../models/builder.model'; +import { Relation, relationStateKey } from '../../models/relation.model'; +import { Table } from '../../models/table-svg.model'; +import { StateInjector } from '../../services/state.token'; +import { State } from '../../state/state'; + +@Component({ + selector: 'app-builder', + templateUrl: './builder.component.html' +}) +export class BuilderComponent { + constructor( + @Inject(StateInjector(builderKey)) public readonly builderState: State) {} +} From f18305343a2a14746a16aa3569aa27459a83d65a Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 15:44:43 +0200 Subject: [PATCH 25/55] WIP component for adding relations --- .../relation/relation.component.html | 21 ++++++ .../relation/relation.component.scss | 15 ++++ .../relation/relation.component.spec.ts | 26 +++++++ .../components/relation/relation.component.ts | 68 +++++++++++++++++++ 4 files changed, 130 insertions(+) create mode 100644 frontend/src/app/components/relation/relation.component.html create mode 100644 frontend/src/app/components/relation/relation.component.scss create mode 100644 frontend/src/app/components/relation/relation.component.spec.ts create mode 100644 frontend/src/app/components/relation/relation.component.ts diff --git a/frontend/src/app/components/relation/relation.component.html b/frontend/src/app/components/relation/relation.component.html new file mode 100644 index 0000000..b6b4677 --- /dev/null +++ b/frontend/src/app/components/relation/relation.component.html @@ -0,0 +1,21 @@ +
    +
    + + + {{focusInput()}} +
    +
    Select table:
    +
    +
    {{result.schema}}.{{result.name}}
    +
    +
    + +
    +
    Select column:
    +
    +
    {{column.name}}
    +
    +
    +
    +
    diff --git a/frontend/src/app/components/relation/relation.component.scss b/frontend/src/app/components/relation/relation.component.scss new file mode 100644 index 0000000..6c23e92 --- /dev/null +++ b/frontend/src/app/components/relation/relation.component.scss @@ -0,0 +1,15 @@ +.relation { + position: absolute; + width: 200px; + z-index: 9999999; + border: 1px solid rgb(146, 143, 143); + border-radius: .5rem; + font-size: .8em; + padding-top: .4rem; + padding-bottom: .4rem; + cursor: grab; +} +.list { + width: 100%; + +} diff --git a/frontend/src/app/components/relation/relation.component.spec.ts b/frontend/src/app/components/relation/relation.component.spec.ts new file mode 100644 index 0000000..47e2a6e --- /dev/null +++ b/frontend/src/app/components/relation/relation.component.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { AppTestingModule } from '../../app-testing.module'; + +import { RelationComponent } from './relation.component'; + +describe('RelationComponent', () => { + let component: RelationComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [RelationComponent], imports: [AppTestingModule] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RelationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/components/relation/relation.component.ts b/frontend/src/app/components/relation/relation.component.ts new file mode 100644 index 0000000..c04ea3e --- /dev/null +++ b/frontend/src/app/components/relation/relation.component.ts @@ -0,0 +1,68 @@ +import { Component, ElementRef, Inject, ViewChild } from '@angular/core'; +import { FormBuilder, FormControl } from '@angular/forms'; +import { Observable } from 'rxjs'; +import { map, switchMap, take, tap } from 'rxjs/operators'; +import { AddRelation, addRelationKey } from '../../models/add-relation.model'; +import { builderKey } from '../../models/builder.model'; +import { Column } from '../../models/column.model'; +import { Relation, relationStateKey } from '../../models/relation.model'; +import { Table } from '../../models/table-svg.model'; +import { StateInjector } from '../../services/state.token'; +import constants from '../../settings/constants'; +import { State } from '../../state/state'; + +@Component({ + selector: 'app-relation', + templateUrl: './relation.component.html', + styleUrls: ['./relation.component.scss'] +}) +export class RelationComponent { + public constants = constants; + @ViewChild('searchInput') public searchInput!: ElementRef; + public readonly searchControl: FormControl; + public readonly searchResults$: Observable; + + public selectedTable: Table | undefined; + constructor( + @Inject(StateInjector(addRelationKey)) public readonly state: State, + @Inject(StateInjector(builderKey)) public readonly tableState: State, + @Inject(StateInjector(relationStateKey)) public readonly relationState: State, + private formBuilder: FormBuilder) { + this.searchControl = this.formBuilder.control(''); + this.searchResults$ = this.searchControl.valueChanges + .pipe( + switchMap((searchString: string) => this.tableState.select$.pipe( + map(x => x.filter(y => y.name.toLowerCase().includes(searchString.toLowerCase()))), + ))); + } + public selectTable(table: Table): void { + this.selectedTable = table; + } + public async selectColumn(from: Column, to: Column): Promise { + const relations = await this.relationState.select$.pipe(take(1)).toPromise(); + const tables = await this.tableState.select$.pipe(take(1)).toPromise(); + + const fromTable = tables.find(x => x.name === from.table.name && x.schema === from.table.schema); + const toTable = tables.find(x => x.name === to.table.name && x.schema === to.table.schema); + const relation = new Relation(from, to); + fromTable?.fromRelations.push(relation); + toTable?.toRelations.push(relation); + this.relationState.set([...relations ?? [], relation]); + this.tableState.set([...tables]); + this.state.clear(); + this.selectedTable = undefined; + } + + public focusInput(): string { + this.delay(0).then(() => { + if (this.searchInput) { + this.searchInput.nativeElement.focus(); + } + }); + + return ''; + } + private delay(ms: number): Promise { + return new Promise(resolve => setTimeout(resolve, ms)); + } +} From 508c78e2f7d70f18d191d0782b7ba97d0d566702 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 15:45:06 +0200 Subject: [PATCH 26/55] add routes to new components --- frontend/src/app/app.component.html | 13 +++++++------ frontend/src/app/app.component.ts | 22 +++++++++++++--------- frontend/src/app/app.module.ts | 23 ++++++++++++++++++++--- frontend/src/app/settings/routes.ts | 8 ++++++++ 4 files changed, 48 insertions(+), 18 deletions(-) create mode 100644 frontend/src/app/settings/routes.ts diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 730ee46..3efaef4 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,10 +1,11 @@ + + + +
    + - -
    - Export - -

    {{databaseName}}

    - +

    {{databaseName}}

    +
    diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index d19bcb8..cfba779 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -1,7 +1,9 @@ -import { Component } from '@angular/core'; -import { Observable } from 'rxjs'; +import { Component, Inject } from '@angular/core'; import { DataStudioService } from './services/data-studio.service'; -import { Exportable } from './models/exportable.model'; +import { ContextMenuService } from './services/context-menu.service'; +import { StateInjector } from './services/state.token'; +import { Rename, renameKey } from './models/rename.model'; +import { State } from './state/state'; @Component({ selector: 'app-root', @@ -10,13 +12,15 @@ import { Exportable } from './models/exportable.model'; }) export class AppComponent { - public get Database$(): Observable { - return this.dataStudioService.Database$; - } constructor( - public readonly dataStudioService: DataStudioService) { } + public readonly dataStudioService: DataStudioService, + public readonly contextMenu: ContextMenuService, + @Inject(StateInjector(renameKey)) private readonly rename: State, + ) { } - public exportSvg(svg: string, markdown: string): void { - this.dataStudioService.saveCommand({ chart: svg, mermaid: markdown }); + public clearOverlays(): void { + this.contextMenu.clear(); + this.rename.clear(); } + } diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 4683787..daa000c 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -1,6 +1,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { MermaidViewerComponent } from './components/mermaid-viewer/mermaid-viewer.component'; @@ -8,6 +8,15 @@ import { ButtonComponent } from './components/button/button.component'; import { AlertComponent } from './components/alert/alert.component'; import { StatusComponent } from './components/status/status.component'; import { DevBarComponent } from './components/dev-bar/dev-bar.component'; +import { BarComponent } from './components/bar/bar.component'; + +import { RouterModule } from '@angular/router'; +import { routes } from './settings/routes'; +import { BuilderComponent } from './components/builder/builder.component'; +import { ChartComponent } from './components/chart/chart.component'; +import { ContextMenuComponent } from './components/context-menu/context-menu.component'; +import { RenameModalComponent } from './components/rename-modal/rename-modal.component'; +import { RelationComponent } from './components/relation/relation.component'; @NgModule({ declarations: [ @@ -17,12 +26,20 @@ import { DevBarComponent } from './components/dev-bar/dev-bar.component'; AlertComponent, StatusComponent, DevBarComponent, + BarComponent, + BuilderComponent, + ChartComponent, + ContextMenuComponent, + RenameModalComponent, + RelationComponent ], imports: [ BrowserModule, - FormsModule, + ReactiveFormsModule, + RouterModule.forRoot(routes), + ], + providers: [ ], - providers: [], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/frontend/src/app/settings/routes.ts b/frontend/src/app/settings/routes.ts new file mode 100644 index 0000000..c6b26c6 --- /dev/null +++ b/frontend/src/app/settings/routes.ts @@ -0,0 +1,8 @@ +import { Routes } from '@angular/router'; +import { BuilderComponent } from '../components/builder/builder.component'; +import { MermaidViewerComponent } from '../components/mermaid-viewer/mermaid-viewer.component'; + +export const routes: Routes = [ + { path: '', component: MermaidViewerComponent }, + { path: 'builder', component: BuilderComponent } +]; From a18cf687a633141f6f853878c8778cf73ee9e024 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 15:51:35 +0200 Subject: [PATCH 27/55] get rid of duplicate border --- frontend/src/app/components/button/button.component.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/app/components/button/button.component.scss b/frontend/src/app/components/button/button.component.scss index 8927ceb..aec525c 100644 --- a/frontend/src/app/components/button/button.component.scss +++ b/frontend/src/app/components/button/button.component.scss @@ -7,7 +7,6 @@ border: 2px solid var(--vscode-background); display: inline-block; transition: all 0.4s ease 0s; - border: none; &:hover { border: 2px solid var(--vscode-foreground); } From b0ee4b3ed6908001ed02181cd3c390ab82970854 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 15:52:30 +0200 Subject: [PATCH 28/55] make use of sliced history --- frontend/src/app/state/state.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/state/state.ts b/frontend/src/app/state/state.ts index d00d350..fc4330b 100644 --- a/frontend/src/app/state/state.ts +++ b/frontend/src/app/state/state.ts @@ -11,7 +11,7 @@ export class State { } public set(newState: T): void { if (this.currentHistoryIndex < this.history.length - 1) { - this.history.slice(0, this.currentHistoryIndex); + this.history = this.history.slice(0, this.currentHistoryIndex); } this.history.push(newState); From 523091c72b7430057ae565328032c30a5974137a Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 15:57:42 +0200 Subject: [PATCH 29/55] clean up code smells --- frontend/src/app/app-testing.module.ts | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/app-testing.module.ts b/frontend/src/app/app-testing.module.ts index 9075afb..a1187fc 100644 --- a/frontend/src/app/app-testing.module.ts +++ b/frontend/src/app/app-testing.module.ts @@ -1,31 +1,30 @@ /* istanbul ignore file */ import { NgModule } from '@angular/core'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { ReactiveFormsModule } from '@angular/forms'; import { RouterTestingModule } from '@angular/router/testing'; import { ButtonComponent } from './components/button/button.component'; -import { MERMAID } from './services/mermaid.token'; import { WINDOW } from './services/window.token'; let list: (e: Event) => void; const fakeWindowProvider = ({ provide: WINDOW, useFactory: () => ({ innerHeight: 100, innerWidth: 100, - removeEventListener: (type: string, listener: () => void) => { + removeEventListener: (_: string, listener: () => void) => { list = undefined as any as (e: Event) => void; }, - addEventListener: (type: string, listener: () => void) => { + addEventListener: (_: string, listener: () => void) => { list = listener; }, dispatchEvent: (e: Event) => list(e), document: { - addEventListener: (type: string, listener: () => void) => { + addEventListener: (_: string, listener: () => void) => { list = listener; }, - getElementsByTagName: (tag: string) => [ + getElementsByTagName: (_: string) => [ { - hasAttribute: (attribute: string) => false, - getAttribute: (attribute: string) => '', + hasAttribute: (__: string) => false, + getAttribute: (__: string) => '', } ] @@ -33,12 +32,6 @@ const fakeWindowProvider = ({ }) }); -const fakeMermaidProvider = ({ - provide: MERMAID, useFactory: () => ({ - render: (id: string, markdown: string, callback: () => void) => jasmine.createSpy(), - initialize: jasmine.createSpy(), - }) -}); @NgModule({ declarations: [ ButtonComponent, From f076b67d6b3b0c409174d1cee8231783a28cfb01 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 15:58:40 +0200 Subject: [PATCH 30/55] remove unused vars --- frontend/src/app/components/chart/chart.component.spec.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/app/components/chart/chart.component.spec.ts b/frontend/src/app/components/chart/chart.component.spec.ts index acfad2b..6c595f9 100644 --- a/frontend/src/app/components/chart/chart.component.spec.ts +++ b/frontend/src/app/components/chart/chart.component.spec.ts @@ -129,7 +129,6 @@ describe('ChartComponent', () => { it('should not go out of lower bound', () => { // Arrange - const initalScale = component.scale; const wheelEvent = new WheelEvent('WheelEvent', { deltaY: 1000 }); @@ -141,7 +140,6 @@ describe('ChartComponent', () => { it('should not go out of upper bound', () => { // Arrange - const initalScale = component.scale; const wheelEvent = new WheelEvent('WheelEvent', { deltaY: -1000 }); From b7530c90b0311f4297ee8e4a10ba86ea19c0e1ee Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 16:01:18 +0200 Subject: [PATCH 31/55] get rid of smells --- frontend/src/app/services/data-studio.service.spec.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/services/data-studio.service.spec.ts b/frontend/src/app/services/data-studio.service.spec.ts index 477043e..6250201 100644 --- a/frontend/src/app/services/data-studio.service.spec.ts +++ b/frontend/src/app/services/data-studio.service.spec.ts @@ -40,7 +40,7 @@ describe('DataStudioService', () => { // Arrange spyOn(windowRef.document, 'getElementsByTagName').withArgs('body').and.returnValue([ { - hasAttribute: (attribute: string) => false, + hasAttribute: (_: string) => false, }, ] as any as HTMLCollectionOf); @@ -55,7 +55,7 @@ describe('DataStudioService', () => { // Arrange spyOn(windowRef.document, 'getElementsByTagName').withArgs('body').and.returnValue([ { - hasAttribute: (attribute: string) => true, + hasAttribute: (_: string) => true, }, ] as any as HTMLCollectionOf); @@ -73,7 +73,7 @@ describe('DataStudioService', () => { // Arrange spyOn(windowRef.document, 'getElementsByTagName').withArgs('body').and.returnValue([ { - getAttribute: (attribute: string) => 'dummy', + getAttribute: (_: string) => 'dummy', }, ] as any as HTMLCollectionOf); @@ -88,7 +88,7 @@ describe('DataStudioService', () => { // Arrange spyOn(windowRef.document, 'getElementsByTagName').withArgs('body').and.returnValue([ { - getAttribute: (attribute: string) => 'vscode-dark', + getAttribute: (_: string) => 'vscode-dark', }, ] as any as HTMLCollectionOf); @@ -193,7 +193,7 @@ describe('DataStudioService', () => { bindFunctions: (element: Element) => void ) => void) => { if (cb) { - cb(returnedSvg, (element: Element) => { }); + cb(returnedSvg, (___: Element) => { }); } return ''; }; From d21e1da30ed6bb1a472f11aed4611090c73ac70a Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 16:04:09 +0200 Subject: [PATCH 32/55] ignore smell of sanitizer --- .../app/components/mermaid-viewer/mermaid-viewer.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts index bb5b0b0..895bf53 100644 --- a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts +++ b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts @@ -139,7 +139,7 @@ export class MermaidViewerComponent implements OnDestroy { } private safeHtml(svg: string): SafeHtml { this.setupSvgHandling(); - return this.sanitizer.bypassSecurityTrustHtml(svg); + return this.sanitizer.bypassSecurityTrustHtml(svg); // NOSONAR - html is produces by mermaid } private removeMermaidAttributes(): void { From 6639a76b57be53cf2ca43d8e3ea8f4a3db6d6d99 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 16:04:42 +0200 Subject: [PATCH 33/55] get rid of unused import --- frontend/src/app/app.module.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index daa000c..51f4627 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -1,6 +1,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { MermaidViewerComponent } from './components/mermaid-viewer/mermaid-viewer.component'; From 0fd84377b305e331d0c0be8cd9e5a99f9b493ad3 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 16:06:16 +0200 Subject: [PATCH 34/55] get rid of unused stuff --- .../src/app/components/rename-modal/rename-modal.component.ts | 2 +- frontend/src/app/state/state.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/components/rename-modal/rename-modal.component.ts b/frontend/src/app/components/rename-modal/rename-modal.component.ts index eaaad84..7fefdbd 100644 --- a/frontend/src/app/components/rename-modal/rename-modal.component.ts +++ b/frontend/src/app/components/rename-modal/rename-modal.component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core'; +import { Component, ElementRef, Inject, ViewChild } from '@angular/core'; import { Rename, renameKey } from '../../models/rename.model'; import { BuilderService } from '../../services/builder.service'; import { StateInjector } from '../../services/state.token'; diff --git a/frontend/src/app/state/state.ts b/frontend/src/app/state/state.ts index fc4330b..7c3b18c 100644 --- a/frontend/src/app/state/state.ts +++ b/frontend/src/app/state/state.ts @@ -7,8 +7,7 @@ export class State { private currentHistoryIndex = 0; private history: T[] = [undefined as any as T]; private readonly state: BehaviorSubject = new BehaviorSubject(undefined as any as T); - constructor() { - } + public set(newState: T): void { if (this.currentHistoryIndex < this.history.length - 1) { this.history = this.history.slice(0, this.currentHistoryIndex); From 9f97189bcbe0b89d7e1f01e00a349c3b539903cd Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 16:30:49 +0200 Subject: [PATCH 35/55] add overlay reset for relation modal --- frontend/src/app/app.component.spec.ts | 44 +++++++++++++++++++++++--- frontend/src/app/app.component.ts | 3 ++ 2 files changed, 43 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/app.component.spec.ts b/frontend/src/app/app.component.spec.ts index cd751c7..4902d1e 100644 --- a/frontend/src/app/app.component.spec.ts +++ b/frontend/src/app/app.component.spec.ts @@ -1,9 +1,20 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { TestBed } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { AppTestingModule } from './app-testing.module'; import { AppComponent } from './app.component'; +import { AddRelation, addRelationKey } from './models/add-relation.model'; +import { Rename, renameKey } from './models/rename.model'; +import { ContextMenuService } from './services/context-menu.service'; +import { StateInjector } from './services/state.token'; +import { State } from './state/state'; describe('AppComponent', () => { + let renameState: State; + let addRelationState: State; + let contextMenu: ContextMenuService; + let component: AppComponent; + let fixture: ComponentFixture; + beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [ @@ -12,14 +23,39 @@ describe('AppComponent', () => { imports: [ AppTestingModule ], + providers: [ + { provide: StateInjector(renameKey), useValue: new State() }, + { provide: StateInjector(addRelationKey), useValue: new State() }, + ], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); }); + beforeEach(() => { + renameState = TestBed.inject>(StateInjector(renameKey)); + addRelationState = TestBed.inject>(StateInjector(addRelationKey)); + contextMenu = TestBed.inject(ContextMenuService); + spyOn(renameState, 'clear'); + spyOn(addRelationState, 'clear'); + spyOn(contextMenu, 'clear'); + fixture = TestBed.createComponent(AppComponent); + component = fixture.componentInstance; + }); + it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); + + expect(component).toBeTruthy(); + }); + describe('clearOverlays', () => { + it('should clear all modal states', () => { + // Act + component.clearOverlays(); + + // Assert + expect(renameState.clear).toHaveBeenCalled(); + expect(addRelationState.clear).toHaveBeenCalled(); + expect(contextMenu.clear).toHaveBeenCalled(); + }); }); }); diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index cfba779..5f0b75c 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -4,6 +4,7 @@ import { ContextMenuService } from './services/context-menu.service'; import { StateInjector } from './services/state.token'; import { Rename, renameKey } from './models/rename.model'; import { State } from './state/state'; +import { AddRelation, addRelationKey } from './models/add-relation.model'; @Component({ selector: 'app-root', @@ -16,11 +17,13 @@ export class AppComponent { public readonly dataStudioService: DataStudioService, public readonly contextMenu: ContextMenuService, @Inject(StateInjector(renameKey)) private readonly rename: State, + @Inject(StateInjector(addRelationKey)) private readonly addRelation: State, ) { } public clearOverlays(): void { this.contextMenu.clear(); this.rename.clear(); + this.addRelation.clear(); } } From f3a261cea9360f46265eafb67de98d1efce22f3e Mon Sep 17 00:00:00 2001 From: R0tenur Date: Thu, 31 Mar 2022 17:07:40 +0200 Subject: [PATCH 36/55] renmove unused stuff --- frontend/src/app/app-testing.module.ts | 2 +- frontend/src/app/components/builder/builder.component.ts | 1 - .../app/components/context-menu/context-menu.component.spec.ts | 1 - frontend/src/app/components/relation/relation.component.ts | 2 +- .../app/components/rename-modal/rename-modal.component.spec.ts | 2 +- frontend/src/app/services/data-studio.service.spec.ts | 2 +- 6 files changed, 4 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/app-testing.module.ts b/frontend/src/app/app-testing.module.ts index a1187fc..08e95ca 100644 --- a/frontend/src/app/app-testing.module.ts +++ b/frontend/src/app/app-testing.module.ts @@ -10,7 +10,7 @@ const fakeWindowProvider = ({ provide: WINDOW, useFactory: () => ({ innerHeight: 100, innerWidth: 100, - removeEventListener: (_: string, listener: () => void) => { + removeEventListener: (_: string, __: () => void) => { list = undefined as any as (e: Event) => void; }, addEventListener: (_: string, listener: () => void) => { diff --git a/frontend/src/app/components/builder/builder.component.ts b/frontend/src/app/components/builder/builder.component.ts index 5c79061..305998a 100644 --- a/frontend/src/app/components/builder/builder.component.ts +++ b/frontend/src/app/components/builder/builder.component.ts @@ -1,6 +1,5 @@ import { Component, Inject } from '@angular/core'; import { builderKey } from '../../models/builder.model'; -import { Relation, relationStateKey } from '../../models/relation.model'; import { Table } from '../../models/table-svg.model'; import { StateInjector } from '../../services/state.token'; import { State } from '../../state/state'; diff --git a/frontend/src/app/components/context-menu/context-menu.component.spec.ts b/frontend/src/app/components/context-menu/context-menu.component.spec.ts index 12a44b5..8a3abbf 100644 --- a/frontend/src/app/components/context-menu/context-menu.component.spec.ts +++ b/frontend/src/app/components/context-menu/context-menu.component.spec.ts @@ -1,7 +1,6 @@ import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; import { BehaviorSubject } from 'rxjs'; import { ContextMenu, contextMenuStateKey } from '../../models/context-menu.model'; -import { ContextMenuService } from '../../services/context-menu.service'; import { StateInjector } from '../../services/state.token'; import { State } from '../../state/state'; diff --git a/frontend/src/app/components/relation/relation.component.ts b/frontend/src/app/components/relation/relation.component.ts index c04ea3e..b1772df 100644 --- a/frontend/src/app/components/relation/relation.component.ts +++ b/frontend/src/app/components/relation/relation.component.ts @@ -1,7 +1,7 @@ import { Component, ElementRef, Inject, ViewChild } from '@angular/core'; import { FormBuilder, FormControl } from '@angular/forms'; import { Observable } from 'rxjs'; -import { map, switchMap, take, tap } from 'rxjs/operators'; +import { map, switchMap, take } from 'rxjs/operators'; import { AddRelation, addRelationKey } from '../../models/add-relation.model'; import { builderKey } from '../../models/builder.model'; import { Column } from '../../models/column.model'; diff --git a/frontend/src/app/components/rename-modal/rename-modal.component.spec.ts b/frontend/src/app/components/rename-modal/rename-modal.component.spec.ts index c1b2a3c..68670bb 100644 --- a/frontend/src/app/components/rename-modal/rename-modal.component.spec.ts +++ b/frontend/src/app/components/rename-modal/rename-modal.component.spec.ts @@ -1,4 +1,4 @@ -import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { BehaviorSubject } from 'rxjs'; import { Column } from '../../models/column.model'; import { Rename, renameKey } from '../../models/rename.model'; diff --git a/frontend/src/app/services/data-studio.service.spec.ts b/frontend/src/app/services/data-studio.service.spec.ts index 6250201..fd963e9 100644 --- a/frontend/src/app/services/data-studio.service.spec.ts +++ b/frontend/src/app/services/data-studio.service.spec.ts @@ -193,7 +193,7 @@ describe('DataStudioService', () => { bindFunctions: (element: Element) => void ) => void) => { if (cb) { - cb(returnedSvg, (___: Element) => { }); + cb(returnedSvg, (___: Element) => { }); // NOSONAR - this is a fake callback } return ''; }; From 1ffa51498de13b43675e2cc515b2d361d0d44feb Mon Sep 17 00:00:00 2001 From: R0tenur Date: Fri, 1 Apr 2022 13:08:36 +0200 Subject: [PATCH 37/55] add di for window to make testable --- frontend/src/app/app-testing.module.ts | 18 ++-- .../mermaid-viewer.component.spec.ts | 94 ++++++++++++++++++- .../mermaid-viewer.component.ts | 28 +++--- .../app/services/data-studio.service.spec.ts | 2 +- 4 files changed, 120 insertions(+), 22 deletions(-) diff --git a/frontend/src/app/app-testing.module.ts b/frontend/src/app/app-testing.module.ts index 08e95ca..ad7c7c1 100644 --- a/frontend/src/app/app-testing.module.ts +++ b/frontend/src/app/app-testing.module.ts @@ -22,15 +22,21 @@ const fakeWindowProvider = ({ list = listener; }, getElementsByTagName: (_: string) => [ - { - hasAttribute: (__: string) => false, - getAttribute: (__: string) => '', - - } - ] + fakeElement + ], + getElementById: (__: string) => fakeElement, + querySelector: (__: string) => fakeElement } }) }); +const fakeElement = { + clientWidth: 100, + clientHeight: 100, + hasAttribute: (___: string) => false, + getAttribute: (___: string) => '', + removeAttribute: (___: string) => { }, + setAttribute: (___: string, ____: string) => { }, +}; @NgModule({ declarations: [ diff --git a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.spec.ts b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.spec.ts index ad10bf7..e7d2456 100644 --- a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.spec.ts +++ b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.spec.ts @@ -1,21 +1,31 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { of } from 'rxjs'; +import { delay } from 'rxjs/operators'; import { AppTestingModule } from '../../app-testing.module'; +import { ChartErrorKey, ChartError } from '../../models/error.model'; +import { DataStudioService } from '../../services/data-studio.service'; +import { StateInjector } from '../../services/state.token'; +import { State } from '../../state/state'; import { MermaidViewerComponent } from './mermaid-viewer.component'; describe('MermaidViewerComponent', () => { let component: MermaidViewerComponent; let fixture: ComponentFixture; + let dataStudioService: DataStudioService; beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [MermaidViewerComponent], + providers: [{ provide: StateInjector(ChartErrorKey), useValue: new State() }], imports: [AppTestingModule], }) .compileComponents(); }); beforeEach(() => { + dataStudioService = TestBed.inject(DataStudioService); + spyOn(dataStudioService, 'saveCommand'); fixture = TestBed.createComponent(MermaidViewerComponent); component = fixture.componentInstance; @@ -25,8 +35,88 @@ describe('MermaidViewerComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); -}); + describe('refreshZoom2', () => { + beforeEach(() => { + component.loaded = true; + component.scale = 0.8; + }); + + it('should zoom out', () => { + // Arrange + const initalScale = component.scale; + const wheelEvent = new WheelEvent('WheelEvent', { + deltaY: 10 + }); + // Act + component.refreshZoom2(wheelEvent); + // Assert + expect(component.scale).toBe(initalScale - 0.1); + }); + + it('should zoom in', () => { + // Arrange + const initalScale = component.scale; + const wheelEvent = new WheelEvent('WheelEvent', { + deltaY: -10 + }); + // Act + component.refreshZoom2(wheelEvent); + // Assert + expect(component.scale).toBe(initalScale + 0.1); + }); + + it('should not go out of lower bound', () => { + // Arrange + const wheelEvent = new WheelEvent('WheelEvent', { + deltaY: 1000 + }); + // Act + component.refreshZoom2(wheelEvent); + // Assert + expect(component.scale).toBe(0.1); + }); + + it('should not go out of upper bound', () => { + // Arrange + const wheelEvent = new WheelEvent('WheelEvent', { + deltaY: -1000 + }); + // Act + component.refreshZoom2(wheelEvent); + // Assert + expect(component.scale).toBe(4); + }); + }); + + describe('exportSvg', () => { + + it('should call export', () => { + // Act + component.exportSvg('svg', 'mermaid'); + // Assert + expect(dataStudioService.saveCommand).toHaveBeenCalledOnceWith({ chart: 'svg', mermaid: 'mermaid' }); + }); + }); + + describe('ViewBoxString', () => { + beforeEach(() => { + spyOnProperty(dataStudioService, 'Database$').and.returnValue(of({ svg: sampleSvg })); + fixture = TestBed.createComponent(MermaidViewerComponent); + component = fixture.componentInstance; + }); + + it('should be rendered based on scale and dimensions', fakeAsync(() => { + // Act + of().subscribe(() => { + expect(component.ViewBoxString).toBe('0 0 1000 1000'); + }); + tick(100); + })); + + }); + +}); const sampleSvg = `
    Person
    int Id
    Contact
    int Id
    string Email
    int PersonId
     diff --git a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts index 895bf53..7945c94 100644 --- a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts +++ b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts @@ -1,9 +1,10 @@ -import { Component, HostListener, OnDestroy } from '@angular/core'; +import { Component, HostListener, Inject, OnDestroy } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { BehaviorSubject, Observable, Subscription } from 'rxjs'; import { take } from 'rxjs/operators'; import { Exportable } from '../../models/exportable.model'; import { DataStudioService } from '../../services/data-studio.service'; +import { WINDOW } from '../../services/window.token'; @Component({ selector: 'app-mermaid-viewer', templateUrl: './mermaid-viewer.component.html', @@ -24,14 +25,17 @@ export class MermaidViewerComponent implements OnDestroy { private viewBox: BehaviorSubject = new BehaviorSubject(null); public svgSize: any = { w: 0, h: 0 }; public scale = 0.8; + public loaded = false; private startPoint: { x: number, y: number } = { x: 0, y: 0 }; private endPoint: { x: number, y: number } = { x: 0, y: 0 }; - private loaded = false; public database: Exportable | undefined; private viewBoxSubscription!: Subscription; - constructor(private readonly sanitizer: DomSanitizer, private readonly dataStudioService: DataStudioService) { + constructor( + private readonly sanitizer: DomSanitizer, + private readonly dataStudioService: DataStudioService, + @Inject(WINDOW) private readonly window: Window) { this.dataStudioService .Database$.pipe(take(1)).subscribe(d => { if (!this.database) { @@ -79,10 +83,8 @@ export class MermaidViewerComponent implements OnDestroy { @HostListener('body:mousedown', ['$event']) private startPan(e: MouseEvent): boolean { - if (!this.loaded) { - return true; - } - if (!(e.target as any).classList.contains('zoom')) { + + if (this.loaded && !(e.target as any).classList.contains('zoom')) { this.isPanning = true; this.startPoint = { x: e.x, y: e.y }; } @@ -121,7 +123,7 @@ export class MermaidViewerComponent implements OnDestroy { private setupSvgHandling(): void { setTimeout(() => { - this.svgElement = document.querySelector('#' + this.mermaidSvgId) as any as SVGElement; + this.svgElement = this.window.document.querySelector('#' + this.mermaidSvgId) as any as SVGElement; this.removeMermaidAttributes(); this.svgSize = { w: this.svgElement.clientWidth, h: this.svgElement.clientHeight }; this.viewBox.next({ x: 0, y: 0, ...this.svgSize }); @@ -132,7 +134,7 @@ export class MermaidViewerComponent implements OnDestroy { setTimeout(() => { this.viewBoxSubscription = this.viewBox.asObservable().subscribe(() => { - document.getElementById(this.mermaidSvgId)?.setAttribute('viewBox', this.ViewBoxString); + this.window.document.getElementById(this.mermaidSvgId)?.setAttribute('viewBox', this.ViewBoxString); }); }, 200); @@ -143,9 +145,9 @@ export class MermaidViewerComponent implements OnDestroy { } private removeMermaidAttributes(): void { - document.getElementById(this.mermaidSvgId)?.removeAttribute('style'); - document.getElementById(this.mermaidSvgId)?.removeAttribute('height'); - document.getElementById(this.mermaidSvgId)?.removeAttribute('width'); - document.getElementById(this.mermaidSvgId)?.removeAttribute('viewBox'); + this.window.document.getElementById(this.mermaidSvgId)?.removeAttribute('style'); + this.window.document.getElementById(this.mermaidSvgId)?.removeAttribute('height'); + this.window.document.getElementById(this.mermaidSvgId)?.removeAttribute('width'); + this.window.document.getElementById(this.mermaidSvgId)?.removeAttribute('viewBox'); } } diff --git a/frontend/src/app/services/data-studio.service.spec.ts b/frontend/src/app/services/data-studio.service.spec.ts index fd963e9..7241e00 100644 --- a/frontend/src/app/services/data-studio.service.spec.ts +++ b/frontend/src/app/services/data-studio.service.spec.ts @@ -193,7 +193,7 @@ describe('DataStudioService', () => { bindFunctions: (element: Element) => void ) => void) => { if (cb) { - cb(returnedSvg, (___: Element) => { }); // NOSONAR - this is a fake callback + cb(returnedSvg, (___: Element) => { }); // NOSONAR - this is a fake callbacka } return ''; }; From 7dd9e4edc606f0228eff227f41e09ee23c3866e0 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Fri, 1 Apr 2022 13:13:56 +0200 Subject: [PATCH 38/55] get rid of smells --- frontend/src/app/app-testing.module.ts | 4 ++-- .../mermaid-viewer/mermaid-viewer.component.spec.ts | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/app-testing.module.ts b/frontend/src/app/app-testing.module.ts index ad7c7c1..1d27495 100644 --- a/frontend/src/app/app-testing.module.ts +++ b/frontend/src/app/app-testing.module.ts @@ -34,8 +34,8 @@ const fakeElement = { clientHeight: 100, hasAttribute: (___: string) => false, getAttribute: (___: string) => '', - removeAttribute: (___: string) => { }, - setAttribute: (___: string, ____: string) => { }, + removeAttribute: (___: string) => { }, // NOSONAR - removeAttribute is for testing + setAttribute: (___: string, ____: string) => { }, // NOSONAR - setAttibute is for testing }; @NgModule({ diff --git a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.spec.ts b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.spec.ts index e7d2456..4aefecd 100644 --- a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.spec.ts +++ b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.spec.ts @@ -1,6 +1,5 @@ import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; import { of } from 'rxjs'; -import { delay } from 'rxjs/operators'; import { AppTestingModule } from '../../app-testing.module'; import { ChartErrorKey, ChartError } from '../../models/error.model'; import { DataStudioService } from '../../services/data-studio.service'; From eefe70f93e43d2b9b37044697554c709e3868b48 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Fri, 1 Apr 2022 13:39:52 +0200 Subject: [PATCH 39/55] extract add relation to builder service --- .../relation/relation.component.spec.ts | 28 ++++++++++ .../components/relation/relation.component.ts | 18 ++---- .../src/app/services/builder.service.spec.ts | 55 +++++++++++++++---- frontend/src/app/services/builder.service.ts | 33 ++++++++--- 4 files changed, 103 insertions(+), 31 deletions(-) diff --git a/frontend/src/app/components/relation/relation.component.spec.ts b/frontend/src/app/components/relation/relation.component.spec.ts index 47e2a6e..11489ed 100644 --- a/frontend/src/app/components/relation/relation.component.spec.ts +++ b/frontend/src/app/components/relation/relation.component.spec.ts @@ -1,11 +1,15 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { AppTestingModule } from '../../app-testing.module'; +import { Column } from '../../models/column.model'; +import { Table } from '../../models/table-svg.model'; +import { BuilderService } from '../../services/builder.service'; import { RelationComponent } from './relation.component'; describe('RelationComponent', () => { let component: RelationComponent; let fixture: ComponentFixture; + let builderService: BuilderService; beforeEach(async () => { await TestBed.configureTestingModule({ @@ -15,6 +19,8 @@ describe('RelationComponent', () => { }); beforeEach(() => { + builderService = TestBed.inject(BuilderService); + spyOn(builderService, 'addRelation'); fixture = TestBed.createComponent(RelationComponent); component = fixture.componentInstance; fixture.detectChanges(); @@ -23,4 +29,26 @@ describe('RelationComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + describe('selectTable ', () => { + it('should set the selected table', () => { + // Arrange + const table = new Table('table', 'schema'); + // Act + component.selectTable(table); + // Assert + expect(component.selectedTable).toEqual(table); + }); + }); + describe('selectColumn ', () => { + it('should set the selected column', () => { + // Arrange + const column1 = new Column(0, {} as Table, 'column1'); + const column2 = new Column(0, {} as Table, 'column2'); + // Act + component.selectColumn(column1, column2); + // Assert + expect(builderService.addRelation).toHaveBeenCalledWith(column1, column2); + expect(component.selectedTable).toBeUndefined(); + }); + }); }); diff --git a/frontend/src/app/components/relation/relation.component.ts b/frontend/src/app/components/relation/relation.component.ts index b1772df..f5fd70f 100644 --- a/frontend/src/app/components/relation/relation.component.ts +++ b/frontend/src/app/components/relation/relation.component.ts @@ -7,6 +7,7 @@ import { builderKey } from '../../models/builder.model'; import { Column } from '../../models/column.model'; import { Relation, relationStateKey } from '../../models/relation.model'; import { Table } from '../../models/table-svg.model'; +import { BuilderService } from '../../services/builder.service'; import { StateInjector } from '../../services/state.token'; import constants from '../../settings/constants'; import { State } from '../../state/state'; @@ -25,9 +26,9 @@ export class RelationComponent { public selectedTable: Table | undefined; constructor( @Inject(StateInjector(addRelationKey)) public readonly state: State, - @Inject(StateInjector(builderKey)) public readonly tableState: State, - @Inject(StateInjector(relationStateKey)) public readonly relationState: State, - private formBuilder: FormBuilder) { + @Inject(StateInjector(builderKey)) private readonly tableState: State, + private readonly builderService: BuilderService, + private readonly formBuilder: FormBuilder) { this.searchControl = this.formBuilder.control(''); this.searchResults$ = this.searchControl.valueChanges .pipe( @@ -39,16 +40,7 @@ export class RelationComponent { this.selectedTable = table; } public async selectColumn(from: Column, to: Column): Promise { - const relations = await this.relationState.select$.pipe(take(1)).toPromise(); - const tables = await this.tableState.select$.pipe(take(1)).toPromise(); - - const fromTable = tables.find(x => x.name === from.table.name && x.schema === from.table.schema); - const toTable = tables.find(x => x.name === to.table.name && x.schema === to.table.schema); - const relation = new Relation(from, to); - fromTable?.fromRelations.push(relation); - toTable?.toRelations.push(relation); - this.relationState.set([...relations ?? [], relation]); - this.tableState.set([...tables]); + await this.builderService.addRelation(from, to); this.state.clear(); this.selectedTable = undefined; } diff --git a/frontend/src/app/services/builder.service.spec.ts b/frontend/src/app/services/builder.service.spec.ts index 595af12..b11ae8d 100644 --- a/frontend/src/app/services/builder.service.spec.ts +++ b/frontend/src/app/services/builder.service.spec.ts @@ -2,6 +2,7 @@ import { TestBed } from '@angular/core/testing'; import { BehaviorSubject } from 'rxjs'; import { builderKey } from '../models/builder.model'; import { Column } from '../models/column.model'; +import { Relation, relationStateKey } from '../models/relation.model'; import { Table } from '../models/table-svg.model'; import { State } from '../state/state'; @@ -10,16 +11,28 @@ import { StateInjector } from './state.token'; describe('BuilderService', () => { let service: BuilderService; - let state: State; + let tableState: State; + let relationState: State; let stateSubject: BehaviorSubject; + let relationSubject: BehaviorSubject; beforeEach(() => { TestBed.configureTestingModule({ - providers: [{ provide: StateInjector(builderKey), useValue: new State() }], + providers: [ + { + provide: StateInjector(builderKey), useValue: new State(), + }, + { + provide: StateInjector(relationStateKey), useValue: new State(), + }], }); - state = TestBed.inject>(StateInjector(builderKey)); - spyOn(state, 'set'); + tableState = TestBed.inject>(StateInjector(builderKey)); + relationState = TestBed.inject>(StateInjector(relationStateKey)); + relationSubject = new BehaviorSubject(undefined as any as Relation[]); + spyOn(tableState, 'set'); + spyOn(relationState, 'set'); stateSubject = new BehaviorSubject(undefined as any as Table[]); - spyOnProperty(state, 'select$').and.returnValue(stateSubject.asObservable()); + spyOnProperty(tableState, 'select$').and.returnValue(stateSubject.asObservable()); + spyOnProperty(relationState, 'select$').and.returnValue(relationSubject.asObservable()); service = TestBed.inject(BuilderService); }); @@ -33,7 +46,7 @@ describe('BuilderService', () => { const arr = [new Table('table', 'dummy')]; // Act service.setTables(arr); - expect(state.set).toHaveBeenCalledWith(arr); + expect(tableState.set).toHaveBeenCalledWith(arr); }); }); @@ -48,7 +61,7 @@ describe('BuilderService', () => { await service.addTable(newTable); // Assert - expect(state.set).toHaveBeenCalledWith([...arr, newTable]); + expect(tableState.set).toHaveBeenCalledWith([...arr, newTable]); }); }); @@ -64,7 +77,7 @@ describe('BuilderService', () => { await service.renameTable(table, newName); // Assert - expect(state.set).toHaveBeenCalledWith([new Table(newName, 'dummy')]); + expect(tableState.set).toHaveBeenCalledWith([new Table(newName, 'dummy')]); }); }); @@ -82,7 +95,7 @@ describe('BuilderService', () => { // Assert const expected = new Table('table', 'dummy'); expected.columns.push(new Column(0, table, newName)); - expect(state.set).toHaveBeenCalledWith([expected]); + expect(tableState.set).toHaveBeenCalledWith([expected]); }); }); @@ -103,7 +116,29 @@ describe('BuilderService', () => { // Assert const expected = new Table('table', 'dummy'); expected.columns.push(new Column(0, table, newName)); - expect(state.set).toHaveBeenCalledWith([expected]); + expect(tableState.set).toHaveBeenCalledWith([expected]); + }); + }); + + describe('addRelation', () => { + it('should add relation between columns', async () => { + // Arrange + const table1 = new Table('table', 'dummy'); + const column1 = new Column(0, table1, 'column1'); + table1.columns.push(column1); + + const table2 = new Table('table', 'dummy'); + const column2 = new Column(0, table2, 'column2'); + table2.columns.push(column2); + + const arr = [table1, table2]; + stateSubject.next(arr); + + // Act + await service.addRelation(column1, column2); + + // Assert + expect(relationState.set).toHaveBeenCalledWith([new Relation(column1, column2)]); }); }); diff --git a/frontend/src/app/services/builder.service.ts b/frontend/src/app/services/builder.service.ts index a806efe..b550d26 100644 --- a/frontend/src/app/services/builder.service.ts +++ b/frontend/src/app/services/builder.service.ts @@ -2,6 +2,7 @@ import { Inject, Injectable } from '@angular/core'; import { take } from 'rxjs/operators'; import { builderKey } from '../models/builder.model'; import { Column } from '../models/column.model'; +import { Relation, relationStateKey } from '../models/relation.model'; import { Table } from '../models/table-svg.model'; import { State } from '../state/state'; import { StateInjector } from './state.token'; @@ -11,16 +12,18 @@ import { StateInjector } from './state.token'; }) export class BuilderService { - constructor(@Inject(StateInjector(builderKey)) public readonly state: State) { - this.state.set([]); + constructor( + @Inject(StateInjector(builderKey)) public readonly tableState: State, + @Inject(StateInjector(relationStateKey)) public readonly relationState: State,) { + this.tableState.set([]); } public setTables(tables: Table[]): void { - this.state.set([...tables]); + this.tableState.set([...tables]); } public async addTable(table: Table): Promise { const tables = await this.getTables(); if (tables) { - this.state.set([...tables, table]); + this.tableState.set([...tables, table]); } } @@ -29,7 +32,7 @@ export class BuilderService { if (tables) { const tableIndex = tables.findIndex(t => t.name === table.name && t.schema === table.schema); tables[tableIndex].name = newName; - this.state.set(tables); + this.tableState.set(tables); } } public async addColumn(table: Table, columnName: string): Promise { @@ -45,10 +48,24 @@ export class BuilderService { tableRef.columns.push(column); - this.state.set(tables); + this.tableState.set(tables); } } + public async addRelation(from: Column, to: Column): Promise { + const relations = await this.relationState.select$.pipe(take(1)).toPromise(); + const tables = await this.getTables(); + + const fromTable = tables.find(x => x.name === from.table.name && x.schema === from.table.schema); + const toTable = tables.find(x => x.name === to.table.name && x.schema === to.table.schema); + + const relation = new Relation(from, to); + fromTable?.fromRelations.push(relation); + toTable?.toRelations.push(relation); + this.relationState.set([...relations ?? [], relation]); + this.tableState.set([...tables]); + } + public async renameColumn(table: Table, column: Column, newName: string): Promise { const tables = await this.getTables(); if (tables) { @@ -57,11 +74,11 @@ export class BuilderService { tableRef.columns[column.index].name = newName; - this.state.set(tables); + this.tableState.set(tables); } } private async getTables(): Promise { - const tables = await this.state.select$.pipe(take(1)).toPromise(); + const tables = await this.tableState.select$.pipe(take(1)).toPromise(); return [...tables]; } From ad603b6814a102fb3a87563be6b1e241a1bfacb0 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Fri, 1 Apr 2022 13:41:39 +0200 Subject: [PATCH 40/55] get rid of unused imports --- frontend/src/app/components/relation/relation.component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/app/components/relation/relation.component.ts b/frontend/src/app/components/relation/relation.component.ts index f5fd70f..98d5d61 100644 --- a/frontend/src/app/components/relation/relation.component.ts +++ b/frontend/src/app/components/relation/relation.component.ts @@ -1,11 +1,10 @@ import { Component, ElementRef, Inject, ViewChild } from '@angular/core'; import { FormBuilder, FormControl } from '@angular/forms'; import { Observable } from 'rxjs'; -import { map, switchMap, take } from 'rxjs/operators'; +import { map, switchMap } from 'rxjs/operators'; import { AddRelation, addRelationKey } from '../../models/add-relation.model'; import { builderKey } from '../../models/builder.model'; import { Column } from '../../models/column.model'; -import { Relation, relationStateKey } from '../../models/relation.model'; import { Table } from '../../models/table-svg.model'; import { BuilderService } from '../../services/builder.service'; import { StateInjector } from '../../services/state.token'; From cba9b69fea3fc76baf6f59175bd7159d2ddd215e Mon Sep 17 00:00:00 2001 From: R0tenur Date: Fri, 1 Apr 2022 13:44:51 +0200 Subject: [PATCH 41/55] remove unused scaffolded scss --- frontend/src/app/app.component.scss | 0 frontend/src/app/app.component.ts | 1 - 2 files changed, 1 deletion(-) delete mode 100644 frontend/src/app/app.component.scss diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 5f0b75c..7edafeb 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -9,7 +9,6 @@ import { AddRelation, addRelationKey } from './models/add-relation.model'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] }) export class AppComponent { From 02ddbdb1eace04e3c8dbcf818aa945a8cab6cc5a Mon Sep 17 00:00:00 2001 From: R0tenur Date: Fri, 1 Apr 2022 13:49:28 +0200 Subject: [PATCH 42/55] get rid of unused stuff --- frontend/src/app/components/button/button.component.ts | 1 - frontend/src/app/components/dev-bar/dev-bar.component.scss | 0 frontend/src/app/components/dev-bar/dev-bar.component.ts | 7 ++----- .../mermaid-viewer/mermaid-viewer.component.scss | 4 ++-- 4 files changed, 4 insertions(+), 8 deletions(-) delete mode 100644 frontend/src/app/components/dev-bar/dev-bar.component.scss diff --git a/frontend/src/app/components/button/button.component.ts b/frontend/src/app/components/button/button.component.ts index 5466142..d83b6c4 100644 --- a/frontend/src/app/components/button/button.component.ts +++ b/frontend/src/app/components/button/button.component.ts @@ -7,5 +7,4 @@ import { Component, EventEmitter, Output } from '@angular/core'; }) export class ButtonComponent { @Output() public readonly clicked = new EventEmitter(); - constructor() { } } diff --git a/frontend/src/app/components/dev-bar/dev-bar.component.scss b/frontend/src/app/components/dev-bar/dev-bar.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/app/components/dev-bar/dev-bar.component.ts b/frontend/src/app/components/dev-bar/dev-bar.component.ts index d2bbd26..f0ab553 100644 --- a/frontend/src/app/components/dev-bar/dev-bar.component.ts +++ b/frontend/src/app/components/dev-bar/dev-bar.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { Status } from '../../../../../shared/models/status.enum'; import { DataStudioService } from '../../services/data-studio.service'; import { FakeDbService } from '../../services/fake-db.service'; @@ -6,14 +6,11 @@ import { FakeDbService } from '../../services/fake-db.service'; @Component({ selector: 'app-dev-bar', templateUrl: './dev-bar.component.html', - styleUrls: ['./dev-bar.component.scss'] }) -export class DevBarComponent implements OnInit { +export class DevBarComponent { public numberOfTables = 10; constructor(public readonly azData: DataStudioService, private readonly fakeDb: FakeDbService) { } - ngOnInit(): void { - } public async triggerFakeEvent(): Promise { const chart = this.fakeDb.createDiagram(this.numberOfTables); diff --git a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.scss b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.scss index 976753d..bc93d4e 100644 --- a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.scss +++ b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.scss @@ -33,7 +33,7 @@ width: 25px; height: 25px; border-radius: 50%; - background: #4CAF50;; + background: #4CAF50; cursor: pointer; } @@ -41,7 +41,7 @@ width: 25px; height: 25px; border-radius: 50%; - background: #4CAF50;; + background: #4CAF50; cursor: pointer; } .svg-container { From 5fd3d5dff574f62b147765499934afc454751496 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Fri, 1 Apr 2022 13:54:16 +0200 Subject: [PATCH 43/55] add wall of badges --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 8614782..a18991c 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,14 @@ ![GitHub All Releases](https://img.shields.io/github/downloads/r0tenur/visualization/total) +[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=ncloc)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization) [![codecov](https://codecov.io/gh/R0tenur/visualization/branch/master/graph/badge.svg?token=COOVEK6DW1)](https://codecov.io/gh/R0tenur/visualization) +[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=code_smells)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization) +[![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=duplicated_lines_density)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization) +[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization) +[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization) +[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization) +[![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=sqale_index)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization) +[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization) +[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=R0tenur_visualization&metric=bugs)](https://sonarcloud.io/summary/new_code?id=R0tenur_visualization) # Schema Visualization Visulizes databases in "Azure data studio" using mermaid.js From 44876e09d6c8bb2fc023c7efedc8301060f55095 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Fri, 1 Apr 2022 13:56:19 +0200 Subject: [PATCH 44/55] fix some smells --- frontend/src/styles.scss | 2 +- frontend/src/test.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 9c83a8c..162b181 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -4,7 +4,7 @@ } body:not([data-vscode-theme-name]) { - --vscode-foreground: #ccccc; + --vscode-foreground: #cccccc; color: #cccccc; background-color: #282c34; } diff --git a/frontend/src/test.ts b/frontend/src/test.ts index 50193eb..1c29a2e 100644 --- a/frontend/src/test.ts +++ b/frontend/src/test.ts @@ -22,4 +22,4 @@ getTestBed().initTestEnvironment( // Then we find all the tests. const context = require.context('./', true, /\.spec\.ts$/); // And load the modules. -context.keys().map(context); +context.keys().forEach(context); From 569f2f60e2d8c6e7ad45bbddb5f7adfeb770a2e9 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Tue, 5 Apr 2022 12:26:18 +0200 Subject: [PATCH 45/55] add highlight state when altering stuff --- frontend/src/app/models/highlighted.model.ts | 5 ++ .../src/app/services/builder.service.spec.ts | 19 ++++++- frontend/src/app/services/builder.service.ts | 57 ++++++++++--------- 3 files changed, 53 insertions(+), 28 deletions(-) create mode 100644 frontend/src/app/models/highlighted.model.ts diff --git a/frontend/src/app/models/highlighted.model.ts b/frontend/src/app/models/highlighted.model.ts new file mode 100644 index 0000000..866a82d --- /dev/null +++ b/frontend/src/app/models/highlighted.model.ts @@ -0,0 +1,5 @@ +import { Column } from './column.model'; +import { Table } from './table-svg.model'; + +export const highlightedKey = 'highlightedKey'; +export type Highlighted = Table | Column; diff --git a/frontend/src/app/services/builder.service.spec.ts b/frontend/src/app/services/builder.service.spec.ts index b11ae8d..09e4ad5 100644 --- a/frontend/src/app/services/builder.service.spec.ts +++ b/frontend/src/app/services/builder.service.spec.ts @@ -2,6 +2,7 @@ import { TestBed } from '@angular/core/testing'; import { BehaviorSubject } from 'rxjs'; import { builderKey } from '../models/builder.model'; import { Column } from '../models/column.model'; +import { Highlighted, highlightedKey } from '../models/highlighted.model'; import { Relation, relationStateKey } from '../models/relation.model'; import { Table } from '../models/table-svg.model'; import { State } from '../state/state'; @@ -15,6 +16,7 @@ describe('BuilderService', () => { let relationState: State; let stateSubject: BehaviorSubject; let relationSubject: BehaviorSubject; + let highlightedState: State; beforeEach(() => { TestBed.configureTestingModule({ providers: [ @@ -23,13 +25,21 @@ describe('BuilderService', () => { }, { provide: StateInjector(relationStateKey), useValue: new State(), - }], + }, + { + provide: StateInjector(highlightedKey), useValue: new State(), + }, + ], }); tableState = TestBed.inject>(StateInjector(builderKey)); relationState = TestBed.inject>(StateInjector(relationStateKey)); + highlightedState = TestBed.inject>(StateInjector(highlightedKey)); relationSubject = new BehaviorSubject(undefined as any as Relation[]); + spyOn(tableState, 'set'); spyOn(relationState, 'set'); + spyOn(highlightedState, 'set'); + stateSubject = new BehaviorSubject(undefined as any as Table[]); spyOnProperty(tableState, 'select$').and.returnValue(stateSubject.asObservable()); spyOnProperty(relationState, 'select$').and.returnValue(relationSubject.asObservable()); @@ -62,6 +72,8 @@ describe('BuilderService', () => { // Assert expect(tableState.set).toHaveBeenCalledWith([...arr, newTable]); + expect(highlightedState.set).toHaveBeenCalledWith(newTable); + }); }); @@ -78,6 +90,8 @@ describe('BuilderService', () => { // Assert expect(tableState.set).toHaveBeenCalledWith([new Table(newName, 'dummy')]); + expect(highlightedState.set).toHaveBeenCalledWith(new Table(newName, 'dummy')); + }); }); @@ -96,6 +110,7 @@ describe('BuilderService', () => { const expected = new Table('table', 'dummy'); expected.columns.push(new Column(0, table, newName)); expect(tableState.set).toHaveBeenCalledWith([expected]); + expect(highlightedState.set).toHaveBeenCalledWith(expected.columns[0]); }); }); @@ -117,6 +132,7 @@ describe('BuilderService', () => { const expected = new Table('table', 'dummy'); expected.columns.push(new Column(0, table, newName)); expect(tableState.set).toHaveBeenCalledWith([expected]); + expect(highlightedState.set).toHaveBeenCalledWith(expected.columns[0]); }); }); @@ -139,6 +155,7 @@ describe('BuilderService', () => { // Assert expect(relationState.set).toHaveBeenCalledWith([new Relation(column1, column2)]); + expect(highlightedState.set).toHaveBeenCalledWith(column1); }); }); diff --git a/frontend/src/app/services/builder.service.ts b/frontend/src/app/services/builder.service.ts index b550d26..cafe1d8 100644 --- a/frontend/src/app/services/builder.service.ts +++ b/frontend/src/app/services/builder.service.ts @@ -2,6 +2,7 @@ import { Inject, Injectable } from '@angular/core'; import { take } from 'rxjs/operators'; import { builderKey } from '../models/builder.model'; import { Column } from '../models/column.model'; +import { Highlighted, highlightedKey } from '../models/highlighted.model'; import { Relation, relationStateKey } from '../models/relation.model'; import { Table } from '../models/table-svg.model'; import { State } from '../state/state'; @@ -11,45 +12,46 @@ import { StateInjector } from './state.token'; providedIn: 'root' }) export class BuilderService { + private tableIndex = -1; + private columnIndex = -1; constructor( @Inject(StateInjector(builderKey)) public readonly tableState: State, - @Inject(StateInjector(relationStateKey)) public readonly relationState: State,) { + @Inject(StateInjector(relationStateKey)) public readonly relationState: State, + @Inject(StateInjector(highlightedKey)) public readonly highlightedState: State + ) { this.tableState.set([]); } public setTables(tables: Table[]): void { this.tableState.set([...tables]); } - public async addTable(table: Table): Promise { + public async addTable(table: Table = new Table('untitled' + this.tableIndex++, 'dbo')): Promise { const tables = await this.getTables(); - if (tables) { - this.tableState.set([...tables, table]); - } + this.highlightedState.set(table); + this.tableState.set([...tables, table]); } public async renameTable(table: Table, newName: string): Promise { const tables = await this.getTables(); - if (tables) { - const tableIndex = tables.findIndex(t => t.name === table.name && t.schema === table.schema); - tables[tableIndex].name = newName; - this.tableState.set(tables); - } + const tableIndex = tables.findIndex(t => t.name === table.name && t.schema === table.schema); + tables[tableIndex].name = newName; + this.tableState.set(tables); + this.highlightedState.set(table); } public async addColumn(table: Table, columnName: string): Promise { const tables = await this.getTables(); - if (tables) { - const tableRef = tables.find(t => t.name === table.name && t.schema === table.schema); - if (!tableRef) { return; } + const tableRef = tables.find(t => t.name === table.name && t.schema === table.schema); + if (!tableRef) { return; } - const column = new Column( - tableRef.columns.length, - tableRef, - columnName); + const column = new Column( + tableRef.columns.length, + tableRef, + columnName); - tableRef.columns.push(column); + tableRef.columns.push(column); + this.tableState.set(tables); + this.highlightedState.set(column); - this.tableState.set(tables); - } } public async addRelation(from: Column, to: Column): Promise { @@ -64,22 +66,23 @@ export class BuilderService { toTable?.toRelations.push(relation); this.relationState.set([...relations ?? [], relation]); this.tableState.set([...tables]); + this.highlightedState.set(from); } public async renameColumn(table: Table, column: Column, newName: string): Promise { const tables = await this.getTables(); - if (tables) { - const tableRef = tables.find(t => t.name === table.name && t.schema === table.schema); - if (!tableRef) { return; } - tableRef.columns[column.index].name = newName; + const tableRef = tables.find(t => t.name === table.name && t.schema === table.schema); + if (!tableRef) { return; } - this.tableState.set(tables); - } + tableRef.columns[column.index].name = newName; + + this.tableState.set(tables); + this.highlightedState.set(column); } private async getTables(): Promise { const tables = await this.tableState.select$.pipe(take(1)).toPromise(); - return [...tables]; + return [...tables ?? []]; } } From 2ce8dd58ef8bc94956bcd804f4833e28dbc2ae4c Mon Sep 17 00:00:00 2001 From: R0tenur Date: Tue, 5 Apr 2022 12:31:26 +0200 Subject: [PATCH 46/55] make stuff private --- frontend/src/app/services/builder.service.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/services/builder.service.ts b/frontend/src/app/services/builder.service.ts index cafe1d8..30f8658 100644 --- a/frontend/src/app/services/builder.service.ts +++ b/frontend/src/app/services/builder.service.ts @@ -16,9 +16,9 @@ export class BuilderService { private columnIndex = -1; constructor( - @Inject(StateInjector(builderKey)) public readonly tableState: State, - @Inject(StateInjector(relationStateKey)) public readonly relationState: State, - @Inject(StateInjector(highlightedKey)) public readonly highlightedState: State + @Inject(StateInjector(builderKey)) private readonly tableState: State, + @Inject(StateInjector(relationStateKey)) private readonly relationState: State, + @Inject(StateInjector(highlightedKey)) private readonly highlightedState: State ) { this.tableState.set([]); } From b57b557f62b66604ecf540e0736fe19476b6465d Mon Sep 17 00:00:00 2001 From: R0tenur Date: Fri, 8 Apr 2022 17:13:30 +0200 Subject: [PATCH 47/55] test: add event handling to fake window --- frontend/src/app/app-testing.module.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/src/app/app-testing.module.ts b/frontend/src/app/app-testing.module.ts index 1d27495..84a006e 100644 --- a/frontend/src/app/app-testing.module.ts +++ b/frontend/src/app/app-testing.module.ts @@ -21,6 +21,10 @@ const fakeWindowProvider = ({ addEventListener: (_: string, listener: () => void) => { list = listener; }, + removeEventListener: (_: string, __: () => void) => { + list = undefined as any as (e: Event) => void; + }, + dispatchEvent: (e: Event) => list(e), getElementsByTagName: (_: string) => [ fakeElement ], From b9a33c9aa645d42bace7225ef090b1f8bfe095f8 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Fri, 8 Apr 2022 17:15:49 +0200 Subject: [PATCH 48/55] feat: add highlightning to tables and columns --- .../src/app/components/chart/chart.component.svg | 16 +++++++++++----- .../src/app/components/chart/chart.component.ts | 11 +++++++++-- frontend/src/app/models/column.model.ts | 6 ++++++ frontend/src/app/models/table-svg.model.ts | 2 +- 4 files changed, 27 insertions(+), 8 deletions(-) diff --git a/frontend/src/app/components/chart/chart.component.svg b/frontend/src/app/components/chart/chart.component.svg index d2c4a1a..6f1e62b 100644 --- a/frontend/src/app/components/chart/chart.component.svg +++ b/frontend/src/app/components/chart/chart.component.svg @@ -1,15 +1,15 @@ - + - - {{table.schema}}.{{table.name}} + + {{table.schema}}.{{table.name}} - - {{column.name}} + + {{column.name}} @@ -27,6 +27,12 @@ + + + + + + diff --git a/frontend/src/app/components/chart/chart.component.ts b/frontend/src/app/components/chart/chart.component.ts index ba5c6b1..743cfe0 100644 --- a/frontend/src/app/components/chart/chart.component.ts +++ b/frontend/src/app/components/chart/chart.component.ts @@ -10,6 +10,7 @@ import { WINDOW } from '../../services/window.token'; import constants from '../../settings/constants'; import { StateInjector } from '../../services/state.token'; import { State } from '../../state/state'; +import { Highlighted, highlightedKey } from '../../models/highlighted.model'; @Component({ selector: 'app-chart', @@ -40,7 +41,8 @@ export class ChartComponent { @Inject(WINDOW) private readonly window: Window, @Inject(StateInjector(relationStateKey)) public readonly relationState: State, private readonly builderService: BuilderService, - private readonly contextMenuService: ContextMenuService) { + private readonly contextMenuService: ContextMenuService, + @Inject(StateInjector(highlightedKey)) public readonly highlightedState: State) { this.svgSize = { w: this.window.innerWidth, h: this.window.innerHeight }; this.viewBox.next({ x: 0, y: 0, ...this.svgSize }); this.scale = 0.8; @@ -93,7 +95,12 @@ export class ChartComponent { } this.viewBox.next(this.viewBox.value); } - + public highlight(highight: Highlighted): void { + this.highlightedState.set(highight); + } + public unHiglight(): void { + this.highlightedState.clear(); + } } diff --git a/frontend/src/app/models/column.model.ts b/frontend/src/app/models/column.model.ts index f107d59..24fd17a 100644 --- a/frontend/src/app/models/column.model.ts +++ b/frontend/src/app/models/column.model.ts @@ -5,6 +5,12 @@ import { Table } from './table-svg.model'; export class Column implements SvgPosition { public readonly width = constants.tableWidth; public readonly height = constants.columnHeight; + public get x(): number { + return this.table.x; + } + public get y(): number { + return this.table.y + this.table.titleHeight + (this.height * (this.index)); + } public get xBox(): number { return this.table.x; } diff --git a/frontend/src/app/models/table-svg.model.ts b/frontend/src/app/models/table-svg.model.ts index fbf5c96..482369d 100644 --- a/frontend/src/app/models/table-svg.model.ts +++ b/frontend/src/app/models/table-svg.model.ts @@ -25,7 +25,7 @@ export class Table { return this.y; } public get height(): number { - return this.titleHeight + this.columns.length * constants.columnHeight; + return this.titleHeight + this.columns.length * constants.columnHeight + (this.columns.length ? constants.columnHeight * .5 : 0); } public get bottomPosition(): number { return this.y + this.height; From 1f3935618c6de4dbd70cd81412bcaf5f34388462 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Fri, 8 Apr 2022 17:16:27 +0200 Subject: [PATCH 49/55] feat: add shortcuts --- frontend/src/app/app.component.ts | 4 + frontend/src/app/app.module.ts | 7 +- .../components/builder/builder.component.ts | 8 +- .../components/relation/relation.component.ts | 13 ++- .../rename-modal/rename-modal.component.ts | 17 +++- frontend/src/app/services/builder.service.ts | 20 +++- .../src/app/services/shortcut.service.spec.ts | 92 +++++++++++++++++++ frontend/src/app/services/shortcut.service.ts | 51 ++++++++++ 8 files changed, 197 insertions(+), 15 deletions(-) create mode 100644 frontend/src/app/services/shortcut.service.spec.ts create mode 100644 frontend/src/app/services/shortcut.service.ts diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 7edafeb..0dd4ea2 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -5,6 +5,7 @@ import { StateInjector } from './services/state.token'; import { Rename, renameKey } from './models/rename.model'; import { State } from './state/state'; import { AddRelation, addRelationKey } from './models/add-relation.model'; +import { shortcutsDisabledKey } from './services/shortcut.service'; @Component({ selector: 'app-root', @@ -17,12 +18,15 @@ export class AppComponent { public readonly contextMenu: ContextMenuService, @Inject(StateInjector(renameKey)) private readonly rename: State, @Inject(StateInjector(addRelationKey)) private readonly addRelation: State, + @Inject(StateInjector(shortcutsDisabledKey)) private readonly shortcutDisabledState: State, + ) { } public clearOverlays(): void { this.contextMenu.clear(); this.rename.clear(); this.addRelation.clear(); + this.shortcutDisabledState.set(false); } } diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 51f4627..4220feb 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -1,6 +1,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; -import { ReactiveFormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { MermaidViewerComponent } from './components/mermaid-viewer/mermaid-viewer.component'; @@ -17,7 +17,6 @@ import { ChartComponent } from './components/chart/chart.component'; import { ContextMenuComponent } from './components/context-menu/context-menu.component'; import { RenameModalComponent } from './components/rename-modal/rename-modal.component'; import { RelationComponent } from './components/relation/relation.component'; - @NgModule({ declarations: [ AppComponent, @@ -36,10 +35,10 @@ import { RelationComponent } from './components/relation/relation.component'; imports: [ BrowserModule, ReactiveFormsModule, + FormsModule, RouterModule.forRoot(routes), ], - providers: [ - ], bootstrap: [AppComponent] }) export class AppModule { } + diff --git a/frontend/src/app/components/builder/builder.component.ts b/frontend/src/app/components/builder/builder.component.ts index 305998a..6f82904 100644 --- a/frontend/src/app/components/builder/builder.component.ts +++ b/frontend/src/app/components/builder/builder.component.ts @@ -1,14 +1,18 @@ import { Component, Inject } from '@angular/core'; import { builderKey } from '../../models/builder.model'; import { Table } from '../../models/table-svg.model'; +import { ShortcutService } from '../../services/shortcut.service'; import { StateInjector } from '../../services/state.token'; import { State } from '../../state/state'; @Component({ selector: 'app-builder', - templateUrl: './builder.component.html' + templateUrl: './builder.component.html', + providers: [ShortcutService], }) export class BuilderComponent { constructor( - @Inject(StateInjector(builderKey)) public readonly builderState: State) {} + @Inject(StateInjector(builderKey)) public readonly builderState: State, + readonly shortCuts: ShortcutService, + ) { } } diff --git a/frontend/src/app/components/relation/relation.component.ts b/frontend/src/app/components/relation/relation.component.ts index 98d5d61..0ca0ba2 100644 --- a/frontend/src/app/components/relation/relation.component.ts +++ b/frontend/src/app/components/relation/relation.component.ts @@ -1,12 +1,13 @@ import { Component, ElementRef, Inject, ViewChild } from '@angular/core'; import { FormBuilder, FormControl } from '@angular/forms'; import { Observable } from 'rxjs'; -import { map, switchMap } from 'rxjs/operators'; +import { map, switchMap, tap } from 'rxjs/operators'; import { AddRelation, addRelationKey } from '../../models/add-relation.model'; import { builderKey } from '../../models/builder.model'; import { Column } from '../../models/column.model'; import { Table } from '../../models/table-svg.model'; import { BuilderService } from '../../services/builder.service'; +import { shortcutsDisabledKey } from '../../services/shortcut.service'; import { StateInjector } from '../../services/state.token'; import constants from '../../settings/constants'; import { State } from '../../state/state'; @@ -23,15 +24,18 @@ export class RelationComponent { public readonly searchResults$: Observable; public selectedTable: Table | undefined; + private selected = false; constructor( @Inject(StateInjector(addRelationKey)) public readonly state: State, @Inject(StateInjector(builderKey)) private readonly tableState: State, + @Inject(StateInjector(shortcutsDisabledKey)) private readonly shortcutDisabledState: State, private readonly builderService: BuilderService, private readonly formBuilder: FormBuilder) { this.searchControl = this.formBuilder.control(''); this.searchResults$ = this.searchControl.valueChanges .pipe( switchMap((searchString: string) => this.tableState.select$.pipe( + tap(() => this.selectedTable = undefined), map(x => x.filter(y => y.name.toLowerCase().includes(searchString.toLowerCase()))), ))); } @@ -42,12 +46,19 @@ export class RelationComponent { await this.builderService.addRelation(from, to); this.state.clear(); this.selectedTable = undefined; + this.shortcutDisabledState.set(false); + this.selected = false; } public focusInput(): string { this.delay(0).then(() => { if (this.searchInput) { this.searchInput.nativeElement.focus(); + if (!this.selected) { + this.searchInput.nativeElement.select(); + this.selected = true; + this.shortcutDisabledState.set(true); + } } }); diff --git a/frontend/src/app/components/rename-modal/rename-modal.component.ts b/frontend/src/app/components/rename-modal/rename-modal.component.ts index 7fefdbd..a030063 100644 --- a/frontend/src/app/components/rename-modal/rename-modal.component.ts +++ b/frontend/src/app/components/rename-modal/rename-modal.component.ts @@ -1,6 +1,7 @@ import { Component, ElementRef, Inject, ViewChild } from '@angular/core'; import { Rename, renameKey } from '../../models/rename.model'; import { BuilderService } from '../../services/builder.service'; +import { shortcutsDisabledKey } from '../../services/shortcut.service'; import { StateInjector } from '../../services/state.token'; import constants from '../../settings/constants'; import { State } from '../../state/state'; @@ -13,11 +14,16 @@ import { State } from '../../state/state'; export class RenameModalComponent { public constants = constants; @ViewChild('renameInput') public renameInput!: ElementRef; + private selected = false; constructor( @Inject(StateInjector(renameKey)) public readonly state: State, + @Inject(StateInjector(shortcutsDisabledKey)) private readonly shortcutDisabledState: State, private readonly builderService: BuilderService) { } public setName(rename: Rename, newName: string): void { this.state.clear(); + this.selected = false; + this.shortcutDisabledState.set(false); + this.selected = false; if (rename.table) { if (rename.column) { this.builderService.renameColumn(rename.table, rename.column, newName); @@ -25,13 +31,18 @@ export class RenameModalComponent { } this.builderService.renameTable(rename.table, newName); } - } public focusInput(): string { + + this.delay(0).then(() => { - if (this.renameInput) - { + if (this.renameInput) { this.renameInput.nativeElement.focus(); + if (!this.selected) { + this.shortcutDisabledState.set(true); + this.renameInput.nativeElement.select(); + this.selected = true; + } } }); diff --git a/frontend/src/app/services/builder.service.ts b/frontend/src/app/services/builder.service.ts index 30f8658..298eb70 100644 --- a/frontend/src/app/services/builder.service.ts +++ b/frontend/src/app/services/builder.service.ts @@ -3,7 +3,9 @@ import { take } from 'rxjs/operators'; import { builderKey } from '../models/builder.model'; import { Column } from '../models/column.model'; import { Highlighted, highlightedKey } from '../models/highlighted.model'; +import { Position } from '../models/position.model'; import { Relation, relationStateKey } from '../models/relation.model'; +import { Rename, renameKey } from '../models/rename.model'; import { Table } from '../models/table-svg.model'; import { State } from '../state/state'; import { StateInjector } from './state.token'; @@ -18,17 +20,25 @@ export class BuilderService { constructor( @Inject(StateInjector(builderKey)) private readonly tableState: State, @Inject(StateInjector(relationStateKey)) private readonly relationState: State, - @Inject(StateInjector(highlightedKey)) private readonly highlightedState: State + @Inject(StateInjector(highlightedKey)) private readonly highlightedState: State, + @Inject(StateInjector(renameKey)) public readonly renameState: State, + ) { this.tableState.set([]); } public setTables(tables: Table[]): void { this.tableState.set([...tables]); } - public async addTable(table: Table = new Table('untitled' + this.tableIndex++, 'dbo')): Promise { + public async addTable( + table: Table = new Table('untitled' + this.tableIndex++, 'dbo'), + position: Position = { x: 0, y: 0 }): Promise { const tables = await this.getTables(); + table.setPosition(position.x, position.y); this.highlightedState.set(table); - this.tableState.set([...tables, table]); + tables.push(table); + this.tableState.set(tables); + this.renameState.set({ table, position: { x: table.x, y: table.y } }); + } public async renameTable(table: Table, newName: string): Promise { @@ -40,7 +50,7 @@ export class BuilderService { } public async addColumn(table: Table, columnName: string): Promise { const tables = await this.getTables(); - const tableRef = tables.find(t => t.name === table.name && t.schema === table.schema); + const tableRef = tables?.find(t => t.name === table.name && t.schema === table.schema); if (!tableRef) { return; } const column = new Column( @@ -51,7 +61,7 @@ export class BuilderService { tableRef.columns.push(column); this.tableState.set(tables); this.highlightedState.set(column); - + this.renameState.set({ column, table, position: { x: column.x, y: column.y } }); } public async addRelation(from: Column, to: Column): Promise { diff --git a/frontend/src/app/services/shortcut.service.spec.ts b/frontend/src/app/services/shortcut.service.spec.ts new file mode 100644 index 0000000..cc44714 --- /dev/null +++ b/frontend/src/app/services/shortcut.service.spec.ts @@ -0,0 +1,92 @@ +import { TestBed } from '@angular/core/testing'; +import { BehaviorSubject } from 'rxjs'; +import { AppTestingModule } from '../app-testing.module'; +import { AddRelation, addRelationKey } from '../models/add-relation.model'; +import { Highlighted, highlightedKey } from '../models/highlighted.model'; +import { State } from '../state/state'; +import { BuilderService } from './builder.service'; + +import { shortcutsDisabledKey, ShortcutService } from './shortcut.service'; +import { StateInjector } from './state.token'; +import { WINDOW } from './window.token'; + +describe('ShortcutService', () => { + let service: ShortcutService; + let builderService: BuilderService; + let windowRef: Window; + let highlightedState: State; + let highlightedSubject: BehaviorSubject; + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [AppTestingModule], + providers: [ + ShortcutService, + { provide: StateInjector(highlightedKey), useValue: new State() }, + { provide: StateInjector(addRelationKey), useValue: new State() }, + { provide: StateInjector(shortcutsDisabledKey), useValue: new State() }, + ] + }); + builderService = TestBed.inject(BuilderService); + windowRef = TestBed.inject(WINDOW); + highlightedState = TestBed.inject(StateInjector(highlightedKey)); + highlightedSubject = new BehaviorSubject(undefined as any as Highlighted); + spyOnProperty(highlightedState, 'select$').and.returnValue(highlightedSubject.asObservable()); + service = TestBed.inject(ShortcutService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); + describe('keypress t', () => { + it('should add table with no position when noting is highlighted', () => { + // Arrange + spyOn(builderService, 'addTable').and.returnValue(Promise.resolve()); + const event = createEvent({ key: 't' }); + + // Act + windowRef.dispatchEvent(event); + + // Assert + expect(builderService.addTable).toHaveBeenCalledOnceWith(); + }); + + it('should add table with highligted position as reference', async () => { + // Arrange + spyOn(builderService, 'addTable').and.returnValue(Promise.resolve()); + highlightedSubject.next({ width: 100, x: 100, y: 100 } as any as Highlighted); + + const event = createEvent({ key: 't' }); + + // Act + await delay(7); + windowRef.dispatchEvent(event); + await delay(7); + // Assert + expect(builderService.addTable).toHaveBeenCalledOnceWith(undefined, { x: 250, y: 100 }); + }); + }); + + describe('keypress c', () => { + it('should not add column when nothing highlighted', () => { + // Arrange + spyOn(builderService, 'addColumn').and.returnValue(Promise.resolve()); + const event = createEvent({ key: 'c' }); + + // Act + windowRef.dispatchEvent(event); + + // Assert + expect(builderService.addColumn).not.toHaveBeenCalled(); + }); + + }); + + + const createEvent = (data: any) => { + const event = new CustomEvent('keydown') as any; + return { ...event, ...data } as Event; + }; + + const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); + +}); diff --git a/frontend/src/app/services/shortcut.service.ts b/frontend/src/app/services/shortcut.service.ts new file mode 100644 index 0000000..8ae9081 --- /dev/null +++ b/frontend/src/app/services/shortcut.service.ts @@ -0,0 +1,51 @@ +import { Inject, Injectable, OnDestroy } from '@angular/core'; +import { fromEvent, Subscription } from 'rxjs'; +import { filter, tap } from 'rxjs/operators'; +import { AddRelation, addRelationKey } from '../models/add-relation.model'; +import { Column } from '../models/column.model'; +import { Highlighted, highlightedKey } from '../models/highlighted.model'; +import { Table } from '../models/table-svg.model'; +import { State } from '../state/state'; +import { BuilderService } from './builder.service'; +import { StateInjector } from './state.token'; +import { WINDOW } from './window.token'; + +export const shortcutsDisabledKey = 'shortcutsDisabled'; +@Injectable() +export class ShortcutService implements OnDestroy { + private readonly shortcuts: Record void> = { + t: () => this.highlighted ? + this.builderService.addTable( + undefined, + { x: this.highlighted.x + this.highlighted.width + 50, y: this.highlighted.y }) : this.builderService.addTable(), + c: () => this.highlighted instanceof Column ? this.builderService.addColumn(this.highlighted.table, 'newColumn') : + this.highlighted instanceof Table ? this.builderService.addColumn(this.highlighted, 'newColumn') : null, + r: () => this.highlighted instanceof Column ? + this.relationState.set({ column: this.highlighted, position: { x: this.highlighted.x, y: this.highlighted.y } }) : null, + + }; + private shortcutsDisabled = false; + private highlighted!: Highlighted; + private readonly shortcutSubscription = new Subscription(); + private readonly highlightedSubscription = new Subscription(); + private readonly disbledSubscription = new Subscription(); + constructor( + @Inject(WINDOW) private readonly window: Window, + @Inject(StateInjector(highlightedKey)) private readonly highlightedState: State, + @Inject(StateInjector(addRelationKey)) private readonly relationState: State, + @Inject(StateInjector(shortcutsDisabledKey)) private readonly shortcutDisbaledState: State, + private readonly builderService: BuilderService) { + this.shortcutSubscription = fromEvent(this.window.document, 'keydown').pipe( + filter(e => !this.shortcutsDisabled && this.shortcuts.hasOwnProperty(e.key))) + .subscribe(e => this.shortcuts[e.key]()); + + this.highlightedSubscription = this.highlightedState.select$.subscribe(highlighted => this.highlighted = highlighted); + + this.disbledSubscription = this.shortcutDisbaledState.select$.subscribe(disabled => this.shortcutsDisabled = disabled); + } + public ngOnDestroy(): void { + this.highlightedSubscription.unsubscribe(); + this.shortcutSubscription.unsubscribe(); + this.disbledSubscription.unsubscribe(); + } +} From f72dcce5a4ee6c246be7f0977d730caf35e5e0eb Mon Sep 17 00:00:00 2001 From: R0tenur Date: Fri, 8 Apr 2022 17:22:53 +0200 Subject: [PATCH 50/55] fix: remove type fiddling --- .../app/components/mermaid-viewer/mermaid-viewer.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts index 7945c94..ab24a39 100644 --- a/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts +++ b/frontend/src/app/components/mermaid-viewer/mermaid-viewer.component.ts @@ -123,7 +123,7 @@ export class MermaidViewerComponent implements OnDestroy { private setupSvgHandling(): void { setTimeout(() => { - this.svgElement = this.window.document.querySelector('#' + this.mermaidSvgId) as any as SVGElement; + this.svgElement = this.window.document.querySelector('#' + this.mermaidSvgId) as SVGElement; this.removeMermaidAttributes(); this.svgSize = { w: this.svgElement.clientWidth, h: this.svgElement.clientHeight }; this.viewBox.next({ x: 0, y: 0, ...this.svgSize }); From 841a90f1ab02cfefcb71c026b4dd7bc10bf81904 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Fri, 8 Apr 2022 17:26:59 +0200 Subject: [PATCH 51/55] refactor: extract adding of colum to own func --- frontend/src/app/services/shortcut.service.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/services/shortcut.service.ts b/frontend/src/app/services/shortcut.service.ts index 8ae9081..bda9bfd 100644 --- a/frontend/src/app/services/shortcut.service.ts +++ b/frontend/src/app/services/shortcut.service.ts @@ -1,6 +1,6 @@ import { Inject, Injectable, OnDestroy } from '@angular/core'; import { fromEvent, Subscription } from 'rxjs'; -import { filter, tap } from 'rxjs/operators'; +import { filter } from 'rxjs/operators'; import { AddRelation, addRelationKey } from '../models/add-relation.model'; import { Column } from '../models/column.model'; import { Highlighted, highlightedKey } from '../models/highlighted.model'; @@ -18,8 +18,7 @@ export class ShortcutService implements OnDestroy { this.builderService.addTable( undefined, { x: this.highlighted.x + this.highlighted.width + 50, y: this.highlighted.y }) : this.builderService.addTable(), - c: () => this.highlighted instanceof Column ? this.builderService.addColumn(this.highlighted.table, 'newColumn') : - this.highlighted instanceof Table ? this.builderService.addColumn(this.highlighted, 'newColumn') : null, + c: this.addColumn, r: () => this.highlighted instanceof Column ? this.relationState.set({ column: this.highlighted, position: { x: this.highlighted.x, y: this.highlighted.y } }) : null, @@ -48,4 +47,12 @@ export class ShortcutService implements OnDestroy { this.shortcutSubscription.unsubscribe(); this.disbledSubscription.unsubscribe(); } + + private addColumn(): void { + if (this.highlighted instanceof Column) { + this.builderService.addColumn(this.highlighted.table, 'untitled'); + } else if (this.highlighted instanceof Table) { + this.builderService.addColumn(this.highlighted, 'untitled'); + } + } } From fb16fa54ed59e9bd9f463c38323acb7534b6c207 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Sat, 9 Apr 2022 12:43:58 +0200 Subject: [PATCH 52/55] refactor: rename to change component --- frontend/src/app/app.component.html | 2 +- frontend/src/app/app.module.ts | 4 ++-- .../change-modal.component.html} | 4 ++-- .../change-modal.component.scss} | 0 .../change-modal.component.spec.ts} | 24 +++++++++---------- .../change-modal.component.ts} | 13 ++++------ 6 files changed, 22 insertions(+), 25 deletions(-) rename frontend/src/app/components/{rename-modal/rename-modal.component.html => change-modal/change-modal.component.html} (74%) rename frontend/src/app/components/{rename-modal/rename-modal.component.scss => change-modal/change-modal.component.scss} (100%) rename frontend/src/app/components/{rename-modal/rename-modal.component.spec.ts => change-modal/change-modal.component.spec.ts} (82%) rename frontend/src/app/components/{rename-modal/rename-modal.component.ts => change-modal/change-modal.component.ts} (86%) diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 3efaef4..ce0b5be 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,5 +1,5 @@ - +
    diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 4220feb..fdfc268 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -15,7 +15,7 @@ import { routes } from './settings/routes'; import { BuilderComponent } from './components/builder/builder.component'; import { ChartComponent } from './components/chart/chart.component'; import { ContextMenuComponent } from './components/context-menu/context-menu.component'; -import { RenameModalComponent } from './components/rename-modal/rename-modal.component'; +import { ChangeModalComponent } from './components/change-modal/change-modal.component'; import { RelationComponent } from './components/relation/relation.component'; @NgModule({ declarations: [ @@ -29,7 +29,7 @@ import { RelationComponent } from './components/relation/relation.component'; BuilderComponent, ChartComponent, ContextMenuComponent, - RenameModalComponent, + ChangeModalComponent, RelationComponent ], imports: [ diff --git a/frontend/src/app/components/rename-modal/rename-modal.component.html b/frontend/src/app/components/change-modal/change-modal.component.html similarity index 74% rename from frontend/src/app/components/rename-modal/rename-modal.component.html rename to frontend/src/app/components/change-modal/change-modal.component.html index e947159..275433c 100644 --- a/frontend/src/app/components/rename-modal/rename-modal.component.html +++ b/frontend/src/app/components/change-modal/change-modal.component.html @@ -1,8 +1,8 @@
    -
    +
    - {{focusInput()}}
    diff --git a/frontend/src/app/components/rename-modal/rename-modal.component.scss b/frontend/src/app/components/change-modal/change-modal.component.scss similarity index 100% rename from frontend/src/app/components/rename-modal/rename-modal.component.scss rename to frontend/src/app/components/change-modal/change-modal.component.scss diff --git a/frontend/src/app/components/rename-modal/rename-modal.component.spec.ts b/frontend/src/app/components/change-modal/change-modal.component.spec.ts similarity index 82% rename from frontend/src/app/components/rename-modal/rename-modal.component.spec.ts rename to frontend/src/app/components/change-modal/change-modal.component.spec.ts index 68670bb..f93bf13 100644 --- a/frontend/src/app/components/rename-modal/rename-modal.component.spec.ts +++ b/frontend/src/app/components/change-modal/change-modal.component.spec.ts @@ -7,17 +7,17 @@ import { BuilderService } from '../../services/builder.service'; import { StateInjector } from '../../services/state.token'; import { State } from '../../state/state'; -import { RenameModalComponent } from './rename-modal.component'; +import { ChangeModalComponent } from './change-modal.component'; -describe('RenameModalComponent', () => { - let component: RenameModalComponent; - let fixture: ComponentFixture; +describe('ChangeModalComponent', () => { + let component: ChangeModalComponent; + let fixture: ComponentFixture; let renameState: State; let renameStateSubject: BehaviorSubject; let builderService: BuilderService; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [RenameModalComponent], + declarations: [ChangeModalComponent], providers: [{ provide: StateInjector(renameKey), useValue: new State() }], }) .compileComponents(); @@ -28,7 +28,7 @@ describe('RenameModalComponent', () => { renameState = TestBed.inject>(StateInjector(renameKey)); builderService = TestBed.inject(BuilderService); spyOnProperty(renameState, 'select$').and.returnValue(renameStateSubject.asObservable()); - fixture = TestBed.createComponent(RenameModalComponent); + fixture = TestBed.createComponent(ChangeModalComponent); component = fixture.componentInstance; fixture.detectChanges(); }); @@ -63,36 +63,36 @@ describe('RenameModalComponent', () => { it('should rename table when no column', () => { // Arrange spyOn(builderService, 'renameTable').and.returnValue(Promise.resolve()); - spyOn(builderService, 'renameColumn').and.returnValue(Promise.resolve()); + spyOn(builderService, 'changeColumn').and.returnValue(Promise.resolve()); const table = new Table('table', 'dummy'); // Act component.setName({ position, table }, 'new name'); // Assert expect(builderService.renameTable).toHaveBeenCalledOnceWith(table, 'new name'); - expect(builderService.renameColumn).not.toHaveBeenCalled(); + expect(builderService.changeColumn).not.toHaveBeenCalled(); }); it('should rename column when exists', () => { // Arrange spyOn(builderService, 'renameTable').and.returnValue(Promise.resolve()); - spyOn(builderService, 'renameColumn').and.returnValue(Promise.resolve()); + spyOn(builderService, 'changeColumn').and.returnValue(Promise.resolve()); const table = new Table('table', 'dummy'); const column = new Column(0, table, 'dummy'); // Act component.setName({ position, table, column }, 'new name'); // Assert expect(builderService.renameTable).not.toHaveBeenCalled(); - expect(builderService.renameColumn).toHaveBeenCalledOnceWith(table, column, 'new name'); + expect(builderService.changeColumn).toHaveBeenCalledOnceWith(table, column, 'new name'); }); it('should do nothing when no table or column', () => { // Arrange spyOn(builderService, 'renameTable').and.returnValue(Promise.resolve()); - spyOn(builderService, 'renameColumn').and.returnValue(Promise.resolve()); + spyOn(builderService, 'changeColumn').and.returnValue(Promise.resolve()); // Act component.setName({ position }, 'new name'); // Assert expect(builderService.renameTable).not.toHaveBeenCalled(); - expect(builderService.renameColumn).not.toHaveBeenCalled(); + expect(builderService.changeColumn).not.toHaveBeenCalled(); }); }); diff --git a/frontend/src/app/components/rename-modal/rename-modal.component.ts b/frontend/src/app/components/change-modal/change-modal.component.ts similarity index 86% rename from frontend/src/app/components/rename-modal/rename-modal.component.ts rename to frontend/src/app/components/change-modal/change-modal.component.ts index a030063..3792d21 100644 --- a/frontend/src/app/components/rename-modal/rename-modal.component.ts +++ b/frontend/src/app/components/change-modal/change-modal.component.ts @@ -7,11 +7,11 @@ import constants from '../../settings/constants'; import { State } from '../../state/state'; @Component({ - selector: 'app-rename-modal', - templateUrl: './rename-modal.component.html', - styleUrls: ['./rename-modal.component.scss'] + selector: 'app-change-modal', + templateUrl: './change-modal.component.html', + styleUrls: ['./change-modal.component.scss'] }) -export class RenameModalComponent { +export class ChangeModalComponent { public constants = constants; @ViewChild('renameInput') public renameInput!: ElementRef; private selected = false; @@ -21,20 +21,17 @@ export class RenameModalComponent { private readonly builderService: BuilderService) { } public setName(rename: Rename, newName: string): void { this.state.clear(); - this.selected = false; this.shortcutDisabledState.set(false); this.selected = false; if (rename.table) { if (rename.column) { - this.builderService.renameColumn(rename.table, rename.column, newName); + this.builderService.changeColumn(rename.table, rename.column, newName); return; } this.builderService.renameTable(rename.table, newName); } } public focusInput(): string { - - this.delay(0).then(() => { if (this.renameInput) { this.renameInput.nativeElement.focus(); From 18a26e889f59818c06514bb13d1d60a19c5905da Mon Sep 17 00:00:00 2001 From: R0tenur Date: Sat, 9 Apr 2022 12:45:47 +0200 Subject: [PATCH 53/55] feat: add sql type and constraint to columns --- frontend/src/app/models/column-type.model.ts | 10 ++++++ frontend/src/app/models/column.model.ts | 5 ++- frontend/src/app/models/sql-type.enum.ts | 35 +++++++++++++++++++ .../src/app/services/builder.service.spec.ts | 2 +- frontend/src/app/services/builder.service.ts | 4 ++- 5 files changed, 53 insertions(+), 3 deletions(-) create mode 100644 frontend/src/app/models/column-type.model.ts create mode 100644 frontend/src/app/models/sql-type.enum.ts diff --git a/frontend/src/app/models/column-type.model.ts b/frontend/src/app/models/column-type.model.ts new file mode 100644 index 0000000..1b17436 --- /dev/null +++ b/frontend/src/app/models/column-type.model.ts @@ -0,0 +1,10 @@ +import { SqlType } from './sql-type.enum'; + +export interface DataType { + type: SqlType; + length?: number; + nullable?: boolean; + unique?: boolean; + primary?: boolean; + default?: string; +} diff --git a/frontend/src/app/models/column.model.ts b/frontend/src/app/models/column.model.ts index 24fd17a..fe3d0cb 100644 --- a/frontend/src/app/models/column.model.ts +++ b/frontend/src/app/models/column.model.ts @@ -1,4 +1,6 @@ import constants from '../settings/constants'; +import { DataType } from './column-type.model'; +import { SqlType } from './sql-type.enum'; import { SvgPosition } from './svg-position.model'; import { Table } from './table-svg.model'; @@ -26,5 +28,6 @@ export class Column implements SvgPosition { constructor( public readonly index: number, public readonly table: Table, - public name: string) { } + public name: string, + public type: DataType = { type: SqlType.bigint }) { } } diff --git a/frontend/src/app/models/sql-type.enum.ts b/frontend/src/app/models/sql-type.enum.ts new file mode 100644 index 0000000..e3ce4dd --- /dev/null +++ b/frontend/src/app/models/sql-type.enum.ts @@ -0,0 +1,35 @@ +export enum SqlType { + bigint = 'bigint', + numeric = 'numeric', + bit = 'bit', + smallint = 'smallint', + decimal = 'decimal', + smallmoney = 'smallmoney', + int = 'int', + tinyint = 'tinyint', + money = 'money', + float = 'float', + real = 'real', + date = 'date', + datetime = 'datetime', + datetime2 = 'datetime2', + datetimeoffset = 'datetimeoffset', + smalldatetime = 'smalldatetime', + time = 'time', + char = 'char', + varchar = 'varchar', + text = 'text', + nchar = 'nchar', + nvarchar = 'nvarchar', + ntext = 'ntext', + binary = 'binary', + varbinary = 'varbinary', + image = 'image', + rowversion = 'rowversion', + cursor = 'cursor', + hierarchyid = 'hierarchyid', + uniqueidentifier = 'uniqueidentifier', + sql_variant = 'sql_variant', + table = 'table', + xml = 'xml', +} diff --git a/frontend/src/app/services/builder.service.spec.ts b/frontend/src/app/services/builder.service.spec.ts index 09e4ad5..61c0a6c 100644 --- a/frontend/src/app/services/builder.service.spec.ts +++ b/frontend/src/app/services/builder.service.spec.ts @@ -126,7 +126,7 @@ describe('BuilderService', () => { const column = new Column(0, table, oldName); // Act - await service.renameColumn(table, column, newName); + await service.changeColumn(table, column, newName); // Assert const expected = new Table('table', 'dummy'); diff --git a/frontend/src/app/services/builder.service.ts b/frontend/src/app/services/builder.service.ts index 298eb70..f2c9a78 100644 --- a/frontend/src/app/services/builder.service.ts +++ b/frontend/src/app/services/builder.service.ts @@ -1,6 +1,7 @@ import { Inject, Injectable } from '@angular/core'; import { take } from 'rxjs/operators'; import { builderKey } from '../models/builder.model'; +import { DataType } from '../models/column-type.model'; import { Column } from '../models/column.model'; import { Highlighted, highlightedKey } from '../models/highlighted.model'; import { Position } from '../models/position.model'; @@ -79,13 +80,14 @@ export class BuilderService { this.highlightedState.set(from); } - public async renameColumn(table: Table, column: Column, newName: string): Promise { + public async changeColumn(table: Table, column: Column, newName: string, type: DataType = column.type): Promise { const tables = await this.getTables(); const tableRef = tables.find(t => t.name === table.name && t.schema === table.schema); if (!tableRef) { return; } tableRef.columns[column.index].name = newName; + tableRef.columns[column.index].type = type; this.tableState.set(tables); this.highlightedState.set(column); From bd74a87b6b8faf7b4442801c201d1dc6e6f0c053 Mon Sep 17 00:00:00 2001 From: R0tenur Date: Sun, 10 Apr 2022 13:05:33 +0200 Subject: [PATCH 54/55] feat: add change forms for table and columns --- .../change-modal/change-modal.component.html | 37 +++++++- .../change-modal/change-modal.component.scss | 3 + .../change-modal.component.spec.ts | 24 +++--- .../change-modal/change-modal.component.ts | 84 +++++++++++++++---- .../app/components/chart/chart.component.svg | 2 +- ...umn-type.model.ts => column-data.model.ts} | 2 +- frontend/src/app/models/column.model.ts | 8 +- frontend/src/app/models/table-svg.model.ts | 3 + .../src/app/services/builder.service.spec.ts | 5 +- frontend/src/app/services/builder.service.ts | 23 +++-- frontend/src/app/services/shortcut.service.ts | 3 + frontend/src/environments/environment.ts | 2 +- 12 files changed, 154 insertions(+), 42 deletions(-) rename frontend/src/app/models/{column-type.model.ts => column-data.model.ts} (84%) diff --git a/frontend/src/app/components/change-modal/change-modal.component.html b/frontend/src/app/components/change-modal/change-modal.component.html index 275433c..3afd6d1 100644 --- a/frontend/src/app/components/change-modal/change-modal.component.html +++ b/frontend/src/app/components/change-modal/change-modal.component.html @@ -2,7 +2,40 @@
    - + +
    +
    +
    + + + +
    +
    +
    + +
    +
    +
    + + + +
    +
    +
    diff --git a/frontend/src/app/components/change-modal/change-modal.component.scss b/frontend/src/app/components/change-modal/change-modal.component.scss index a8dda10..f41095a 100644 --- a/frontend/src/app/components/change-modal/change-modal.component.scss +++ b/frontend/src/app/components/change-modal/change-modal.component.scss @@ -8,4 +8,7 @@ padding-top: .4rem; padding-bottom: .4rem; cursor: grab; + input, select { + width: 80%; + } } diff --git a/frontend/src/app/components/change-modal/change-modal.component.spec.ts b/frontend/src/app/components/change-modal/change-modal.component.spec.ts index f93bf13..afe7934 100644 --- a/frontend/src/app/components/change-modal/change-modal.component.spec.ts +++ b/frontend/src/app/components/change-modal/change-modal.component.spec.ts @@ -62,37 +62,37 @@ describe('ChangeModalComponent', () => { }); it('should rename table when no column', () => { // Arrange - spyOn(builderService, 'renameTable').and.returnValue(Promise.resolve()); - spyOn(builderService, 'changeColumn').and.returnValue(Promise.resolve()); + spyOn(builderService, 'editTable').and.returnValue(Promise.resolve()); + spyOn(builderService, 'editColumn').and.returnValue(Promise.resolve()); const table = new Table('table', 'dummy'); // Act component.setName({ position, table }, 'new name'); // Assert - expect(builderService.renameTable).toHaveBeenCalledOnceWith(table, 'new name'); - expect(builderService.changeColumn).not.toHaveBeenCalled(); + expect(builderService.editTable).toHaveBeenCalledOnceWith(table, 'new name'); + expect(builderService.editColumn).not.toHaveBeenCalled(); }); it('should rename column when exists', () => { // Arrange - spyOn(builderService, 'renameTable').and.returnValue(Promise.resolve()); - spyOn(builderService, 'changeColumn').and.returnValue(Promise.resolve()); + spyOn(builderService, 'editTable').and.returnValue(Promise.resolve()); + spyOn(builderService, 'editColumn').and.returnValue(Promise.resolve()); const table = new Table('table', 'dummy'); const column = new Column(0, table, 'dummy'); // Act component.setName({ position, table, column }, 'new name'); // Assert - expect(builderService.renameTable).not.toHaveBeenCalled(); - expect(builderService.changeColumn).toHaveBeenCalledOnceWith(table, column, 'new name'); + expect(builderService.editTable).not.toHaveBeenCalled(); + expect(builderService.editColumn).toHaveBeenCalledOnceWith(table, column, 'new name'); }); it('should do nothing when no table or column', () => { // Arrange - spyOn(builderService, 'renameTable').and.returnValue(Promise.resolve()); - spyOn(builderService, 'changeColumn').and.returnValue(Promise.resolve()); + spyOn(builderService, 'editTable').and.returnValue(Promise.resolve()); + spyOn(builderService, 'editColumn').and.returnValue(Promise.resolve()); // Act component.setName({ position }, 'new name'); // Assert - expect(builderService.renameTable).not.toHaveBeenCalled(); - expect(builderService.changeColumn).not.toHaveBeenCalled(); + expect(builderService.editTable).not.toHaveBeenCalled(); + expect(builderService.editColumn).not.toHaveBeenCalled(); }); }); diff --git a/frontend/src/app/components/change-modal/change-modal.component.ts b/frontend/src/app/components/change-modal/change-modal.component.ts index 3792d21..d8f9a78 100644 --- a/frontend/src/app/components/change-modal/change-modal.component.ts +++ b/frontend/src/app/components/change-modal/change-modal.component.ts @@ -1,5 +1,11 @@ -import { Component, ElementRef, Inject, ViewChild } from '@angular/core'; +import { Component, ElementRef, Inject, OnDestroy, ViewChild } from '@angular/core'; +import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; +import { MonoTypeOperatorFunction, Observable, Subscription } from 'rxjs'; +import { filter, map, switchMap, tap } from 'rxjs/operators'; +import { Column } from '../../models/column.model'; import { Rename, renameKey } from '../../models/rename.model'; +import { SqlType } from '../../models/sql-type.enum'; +import { Table } from '../../models/table-svg.model'; import { BuilderService } from '../../services/builder.service'; import { shortcutsDisabledKey } from '../../services/shortcut.service'; import { StateInjector } from '../../services/state.token'; @@ -12,38 +18,84 @@ import { State } from '../../state/state'; styleUrls: ['./change-modal.component.scss'] }) export class ChangeModalComponent { + public readonly SqlType = SqlType; public constants = constants; + public readonly sqlTypeKeys; + public readonly columnChangeGroup: Observable; + public readonly tableChangeGroup: Observable; @ViewChild('renameInput') public renameInput!: ElementRef; private selected = false; + constructor( @Inject(StateInjector(renameKey)) public readonly state: State, @Inject(StateInjector(shortcutsDisabledKey)) private readonly shortcutDisabledState: State, - private readonly builderService: BuilderService) { } + private readonly builderService: BuilderService, + readonly formBuilder: FormBuilder) { + this.sqlTypeKeys = Object.keys(this.SqlType); + + this.tableChangeGroup = state.select$.pipe( + filter(rename => !!rename), + this.disableShortcuts(), + map(x => new FormGroup({ + name: new FormControl(x.table?.name ?? ''), + schema: new FormControl(x.table?.schema ?? ''), + }))); + + this.columnChangeGroup = state.select$.pipe( + filter(rename => rename && !!rename?.column), + this.disableShortcuts(), + map(x => new FormGroup({ + name: new FormControl(x.column?.name ?? ''), + type: new FormControl(x.column?.data.type ?? ''), + }))); + + } public setName(rename: Rename, newName: string): void { this.state.clear(); this.shortcutDisabledState.set(false); this.selected = false; if (rename.table) { if (rename.column) { - this.builderService.changeColumn(rename.table, rename.column, newName); + // this.builderService.editColumn(rename.table, rename.column, newName); return; } - this.builderService.renameTable(rename.table, newName); + this.builderService.editTable(rename.table, newName); } } - public focusInput(): string { - this.delay(0).then(() => { - if (this.renameInput) { - this.renameInput.nativeElement.focus(); - if (!this.selected) { - this.shortcutDisabledState.set(true); - this.renameInput.nativeElement.select(); - this.selected = true; - } - } - }); + public onColumnSubmit(column: Column, form: any): void { + console.log(form); + this.builderService.editColumn(column.table, column, form.name, form); + this.shortcutDisabledState.set(false); + this.selected = false; + this.state.clear(); + } + + public onTableSubmit(table: Table, form: FormGroup): void { + this.builderService.editTable(table, form.value.name); + this.shortcutDisabledState.set(false); + this.selected = false; + this.state.clear(); + } + + private disableShortcuts(): MonoTypeOperatorFunction { + return tap(() => this.shortcutDisabledState.set(true)); + } + // public focusInput(): string { + // this.delay(0).then(() => { + // if (this.renameInput) { + // this.renameInput.nativeElement.focus(); + // if (!this.selected) { + // this.shortcutDisabledState.set(true); + // this.renameInput.nativeElement.select(); + // this.selected = true; + // } + // } + // }); - return ''; + // return ''; + // } + public isColumn(rename: Rename): boolean { + return !!rename.column; } private delay(ms: number): Promise { return new Promise(resolve => setTimeout(resolve, ms)); diff --git a/frontend/src/app/components/chart/chart.component.svg b/frontend/src/app/components/chart/chart.component.svg index 6f1e62b..75b0192 100644 --- a/frontend/src/app/components/chart/chart.component.svg +++ b/frontend/src/app/components/chart/chart.component.svg @@ -9,7 +9,7 @@ - {{column.name}} + {{column.name}} {{column.data.type}} diff --git a/frontend/src/app/models/column-type.model.ts b/frontend/src/app/models/column-data.model.ts similarity index 84% rename from frontend/src/app/models/column-type.model.ts rename to frontend/src/app/models/column-data.model.ts index 1b17436..cc93fe6 100644 --- a/frontend/src/app/models/column-type.model.ts +++ b/frontend/src/app/models/column-data.model.ts @@ -1,6 +1,6 @@ import { SqlType } from './sql-type.enum'; -export interface DataType { +export interface ColumnData { type: SqlType; length?: number; nullable?: boolean; diff --git a/frontend/src/app/models/column.model.ts b/frontend/src/app/models/column.model.ts index fe3d0cb..8a87ae9 100644 --- a/frontend/src/app/models/column.model.ts +++ b/frontend/src/app/models/column.model.ts @@ -1,5 +1,5 @@ import constants from '../settings/constants'; -import { DataType } from './column-type.model'; +import { ColumnData } from './column-data.model'; import { SqlType } from './sql-type.enum'; import { SvgPosition } from './svg-position.model'; import { Table } from './table-svg.model'; @@ -29,5 +29,9 @@ export class Column implements SvgPosition { public readonly index: number, public readonly table: Table, public name: string, - public type: DataType = { type: SqlType.bigint }) { } + public data: ColumnData = { type: SqlType.bigint }) { } + + public toString(): string { + return `${this.name} ${this.data.type}`; + } } diff --git a/frontend/src/app/models/table-svg.model.ts b/frontend/src/app/models/table-svg.model.ts index 482369d..d6d132f 100644 --- a/frontend/src/app/models/table-svg.model.ts +++ b/frontend/src/app/models/table-svg.model.ts @@ -53,5 +53,8 @@ export class Table { this.x = x; this.y = y; } + public toString(): string { + return `CREATE TABLE [${this.schema}].[${this.name}] (\n${this.columns.map(c => `\t${c.toString()}`).join(',\n')}\n);`; + } } diff --git a/frontend/src/app/services/builder.service.spec.ts b/frontend/src/app/services/builder.service.spec.ts index 61c0a6c..5950b9b 100644 --- a/frontend/src/app/services/builder.service.spec.ts +++ b/frontend/src/app/services/builder.service.spec.ts @@ -4,6 +4,7 @@ import { builderKey } from '../models/builder.model'; import { Column } from '../models/column.model'; import { Highlighted, highlightedKey } from '../models/highlighted.model'; import { Relation, relationStateKey } from '../models/relation.model'; +import { SqlType } from '../models/sql-type.enum'; import { Table } from '../models/table-svg.model'; import { State } from '../state/state'; @@ -86,7 +87,7 @@ describe('BuilderService', () => { const newName = 'new name'; // Act - await service.renameTable(table, newName); + await service.editTable(table, newName); // Assert expect(tableState.set).toHaveBeenCalledWith([new Table(newName, 'dummy')]); @@ -126,7 +127,7 @@ describe('BuilderService', () => { const column = new Column(0, table, oldName); // Act - await service.changeColumn(table, column, newName); + await service.editColumn(table, column, newName, { type: SqlType.bigint}); // Assert const expected = new Table('table', 'dummy'); diff --git a/frontend/src/app/services/builder.service.ts b/frontend/src/app/services/builder.service.ts index f2c9a78..14f1383 100644 --- a/frontend/src/app/services/builder.service.ts +++ b/frontend/src/app/services/builder.service.ts @@ -1,7 +1,7 @@ import { Inject, Injectable } from '@angular/core'; import { take } from 'rxjs/operators'; import { builderKey } from '../models/builder.model'; -import { DataType } from '../models/column-type.model'; +import { ColumnData } from '../models/column-data.model'; import { Column } from '../models/column.model'; import { Highlighted, highlightedKey } from '../models/highlighted.model'; import { Position } from '../models/position.model'; @@ -42,7 +42,7 @@ export class BuilderService { } - public async renameTable(table: Table, newName: string): Promise { + public async editTable(table: Table, newName: string, schema = table.schema): Promise { const tables = await this.getTables(); const tableIndex = tables.findIndex(t => t.name === table.name && t.schema === table.schema); tables[tableIndex].name = newName; @@ -80,18 +80,31 @@ export class BuilderService { this.highlightedState.set(from); } - public async changeColumn(table: Table, column: Column, newName: string, type: DataType = column.type): Promise { + public async editColumn(table: Table, column: Column, newName: string, data: ColumnData): Promise { + console.log(data); + const tables = await this.getTables(); const tableRef = tables.find(t => t.name === table.name && t.schema === table.schema); - if (!tableRef) { return; } + if (!tableRef) { + console.warn('Table not found'); + return; + } + tableRef.columns[column.index].name = newName; - tableRef.columns[column.index].type = type; + tableRef.columns[column.index].data = data; this.tableState.set(tables); this.highlightedState.set(column); } + + public async export(): Promise { + const tables = await this.getTables(); + const sql = tables.map(x => x.toString()); + console.log(sql); + return sql.join('\n'); + } private async getTables(): Promise { const tables = await this.tableState.select$.pipe(take(1)).toPromise(); diff --git a/frontend/src/app/services/shortcut.service.ts b/frontend/src/app/services/shortcut.service.ts index bda9bfd..78454af 100644 --- a/frontend/src/app/services/shortcut.service.ts +++ b/frontend/src/app/services/shortcut.service.ts @@ -21,6 +21,9 @@ export class ShortcutService implements OnDestroy { c: this.addColumn, r: () => this.highlighted instanceof Column ? this.relationState.set({ column: this.highlighted, position: { x: this.highlighted.x, y: this.highlighted.y } }) : null, + e: () => { + this.builderService.export().then(sql => this.window.open(`data:text/sql;charset=utf-8,${encodeURIComponent(sql)}`)); + } }; private shortcutsDisabled = false; diff --git a/frontend/src/environments/environment.ts b/frontend/src/environments/environment.ts index 7b4f817..044ce9e 100644 --- a/frontend/src/environments/environment.ts +++ b/frontend/src/environments/environment.ts @@ -13,4 +13,4 @@ export const environment = { * This import should be commented out in production mode because it will have a negative impact * on performance if an error is thrown. */ -// import 'zone.js/dist/zone-error'; // Included with Angular CLI. +import 'zone.js/dist/zone-error'; // Included with Angular CLI. From e2069778cc22473a44bbd431c7dcd587ad45af5d Mon Sep 17 00:00:00 2001 From: R0tenur Date: Fri, 22 Jul 2022 12:46:47 +0200 Subject: [PATCH 55/55] test: add column data to test --- .../components/change-modal/change-modal.component.spec.ts | 4 +++- .../src/app/components/change-modal/change-modal.component.ts | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/change-modal/change-modal.component.spec.ts b/frontend/src/app/components/change-modal/change-modal.component.spec.ts index afe7934..9cad1b1 100644 --- a/frontend/src/app/components/change-modal/change-modal.component.spec.ts +++ b/frontend/src/app/components/change-modal/change-modal.component.spec.ts @@ -1,5 +1,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { BehaviorSubject } from 'rxjs'; +import { AppTestingModule } from '../../app-testing.module'; import { Column } from '../../models/column.model'; import { Rename, renameKey } from '../../models/rename.model'; import { Table } from '../../models/table-svg.model'; @@ -18,6 +19,7 @@ describe('ChangeModalComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [ChangeModalComponent], + imports: [AppTestingModule], providers: [{ provide: StateInjector(renameKey), useValue: new State() }], }) .compileComponents(); @@ -81,7 +83,7 @@ describe('ChangeModalComponent', () => { component.setName({ position, table, column }, 'new name'); // Assert expect(builderService.editTable).not.toHaveBeenCalled(); - expect(builderService.editColumn).toHaveBeenCalledOnceWith(table, column, 'new name'); + expect(builderService.editColumn).toHaveBeenCalledOnceWith(table, column, 'new name', column.data); }); it('should do nothing when no table or column', () => { diff --git a/frontend/src/app/components/change-modal/change-modal.component.ts b/frontend/src/app/components/change-modal/change-modal.component.ts index d8f9a78..42cdab1 100644 --- a/frontend/src/app/components/change-modal/change-modal.component.ts +++ b/frontend/src/app/components/change-modal/change-modal.component.ts @@ -56,7 +56,7 @@ export class ChangeModalComponent { this.selected = false; if (rename.table) { if (rename.column) { - // this.builderService.editColumn(rename.table, rename.column, newName); + this.builderService.editColumn(rename.table, rename.column, newName, rename.column.data); return; } this.builderService.editTable(rename.table, newName);