diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 49d1599e..cfc6add2 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -74,7 +74,6 @@ import { ProjectNameValidator } from './components/projects/models/projectNameVa import { MatSidenavModule } from '@angular/material'; import { NodeSelectInterfaceComponent } from './components/project-map/node-select-interface/node-select-interface.component'; import { DrawLinkToolComponent } from './components/project-map/draw-link-tool/draw-link-tool.component'; -import { AddDrawingComponent } from './components/project-map/add-drawing/add-drawing.component'; import { DrawingResizedComponent } from './components/drawings-listeners/drawing-resized/drawing-resized.component'; import { TextEditedComponent } from './components/drawings-listeners/text-edited/text-edited.component'; import { NodeDraggedComponent } from './components/drawings-listeners/node-dragged/node-dragged.component'; @@ -84,6 +83,7 @@ import { LinkCreatedComponent } from './components/drawings-listeners/link-creat import { InterfaceLabelDraggedComponent } from './components/drawings-listeners/interface-label-dragged/interface-label-dragged.component'; import { ToolsService } from './services/tools.service'; import { TextAddedComponent } from './components/drawings-listeners/text-added/text-added.component'; +import { DrawingAddedComponent } from './components/drawings-listeners/drawing-added/drawing-added.component'; if (environment.production) { @@ -127,7 +127,7 @@ if (environment.production) { ServerDiscoveryComponent, NodeSelectInterfaceComponent, DrawLinkToolComponent, - AddDrawingComponent, + DrawingAddedComponent, DrawingResizedComponent, TextAddedComponent, TextEditedComponent, diff --git a/src/app/cartography/components/drawing-adding/drawing-adding.component.ts b/src/app/cartography/components/drawing-adding/drawing-adding.component.ts index 701d04f0..f8e34b20 100644 --- a/src/app/cartography/components/drawing-adding/drawing-adding.component.ts +++ b/src/app/cartography/components/drawing-adding/drawing-adding.component.ts @@ -1,9 +1,7 @@ import { Component, Input, OnDestroy, OnInit } from "@angular/core"; import { Context } from '../../models/context'; -import { DefaultDrawingsFactory } from '../../helpers/default-drawings-factory'; -import { MapDrawingToSvgConverter } from '../../converters/map/map-drawing-to-svg-converter'; -import { MapDrawing } from '../../models/map/map-drawing'; -import { ToolsService } from '../../../services/tools.service'; +import { DrawingsEventSource } from '../../events/drawings-event-source'; +import { AddedDataEvent } from '../../events/event-source'; @Component({ @@ -14,35 +12,25 @@ import { ToolsService } from '../../../services/tools.service'; export class DrawingAddingComponent implements OnInit, OnDestroy { @Input('svg') svg: SVGSVGElement; - private readonly availableDrawings = ['rectangle', 'ellipse', 'line']; private mapListener: Function; constructor( - private toolsService: ToolsService, - private drawingsFactory: DefaultDrawingsFactory, - private mapDrawingToSvgConverter: MapDrawingToSvgConverter, + private drawingsEventSource: DrawingsEventSource, private context: Context ){} ngOnInit(){ - + this.drawingsEventSource.selected.subscribe((evt) => { + evt === "" ? this.deactivate() : this.activate(); + }); } - activate(selectedObject: string){ - let mapDrawing: MapDrawing = this.drawingsFactory.getDrawingMock(selectedObject); - + activate(){ let listener = (event: MouseEvent) => { let x = event.clientX - this.context.getZeroZeroTransformationPoint().x; let y = event.clientY - this.context.getZeroZeroTransformationPoint().y; - let svg = this.mapDrawingToSvgConverter.convert(mapDrawing); - // this.drawingService - // .add(this.server, this.project.project_id, x, y, svg) - // .subscribe((serverDrawing: Drawing) => { - // this.drawingsDataSource.add(serverDrawing); - // this.drawingSaved.emit(true); - // }); - + this.drawingsEventSource.pointToAddSelected.emit(new AddedDataEvent(x, y)); this.deactivate(); }; @@ -56,6 +44,6 @@ export class DrawingAddingComponent implements OnInit, OnDestroy { } ngOnDestroy(){ - + this.drawingsEventSource.selected.unsubscribe(); } } diff --git a/src/app/cartography/events/drawings-event-source.ts b/src/app/cartography/events/drawings-event-source.ts index b4c536bd..f2b1f136 100644 --- a/src/app/cartography/events/drawings-event-source.ts +++ b/src/app/cartography/events/drawings-event-source.ts @@ -1,5 +1,5 @@ import { Injectable, EventEmitter } from "@angular/core"; -import { DraggedDataEvent, ResizedDataEvent, TextAddedDataEvent, TextEditedDataEvent } from "./event-source"; +import { DraggedDataEvent, ResizedDataEvent, TextAddedDataEvent, TextEditedDataEvent, AddedDataEvent } from "./event-source"; import { MapDrawing } from "../models/map/map-drawing"; @@ -7,7 +7,10 @@ import { MapDrawing } from "../models/map/map-drawing"; export class DrawingsEventSource { public dragged = new EventEmitter>(); public resized = new EventEmitter>(); + public selected = new EventEmitter(); + public pointToAddSelected = new EventEmitter(); public saved = new EventEmitter(); + public textAdded = new EventEmitter(); public textEdited = new EventEmitter(); public textSaved = new EventEmitter(); diff --git a/src/app/cartography/events/event-source.ts b/src/app/cartography/events/event-source.ts index a3487a89..49b6751b 100644 --- a/src/app/cartography/events/event-source.ts +++ b/src/app/cartography/events/event-source.ts @@ -20,6 +20,13 @@ export class ResizedDataEvent { ) {} } +export class AddedDataEvent { + constructor( + public x: number, + public y: number + ) {} +} + export class ClickedDataEvent { constructor( public datum: T, diff --git a/src/app/components/project-map/add-drawing/add-drawing.component.css b/src/app/components/drawings-listeners/drawing-added/drawing-added.component.css similarity index 100% rename from src/app/components/project-map/add-drawing/add-drawing.component.css rename to src/app/components/drawings-listeners/drawing-added/drawing-added.component.css diff --git a/src/app/components/project-map/add-drawing/add-drawing.component.html b/src/app/components/drawings-listeners/drawing-added/drawing-added.component.html similarity index 100% rename from src/app/components/project-map/add-drawing/add-drawing.component.html rename to src/app/components/drawings-listeners/drawing-added/drawing-added.component.html diff --git a/src/app/components/drawings-listeners/drawing-added/drawing-added.component.spec.ts b/src/app/components/drawings-listeners/drawing-added/drawing-added.component.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/drawings-listeners/drawing-added/drawing-added.component.ts b/src/app/components/drawings-listeners/drawing-added/drawing-added.component.ts new file mode 100644 index 00000000..adde5e71 --- /dev/null +++ b/src/app/components/drawings-listeners/drawing-added/drawing-added.component.ts @@ -0,0 +1,65 @@ +import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, SimpleChange } from "@angular/core"; +import { DrawingsDataSource } from '../../../cartography/datasources/drawings-datasource'; +import { DrawingsEventSource } from '../../../cartography/events/drawings-event-source'; +import { DefaultDrawingsFactory } from '../../../cartography/helpers/default-drawings-factory'; +import { Server } from '../../../models/server'; +import { Project } from '../../../models/project'; +import { Subscription } from 'rxjs'; +import { DrawingService } from '../../../services/drawing.service'; +import { Context } from '../../../cartography/models/context'; +import { Drawing } from '../../../cartography/models/drawing'; +import { MapDrawingToSvgConverter } from '../../../cartography/converters/map/map-drawing-to-svg-converter'; +import { AddedDataEvent } from '../../../cartography/events/event-source'; + + +@Component({ + selector: 'app-drawing-added', + templateUrl: './drawing-added.component.html', + styleUrls: ['./drawing-added.component.css'] +}) +export class DrawingAddedComponent implements OnInit, OnDestroy{ + @Input() server: Server; + @Input() project: Project; + @Input() selectedDrawing: string; + @Output() drawingSaved = new EventEmitter(); + private pointToAddSelected: Subscription; + + constructor( + private drawingService: DrawingService, + private drawingsDataSource: DrawingsDataSource, + private drawingsEventSource: DrawingsEventSource, + private drawingsFactory: DefaultDrawingsFactory, + private mapDrawingToSvgConverter: MapDrawingToSvgConverter, + private context: Context + ){} + + ngOnInit(){ + this.pointToAddSelected = this.drawingsEventSource.pointToAddSelected.subscribe((evt) => this.onDrawingSaved(evt)); + } + + ngOnChanges(changes: { [propKey: string]: SimpleChange }) { + if(changes['selectedDrawing'] && !changes['selectedDrawing'].isFirstChange()){ + this.selectedDrawing = changes['selectedDrawing'].currentValue; + + if(this.selectedDrawing!=="text"){ + this.drawingsEventSource.selected.emit(this.selectedDrawing); + } + } + } + + onDrawingSaved(evt: AddedDataEvent){ + let drawing = this.drawingsFactory.getDrawingMock(this.selectedDrawing); + let svgText = this.mapDrawingToSvgConverter.convert(drawing); + + this.drawingService + .add(this.server, this.project.project_id, evt.x, evt.y, svgText) + .subscribe((serverDrawing: Drawing) => { + this.drawingsDataSource.add(serverDrawing); + this.drawingSaved.emit(true); + }); + } + + ngOnDestroy(){ + this.pointToAddSelected.unsubscribe(); + } +} 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 deleted file mode 100644 index 859259b3..00000000 --- a/src/app/components/project-map/add-drawing/add-drawing.component.spec.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { AddDrawingComponent } from "./add-drawing.component"; -import { ComponentFixture, TestBed, async } from '@angular/core/testing'; -import { DefaultDrawingsFactory } from '../../../cartography/helpers/default-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: DefaultDrawingsFactory }, - { 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 deleted file mode 100644 index 21a63681..00000000 --- a/src/app/components/project-map/add-drawing/add-drawing.component.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { Component, Input, OnChanges, SimpleChange, Output, EventEmitter } from "@angular/core"; -import { DrawingsDataSource } from '../../../cartography/datasources/drawings-datasource'; -import { DrawingService } from '../../../services/drawing.service'; -import { DefaultDrawingsFactory } from '../../../cartography/helpers/default-drawings-factory'; -import { MapDrawingToSvgConverter } from '../../../cartography/converters/map/map-drawing-to-svg-converter'; -import { Project } from '../../../models/project'; -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'; - - -@Component({ - selector: 'app-add-drawing', - templateUrl: './add-drawing.component.html', - styleUrls: ['./add-drawing.component.css'] -}) -export class AddDrawingComponent implements OnChanges { - @Input() project: Project; - @Input() server: Server; - @Input() selectedDrawing: string; - @Output() drawingSaved = new EventEmitter(); - private readonly availableDrawings = ['rectangle', 'ellipse', 'line']; - public drawListener: Function; - - constructor( - private drawingService: DrawingService, - private drawingsDataSource: DrawingsDataSource, - private drawingsFactory: DefaultDrawingsFactory, - private mapDrawingToSvgConverter: MapDrawingToSvgConverter, - private context: Context - ){} - - ngOnChanges(changes: { [propKey: string]: SimpleChange }) { - if(changes['selectedDrawing'] && !changes['selectedDrawing'].isFirstChange()){ - if(this.availableDrawings.includes(changes['selectedDrawing'].currentValue)){ - this.addDrawing(changes['selectedDrawing'].currentValue); - } else if (!(changes['selectedDrawing'].currentValue === "text")) { - document.getElementsByClassName('map')[0].removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject); - } - } - } - - addDrawing(selectedObject: string){ - let mapDrawing: MapDrawing = this.drawingsFactory.getDrawingMock(selectedObject); - - let listener = (event: MouseEvent) => { - let x = event.clientX - this.context.getZeroZeroTransformationPoint().x; - let y = event.clientY - this.context.getZeroZeroTransformationPoint().y; - let svg = this.mapDrawingToSvgConverter.convert(mapDrawing); - - this.drawingService - .add(this.server, this.project.project_id, x, y, svg) - .subscribe((serverDrawing: Drawing) => { - this.drawingsDataSource.add(serverDrawing); - 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}); - } -} diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index bda4bbe3..0a48c682 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -143,12 +143,12 @@ - - + @@ -158,6 +158,6 @@ + (drawingSaved)="onDrawingSaved($event)"> +