ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-05-11 04:52:59 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Removing timeouts from code

Browse Source
This commit is contained in:
Piotr Pekala 2019-01-09 03:58:54 -08:00
parent 6b4a5337d8
commit 740a042b0e
5 changed files with 53 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/cartography/components/temporary-text-element/temporary-text-element.component.html
View File

@ -1,5 +1,6 @@
<div *ngIf="isActive" #temporaryTextElement class="temporaryElement" contenteditable="true" <div #temporaryTextElement id="temporaryElement" class="temporaryElement" contenteditable="true"
[style.top]=topPosition [style.top]=topPosition
[style.left]=leftPosition> [style.left]=leftPosition
[style.display]=display>
{{innerText}} {{innerText}}
</div> </div>

23
src/app/cartography/components/temporary-text-element/temporary-text-element.component.spec.ts
View File

@ -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<TemporaryTextElementComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
NoopAnimationsModule
],
providers: [
],
declarations: [
TemporaryTextElementComponent
]
});
}));
});

48
src/app/cartography/components/temporary-text-element/temporary-text-element.component.ts
View File

@ -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 { DrawingsEventSource } from '../../events/drawings-event-source';
import { TextAddedDataEvent, TextEditedDataEvent } from '../../events/event-source'; import { TextAddedDataEvent, TextEditedDataEvent } from '../../events/event-source';
import { ToolsService } from '../../../services/tools.service'; import { ToolsService } from '../../../services/tools.service';
@ -17,9 +17,10 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
@ViewChild('temporaryTextElement') temporaryTextElement: ElementRef; @ViewChild('temporaryTextElement') temporaryTextElement: ElementRef;
@Input('svg') svg: SVGSVGElement; @Input('svg') svg: SVGSVGElement;
private isActive: boolean = false; private isActive: boolean = true;
private leftPosition: string = '0px'; private leftPosition: string = '0px';
private topPosition: string = '0px'; private topPosition: string = '0px';
private display: string = 'none';
private innerText: string = ''; private innerText: string = '';
private editingDrawingId: string; private editingDrawingId: string;
@ -33,7 +34,8 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
constructor( constructor(
private drawingsEventSource: DrawingsEventSource, private drawingsEventSource: DrawingsEventSource,
private toolsService: ToolsService, private toolsService: ToolsService,
private context: Context private context: Context,
private renderer: Renderer2
){} ){}
ngOnInit(){ ngOnInit(){
@ -48,22 +50,21 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
let addTextListener = (event: MouseEvent) => { let addTextListener = (event: MouseEvent) => {
this.leftPosition = event.clientX.toString() + 'px'; this.leftPosition = event.clientX.toString() + 'px';
this.topPosition = (event.clientY + window.pageYOffset).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 = () => { let textListener = () => {
this.drawingsEventSource.textAdded.emit(new TextAddedDataEvent(this.temporaryTextElement.nativeElement.innerText.replace(/\n$/, ""), event.clientX, event.clientY)); this.drawingsEventSource.textAdded.emit(new TextAddedDataEvent(this.temporaryTextElement.nativeElement.innerText.replace(/\n$/, ""), event.clientX, event.clientY));
this.deactivate(); this.deactivate();
this.innerText = ''; this.innerText = '';
this.temporaryTextElement.nativeElement.removeEventListener("focusout", this.textListener); this.temporaryTextElement.nativeElement.removeEventListener("focusout", this.textListener);
this.isActive = false; this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'none');
} this.display = 'none';
this.textListener = textListener; }
this.temporaryTextElement.nativeElement.addEventListener('focusout', this.textListener); this.textListener = textListener;
}, this.temporaryTextElement.nativeElement.addEventListener('focusout', this.textListener);
100);
} }
this.deactivate(); this.deactivate();
@ -80,7 +81,7 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
rootElement.selectAll<SVGTextElement, TextElement>('text.text_element') rootElement.selectAll<SVGTextElement, TextElement>('text.text_element')
.on("dblclick", (elem, index, textElements) => { .on("dblclick", (elem, index, textElements) => {
this.isActive = true; this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
this.editedElement = elem; this.editedElement = elem;
select(textElements[index]) select(textElements[index])
@ -89,7 +90,6 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
select(textElements[index]) select(textElements[index])
.classed("editingMode", true); .classed("editingMode", true);
setTimeout(() => {
this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute("drawing_id"); this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute("drawing_id");
var transformData = textElements[index].parentElement.getAttribute("transform").split(/\(|\)/); var transformData = textElements[index].parentElement.getAttribute("transform").split(/\(|\)/);
var x = Number(transformData[1].split(/,/)[0]) + this.context.getZeroZeroTransformationPoint().x; var x = Number(transformData[1].split(/,/)[0]) + this.context.getZeroZeroTransformationPoint().x;
@ -106,16 +106,16 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
.attr("visibility", "visible") .attr("visibility", "visible")
.classed("editingMode", false); .classed("editingMode", false);
this.temporaryTextElement.nativeElement.removeEventListener("focusout", this.textListener);
this.isActive = false;
this.innerText = ''; 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.textListener = listener;
this.temporaryTextElement.nativeElement.addEventListener("focusout", this.textListener); this.temporaryTextElement.nativeElement.addEventListener("focusout", this.textListener);
this.temporaryTextElement.nativeElement.focus(); this.temporaryTextElement.nativeElement.focus();
}, });
100);
});
} }
ngOnDestroy(){ ngOnDestroy(){

2
src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
View File

@ -23,7 +23,7 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
} else if (mapDrawing.element instanceof LineElement) { } else if (mapDrawing.element instanceof LineElement) {
elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${mapDrawing.element.x1}\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" />` elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${mapDrawing.element.x1}\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" />`
} else if (mapDrawing.element instanceof TextElement) { } else if (mapDrawing.element instanceof TextElement) {
elem = `<text fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" font-family=\"${mapDrawing.element.font_family}\" font-size=\"${mapDrawing.element.font_size}\" font-weight=\"${mapDrawing.element.font_weight}\">${mapDrawing.element.text}</text>`; elem = `<text fill=\"${mapDrawing.element.fill}\" fill-opacity=\"1.0\" font-family=\"${mapDrawing.element.font_family}\" font-size=\"${mapDrawing.element.font_size}\" font-weight=\"${mapDrawing.element.font_weight}\">${mapDrawing.element.text}</text>`;
} else return ""; } else return "";
return `<svg height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\">${elem}</svg>`; return `<svg height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\">${elem}</svg>`;

3
src/app/services/drawing.service.ts
View File

@ -17,7 +17,8 @@ export class DrawingService {
.post<Drawing>(server, `/projects/${project_id}/drawings`, { .post<Drawing>(server, `/projects/${project_id}/drawings`, {
'svg': svg, 'svg': svg,
'x': Math.round(x), 'x': Math.round(x),
'y': Math.round(y) 'y': Math.round(y),
'z': 1
}); });
} }