ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-06-17 14:28:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Option to edit on double click added

Browse Source
This commit is contained in:
Piotr Pekala
2019-07-31 08:06:25 -07:00
parent d2271f0421
commit 4ed1f3da30
5 changed files with 97 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/app/cartography/components/text-editor/text-editor.component.ts
View File

@ -7,6 +7,18 @@ import { TextElement } from '../../models/drawings/text-element';
import { Context } from '../../models/context';
import { Subscription } from 'rxjs';
import { MapScaleService } from '../../../services/mapScale.service';
import { MapLabel } from '../../models/map/map-label';
import { MapNode } from '../../models/map/map-node';
import { NodesDataSource } from '../../datasources/nodes-datasource';
import { Node } from '../../models/node';
import { SelectionManager } from '../../managers/selection-manager';
import { Server } from '../../../models/server';
import { MapLinkNode } from '../../models/map/map-link-node';
import { LinkService } from '../../../services/link.service';
import { LinksDataSource } from '../../datasources/links-datasource';
import { Link } from '../../../models/link';
import { StyleProperty } from '../../../components/project-map/drawings-editors/text-editor/text-editor.component';
import { FontFixer } from '../../helpers/font-fixer';
@Component({
selector: 'app-text-editor',
@ -16,6 +28,7 @@ import { MapScaleService } from '../../../services/mapScale.service';
export class TextEditorComponent implements OnInit, OnDestroy {
@ViewChild('temporaryTextElement', {static: false}) temporaryTextElement: ElementRef;
@Input('svg') svg: SVGSVGElement;
@Input('server') server: Server;
leftPosition: string = '0px';
topPosition: string = '0px';
@ -23,6 +36,8 @@ export class TextEditorComponent implements OnInit, OnDestroy {
private editingDrawingId: string;
private editedElement: any;
private editedLink: MapLinkNode;
private editedNode: Node;
private mapListener: Function;
private textListener: Function;
@ -34,7 +49,12 @@ export class TextEditorComponent implements OnInit, OnDestroy {
private toolsService: ToolsService,
private context: Context,
private renderer: Renderer2,
private mapScaleService: MapScaleService
private mapScaleService: MapScaleService,
private linkService: LinkService,
private linksDataSource: LinksDataSource,
private nodesDataSource: NodesDataSource,
private selectionManager: SelectionManager,
private fontFixer: FontFixer
) {}
ngOnInit() {
@ -42,7 +62,8 @@ export class TextEditorComponent implements OnInit, OnDestroy {
isActive ? this.activateTextAdding() : this.deactivateTextAdding();
});
this.activateTextEditing();
this.activateTextEditingForDrawings();
this.activateTextEditingForNodeLabels();
}
activateTextAdding() {
@ -80,7 +101,72 @@ export class TextEditorComponent implements OnInit, OnDestroy {
this.svg.removeEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
}
activateTextEditing() {
activateTextEditingForNodeLabels() {
const rootElement = select(this.svg);
rootElement
.selectAll<SVGGElement, MapLinkNode>('g.interface_label_container')
.select<SVGTextElement>('text.interface_label')
.on('dblclick', (elem, index, textElements) => {
this.selectionManager.setSelected([]);
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`);
this.editedLink = elem;
select(textElements[index]).attr('visibility', 'hidden');
select(textElements[index]).classed('editingMode', true);
this.editedNode = this.nodesDataSource.get(elem.nodeId);
this.editedLink = elem;
var x = ((elem.label.originalX + this.editedNode.x - 1) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
var y = ((elem.label.originalY + this.editedNode.y + 4) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
this.leftPosition = x.toString() + 'px';
this.topPosition = y.toString() + 'px';
this.temporaryTextElement.nativeElement.innerText = elem.label.text;
console.log('style', elem);
elem.label.style = this.fontFixer.fixStyles(elem.label.style);
console.log(elem.label.style);
var styleProperties: StyleProperty[] = [];
for (var property of elem.label.style.split(";")){
styleProperties.push({
property: property.split(": ")[0],
value: property.split(": ")[1]
});
}
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'color', styleProperties.find(p => p.property === 'fill') ? styleProperties.find(p => p.property === 'fill').value : '#000000');
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-family', styleProperties.find(p => p.property === 'font-family') ? styleProperties.find(p => p.property === 'font-family').value : 'TypeWriter');
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-size', styleProperties.find(p => p.property === 'font-size') ? `${styleProperties.find(p => p.property === 'font-size').value}pt` : '10.0pt');
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-weight', styleProperties.find(p => p.property === 'font-weight') ? styleProperties.find(p => p.property === 'font-weight').value : 'normal');
let listener = () => {
let innerText = this.temporaryTextElement.nativeElement.innerText;
let link: Link = this.linksDataSource.get(this.editedLink.linkId);
link.nodes.find(n => n.node_id === this.editedNode.node_id).label.text = innerText;
this.linkService.updateLink(this.server, link).subscribe((link: Link) => {
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();
});
}
activateTextEditingForDrawings() {
const rootElement = select(this.svg);
rootElement