mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-06-17 14:28:13 +00:00
Apply code style
This commit is contained in:
ziajka
@ -1,4 +1,4 @@
|
||||
import { Component, ViewChild, ElementRef, OnInit, Input, EventEmitter, OnDestroy, Renderer2 } 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';
|
||||
@ -7,126 +7,133 @@ import { TextElement } from '../../models/drawings/text-element';
|
||||
import { Context } from '../../models/context';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-text-editor',
|
||||
templateUrl: './text-editor.component.html',
|
||||
styleUrls: ['./text-editor.component.scss']
|
||||
selector: 'app-text-editor',
|
||||
templateUrl: './text-editor.component.html',
|
||||
styleUrls: ['./text-editor.component.scss']
|
||||
})
|
||||
export class TextEditorComponent implements OnInit, OnDestroy {
|
||||
@ViewChild('temporaryTextElement') temporaryTextElement: ElementRef;
|
||||
@Input('svg') svg: SVGSVGElement;
|
||||
@ViewChild('temporaryTextElement') temporaryTextElement: ElementRef;
|
||||
@Input('svg') svg: SVGSVGElement;
|
||||
|
||||
leftPosition: string = '0px';
|
||||
topPosition: string = '0px';
|
||||
innerText: string = '';
|
||||
leftPosition: string = '0px';
|
||||
topPosition: string = '0px';
|
||||
innerText: string = '';
|
||||
|
||||
private editingDrawingId: string;
|
||||
private editedElement: any;
|
||||
private editingDrawingId: string;
|
||||
private editedElement: any;
|
||||
|
||||
private mapListener: Function;
|
||||
private textListener: Function;
|
||||
private textAddingSubscription: Subscription;
|
||||
public addingFinished = new EventEmitter<any>();
|
||||
|
||||
constructor(
|
||||
private drawingsEventSource: DrawingsEventSource,
|
||||
private toolsService: ToolsService,
|
||||
private context: Context,
|
||||
private renderer: Renderer2
|
||||
){}
|
||||
private mapListener: Function;
|
||||
private textListener: Function;
|
||||
private textAddingSubscription: Subscription;
|
||||
public addingFinished = new EventEmitter<any>();
|
||||
|
||||
ngOnInit(){
|
||||
this.textAddingSubscription = this.toolsService.isTextAddingToolActivated.subscribe((isActive: boolean) => {
|
||||
isActive ? this.activateTextAdding() : this.deactivateTextAdding()
|
||||
});
|
||||
constructor(
|
||||
private drawingsEventSource: DrawingsEventSource,
|
||||
private toolsService: ToolsService,
|
||||
private context: Context,
|
||||
private renderer: Renderer2
|
||||
) {}
|
||||
|
||||
this.activateTextEditing();
|
||||
}
|
||||
ngOnInit() {
|
||||
this.textAddingSubscription = this.toolsService.isTextAddingToolActivated.subscribe((isActive: boolean) => {
|
||||
isActive ? this.activateTextAdding() : this.deactivateTextAdding();
|
||||
});
|
||||
|
||||
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.activateTextEditing();
|
||||
}
|
||||
|
||||
let textListener = () => {
|
||||
this.drawingsEventSource.textAdded.emit(new TextAddedDataEvent(this.temporaryTextElement.nativeElement.innerText.replace(/\n$/, ""), event.clientX, event.clientY));
|
||||
this.deactivateTextAdding();
|
||||
this.innerText = '';
|
||||
this.temporaryTextElement.nativeElement.removeEventListener("focusout", this.textListener);
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'none');
|
||||
}
|
||||
this.textListener = textListener;
|
||||
this.temporaryTextElement.nativeElement.addEventListener('focusout', this.textListener);
|
||||
}
|
||||
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();
|
||||
|
||||
let textListener = () => {
|
||||
this.drawingsEventSource.textAdded.emit(
|
||||
new TextAddedDataEvent(
|
||||
this.temporaryTextElement.nativeElement.innerText.replace(/\n$/, ''),
|
||||
event.clientX,
|
||||
event.clientY
|
||||
)
|
||||
);
|
||||
this.deactivateTextAdding();
|
||||
this.mapListener = addTextListener;
|
||||
this.svg.addEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
|
||||
}
|
||||
this.innerText = '';
|
||||
this.temporaryTextElement.nativeElement.removeEventListener('focusout', this.textListener);
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'none');
|
||||
};
|
||||
this.textListener = textListener;
|
||||
this.temporaryTextElement.nativeElement.addEventListener('focusout', this.textListener);
|
||||
};
|
||||
|
||||
deactivateTextAdding(){
|
||||
this.svg.removeEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
|
||||
}
|
||||
this.deactivateTextAdding();
|
||||
this.mapListener = addTextListener;
|
||||
this.svg.addEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
|
||||
}
|
||||
|
||||
activateTextEditing(){
|
||||
const rootElement = select(this.svg);
|
||||
deactivateTextAdding() {
|
||||
this.svg.removeEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
|
||||
}
|
||||
|
||||
rootElement.selectAll<SVGTextElement, TextElement>('text.text_element')
|
||||
.on("dblclick", (elem, index, textElements) => {
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
|
||||
this.editedElement = elem;
|
||||
activateTextEditing() {
|
||||
const rootElement = select(this.svg);
|
||||
|
||||
select(textElements[index])
|
||||
.attr("visibility", "hidden");
|
||||
rootElement
|
||||
.selectAll<SVGTextElement, TextElement>('text.text_element')
|
||||
.on('dblclick', (elem, index, textElements) => {
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
|
||||
this.editedElement = elem;
|
||||
|
||||
select(textElements[index])
|
||||
.classed("editingMode", true);
|
||||
select(textElements[index]).attr('visibility', 'hidden');
|
||||
|
||||
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;
|
||||
var y = Number(transformData[1].split(/,/)[1]) + this.context.getZeroZeroTransformationPoint().y;
|
||||
this.leftPosition = x.toString() + 'px';
|
||||
this.topPosition = y.toString() + 'px';
|
||||
this.temporaryTextElement.nativeElement.innerText = elem.text;
|
||||
select(textElements[index]).classed('editingMode', true);
|
||||
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'color', elem.fill);
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-family', elem.font_family);
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-size', `${elem.font_size}pt`);
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-weight', elem.font_weight);
|
||||
|
||||
let listener = () => {
|
||||
let innerText = this.temporaryTextElement.nativeElement.innerText;
|
||||
this.drawingsEventSource.textEdited.emit(new TextEditedDataEvent(this.editingDrawingId, innerText.replace(/\n$/, ""), this.editedElement));
|
||||
|
||||
rootElement.selectAll<SVGTextElement, TextElement>('text.editingMode')
|
||||
.attr("visibility", "visible")
|
||||
.classed("editingMode", false);
|
||||
|
||||
this.innerText = '';
|
||||
this.temporaryTextElement.nativeElement.innerText = '';
|
||||
this.temporaryTextElement.nativeElement.removeEventListener("focusout", this.textListener);
|
||||
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;
|
||||
var y = Number(transformData[1].split(/,/)[1]) + this.context.getZeroZeroTransformationPoint().y;
|
||||
this.leftPosition = x.toString() + 'px';
|
||||
this.topPosition = y.toString() + 'px';
|
||||
this.temporaryTextElement.nativeElement.innerText = elem.text;
|
||||
|
||||
this.clearStyle();
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'none');
|
||||
};
|
||||
this.textListener = listener;
|
||||
this.temporaryTextElement.nativeElement.addEventListener("focusout", this.textListener);
|
||||
this.temporaryTextElement.nativeElement.focus();
|
||||
});
|
||||
}
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'color', elem.fill);
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-family', elem.font_family);
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-size', `${elem.font_size}pt`);
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-weight', elem.font_weight);
|
||||
|
||||
ngOnDestroy(){
|
||||
this.textAddingSubscription.unsubscribe();
|
||||
}
|
||||
let listener = () => {
|
||||
let innerText = this.temporaryTextElement.nativeElement.innerText;
|
||||
this.drawingsEventSource.textEdited.emit(
|
||||
new TextEditedDataEvent(this.editingDrawingId, innerText.replace(/\n$/, ''), this.editedElement)
|
||||
);
|
||||
|
||||
clearStyle(){
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'color', '#000000');
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-family', 'Noto Sans');
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-size', '11pt');
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-weight', 'bold');
|
||||
}
|
||||
rootElement
|
||||
.selectAll<SVGTextElement, TextElement>('text.editingMode')
|
||||
.attr('visibility', 'visible')
|
||||
.classed('editingMode', false);
|
||||
|
||||
this.innerText = '';
|
||||
this.temporaryTextElement.nativeElement.innerText = '';
|
||||
this.temporaryTextElement.nativeElement.removeEventListener('focusout', this.textListener);
|
||||
|
||||
this.clearStyle();
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'none');
|
||||
};
|
||||
this.textListener = listener;
|
||||
this.temporaryTextElement.nativeElement.addEventListener('focusout', this.textListener);
|
||||
this.temporaryTextElement.nativeElement.focus();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.textAddingSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
clearStyle() {
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'color', '#000000');
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-family', 'Noto Sans');
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-size', '11pt');
|
||||
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-weight', 'bold');
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user