Exchanging tools to components

src/app/app.module.ts

@@ -83,6 +83,7 @@ import { DrawingDraggedComponent } from './components/drawings-listeners/drawing
 import { LinkCreatedComponent } from './components/drawings-listeners/link-created/link-created.component';
 import { InterfaceLabelDraggedComponent } from './components/drawings-listeners/interface-label-dragged/interface-label-dragged.component';
 import { ToolsService } from './services/tools.service';
+import { TextAddedComponent } from './components/drawings-listeners/text-added/text-added.component';
 
 
 if (environment.production) {
@@ -128,6 +129,7 @@ if (environment.production) {
     DrawLinkToolComponent,
     AddDrawingComponent,
     DrawingResizedComponent,
+    TextAddedComponent,
     TextEditedComponent,
     NodeDraggedComponent,
     NodeLabelDraggedComponent,

src/app/cartography/cartography.module.ts

@@ -50,6 +50,7 @@ import { TextElementFactory } from './helpers/drawings-factory/text-element-fact
 import { EllipseElementFactory } from './helpers/drawings-factory/ellipse-element-factory';
 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';
 
 
 @NgModule({
@@ -64,6 +65,7 @@ import { LineElementFactory } from './helpers/drawings-factory/line-element-fact
     DrawingResizingComponent,
     TextAddingComponent,
     TextEditingComponent,
+    TemporaryTextElementComponent,
     ...ANGULAR_MAP_DECLARATIONS,
     SelectionControlComponent,
     SelectionSelectComponent,

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

@@ -11,7 +11,7 @@
 <app-drawing-resizing></app-drawing-resizing>
 <app-selection-control></app-selection-control>
 <app-selection-select></app-selection-select>
+<app-temporary-text-element [svg]="svg"></app-temporary-text-element>
 <app-text-adding></app-text-adding>
 <app-text-editing></app-text-editing>
 <app-draggable-selection [svg]="svg"></app-draggable-selection>
-<!-- markup z odwolaniem do svg przekazany do toola-->

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

@@ -116,7 +116,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
 
     this.subscriptions.push(
       this.toolsService.isTextAddingToolActivated.subscribe((value: boolean) => {
-        this.textAddingToolWidget.setEnabled(value);
+        //this.textAddingToolWidget.setEnabled(value);
         this.mapChangeDetectorRef.detectChanges();
       })
     );

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

@@ -0,0 +1,5 @@
+<div *ngIf="isActive" #temporaryTextElement class="temporaryElement" contenteditable="true" 
+    [style.top]=topPosition 
+    [style.left]=leftPosition>
+    {{innerText}}
+</div>

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

@@ -0,0 +1,10 @@
+.temporaryElement{
+    padding-left: 4px;
+    width: fit-content;
+    position: absolute;
+    z-index: 99;
+    font-family: 'Noto Sans';
+    font-size: 11pt;
+    font-weight: bold;
+    color: #000000;
+}

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

@@ -0,0 +1,69 @@
+import { Component, ViewChild, ElementRef, OnInit, Input, EventEmitter, OnDestroy } from "@angular/core";
+import { DrawingsEventSource } from '../../events/drawings-event-source';
+import { TextAddedDataEvent } from '../../events/event-source';
+import { ToolsService } from '../../../services/tools.service';
+
+
+@Component({
+    selector: 'app-temporary-text-element',
+    templateUrl: './temporary-text-element.component.html',
+    styleUrls: ['./temporary-text-element.component.scss']
+})
+export class TemporaryTextElementComponent implements OnInit, OnDestroy {
+    @ViewChild('temporaryTextElement') temporaryTextElement: ElementRef;
+    @Input('svg') svg: SVGSVGElement;
+
+    //should cover all style variables that can change
+    private leftPosition: string;
+    private topPosition: string;
+    private innerText: string;
+    private isActive: boolean = true;
+    private mapListener: Function;
+    private textListener: Function;
+    public addingFinished = new EventEmitter<any>();
+    
+    constructor(
+        private drawingsEventSource: DrawingsEventSource,
+        private toolsService: ToolsService
+    ){
+        this.leftPosition = '100px';
+        this.topPosition = '100px';
+        this.innerText = '';
+    }
+
+    ngOnInit(){
+        this.toolsService.isTextAddingToolActivated.subscribe((isActive: boolean) => {
+            isActive ? this.activate() : this.decativate()
+        });
+    }
+
+    activate(){
+        let addTextListener = (event: MouseEvent) => {
+            this.leftPosition = event.clientX.toString() + 'px';
+            this.topPosition = event.clientY.toString() + 'px';
+
+            this.temporaryTextElement.nativeElement.focus();
+
+            let textListener = () => {
+                console.log("textListener: ", this.innerText);
+                this.drawingsEventSource.textAdded.emit(new TextAddedDataEvent(this.innerText.replace(/\n$/, ""), event.clientX, event.clientY));
+                this.svg.removeEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
+                this.temporaryTextElement.nativeElement.removeEventListener('focusout', this.textListener);
+                this.innerText = '';
+            }
+            this.textListener = textListener;
+            this.temporaryTextElement.nativeElement.addEventListener('focusout', this.textListener);
+        }
+
+        this.mapListener = addTextListener;
+        this.svg.addEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
+    }
+
+    decativate(){
+        this.svg.removeEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
+    }
+
+    ngOnDestroy(){
+
+    }
+}

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

@@ -11,7 +11,7 @@ import { TextAddedDataEvent } from '../../events/event-source';
     template: `<ng-content></ng-content>`,
     styleUrls: ['./text-adding.component.scss']
 })
-export class TextAddingComponent implements OnInit, OnDestroy{
+export class TextAddingComponent implements OnInit, OnDestroy {
     textAddingFinished: Subscription;
 
     constructor(

src/app/cartography/components/text-editing/text-editing.component.ts

@@ -9,7 +9,7 @@ import { TextEditedDataEvent } from '../../events/event-source';
     template: `<ng-content></ng-content>`,
     styleUrls: ['./text-editing.component.scss']
 })
-export class TextEditingComponent implements OnInit, OnDestroy{
+export class TextEditingComponent implements OnInit, OnDestroy {
     textEditingFinished: Subscription;
 
     constructor(

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

@@ -10,15 +10,15 @@ export class TextAddingTool {
     public addingFinished = new EventEmitter<any>();
 
     constructor(
-        private drawingEventSource: DrawingsEventSource
+        private drawingEventSource: DrawingsEventSource,
     ){}
 
     public setEnabled(enabled){
-        if (enabled){
-            this.activate();
-        } else {
-            this.deactivate();
-        }
+        // if (enabled){
+        //     this.activate();
+        // } else {
+        //     this.deactivate();
+        // }
     }
 
     private deactivate(){

src/app/components/drawings-listeners/text-added/text-added.component.ts

@@ -0,0 +1,56 @@
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from "@angular/core";
+import { Subscription } from 'rxjs';
+import { DrawingService } from '../../../services/drawing.service';
+import { DrawingsDataSource } from '../../../cartography/datasources/drawings-datasource';
+import { DrawingsEventSource } from '../../../cartography/events/drawings-event-source';
+import { MapDrawingToSvgConverter } from '../../../cartography/converters/map/map-drawing-to-svg-converter';
+import { TextAddedDataEvent } from '../../../cartography/events/event-source';
+import { DefaultDrawingsFactory } from '../../../cartography/helpers/default-drawings-factory';
+import { TextElement } from '../../../cartography/models/drawings/text-element';
+import { Server } from '../../../models/server';
+import { Project } from '../../../models/project';
+import { Drawing } from '../../../cartography/models/drawing';
+
+
+@Component({
+    selector: 'app-text-added',
+    templateUrl: './text-added.component.html',
+    styleUrls: ['./text-added.component.css']
+})
+export class TextAddedComponent implements OnInit, OnDestroy{
+    @Input() server: Server;
+    @Input() project: Project;
+    @Output() drawingSaved = new EventEmitter<boolean>();
+    private textAdded: Subscription;
+
+    constructor(
+        private drawingService: DrawingService,
+        private drawingsDataSource: DrawingsDataSource,
+        private drawingsEventSource: DrawingsEventSource,
+        private drawingsFactory: DefaultDrawingsFactory,
+        private mapDrawingToSvgConverter: MapDrawingToSvgConverter
+    ){}
+    
+    ngOnInit(){
+        this.textAdded = this.drawingsEventSource.textAdded.subscribe((evt) => this.onTextAdded(evt));
+    }
+
+    onTextAdded(evt: TextAddedDataEvent){
+        console.log(evt);
+  
+        let drawing = this.drawingsFactory.getDrawingMock("text");
+        (drawing.element as TextElement).text = "evtsavedText";
+        let svgText = this.mapDrawingToSvgConverter.convert(drawing);
+
+        this.drawingService
+          .add(this.server, this.project.project_id, -55, -400, svgText)
+          .subscribe((serverDrawing: Drawing) => {
+            this.drawingsDataSource.add(serverDrawing);
+            this.drawingSaved.emit(true);
+          });
+    }
+
+    ngOnDestroy(){
+        this.textAdded.unsubscribe();
+    }
+}

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

@@ -37,7 +37,7 @@ export class AddDrawingComponent implements OnChanges {
             if(this.availableDrawings.includes(changes['selectedDrawing'].currentValue)){
                 this.addDrawing(changes['selectedDrawing'].currentValue);
             } else if (changes['selectedDrawing'].currentValue === "text") {
-                this.addText();
+                //this.addText();
             } else {
                 document.getElementsByClassName('map')[0].removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
             }

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

@@ -156,4 +156,5 @@
 <app-link-created [server]="server" [project]="project"></app-link-created>
 <app-node-dragged [server]="server"></app-node-dragged>
 <app-node-label-dragged [server]="server"></app-node-label-dragged>
+<app-text-added [server]="server" [project]="project"></app-text-added>
 <app-text-edited [server]="server"></app-text-edited>