From 740a042b0e436ece1410b37b0d06fca92cb3d6a5 Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Wed, 9 Jan 2019 03:58:54 -0800 Subject: [PATCH] Removing timeouts from code --- .../temporary-text-element.component.html | 5 +- .../temporary-text-element.component.spec.ts | 23 +++++++++ .../temporary-text-element.component.ts | 48 +++++++++---------- .../map/map-drawing-to-svg-converter.ts | 2 +- src/app/services/drawing.service.ts | 3 +- 5 files changed, 53 insertions(+), 28 deletions(-) diff --git a/src/app/cartography/components/temporary-text-element/temporary-text-element.component.html b/src/app/cartography/components/temporary-text-element/temporary-text-element.component.html index 0ea1ea51..f5d81eb2 100644 --- a/src/app/cartography/components/temporary-text-element/temporary-text-element.component.html +++ b/src/app/cartography/components/temporary-text-element/temporary-text-element.component.html @@ -1,5 +1,6 @@ -
+ [style.left]=leftPosition + [style.display]=display> {{innerText}}
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 index e69de29b..fe22510c 100644 --- 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 @@ -0,0 +1,23 @@ +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.ts b/src/app/cartography/components/temporary-text-element/temporary-text-element.component.ts index 6bb38c71..d13e0a6d 100644 --- a/src/app/cartography/components/temporary-text-element/temporary-text-element.component.ts +++ b/src/app/cartography/components/temporary-text-element/temporary-text-element.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ElementRef, OnInit, Input, EventEmitter, OnDestroy } from "@angular/core"; +import { Component, ViewChild, ElementRef, OnInit, Input, EventEmitter, OnDestroy, Renderer2 } from "@angular/core"; import { DrawingsEventSource } from '../../events/drawings-event-source'; import { TextAddedDataEvent, TextEditedDataEvent } from '../../events/event-source'; import { ToolsService } from '../../../services/tools.service'; @@ -17,9 +17,10 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy { @ViewChild('temporaryTextElement') temporaryTextElement: ElementRef; @Input('svg') svg: SVGSVGElement; - private isActive: boolean = false; + private isActive: boolean = true; private leftPosition: string = '0px'; private topPosition: string = '0px'; + private display: string = 'none'; private innerText: string = ''; private editingDrawingId: string; @@ -33,7 +34,8 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy { constructor( private drawingsEventSource: DrawingsEventSource, private toolsService: ToolsService, - private context: Context + private context: Context, + private renderer: Renderer2 ){} ngOnInit(){ @@ -48,22 +50,21 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy { let addTextListener = (event: MouseEvent) => { this.leftPosition = event.clientX.toString() + 'px'; this.topPosition = (event.clientY + window.pageYOffset).toString() + 'px'; - this.isActive = true; + this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial'); - setTimeout(() => { - this.temporaryTextElement.nativeElement.focus(); + 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.innerText = ''; - this.temporaryTextElement.nativeElement.removeEventListener("focusout", this.textListener); - this.isActive = false; - } - this.textListener = textListener; - this.temporaryTextElement.nativeElement.addEventListener('focusout', this.textListener); - }, - 100); + let textListener = () => { + this.drawingsEventSource.textAdded.emit(new TextAddedDataEvent(this.temporaryTextElement.nativeElement.innerText.replace(/\n$/, ""), event.clientX, event.clientY)); + this.deactivate(); + 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(); @@ -80,7 +81,7 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy { rootElement.selectAll('text.text_element') .on("dblclick", (elem, index, textElements) => { - this.isActive = true; + this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial'); this.editedElement = elem; select(textElements[index]) @@ -89,7 +90,6 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy { select(textElements[index]) .classed("editingMode", true); - setTimeout(() => { this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute("drawing_id"); var transformData = textElements[index].parentElement.getAttribute("transform").split(/\(|\)/); var x = Number(transformData[1].split(/,/)[0]) + this.context.getZeroZeroTransformationPoint().x; @@ -106,16 +106,16 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy { .attr("visibility", "visible") .classed("editingMode", false); - this.temporaryTextElement.nativeElement.removeEventListener("focusout", this.textListener); - this.isActive = false; this.innerText = ''; + this.temporaryTextElement.nativeElement.innerText = ''; + this.temporaryTextElement.nativeElement.removeEventListener("focusout", this.textListener); + + this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'none'); }; this.textListener = listener; this.temporaryTextElement.nativeElement.addEventListener("focusout", this.textListener); this.temporaryTextElement.nativeElement.focus(); - }, - 100); - }); + }); } ngOnDestroy(){ diff --git a/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts b/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts index 66fc05ed..812c3a22 100644 --- a/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts +++ b/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts @@ -23,7 +23,7 @@ export class MapDrawingToSvgConverter implements Converter { } else if (mapDrawing.element instanceof LineElement) { elem = `` } else if (mapDrawing.element instanceof TextElement) { - elem = `${mapDrawing.element.text}`; + elem = `${mapDrawing.element.text}`; } else return ""; return `${elem}`; diff --git a/src/app/services/drawing.service.ts b/src/app/services/drawing.service.ts index a1a8b3b5..e0cf9d8b 100644 --- a/src/app/services/drawing.service.ts +++ b/src/app/services/drawing.service.ts @@ -17,7 +17,8 @@ export class DrawingService { .post(server, `/projects/${project_id}/drawings`, { 'svg': svg, 'x': Math.round(x), - 'y': Math.round(y) + 'y': Math.round(y), + 'z': 1 }); }