From 9ce2adfb67107d76a339a6a4dbc4a4a6d060bc0a Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Tue, 18 Dec 2018 05:53:18 -0800 Subject: [PATCH] extracting code from main component --- .../add-drawing/add-drawing.component.spec.ts | 37 +++++++++ .../add-drawing/add-drawing.component.ts | 61 ++++++++++++-- .../project-map/project-map.component.css | 4 + .../project-map/project-map.component.html | 3 +- .../project-map/project-map.component.spec.ts | 8 +- .../project-map/project-map.component.ts | 83 +++---------------- 6 files changed, 114 insertions(+), 82 deletions(-) diff --git a/src/app/components/project-map/add-drawing/add-drawing.component.spec.ts b/src/app/components/project-map/add-drawing/add-drawing.component.spec.ts index e69de29b..d01e7d7b 100644 --- a/src/app/components/project-map/add-drawing/add-drawing.component.spec.ts +++ b/src/app/components/project-map/add-drawing/add-drawing.component.spec.ts @@ -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; + + 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(); + }); +}); diff --git a/src/app/components/project-map/add-drawing/add-drawing.component.ts b/src/app/components/project-map/add-drawing/add-drawing.component.ts index f03b2acc..4e78958e 100644 --- a/src/app/components/project-map/add-drawing/add-drawing.component.ts +++ b/src/app/components/project-map/add-drawing/add-drawing.component.ts @@ -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(); + 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}); + } } diff --git a/src/app/components/project-map/project-map.component.css b/src/app/components/project-map/project-map.component.css index 54f447a4..4810b0f5 100644 --- a/src/app/components/project-map/project-map.component.css +++ b/src/app/components/project-map/project-map.component.css @@ -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%); diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index 33fdc0ff..c731a5ba 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -103,7 +103,7 @@
-