ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-19 04:57:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Text editing moved to common component

Browse Source
This commit is contained in:
Piotr Pekala 2019-01-08 06:53:01 -08:00
parent af1957915b
commit 417cdfb105
12 changed files with 43 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/cartography/cartography.module.ts
View File

@ -42,7 +42,6 @@ import { SelectionSelectComponent } from './components/selection-select/selectio
import { DraggableSelectionComponent } from './components/draggable-selection/draggable-selection.component';
import { MapSettingsManager } from './managers/map-settings-manager';
import { DrawingResizingComponent } from './components/drawing-resizing/drawing-resizing.component';
import { TextEditingComponent } from './components/text-editing/text-editing.component';
import { FontBBoxCalculator } from './helpers/font-bbox-calculator';
import { StylesToFontConverter } from './converters/styles-to-font-converter';
import { TextElementFactory } from './helpers/drawings-factory/text-element-factory';
@ -64,7 +63,6 @@ import { DrawingAddingComponent } from './components/drawing-adding/drawing-addi
ExperimentalMapComponent,
DrawingAddingComponent,
DrawingResizingComponent,
TextEditingComponent,
TemporaryTextElementComponent,
...ANGULAR_MAP_DECLARATIONS,
SelectionControlComponent,

3
src/app/cartography/components/d3-map/d3-map.component.html
View File

@ -12,6 +12,5 @@
<app-drawing-resizing></app-drawing-resizing>
<app-selection-control></app-selection-control>
<app-selection-select></app-selection-select>
<app-temporary-text-element [svg]="svg"></app-temporary-text-element>
<app-text-editing></app-text-editing>
<app-temporary-text-element #temporaryTextElement [svg]="svg"></app-temporary-text-element>
<app-draggable-selection [svg]="svg"></app-draggable-selection>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 534 B

After

Width:  |  Height:  |  Size: 518 B

12
src/app/cartography/components/d3-map/d3-map.component.ts
View File

@ -18,9 +18,9 @@ import { Drawing } from '../../models/drawing';
import { Symbol } from '../../../models/symbol';
import { GraphDataManager } from '../../managers/graph-data-manager';
import { MapSettingsManager } from '../../managers/map-settings-manager';
import { TextEditingTool } from '../../tools/text-editing-tool';
import { Server } from '../../../models/server';
import { ToolsService } from '../../../services/tools.service';
import { TemporaryTextElementComponent } from '../temporary-text-element/temporary-text-element.component';
@Component({
@ -39,6 +39,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
@Input() height = 600;
@ViewChild('svg') svgRef: ElementRef;
@ViewChild('temporaryTextElement') temporaryTextElement: TemporaryTextElementComponent;
private parentNativeElement: any;
private svg: Selection<SVGSVGElement, any, null, undefined>;
@ -62,7 +63,6 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
protected interfaceLabelWidget: InterfaceLabelWidget,
protected selectionToolWidget: SelectionTool,
protected movingToolWidget: MovingTool,
protected textEditingToolWidget: TextEditingTool,
public graphLayout: GraphLayout,
private toolsService: ToolsService
) {
@ -110,13 +110,6 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
}
});
this.subscriptions.push(
this.toolsService.isTextEditingToolActivated.subscribe((value: boolean) => {
this.textEditingToolWidget.setEnabled(value);
this.mapChangeDetectorRef.detectChanges();
})
);
this.subscriptions.push(
this.toolsService.isMovingToolActivated.subscribe((value: boolean) => {
this.movingToolWidget.setEnabled(value);
@ -175,6 +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();
}
@HostListener('window:resize', ['$event'])

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

@ -1,11 +1,12 @@
import { Component, ViewChild, ElementRef, OnInit, Input, EventEmitter, OnDestroy } from "@angular/core";
import { DrawingsEventSource } from '../../events/drawings-event-source';
import { TextAddedDataEvent } from '../../events/event-source';
import { TextAddedDataEvent, TextEditedDataEvent } from '../../events/event-source';
import { ToolsService } from '../../../services/tools.service';
import { SVGSelection } from '../../models/types';
import { Selection, select } from 'd3-selection';
import { select } from 'd3-selection';
import { TextElement } from '../../models/drawings/text-element';
import { Context } from '../../models/context';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-temporary-text-element',
@ -16,18 +17,18 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
@ViewChild('temporaryTextElement') temporaryTextElement: ElementRef;
@Input('svg') svg: SVGSVGElement;
private leftPosition: string = '0px';
private topPosition: string = '0px';
private innerText: string = '';
private isActive: boolean = false;
private mapListener: Function;
private textListener: Function;
public addingFinished = new EventEmitter<any>();
private isActive: boolean = true;
private leftPosition: string;
private topPosition: string;
private innerText: string = "";s
private enabled = true;
private editingDrawingId: string;
private editedElement: any;
private temporaryElement: HTMLDivElement;
private mapListener: Function;
private textListener: Function;
private textAddingSubscription: Subscription;
public addingFinished = new EventEmitter<any>();
constructor(
private drawingsEventSource: DrawingsEventSource,
@ -36,9 +37,9 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
){}
ngOnInit(){
this.toolsService.isTextAddingToolActivated.subscribe((isActive: boolean) => {
this.textAddingSubscription = this.toolsService.isTextAddingToolActivated.subscribe((isActive: boolean) => {
this.isActive = isActive;
isActive ? this.activate() : this.deactivate()
this.isActive ? this.activate() : this.deactivate()
});
this.activateTextEditing();
@ -48,13 +49,13 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
let addTextListener = (event: MouseEvent) => {
this.leftPosition = event.clientX.toString() + 'px';
this.topPosition = event.clientY.toString() + 'px';
this.temporaryTextElement.nativeElement.focus();
let textListener = () => {
this.drawingsEventSource.textAdded.emit(new TextAddedDataEvent(this.temporaryTextElement.nativeElement.innerText.replace(/\n$/, ""), event.clientX, event.clientY));
this.deactivate();
this.temporaryTextElement.nativeElement.removeEventListener('focusout', this.textListener);
this.isActive = false;
}
this.textListener = textListener;
this.temporaryTextElement.nativeElement.addEventListener('focusout', this.textListener);
@ -71,16 +72,38 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
activateTextEditing(){
const rootElement = select(this.svg);
console.log("From component ", rootElement.selectAll<SVGTextElement, TextElement>('text.text_element'));
rootElement.selectAll<SVGTextElement, TextElement>('text.text_element')
.on("dblclick", (elem, index, textElements) => {
this.isActive = true;
this.editedElement = elem;
select(textElements[index])
.attr("visibility", "hidden");
select(textElements[index])
.classed("editingMode", true);
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.innerText = elem.text;
this.temporaryTextElement.nativeElement.addEventListener("focusout", () => {
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.isActive = false;
});
this.temporaryTextElement.nativeElement.focus();
});
}

0
src/app/cartography/components/text-editing/text-editing.component.html
View File

0
src/app/cartography/components/text-editing/text-editing.component.scss
View File

0
src/app/cartography/components/text-editing/text-editing.component.spec.ts
View File

29
src/app/cartography/components/text-editing/text-editing.component.ts
View File

@ -1,29 +0,0 @@
import { Component, OnDestroy, OnInit } from "@angular/core";
import { Subscription } from 'rxjs';
import { TextEditingTool } from '../../tools/text-editing-tool';
import { DrawingsEventSource } from '../../events/drawings-event-source';
import { TextEditedDataEvent } from '../../events/event-source';
@Component({
selector: 'app-text-editing',
template: `<ng-content></ng-content>`,
styleUrls: ['./text-editing.component.scss']
})
export class TextEditingComponent implements OnInit, OnDestroy {
textEditingFinished: Subscription;
constructor(
private textEditingTool: TextEditingTool,
private drawingEventSource: DrawingsEventSource
) {}
ngOnInit() {
this.textEditingFinished = this.textEditingTool.editingFinished.subscribe((evt: TextEditedDataEvent) => {
this.drawingEventSource.textEdited.emit(evt);
});
}
ngOnDestroy() {
this.textEditingFinished.unsubscribe();
}
}

2
src/app/cartography/d3-map.imports.ts
View File

@ -5,7 +5,6 @@ import { DrawingsWidget } from './widgets/drawings';
import { DrawingLineWidget } from './widgets/drawing-line';
import { SelectionTool } from './tools/selection-tool';
import { MovingTool } from './tools/moving-tool';
import {TextEditingTool} from './tools/text-editing-tool';
import { LayersWidget } from './widgets/layers';
import { LinkWidget } from './widgets/link';
import { InterfaceStatusWidget } from './widgets/interface-status';
@ -29,7 +28,6 @@ export const D3_MAP_IMPORTS = [
DrawingLineWidget,
SelectionTool,
MovingTool,
TextEditingTool,
LayersWidget,
LinkWidget,
InterfaceStatusWidget,

0
src/app/cartography/tools/text-editing-tool.spec.ts
View File

86
src/app/cartography/tools/text-editing-tool.ts
View File

@ -1,86 +0,0 @@
import { Injectable, EventEmitter } from "@angular/core";
import { SVGSelection } from '../models/types';
import { select } from 'd3-selection';
import { TextElement } from '../models/drawings/text-element';
import { TextEditedDataEvent } from '../events/event-source';
import { DrawingsEventSource } from '../events/drawings-event-source';
import { Context } from '../models/context';
@Injectable()
export class TextEditingTool {
private enabled = true;
private editingDrawingId: string;
private editedElement: any;
private temporaryElement: HTMLDivElement;
public editingFinished = new EventEmitter<any>();
constructor(
private drawingEventSource: DrawingsEventSource,
private context: Context
){}
public setEnabled(enabled) {
this.enabled = enabled;
}
public draw(selection: SVGSelection){
if (!this.enabled){
return;
}
console.log("From service", selection.selectAll<SVGTextElement, TextElement>('text.text_element'));
selection.selectAll<SVGTextElement, TextElement>('text.text_element')
.on("dblclick", (elem, index, textElements) => {
this.editedElement = elem;
select(textElements[index])
.attr("visibility", "hidden");
select(textElements[index])
.classed("editingMode", true);
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.temporaryElement = document.createElement('div');
this.temporaryElement.className = "temporaryElement";
this.temporaryElement.style.paddingLeft = "4px";
this.temporaryElement.style.width = "fit-content";
this.temporaryElement.style.left = x.toString() + 'px';
this.temporaryElement.style.top = y.toString() + 'px';
this.temporaryElement.style.position = "absolute";
this.temporaryElement.style.zIndex = "99";
this.temporaryElement.style.fontFamily = elem.font_family;
this.temporaryElement.style.fontSize = `${elem.font_size}pt`;
this.temporaryElement.style.fontWeight = elem.font_weight;
this.temporaryElement.style.color = elem.fill;
this.temporaryElement.style.textDecoration = elem.text_decoration;
this.temporaryElement.setAttribute("contenteditable", "true");
this.temporaryElement.innerText = elem.text;
this.temporaryElement.addEventListener("focusout", () => {
let innerText = this.temporaryElement.innerText;
this.editingFinished.emit(new TextEditedDataEvent(this.editingDrawingId, innerText.replace(/\n$/, ""), this.editedElement));
this.drawingEventSource.textSaved.subscribe((evt:boolean) => {
if(evt){
this.temporaryElement.remove();
document.body.style.cursor = "default";
}
});
selection.selectAll<SVGTextElement, TextElement>('text.editingMode')
.attr("visibility", "visible")
.classed("editingMode", false);
});
document.body.appendChild(this.temporaryElement);
this.temporaryElement.focus();
});
}
}

3
src/app/cartography/widgets/graph-layout.ts
View File

@ -8,7 +8,6 @@ import { MovingTool } from "../tools/moving-tool";
import { LayersWidget } from "./layers";
import { LayersManager } from "../managers/layers-manager";
import { Injectable } from "@angular/core";
import { TextEditingTool } from '../tools/text-editing-tool';
@Injectable()
@ -18,7 +17,6 @@ export class GraphLayout implements Widget {
private drawingLineTool: DrawingLineWidget,
private selectionTool: SelectionTool,
private movingTool: MovingTool,
private textEditingTool: TextEditingTool,
private layersWidget: LayersWidget,
private layersManager: LayersManager
) {
@ -69,7 +67,6 @@ export class GraphLayout implements Widget {
this.drawingLineTool.draw(view, context);
this.selectionTool.draw(view, context);
this.movingTool.draw(view, context);
this.textEditingTool.draw(view);
}
disconnect(view: SVGSelection) {