Adding drawings finished

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

@@ -104,16 +104,12 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
       (changes['drawings'] && !changes['drawings'].isFirstChange()) ||
       (changes['nodes'] && !changes['nodes'].isFirstChange()) ||
       (changes['links'] && !changes['links'].isFirstChange()) ||
-      (changes['symbols'] && !changes['symbols'].isFirstChange() ||
+      (changes['symbols'] && !changes['symbols'].isFirstChange())
-      (changes['drawing-selected'] && !changes['drawing-selected'].isFirstChange()))
     ) {
       if (this.svg.empty && !this.svg.empty()) {
         if (changes['symbols']) {
           this.onSymbolsChange(changes['symbols']);
         }
-        if (changes['drawing-selected']){
-          this.onDrawingSelected();
-        }
         this.changeLayout();
       }
     }
@@ -171,10 +167,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
     this.graphLayout.draw(this.svg, this.context);
   }
 
-  private onDrawingSelected(){
-    this.context.getZeroZeroTransformationPoint().y;
-  }
-
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     this.changeLayout();

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

@@ -23,20 +23,10 @@ g.node:hover {
   background: transparent;
   top: 20px;
   left: 92px;
-  width: 320px !important;
+  width: 232px !important;
   height: 72px !important;
 }
 
-.draw-menu2{
-  position: fixed;
-  background: transparent;
-  top: 20px;
-  left: 92px;
-  width: 320px !important;
-  height: 72px !important;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-
 .draw-menu button{
   outline: none;
 }
@@ -47,7 +37,7 @@ g.node:hover {
 }
 
 .drawer{
-  width: 320px !important;
+  width: 232px !important;
   height: 72px !important;
   background:#263238;
 }
@@ -66,23 +56,32 @@ g.node:hover {
   background-color: transparent;
 }
 
-.drawer-arrow-button{
+.drawer-arrow-button-right{
   width: 40px;
   height: 72px;
   padding-top: 16px;
   background:#263238;
   position: fixed;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.drawer-arrow-button-left{
+  width: 40px;
+  height: 72px;
+  margin-left: 192px;
+  background:#263238;
+  position: fixed;
 }
 
 .drawer-buttons{
   background:#263238;
   padding-top: 16px;
   height: 72px;
+  display: flex;
+  flex-direction: row;
 }
 
 .selected {
-  stroke: #263238;
+  stroke: #0097a7!important;
 }
 
 .project-toolbar .mat-toolbar-multiple-rows {

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

@@ -85,9 +85,6 @@
     <mat-drawer-container class="drawer-container">
       <mat-drawer #drawer class="drawer">
         <div class="drawer-buttons">
-          <button mat-icon-button class="drawer-button">
-            <mat-icon>picture_in_picture</mat-icon>
-          </button>
           <button mat-icon-button class="drawer-button" [color]="drawTools.isRectangleChosen ? 'primary': 'basic'" (click)="addDrawing('rectangle')">
             <mat-icon>crop_3_2</mat-icon>
           </button>
@@ -96,16 +93,18 @@
           </button>
           <button mat-icon-button class="drawer-button" (click)="addDrawing('line')">
             <svg height="40" width="40">
-              <line [ngClass]="{active: drawTools.isLineChosen}" x1="30" y1="10" x2="10" y2="30" style="stroke:white;stroke-width:2" />
+              <line [ngClass]="{selected: drawTools.isLineChosen}" x1="30" y1="10" x2="10" y2="30" style="stroke:white;stroke-width:2" />
             </svg>
           </button>
-          <button mat-icon-button class="drawer-arrow-button" (click)="drawer.toggle()">
+          <div class="drawer-arrow-button-left">
+              <button mat-icon-button (click)="drawer.toggle(); hideMenu()">
                   <mat-icon>keyboard_arrow_left</mat-icon>
               </button>
             </div>
+        </div>
       </mat-drawer>
       <mat-drawer-content class="drawer-content">
-        <div class="drawer-arrow-button">
+        <div class="drawer-arrow-button-right">
           <button mat-icon-button (click)="drawer.toggle()">
             <mat-icon>keyboard_arrow_right</mat-icon>
           </button>

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

@@ -42,7 +42,6 @@ import { DrawingElement } from '../../cartography/models/drawings/drawing-elemen
 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 { EventListener } from '@angular/core/src/debug/debug_node';
 
 
 @Component({
@@ -59,7 +58,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
   project: Project;
   public server: Server;
-
+  private drawListener: Function;
   private ws: Subject<any>;
 
   protected tools = {
@@ -327,15 +326,18 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.tools.draw_link = !this.tools.draw_link;
   }
 
-  public onRectangleCreated(rectangleCreated: any) {
-    //this.drawTools.isRectangleChosen = false;
-  }
-
   public toggleShowInterfaceLabels(enabled: boolean) {
     this.project.show_interface_labels = enabled;
   }
 
   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.isEllipseChosen = false;
@@ -353,39 +355,40 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
         this.drawTools.isLineChosen = !this.drawTools.isLineChosen;
         break;
     }
-    console.log(this.drawTools);
 
     this.selectedDrawing = selectedObject;
     var map = document.getElementsByClassName('map')[0];
-
     let mapDrawing: MapDrawing = this.getDrawingMock(selectedObject);
-    let context = this.mapChild.context;
-    let converter = this.mapDrawingToSvgConverter;
-    console.log(mapDrawing);
 
-    function listener(event: MouseEvent) {
+    let listener = (event: MouseEvent) => {
-      let x = event.clientX - context.getZeroZeroTransformationPoint().x;
+      let x = event.clientX - this.mapChild.context.getZeroZeroTransformationPoint().x;
-      let y = event.clientY - context.getZeroZeroTransformationPoint().y;
+      let y = event.clientY - this.mapChild.context.getZeroZeroTransformationPoint().y;
-      let svg = converter.convert(mapDrawing);
+      let svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
-      console.log(svg);
 
-      // this.drawingService
+      this.drawingService
-      //   .add(this.server, this.project.project_id, x, y, svg)
+        .add(this.server, this.project.project_id, x, y, svg)
-      //   .subscribe((serverDrawing: Drawing) => {
+        .subscribe((serverDrawing: Drawing) => {
-      //     this.drawingsDataSource.add(serverDrawing);
+          this.drawingsDataSource.add(serverDrawing);
-      //   });
+        });
-      //   this.resetDrawToolChoice();
+        this.resetDrawToolChoice();
     }
 
-    map.removeEventListener('click', listener, true);
+    map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
-    //let ev = new EventListener('click', listener);
+    this.drawListener = listener;
-    map.addEventListener('click', listener, {once : true});
+    map.addEventListener('click', this.drawListener as EventListenerOrEventListenerObject, {once : true});
   }
 
   public resetDrawToolChoice(){
     this.drawTools.isRectangleChosen = false;
     this.drawTools.isEllipseChosen = false;
     this.drawTools.isLineChosen = false;
+    this.selectedDrawing = "";
+  }
+
+  public hideMenu(){
+    var map = document.getElementsByClassName('map')[0];
+    map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
+    this.resetDrawToolChoice();
   }
 
   public getDrawingMock(objectType: string): MapDrawing {