Code refactoring

src/app/cartography/cartography.module.ts

@@ -50,6 +50,7 @@ import { EllipseElementFactory } from './helpers/drawings-factory/ellipse-elemen
 import { RectangleElementFactory } from './helpers/drawings-factory/rectangle-element-factory';
 import { LineElementFactory } from './helpers/drawings-factory/line-element-factory';
 import { TemporaryTextElementComponent } from './components/temporary-text-element/temporary-text-element.component';
+import { DrawingAddingComponent } from './components/drawing-adding/drawing-adding.component';
 
 
 @NgModule({
@@ -61,6 +62,7 @@ import { TemporaryTextElementComponent } from './components/temporary-text-eleme
   declarations: [
     D3MapComponent,
     ExperimentalMapComponent,
+    DrawingAddingComponent,
     DrawingResizingComponent,
     TextEditingComponent,
     TemporaryTextElementComponent,

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

@@ -8,6 +8,7 @@
   </filter>
 </svg>
 
+<app-drawing-adding [svg]="svg"></app-drawing-adding>
 <app-drawing-resizing></app-drawing-resizing>
 <app-selection-control></app-selection-control>
 <app-selection-select></app-selection-select>

src/app/cartography/components/drawing-adding/drawing-adding.component.ts

@@ -0,0 +1,61 @@
+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';
+
+
+@Component({
+    selector: 'app-drawing-adding',
+    templateUrl: './drawing-adding.component.html',
+    styleUrls: ['./drawing-adding.component.scss']
+})
+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 context: Context
+    ){}
+
+    ngOnInit(){
+        
+    }
+
+    activate(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);
+            //   });
+
+            this.deactivate();
+        };
+
+        this.deactivate();
+        this.mapListener = listener;
+        this.svg.addEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
+    }
+
+    deactivate(){
+        this.svg.removeEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
+    }
+
+    ngOnDestroy(){
+
+    }
+}

src/app/cartography/components/temporary-text-element/temporary-text-element.component.ts

@@ -2,7 +2,10 @@ import { Component, ViewChild, ElementRef, OnInit, Input, EventEmitter, OnDestro
 import { DrawingsEventSource } from '../../events/drawings-event-source';
 import { TextAddedDataEvent } from '../../events/event-source';
 import { ToolsService } from '../../../services/tools.service';
-
+import { SVGSelection } from '../../models/types';
+import { Selection, select } from 'd3-selection';
+import { TextElement } from '../../models/drawings/text-element';
+import { Context } from '../../models/context';
 
 @Component({
     selector: 'app-temporary-text-element',
@@ -16,33 +19,40 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
     private leftPosition: string = '0px';
     private topPosition: string = '0px';
     private innerText: string = '';
-    private isActive: boolean = true;
+    private isActive: boolean = false;
     private mapListener: Function;
     private textListener: Function;
     public addingFinished = new EventEmitter<any>();
 
+    private enabled = true;
+    private editingDrawingId: string;
+    private editedElement: any;
+    private temporaryElement: HTMLDivElement;
+    
     constructor(
         private drawingsEventSource: DrawingsEventSource,
-        private toolsService: ToolsService
+        private toolsService: ToolsService,
+        private context: Context
     ){}
 
     ngOnInit(){
         this.toolsService.isTextAddingToolActivated.subscribe((isActive: boolean) => {
             this.isActive = isActive;
-            isActive ? this.activate() : this.decativate()
+            isActive ? this.activate() : this.deactivate()
         });
+
+        this.activateTextEditing();
     }
 
     activate(){
         let addTextListener = (event: MouseEvent) => {
             this.leftPosition = event.clientX.toString() + 'px';
             this.topPosition = event.clientY.toString() + 'px';
-
             this.temporaryTextElement.nativeElement.focus();
 
             let textListener = () => {
                 this.drawingsEventSource.textAdded.emit(new TextAddedDataEvent(this.temporaryTextElement.nativeElement.innerText.replace(/\n$/, ""), event.clientX, event.clientY));
-                this.svg.removeEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
+                this.deactivate();
                 this.temporaryTextElement.nativeElement.removeEventListener('focusout', this.textListener);
                 this.isActive = false;
             }
@@ -50,14 +60,30 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
             this.temporaryTextElement.nativeElement.addEventListener('focusout', this.textListener);
         }
 
+        this.deactivate();
         this.mapListener = addTextListener;
         this.svg.addEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
     }
 
-    decativate(){
+    deactivate(){
         this.svg.removeEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
     }
 
+    activateTextEditing(){
+        const rootElement = select(this.svg);
+        console.log("From component ", rootElement.selectAll<SVGTextElement, TextElement>('text.text_element'));
+
+        rootElement.selectAll<SVGTextElement, TextElement>('text.text_element')
+            .on("dblclick", (elem, index, textElements) => {
+                this.editedElement = elem;
+                select(textElements[index])
+                    .attr("visibility", "hidden");
+
+                select(textElements[index])
+                    .classed("editingMode", true);
+            });
+    }
+
     ngOnDestroy(){
         this.toolsService.isTextAddingToolActivated.unsubscribe();
     }

src/app/cartography/events/drawings-event-source.ts

@@ -7,6 +7,7 @@ import { MapDrawing } from "../models/map/map-drawing";
 export class DrawingsEventSource {
   public dragged = new EventEmitter<DraggedDataEvent<MapDrawing>>();
   public resized = new EventEmitter<ResizedDataEvent<MapDrawing>>();
+  public saved = new EventEmitter<any>();
   public textAdded = new EventEmitter<TextAddedDataEvent>();
   public textEdited = new EventEmitter<TextEditedDataEvent>();
   public textSaved = new EventEmitter<any>();

src/app/cartography/tools/text-editing-tool.ts

@@ -29,6 +29,8 @@ export class TextEditingTool {
             return;
         }
 
+        console.log("From service", selection.selectAll<SVGTextElement, TextElement>('text.text_element'));
+
         selection.selectAll<SVGTextElement, TextElement>('text.text_element')
             .on("dblclick", (elem, index, textElements) => {
             this.editedElement = elem;

src/app/services/tools.service.ts

@@ -3,11 +3,11 @@ import { Subject } from 'rxjs';
 
 @Injectable()
 export class ToolsService {
-    isSelectionToolActivated = new Subject<boolean>();
+    public isSelectionToolActivated = new Subject<boolean>();
-    isMovingToolActivated = new Subject<boolean>();
+    public isMovingToolActivated = new Subject<boolean>();
-    isTextEditingToolActivated = new Subject<boolean>();
+    public isTextEditingToolActivated = new Subject<boolean>();
-    isTextAddingToolActivated = new Subject<boolean>();
+    public isTextAddingToolActivated = new Subject<boolean>();
-    isDrawLinkToolActivated = new Subject<boolean>();
+    public isDrawLinkToolActivated = new Subject<boolean>();
 
     constructor(){}