Merge branch 'code-refactoring' into add-text

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';
@@ -53,10 +51,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/components/draggable-selection/draggable-selection.component.ts

@@ -174,7 +174,6 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
         if (isParentNodeSelected) {
           return;
         }
-
         this.linksEventSource.interfaceDragged.emit(new DraggedDataEvent<MapLinkNode>(label, evt.dx, evt.dy));
       });
 

src/app/cartography/converters/map/map-label-to-label-converter.ts

@@ -4,16 +4,22 @@ import { Converter } from "../converter";
 import { Label } from "../../models/label";
 import { MapLabel } from "../../models/map/map-label";
 import { FontBBoxCalculator } from '../../helpers/font-bbox-calculator';
+import { CssFixer } from '../../helpers/css-fixer';
+import { FontFixer } from '../../helpers/font-fixer';
 
 
 @Injectable()
 export class MapLabelToLabelConverter implements Converter<MapLabel, Label> {
   constructor(
-    private fontBBoxCalculator: FontBBoxCalculator
+    private fontBBoxCalculator: FontBBoxCalculator,
+    private cssFixer: CssFixer,
+    private fontFixer: FontFixer
   ) {}
 
   convert(mapLabel: MapLabel) {
-    const box = this.fontBBoxCalculator.calculate(mapLabel.text, mapLabel.style);
+    const fixedCss = this.cssFixer.fix(mapLabel.style);
+    const fixedFont = this.fontFixer.fixStyles(fixedCss);
+    const box = this.fontBBoxCalculator.calculate(mapLabel.text, fixedFont);
 
     const label = new Label();
     label.rotation = mapLabel.rotation;
@@ -23,7 +29,7 @@ export class MapLabelToLabelConverter implements Converter<MapLabel, Label> {
     label.y = mapLabel.y;
 
     if (label.x !== null) {
-      label.x += 3;
+      label.x -= 3;
     }
 
     if (label.y !== null) {

src/app/cartography/events/draggable.ts

@@ -64,7 +64,6 @@ export class Draggable<GElement extends DraggedElementBaseType, Datum> {
         evt.dy = event.sourceEvent.clientY - lastY;
         lastX = event.sourceEvent.clientX;
         lastY = event.sourceEvent.clientY;
-
         this.drag.emit(evt);
       })
       .on('end', (datum: Datum) => {

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/cartography/widgets/interface-label.ts

@@ -86,13 +86,8 @@ export class InterfaceLabelWidget {
           styles = this.fontFixer.fixStyles(styles);
           return styles;
         })
-        .attr('x', function (this: SVGTextElement, l: MapLinkNode) {
-          return l.label.x;
-        })
-        .attr('y', function (this: SVGTextElement, l: MapLinkNode) {
-          let bbox = this.getBBox();
-          return l.label.y + bbox.height;
-        })
+        .attr('x', (l: MapLinkNode) => l.label.x)
+        .attr('y', (l: MapLinkNode) => l.label.y)
         .attr('transform', (l: MapLinkNode) => {
           return `rotate(${l.label.rotation}, ${l.label.x}, ${l.label.y})`;
         })

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<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();
+    });
+});

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

@@ -0,0 +1,114 @@
+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';
+import { TextElement } from '../../../cartography/models/drawings/text-element';
+
+
+@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: DrawingsFactory,
+        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") {
+                this.addText();
+            } else {
+                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});
+    }
+
+    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});
+    }
+}

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%);

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

@@ -104,7 +104,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,4 +146,11 @@
   [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.spec.ts

@@ -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);
-  }
 });

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({
@@ -78,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;
@@ -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() {
@@ -194,10 +191,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       this.drawingsEventSource.resized.subscribe((evt) => this.onDrawingResized(evt))
     );
 
-    this.subscriptions.push(
-      this.drawingsEventSource.textAdded.subscribe((evt) => this.onTextAdded(evt))
-    );
-
     this.subscriptions.push(
       this.drawingsEventSource.textEdited.subscribe((evt) => this.onTextEdited(evt))
     );
@@ -356,23 +349,11 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       });
   }
 
-  public onTextAdded(evt: TextAddedDataEvent) {
+  public onDrawingSaved(evt: boolean){
     this.resetDrawToolChoice();
-
-    let drawing = this.getDrawingMock("text", evt.savedText);
-    (drawing.element as TextElement).text = evt.savedText;
-    let svgText = this.mapDrawingToSvgConverter.convert(drawing);
-
-    this.drawingService
-      .add(this.server, this.project.project_id, evt.x - this.mapChild.context.getZeroZeroTransformationPoint().x, evt.y - this.mapChild.context.getZeroZeroTransformationPoint().y, svgText)
-      .subscribe((serverDrawing: Drawing) => {
-        document.body.style.cursor = "default";
-        this.drawingsDataSource.add(serverDrawing);
-        this.drawingsEventSource.textSaved.emit(true);
-      });
   }
 
-  public onTextEdited(evt: TextEditedDataEvent) {
+  public onTextEdited(evt: TextEditedDataEvent){
     let mapDrawing: MapDrawing = new MapDrawing();
     mapDrawing.element = evt.textElement;
     (mapDrawing.element as TextElement).text = evt.editedText;
@@ -417,67 +398,45 @@ 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();
-      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;
-    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});
+    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);
+  public hideMenu(){
     this.resetDrawToolChoice();
     this.drawTools.visibility = false;
   }
@@ -489,76 +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;
-        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();
-      this.drawTools.isAddingTextChosen = true;
-      var map = document.getElementsByClassName('map')[0];
-      map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
-    } else {
-      this.resetDrawToolChoice();
-    }
-  }
-
   public ngOnDestroy() {
     this.drawingsDataSource.clear();
     this.nodesDataSource.clear();