diff --git a/src/app/cartography/cartography.module.ts b/src/app/cartography/cartography.module.ts index a28733b5..59edfc34 100644 --- a/src/app/cartography/cartography.module.ts +++ b/src/app/cartography/cartography.module.ts @@ -48,7 +48,7 @@ import { TextElementFactory } from './helpers/drawings-factory/text-element-fact import { EllipseElementFactory } from './helpers/drawings-factory/ellipse-element-factory'; import { RectangleElementFactory } from './helpers/drawings-factory/rectangle-element-factory'; import { LineElementFactory } from './helpers/drawings-factory/line-element-factory'; -import { TemporaryTextElementComponent } from './components/temporary-text-element/temporary-text-element.component'; +import { TextEditorComponent } from './components/text-editor/text-editor.component'; import { DrawingAddingComponent } from './components/drawing-adding/drawing-adding.component'; @@ -63,7 +63,7 @@ import { DrawingAddingComponent } from './components/drawing-adding/drawing-addi ExperimentalMapComponent, DrawingAddingComponent, DrawingResizingComponent, - TemporaryTextElementComponent, + TextEditorComponent, ...ANGULAR_MAP_DECLARATIONS, SelectionControlComponent, SelectionSelectComponent, diff --git a/src/app/cartography/components/d3-map/d3-map.component.html b/src/app/cartography/components/d3-map/d3-map.component.html index 0b9c5465..3f681a32 100644 --- a/src/app/cartography/components/d3-map/d3-map.component.html +++ b/src/app/cartography/components/d3-map/d3-map.component.html @@ -12,5 +12,5 @@ - + diff --git a/src/app/cartography/components/d3-map/d3-map.component.ts b/src/app/cartography/components/d3-map/d3-map.component.ts index 4282947f..7052a279 100644 --- a/src/app/cartography/components/d3-map/d3-map.component.ts +++ b/src/app/cartography/components/d3-map/d3-map.component.ts @@ -20,7 +20,7 @@ import { GraphDataManager } from '../../managers/graph-data-manager'; import { MapSettingsManager } from '../../managers/map-settings-manager'; import { Server } from '../../../models/server'; import { ToolsService } from '../../../services/tools.service'; -import { TemporaryTextElementComponent } from '../temporary-text-element/temporary-text-element.component'; +import { TextEditorComponent } from '../text-editor/text-editor.component'; @Component({ @@ -39,7 +39,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy { @Input() height = 600; @ViewChild('svg') svgRef: ElementRef; - @ViewChild('temporaryTextElement') temporaryTextElement: TemporaryTextElementComponent; + @ViewChild('textEditor') textEditor: TextEditorComponent; private parentNativeElement: any; private svg: Selection; @@ -168,7 +168,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy { this.graphDataManager.setLinks(this.links); this.graphDataManager.setDrawings(this.drawings); this.graphLayout.draw(this.svg, this.context); - this.temporaryTextElement.activateTextEditing(); + this.textEditor.activateTextEditing(); } @HostListener('window:resize', ['$event']) diff --git a/src/app/cartography/components/temporary-text-element/temporary-text-element.component.spec.ts b/src/app/cartography/components/temporary-text-element/temporary-text-element.component.spec.ts deleted file mode 100644 index fe22510c..00000000 --- a/src/app/cartography/components/temporary-text-element/temporary-text-element.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { TemporaryTextElementComponent } from "./temporary-text-element.component"; -import { ComponentFixture, TestBed, async } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; - -describe('TemporaryTextElementComponent', () => { - let component: TemporaryTextElementComponent; - let fixture: ComponentFixture; - - - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ - NoopAnimationsModule - ], - providers: [ - - ], - declarations: [ - TemporaryTextElementComponent - ] - }); - })); -}); diff --git a/src/app/cartography/components/temporary-text-element/temporary-text-element.component.html b/src/app/cartography/components/text-editor/text-editor.component.html similarity index 100% rename from src/app/cartography/components/temporary-text-element/temporary-text-element.component.html rename to src/app/cartography/components/text-editor/text-editor.component.html diff --git a/src/app/cartography/components/temporary-text-element/temporary-text-element.component.scss b/src/app/cartography/components/text-editor/text-editor.component.scss similarity index 100% rename from src/app/cartography/components/temporary-text-element/temporary-text-element.component.scss rename to src/app/cartography/components/text-editor/text-editor.component.scss diff --git a/src/app/cartography/components/text-editor/text-editor.component.spec.ts b/src/app/cartography/components/text-editor/text-editor.component.spec.ts new file mode 100644 index 00000000..65ac5fdf --- /dev/null +++ b/src/app/cartography/components/text-editor/text-editor.component.spec.ts @@ -0,0 +1,40 @@ +import { TextEditorComponent } from "./text-editor.component"; +import { ComponentFixture, TestBed, async } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { DrawingsEventSource } from '../../events/drawings-event-source'; +import { ToolsService } from '../../../services/tools.service'; +import { Context } from '../../models/context'; +import { Renderer2 } from '@angular/core'; + +describe('TemporaryTextElementComponent', () => { + let component: TextEditorComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + NoopAnimationsModule + ], + providers: [ + { provide: DrawingsEventSource, useClass: DrawingsEventSource }, + { provide: ToolsService, useClass: ToolsService }, + { provide: Context, useClass: Context }, + { provide: Renderer2, useClass: Renderer2 } + ], + declarations: [ + TextEditorComponent + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TextEditorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/cartography/components/temporary-text-element/temporary-text-element.component.ts b/src/app/cartography/components/text-editor/text-editor.component.ts similarity index 88% rename from src/app/cartography/components/temporary-text-element/temporary-text-element.component.ts rename to src/app/cartography/components/text-editor/text-editor.component.ts index d13e0a6d..ea674e9f 100644 --- a/src/app/cartography/components/temporary-text-element/temporary-text-element.component.ts +++ b/src/app/cartography/components/text-editor/text-editor.component.ts @@ -9,18 +9,16 @@ import { Subscription } from 'rxjs'; @Component({ - selector: 'app-temporary-text-element', - templateUrl: './temporary-text-element.component.html', - styleUrls: ['./temporary-text-element.component.scss'] + selector: 'app-text-editor', + templateUrl: './text-editor.component.html', + styleUrls: ['./text-editor.component.scss'] }) -export class TemporaryTextElementComponent implements OnInit, OnDestroy { +export class TextEditorComponent implements OnInit, OnDestroy { @ViewChild('temporaryTextElement') temporaryTextElement: ElementRef; @Input('svg') svg: SVGSVGElement; - private isActive: boolean = true; private leftPosition: string = '0px'; private topPosition: string = '0px'; - private display: string = 'none'; private innerText: string = ''; private editingDrawingId: string; @@ -40,39 +38,36 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy { ngOnInit(){ this.textAddingSubscription = this.toolsService.isTextAddingToolActivated.subscribe((isActive: boolean) => { - isActive ? this.activate() : this.deactivate() + isActive ? this.activateTextAdding() : this.deactivateTextAdding() }); this.activateTextEditing(); } - activate(){ + activateTextAdding(){ let addTextListener = (event: MouseEvent) => { this.leftPosition = event.clientX.toString() + 'px'; this.topPosition = (event.clientY + window.pageYOffset).toString() + 'px'; this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial'); - this.temporaryTextElement.nativeElement.focus(); - // //this.renderer.selectRootElement('#temporaryElement').focus(); let textListener = () => { this.drawingsEventSource.textAdded.emit(new TextAddedDataEvent(this.temporaryTextElement.nativeElement.innerText.replace(/\n$/, ""), event.clientX, event.clientY)); - this.deactivate(); + this.deactivateTextAdding(); this.innerText = ''; this.temporaryTextElement.nativeElement.removeEventListener("focusout", this.textListener); this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'none'); - this.display = 'none'; } this.textListener = textListener; this.temporaryTextElement.nativeElement.addEventListener('focusout', this.textListener); } - this.deactivate(); + this.deactivateTextAdding(); this.mapListener = addTextListener; this.svg.addEventListener('click', this.mapListener as EventListenerOrEventListenerObject); } - deactivate(){ + deactivateTextAdding(){ this.svg.removeEventListener('click', this.mapListener as EventListenerOrEventListenerObject); } @@ -119,6 +114,6 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy { } ngOnDestroy(){ - this.toolsService.isTextAddingToolActivated.unsubscribe(); + this.textAddingSubscription.unsubscribe(); } } diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index 0a48c682..06f63ec4 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -147,7 +147,7 @@ [server]="server" [project]="project" [selectedDrawing]="selectedDrawing" - (drawingSaved)="onDrawingSaved($event)"> + (drawingSaved)="onDrawingSaved()"> @@ -158,6 +158,6 @@ + (drawingSaved)="onDrawingSaved()">