From 32646889df54a957eb154dabeec563ac42ed54f4 Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Tue, 8 Jan 2019 03:06:25 -0800
Subject: [PATCH] Adding drawings rewritten
---
src/app/app.module.ts | 4 +-
.../drawing-adding.component.ts | 30 +++------
.../events/drawings-event-source.ts | 5 +-
src/app/cartography/events/event-source.ts | 7 ++
.../drawing-added.component.css} | 0
.../drawing-added.component.html} | 0
.../drawing-added.component.spec.ts | 0
.../drawing-added/drawing-added.component.ts | 65 +++++++++++++++++++
.../add-drawing/add-drawing.component.spec.ts | 37 -----------
.../add-drawing/add-drawing.component.ts | 65 -------------------
.../project-map/project-map.component.html | 8 +--
11 files changed, 91 insertions(+), 130 deletions(-)
rename src/app/components/{project-map/add-drawing/add-drawing.component.css => drawings-listeners/drawing-added/drawing-added.component.css} (100%)
rename src/app/components/{project-map/add-drawing/add-drawing.component.html => drawings-listeners/drawing-added/drawing-added.component.html} (100%)
create mode 100644 src/app/components/drawings-listeners/drawing-added/drawing-added.component.spec.ts
create mode 100644 src/app/components/drawings-listeners/drawing-added/drawing-added.component.ts
delete mode 100644 src/app/components/project-map/add-drawing/add-drawing.component.spec.ts
delete mode 100644 src/app/components/project-map/add-drawing/add-drawing.component.ts
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<DraggedDataEvent<MapDrawing>>();
public resized = new EventEmitter<ResizedDataEvent<MapDrawing>>();
+ public selected = new EventEmitter<string>();
+ public pointToAddSelected = new EventEmitter<AddedDataEvent>();
public saved = new EventEmitter<any>();
+
public textAdded = new EventEmitter<TextAddedDataEvent>();
public textEdited = new EventEmitter<TextEditedDataEvent>();
public textSaved = new EventEmitter<any>();
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<T> {
) {}
}
+export class AddedDataEvent {
+ constructor(
+ public x: number,
+ public y: number
+ ) {}
+}
+
export class ClickedDataEvent<T> {
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<boolean>();
+ 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<AddDrawingComponent>;
-
- 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<boolean>();
- 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 @@
<app-draw-link-tool *ngIf="tools.draw_link"></app-draw-link-tool>
-<app-add-drawing
+<app-drawing-added
[server]="server"
[project]="project"
[selectedDrawing]="selectedDrawing"
(drawingSaved)="onDrawingSaved($event)">
-</app-add-drawing>
+</app-drawing-added>
<app-drawing-dragged [server]="server"></app-drawing-dragged>
<app-drawing-resized [server]="server"></app-drawing-resized>
<app-interface-label-dragged [server]="server"></app-interface-label-dragged>
@@ -158,6 +158,6 @@
<app-text-added
[server]="server"
[project]="project"
- (drawingSaved)="onDrawingSaved($event)"
-></app-text-added>
+ (drawingSaved)="onDrawingSaved($event)">
+</app-text-added>
<app-text-edited [server]="server"></app-text-edited>