extracting code from main component

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

@@ -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<boolean>();
+    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
+    addDrawing(selectedObject: string){
-    public addDrawing(selectedObject: string){
-        var map = document.getElementsByClassName('map')[0];
         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});
+    }
 }

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

@@ -103,7 +103,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,6 +146,7 @@
 </app-project-map-shortcuts>
 
 <app-draw-link-tool *ngIf="tools.draw_link"></app-draw-link-tool>
+
 <app-add-drawing
   [project]="project"
   [server]="server"

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

@@ -74,8 +74,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     'isRectangleChosen': false,
     'isEllipseChosen': false,
     'isLineChosen': false,
-    'visibility': false,
+    'isTextChosen': false,
-    'isAddingTextChosen': false
+    'visibility': false
   };
 
   protected selectedDrawing: string;
@@ -397,46 +397,45 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   }
 
   public addDrawing(selectedObject: string) {
-    if (selectedObject === this.selectedDrawing){
-      this.selectedDrawing = "";
-      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;
+    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);
     this.resetDrawToolChoice();
     this.drawTools.visibility = false;
   }
@@ -448,62 +447,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     200);
   }
 
-  public addText(){
-    if (!this.drawTools.isAddingTextChosen){
-      this.resetDrawToolChoice();
-      this.drawTools.isAddingTextChosen = true;
-      var map = document.getElementsByClassName('map')[0];
-
-      let addTextListener = (event: MouseEvent) => {
-
-        var div = document.createElement('div');
-        div.style.width = "fit-content";
-        div.style.left = event.clientX.toString() + 'px';
-        div.style.top = (event.clientY - 10).toString() + 'px';
-        div.style.position = "absolute";
-        div.style.zIndex = "99";
-
-        div.style.fontFamily = "Noto Sans";
-        div.style.fontSize = "11pt";
-        div.style.fontWeight = "bold";
-        div.style.color = "#000000";
-
-        div.setAttribute("contenteditable", "true");
-
-        document.body.appendChild(div);
-        div.innerText = "";
-        div.focus();
-        document.body.style.cursor = "text";
-
-        div.addEventListener("focusout", () => {
-          let savedText = div.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.mapChild.context.getZeroZeroTransformationPoint().x, event.clientY - this.mapChild.context.getZeroZeroTransformationPoint().y, svgText)
-            .subscribe((serverDrawing: Drawing) => {
-              document.body.style.cursor = "default";
-              div.remove();
-              this.drawingsDataSource.add(serverDrawing);
-            });
-        });
-
-        this.resetDrawToolChoice();
-      }
-
-      map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
-      this.drawListener = addTextListener;
-      map.addEventListener('click', this.drawListener as EventListenerOrEventListenerObject, {once : true});
-    } else {
-      this.resetDrawToolChoice();
-      var map = document.getElementsByClassName('map')[0];
-      map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
-    }
-  }
-
   public ngOnDestroy() {
     this.drawingsDataSource.clear();
     this.nodesDataSource.clear();