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

extracting code from main component

Browse Source
This commit is contained in:
Piotr Pekala 2018-12-18 05:53:18 -08:00
parent 019584c32c
commit 9ce2adfb67
6 changed files with 114 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/app/components/project-map/add-drawing/add-drawing.component.spec.ts
View File

@ -0,0 +1,37 @@
import { AddDrawingComponent } from "./add-drawing.component";
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { DrawingsFactory } from '../../../cartography/helpers/drawings-factory';
import { DrawingService } from '../../../services/drawing.service';
import { DrawingsDataSource } from '../../../cartography/datasources/drawings-datasource';
import { MapDrawingToSvgConverter } from '../../../cartography/converters/map/map-drawing-to-svg-converter';
import { Context } from '../../../cartography/models/context';
describe('AddDrawingComponent', () => {
let component: AddDrawingComponent;
let fixture: ComponentFixture<AddDrawingComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [
{ provide: DrawingService },
{ provide: DrawingsDataSource },
{ provide: DrawingsFactory },
{ provide: MapDrawingToSvgConverter },
{ provide: Context }
],
declarations: [
AddDrawingComponent
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AddDrawingComponent);
component = fixture.componentInstance;
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

61
src/app/components/project-map/add-drawing/add-drawing.component.ts
View File

@ -8,6 +8,7 @@ import { Server } from '../../../models/server';
import { MapDrawing } from '../../../cartography/models/map/map-drawing';
import { Drawing } from '../../../cartography/models/drawing';
import { Context } from '../../../cartography/models/context';
import { TextElement } from '../../../cartography/models/drawings/text-element';
@Component({
@ -20,6 +21,7 @@ export class AddDrawingComponent implements OnChanges {
@Input() server: Server;
@Input() selectedDrawing: string;
@Output() drawingSaved = new EventEmitter<boolean>();
private readonly availableDrawings = ['rectangle', 'ellipse', 'line'];
public drawListener: Function;
constructor(
@ -32,15 +34,17 @@ export class AddDrawingComponent implements OnChanges {
ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
if(changes['selectedDrawing'] && !changes['selectedDrawing'].isFirstChange()){
if(changes['selectedDrawing'].currentValue != ""){
if(this.availableDrawings.includes(changes['selectedDrawing'].currentValue)){
this.addDrawing(changes['selectedDrawing'].currentValue);
} else if (changes['selectedDrawing'].currentValue === "text") {
this.addText();
} else {
document.getElementsByClassName('map')[0].removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
}
}
}
//should delete listener if test is selected
public addDrawing(selectedObject: string){
var map = document.getElementsByClassName('map')[0];
addDrawing(selectedObject: string){
let mapDrawing: MapDrawing = this.drawingsFactory.getDrawingMock(selectedObject);
let listener = (event: MouseEvent) => {
@ -52,12 +56,59 @@ export class AddDrawingComponent implements OnChanges {
.add(this.server, this.project.project_id, x, y, svg)
.subscribe((serverDrawing: Drawing) => {
this.drawingsDataSource.add(serverDrawing);
this.drawingSaved.emit(true);
});
this.drawingSaved.emit(true);
}
let map = document.getElementsByClassName('map')[0];
map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
this.drawListener = listener;
map.addEventListener('click', this.drawListener as EventListenerOrEventListenerObject, {once : true});
}
addText(){
let addTextListener = (event: MouseEvent) => {
let textBox = document.createElement('div');
textBox.style.width = "fit-content";
textBox.style.left = event.clientX.toString() + 'px';
textBox.style.top = (event.clientY - 10).toString() + 'px';
textBox.style.position = "absolute";
textBox.style.zIndex = "99";
textBox.style.fontFamily = "Noto Sans";
textBox.style.fontSize = "11pt";
textBox.style.fontWeight = "bold";
textBox.style.color = "#000000";
textBox.setAttribute("contenteditable", "true");
document.body.appendChild(textBox);
textBox.innerText = "";
textBox.focus();
document.body.style.cursor = "text";
textBox.addEventListener("focusout", () => {
let savedText = textBox.innerText;
let drawing = this.drawingsFactory.getDrawingMock("text");
(drawing.element as TextElement).text = savedText;
let svgText = this.mapDrawingToSvgConverter.convert(drawing);
this.drawingService
.add(this.server, this.project.project_id, event.clientX - this.context.getZeroZeroTransformationPoint().x, event.clientY - this.context.getZeroZeroTransformationPoint().y, svgText)
.subscribe((serverDrawing: Drawing) => {
document.body.style.cursor = "default";
textBox.remove();
this.drawingsDataSource.add(serverDrawing);
this.drawingSaved.emit(true);
});
});
}
let map = document.getElementsByClassName('map')[0];
map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
this.drawListener = addTextListener;
map.addEventListener('click', this.drawListener as EventListenerOrEventListenerObject, {once : true});
}
}

4
src/app/components/project-map/project-map.component.css
View File

@ -113,6 +113,10 @@ g.node:hover {
left: 50%;
}
line.selected {
stroke: #0097a7!important;
}
svg.map image:hover, svg.map image.chosen, g.selected {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);

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

@ -103,7 +103,7 @@
<mat-drawer-container [ngClass]="{shadow: drawTools.visibility}" class="drawer-container">
<mat-drawer #drawer class="drawer">
<div class="drawer-buttons">
<button matTooltip="Add a note" mat-icon-button class="drawer-button" [color]="drawTools.isAddingTextChosen ? 'primary': 'basic'" (click)="addText()">
<button matTooltip="Add a note" mat-icon-button class="drawer-button" [color]="drawTools.isTextChosen ? 'primary': 'basic'" (click)="addDrawing('text')">
<mat-icon>create</mat-icon>
</button>
<button matTooltip="Draw a rectangle" mat-icon-button class="drawer-button" [color]="drawTools.isRectangleChosen ? 'primary': 'basic'" (click)="addDrawing('rectangle')">
@ -146,6 +146,7 @@
</app-project-map-shortcuts>
<app-draw-link-tool *ngIf="tools.draw_link"></app-draw-link-tool>
<app-add-drawing
[project]="project"
[server]="server"

8
src/app/components/project-map/project-map.component.spec.ts
View File

@ -42,6 +42,7 @@ import { HttpServer } from '../../services/http-server.service';
import { Server } from '../../models/server';
import { ResizedDataEvent } from '../../cartography/events/event-source';
import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-label-to-label-converter';
import { DrawingsFactory } from '../../cartography/helpers/drawings-factory';
export class MockedProgressService {
public activate() {}
@ -116,6 +117,7 @@ describe('ProjectMapComponent', () => {
{ provide: NodesEventSource },
{ provide: DrawingsEventSource },
{ provide: LinksEventSource },
{ provide: DrawingsFactory },
{ provide: MapDrawingToSvgConverter, useValue: {
convert: () => { return ''}
} },
@ -193,10 +195,4 @@ describe('ProjectMapComponent', () => {
expect(component.resetDrawToolChoice).toHaveBeenCalled();
});
it('should return drawing mock of correct type'), () => {
let mock = component.getDrawingMock('rectangle');
expect(mock instanceof RectElement).toBe(true);
}
});

83
src/app/components/project-map/project-map.component.ts
View File

@ -74,8 +74,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
'isRectangleChosen': false,
'isEllipseChosen': false,
'isLineChosen': false,
'visibility': false,
'isAddingTextChosen': false
'isTextChosen': false,
'visibility': false
};
protected selectedDrawing: string;
@ -397,46 +397,45 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
}
public addDrawing(selectedObject: string) {
if (selectedObject === this.selectedDrawing){
this.selectedDrawing = "";
return;
}
switch (selectedObject) {
case "rectangle":
this.drawTools.isAddingTextChosen = false;
this.drawTools.isTextChosen = false;
this.drawTools.isEllipseChosen = false;
this.drawTools.isRectangleChosen = !this.drawTools.isRectangleChosen;
this.drawTools.isLineChosen = false;
break;
case "ellipse":
this.drawTools.isAddingTextChosen = false;
this.drawTools.isTextChosen = false;
this.drawTools.isEllipseChosen = !this.drawTools.isEllipseChosen;
this.drawTools.isRectangleChosen = false;
this.drawTools.isLineChosen = false;
break;
case "line":
this.drawTools.isAddingTextChosen = false;
this.drawTools.isTextChosen = false;
this.drawTools.isEllipseChosen = false;
this.drawTools.isRectangleChosen = false;
this.drawTools.isLineChosen = !this.drawTools.isLineChosen;
break;
case "text":
this.drawTools.isTextChosen = !this.drawTools.isTextChosen;
this.drawTools.isEllipseChosen = false;
this.drawTools.isRectangleChosen = false;
this.drawTools.isLineChosen = false;
break;
}
this.selectedDrawing = selectedObject;
this.selectedDrawing = this.selectedDrawing === selectedObject ? "" : selectedObject;
}
public resetDrawToolChoice(){
this.drawTools.isRectangleChosen = false;
this.drawTools.isEllipseChosen = false;
this.drawTools.isLineChosen = false;
this.drawTools.isAddingTextChosen = false;
this.drawTools.isTextChosen = false;
this.selectedDrawing = "";
}
public hideMenu(){
var map = document.getElementsByClassName('map')[0];
map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
this.resetDrawToolChoice();
this.drawTools.visibility = false;
}
@ -448,62 +447,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
200);
}
public addText(){
if (!this.drawTools.isAddingTextChosen){
this.resetDrawToolChoice();
this.drawTools.isAddingTextChosen = true;
var map = document.getElementsByClassName('map')[0];
let addTextListener = (event: MouseEvent) => {
var div = document.createElement('div');
div.style.width = "fit-content";
div.style.left = event.clientX.toString() + 'px';
div.style.top = (event.clientY - 10).toString() + 'px';
div.style.position = "absolute";
div.style.zIndex = "99";
div.style.fontFamily = "Noto Sans";
div.style.fontSize = "11pt";
div.style.fontWeight = "bold";
div.style.color = "#000000";
div.setAttribute("contenteditable", "true");
document.body.appendChild(div);
div.innerText = "";
div.focus();
document.body.style.cursor = "text";
div.addEventListener("focusout", () => {
let savedText = div.innerText;
let drawing = this.drawingsFactory.getDrawingMock("text");
(drawing.element as TextElement).text = savedText;
let svgText = this.mapDrawingToSvgConverter.convert(drawing);
this.drawingService
.add(this.server, this.project.project_id, event.clientX - this.mapChild.context.getZeroZeroTransformationPoint().x, event.clientY - this.mapChild.context.getZeroZeroTransformationPoint().y, svgText)
.subscribe((serverDrawing: Drawing) => {
document.body.style.cursor = "default";
div.remove();
this.drawingsDataSource.add(serverDrawing);
});
});
this.resetDrawToolChoice();
}
map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
this.drawListener = addTextListener;
map.addEventListener('click', this.drawListener as EventListenerOrEventListenerObject, {once : true});
} else {
this.resetDrawToolChoice();
var map = document.getElementsByClassName('map')[0];
map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
}
}
public ngOnDestroy() {
this.drawingsDataSource.clear();
this.nodesDataSource.clear();