extracting methods from main component

src/app/app.module.ts

@@ -74,6 +74,7 @@ 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';
 
 
 if (environment.production) {
@@ -116,7 +117,8 @@ if (environment.production) {
     ProgressComponent,
     ServerDiscoveryComponent,
     NodeSelectInterfaceComponent,
-    DrawLinkToolComponent
+    DrawLinkToolComponent,
+    AddDrawingComponent
   ],
   imports: [
     BrowserModule,

src/app/cartography/cartography.module.ts

@@ -4,6 +4,7 @@ import { MatMenuModule, MatIconModule } from '@angular/material';
 
 import { CssFixer } from './helpers/css-fixer';
 import { FontFixer } from './helpers/font-fixer';
+import { DrawingsFactory } from './helpers/drawings-factory';
 import { MultiLinkCalculatorHelper } from './helpers/multi-link-calculator-helper';
 import { SvgToDrawingConverter } from './helpers/svg-to-drawing-converter';
 import { QtDasharrayFixer } from './helpers/qt-dasharray-fixer';
@@ -67,6 +68,7 @@ import { StylesToFontConverter } from './converters/styles-to-font-converter';
   providers: [
     CssFixer,
     FontFixer,
+    DrawingsFactory,
     MultiLinkCalculatorHelper,
     SvgToDrawingConverter,
     QtDasharrayFixer,

src/app/cartography/components/d3-map/d3-map.component.ts

@@ -11,14 +11,12 @@ import { InterfaceLabelWidget } from '../../widgets/interface-label';
 import { SelectionTool } from '../../tools/selection-tool';
 import { MovingTool } from '../../tools/moving-tool';
 import { MapChangeDetectorRef } from '../../services/map-change-detector-ref';
-import { MapLinkCreated } from '../../events/links';
 import { CanvasSizeDetector } from '../../helpers/canvas-size-detector';
 import { Node } from '../../models/node';
 import { Link } from '../../../models/link';
 import { Drawing } from '../../models/drawing';
 import { Symbol } from '../../../models/symbol';
 import { GraphDataManager } from '../../managers/graph-data-manager';
-import { DraggedDataEvent } from '../../events/event-source';
 import { MapSettingsManager } from '../../managers/map-settings-manager';
 import { TextEditingTool } from '../../tools/text-editing-tool';
 import { TextAddingComponent } from '../text-adding/text-adding.component';
@@ -52,10 +50,6 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
     'show_interface_labels': true
   };
 
-  ngAfterInit(){
-    console.log(this.textAddingComponent);
-  }
-
   constructor(
     private graphDataManager: GraphDataManager,
     public context: Context,

src/app/cartography/helpers/drawings-factory.ts

@@ -0,0 +1,27 @@
+import { Injectable } from "@angular/core";
+import { TextElementFactory } from './drawings-factory/text-element-factory';
+import { EllipseElementFactory } from './drawings-factory/ellipse-element-factory';
+import { RectangleElementFactory } from './drawings-factory/rectangle-element-factory';
+import { LineElementFactory } from './drawings-factory/line-element-factory';
+import { DrawingElementFactory } from './drawings-factory/drawing-element-factory';
+import { MapDrawing } from '../models/map/map-drawing';
+
+@Injectable()
+export class DrawingsFactory {
+    private factory: DrawingElementFactory;
+    private availablefactories = {
+        'text': new TextElementFactory,
+        'ellipse': new EllipseElementFactory,
+        'rectangle': new RectangleElementFactory,
+        'line': new LineElementFactory
+    };
+
+    getDrawingMock(drawingType: string){
+        this.factory = this.availablefactories[drawingType];
+
+        let mapDrawing = new MapDrawing();
+        mapDrawing.element = this.factory.getDrawingElement();
+
+        return mapDrawing;
+    }
+}

src/app/cartography/helpers/drawings-factory/drawing-element-factory.ts

@@ -0,0 +1,5 @@
+import { DrawingElement } from '../../models/drawings/drawing-element';
+
+export interface DrawingElementFactory{
+    getDrawingElement(): DrawingElement;
+}

src/app/cartography/helpers/drawings-factory/ellipse-element-factory.ts

@@ -0,0 +1,21 @@
+import { DrawingElementFactory } from './drawing-element-factory';
+import { DrawingElement } from '../../models/drawings/drawing-element';
+import { EllipseElement } from '../../models/drawings/ellipse-element';
+
+export class EllipseElementFactory implements DrawingElementFactory{
+
+    getDrawingElement(): DrawingElement{
+        let ellipseElement = new EllipseElement();
+        ellipseElement.fill = "#ffffff";
+        ellipseElement.fill_opacity = 1.0;
+        ellipseElement.stroke = "#000000";
+        ellipseElement.stroke_width = 2;
+        ellipseElement.cx = 100;
+        ellipseElement.cy = 100;
+        ellipseElement.rx = 100;
+        ellipseElement.ry = 100;
+        ellipseElement.width = 200;
+        ellipseElement.height = 200;
+        return ellipseElement;
+    }
+}

src/app/cartography/helpers/drawings-factory/line-element-factory.ts

@@ -0,0 +1,19 @@
+import { DrawingElementFactory } from './drawing-element-factory';
+import { DrawingElement } from '../../models/drawings/drawing-element';
+import { LineElement } from '../../models/drawings/line-element';
+
+export class LineElementFactory implements DrawingElementFactory{
+
+    getDrawingElement(): DrawingElement{
+        let lineElement = new LineElement();
+        lineElement.stroke = "#000000";
+        lineElement.stroke_width = 2;
+        lineElement.x1 = 0;
+        lineElement.x2 = 200;
+        lineElement.y1 = 0;
+        lineElement.y2 = 0;
+        lineElement.width = 100;
+        lineElement.height = 0;
+        return lineElement;
+    }
+}

src/app/cartography/helpers/drawings-factory/rectangle-element-factory.ts

@@ -0,0 +1,17 @@
+import { DrawingElementFactory } from './drawing-element-factory';
+import { DrawingElement } from '../../models/drawings/drawing-element';
+import { RectElement } from '../../models/drawings/rect-element';
+
+export class RectangleElementFactory implements DrawingElementFactory{
+
+    getDrawingElement() : DrawingElement {
+        let rectElement = new RectElement();
+        rectElement.fill = "#ffffff";
+        rectElement.fill_opacity = 1.0;
+        rectElement.stroke = "#000000";
+        rectElement.stroke_width = 2;
+        rectElement.width = 200;
+        rectElement.height = 100;
+        return rectElement;
+    }
+}

src/app/cartography/helpers/drawings-factory/text-element-factory.ts

@@ -0,0 +1,18 @@
+import { DrawingElementFactory } from './drawing-element-factory';
+import { DrawingElement } from '../../models/drawings/drawing-element';
+import { TextElement } from '../../models/drawings/text-element';
+
+export class TextElementFactory implements DrawingElementFactory{
+
+    getDrawingElement(): DrawingElement {
+        let textElement = new TextElement();
+        textElement.height = 100;
+        textElement.width = 100;
+        textElement.fill = "#000000";
+        textElement.fill_opacity = 0;
+        textElement.font_family = "Noto Sans";
+        textElement.font_size = 11;
+        textElement.font_weight = "bold";
+        return textElement;
+    }
+}

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

@@ -0,0 +1,63 @@
+import { Component, Input, OnChanges, SimpleChange, Output, EventEmitter } from "@angular/core";
+import { DrawingsDataSource } from '../../../cartography/datasources/drawings-datasource';
+import { DrawingService } from '../../../services/drawing.service';
+import { DrawingsFactory } from '../../../cartography/helpers/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>();
+    public drawListener: Function;
+
+    constructor(
+        private drawingService: DrawingService,
+        private drawingsDataSource: DrawingsDataSource,
+        private drawingsFactory: DrawingsFactory,
+        private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
+        private context: Context
+    ){}
+
+    ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
+        if(changes['selectedDrawing'] && !changes['selectedDrawing'].isFirstChange()){
+            if(changes['selectedDrawing'].currentValue != ""){
+                this.addDrawing(changes['selectedDrawing'].currentValue);
+            }
+        }
+    }
+
+    //should delete listener if test is selected
+    public addDrawing(selectedObject: string){
+        var map = document.getElementsByClassName('map')[0];
+        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);
+        }
+    
+        map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
+        this.drawListener = listener;
+        map.addEventListener('click', this.drawListener as EventListenerOrEventListenerObject, {once : true});
+    }
+}

src/app/components/project-map/project-map.component.html

@@ -145,4 +145,10 @@
   [server]="server">
 </app-project-map-shortcuts>
 
-<app-draw-link-tool *ngIf="tools.draw_link"></app-draw-link-tool>
+<app-draw-link-tool *ngIf="tools.draw_link"></app-draw-link-tool>
+<app-add-drawing
+  [project]="project"
+  [server]="server"
+  [selectedDrawing]="selectedDrawing"
+  (drawingSaved)="onDrawingSaved($event)">
+</app-add-drawing>

src/app/components/project-map/project-map.component.ts

@@ -36,17 +36,13 @@ import { LinksEventSource } from '../../cartography/events/links-event-source';
 import { MapDrawing } from '../../cartography/models/map/map-drawing';
 import { MapPortToPortConverter } from '../../cartography/converters/map/map-port-to-port-converter';
 import { MapDrawingToSvgConverter } from '../../cartography/converters/map/map-drawing-to-svg-converter';
-import { DrawingElement } from '../../cartography/models/drawings/drawing-element';
-import { RectElement } from '../../cartography/models/drawings/rect-element';
-import { EllipseElement } from '../../cartography/models/drawings/ellipse-element';
-import { LineElement } from '../../cartography/models/drawings/line-element';
 import { SettingsService, Settings } from '../../services/settings.service';
 import { MapLabel } from '../../cartography/models/map/map-label';
 import { D3MapComponent } from '../../cartography/components/d3-map/d3-map.component';
 import { MapLinkNode } from '../../cartography/models/map/map-link-node';
 import { TextElement } from '../../cartography/models/drawings/text-element';
 import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-label-to-label-converter';
-import { select } from 'd3-selection';
+import { DrawingsFactory } from '../../cartography/helpers/drawings-factory';
 
 
 @Component({
@@ -112,7 +108,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private linksEventSource: LinksEventSource,
     private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
     private settingsService: SettingsService,
-    private mapLabelToLabel: MapLabelToLabelConverter
+    private mapLabelToLabel: MapLabelToLabelConverter,
+    private drawingsFactory: DrawingsFactory
   ) {}
 
   ngOnInit() {
@@ -352,6 +349,10 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       });
   }
 
+  public onDrawingSaved(evt: boolean){
+    this.resetDrawToolChoice();
+  }
+
   public onTextEdited(evt: TextEditedDataEvent){
     let mapDrawing: MapDrawing = new MapDrawing();
     mapDrawing.element = evt.textElement;
@@ -397,9 +398,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
   public addDrawing(selectedObject: string) {
     if (selectedObject === this.selectedDrawing){
-      var map = document.getElementsByClassName('map')[0];
-      map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
-      this.resetDrawToolChoice();
+      this.selectedDrawing = "";
       return;
     }
 
@@ -425,25 +424,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     }
 
     this.selectedDrawing = selectedObject;
-    var map = document.getElementsByClassName('map')[0];
-    let mapDrawing: MapDrawing = this.getDrawingMock(selectedObject);
-
-    let listener = (event: MouseEvent) => {
-      let x = event.clientX - this.mapChild.context.getZeroZeroTransformationPoint().x;
-      let y = event.clientY - this.mapChild.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.resetDrawToolChoice();
-    }
-
-    map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
-    this.drawListener = listener;
-    map.addEventListener('click', this.drawListener as EventListenerOrEventListenerObject, {once : true});
   }
 
   public resetDrawToolChoice(){
@@ -468,65 +448,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     200);
   }
 
-  public getDrawingMock(objectType: string, text?: string): MapDrawing {
-    let drawingElement: DrawingElement;
-
-    switch (objectType) {
-      case "rectangle":
-        let rectElement = new RectElement();
-        rectElement.fill = "#ffffff";
-        rectElement.fill_opacity = 1.0;
-        rectElement.stroke = "#000000";
-        rectElement.stroke_width = 2;
-        rectElement.width = 200;
-        rectElement.height = 100;
-        drawingElement = rectElement;
-        break;
-      case "ellipse":
-        let ellipseElement = new EllipseElement();
-        ellipseElement.fill = "#ffffff";
-        ellipseElement.fill_opacity = 1.0;
-        ellipseElement.stroke = "#000000";
-        ellipseElement.stroke_width = 2;
-        ellipseElement.cx = 100;
-        ellipseElement.cy = 100;
-        ellipseElement.rx = 100;
-        ellipseElement.ry = 100;
-        ellipseElement.width = 200;
-        ellipseElement.height = 200;
-        drawingElement = ellipseElement;
-        break;
-      case "line":
-        let lineElement = new LineElement();
-        lineElement.stroke = "#000000";
-        lineElement.stroke_width = 2;
-        lineElement.x1 = 0;
-        lineElement.x2 = 200;
-        lineElement.y1 = 0;
-        lineElement.y2 = 0;
-        lineElement.width = 100;
-        lineElement.height = 0;
-        drawingElement = lineElement;
-        break;
-      case "text":
-        let textElement = new TextElement();
-        textElement.height = 100; //should be calculated
-        textElement.width = 100;
-        textElement.text = text;
-        textElement.fill = "#000000";
-        textElement.fill_opacity = 0;
-        textElement.font_family = "Noto Sans";
-        textElement.font_size = 11;
-        textElement.font_weight = "bold";
-        drawingElement = textElement;
-        break;
-    }
-
-    let mapDrawing = new MapDrawing();
-    mapDrawing.element = drawingElement;
-    return mapDrawing;
-  }
-
   public addText(){
     if (!this.drawTools.isAddingTextChosen){
       this.resetDrawToolChoice();
@@ -557,7 +478,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
         div.addEventListener("focusout", () => {
           let savedText = div.innerText;
 
-          let drawing = this.getDrawingMock("text", savedText);
+          let drawing = this.drawingsFactory.getDrawingMock("text");
           (drawing.element as TextElement).text = savedText;
           let svgText = this.mapDrawingToSvgConverter.convert(drawing);