Text editing moved to common component

src/app/cartography/cartography.module.ts

@@ -42,7 +42,6 @@ import { SelectionSelectComponent } from './components/selection-select/selectio
 import { DraggableSelectionComponent } from './components/draggable-selection/draggable-selection.component';
 import { MapSettingsManager } from './managers/map-settings-manager';
 import { DrawingResizingComponent } from './components/drawing-resizing/drawing-resizing.component';
-import { TextEditingComponent } from './components/text-editing/text-editing.component';
 import { FontBBoxCalculator } from './helpers/font-bbox-calculator';
 import { StylesToFontConverter } from './converters/styles-to-font-converter';
 import { TextElementFactory } from './helpers/drawings-factory/text-element-factory';
@@ -64,7 +63,6 @@ import { DrawingAddingComponent } from './components/drawing-adding/drawing-addi
     ExperimentalMapComponent,
     DrawingAddingComponent,
     DrawingResizingComponent,
-    TextEditingComponent,
     TemporaryTextElementComponent,
     ...ANGULAR_MAP_DECLARATIONS,
     SelectionControlComponent,

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

@@ -12,6 +12,5 @@
 <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-temporary-text-element #temporaryTextElement [svg]="svg"></app-temporary-text-element>
-<app-text-editing></app-text-editing>
 <app-draggable-selection [svg]="svg"></app-draggable-selection>

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

@@ -18,9 +18,9 @@ import { Drawing } from '../../models/drawing';
 import { Symbol } from '../../../models/symbol';
 import { GraphDataManager } from '../../managers/graph-data-manager';
 import { MapSettingsManager } from '../../managers/map-settings-manager';
-import { TextEditingTool } from '../../tools/text-editing-tool';
 import { Server } from '../../../models/server';
 import { ToolsService } from '../../../services/tools.service';
+import { TemporaryTextElementComponent } from '../temporary-text-element/temporary-text-element.component';
 
 
 @Component({
@@ -39,6 +39,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() height = 600;
 
   @ViewChild('svg') svgRef: ElementRef;
+  @ViewChild('temporaryTextElement') temporaryTextElement: TemporaryTextElementComponent;
 
   private parentNativeElement: any;
   private svg: Selection<SVGSVGElement, any, null, undefined>;
@@ -62,7 +63,6 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
     protected interfaceLabelWidget: InterfaceLabelWidget,
     protected selectionToolWidget: SelectionTool,
     protected movingToolWidget: MovingTool,
-    protected textEditingToolWidget: TextEditingTool,
     public graphLayout: GraphLayout,
     private toolsService: ToolsService
     ) {
@@ -110,13 +110,6 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
       }
     });
 
-    this.subscriptions.push(
-      this.toolsService.isTextEditingToolActivated.subscribe((value: boolean) => {
-        this.textEditingToolWidget.setEnabled(value);
-        this.mapChangeDetectorRef.detectChanges();
-      })
-    );
-
     this.subscriptions.push(
       this.toolsService.isMovingToolActivated.subscribe((value: boolean) => {
         this.movingToolWidget.setEnabled(value);
@@ -175,6 +168,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
     this.graphDataManager.setLinks(this.links);
     this.graphDataManager.setDrawings(this.drawings);
     this.graphLayout.draw(this.svg, this.context);
+    this.temporaryTextElement.activateTextEditing();
   }
 
   @HostListener('window:resize', ['$event'])

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

@@ -1,11 +1,12 @@
 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 { TextAddedDataEvent, TextEditedDataEvent } from '../../events/event-source';
 import { ToolsService } from '../../../services/tools.service';
-import { SVGSelection } from '../../models/types';
+import { select } from 'd3-selection';
-import { Selection, select } from 'd3-selection';
 import { TextElement } from '../../models/drawings/text-element';
 import { Context } from '../../models/context';
+import { Subscription } from 'rxjs';
+
 
 @Component({
     selector: 'app-temporary-text-element',
@@ -16,18 +17,18 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
     @ViewChild('temporaryTextElement') temporaryTextElement: ElementRef;
     @Input('svg') svg: SVGSVGElement;
 
-    private leftPosition: string = '0px';
+    private isActive: boolean = true;
-    private topPosition: string = '0px';
+    private leftPosition: string;
-    private innerText: string = '';
+    private topPosition: string;
-    private isActive: boolean = false;
+    private innerText: string = "";s
-    private mapListener: Function;
-    private textListener: Function;
-    public addingFinished = new EventEmitter<any>();
 
-    private enabled = true;
     private editingDrawingId: string;
     private editedElement: any;
-    private temporaryElement: HTMLDivElement;
+
+    private mapListener: Function;
+    private textListener: Function;
+    private textAddingSubscription: Subscription;
+    public addingFinished = new EventEmitter<any>();
     
     constructor(
         private drawingsEventSource: DrawingsEventSource,
@@ -36,9 +37,9 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
     ){}
 
     ngOnInit(){
-        this.toolsService.isTextAddingToolActivated.subscribe((isActive: boolean) => {
+        this.textAddingSubscription = this.toolsService.isTextAddingToolActivated.subscribe((isActive: boolean) => {
             this.isActive = isActive;
-            isActive ? this.activate() : this.deactivate()
+            this.isActive ? this.activate() : this.deactivate()
         });
 
         this.activateTextEditing();
@@ -48,13 +49,13 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
         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.deactivate();
                 this.temporaryTextElement.nativeElement.removeEventListener('focusout', this.textListener);
-                this.isActive = false;
             }
             this.textListener = textListener;
             this.temporaryTextElement.nativeElement.addEventListener('focusout', this.textListener);
@@ -71,16 +72,38 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy {
 
     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.isActive = true;
                 this.editedElement = elem;
+
                 select(textElements[index])
                     .attr("visibility", "hidden");
 
                 select(textElements[index])
                     .classed("editingMode", true);
+
+                this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute("drawing_id");
+                var transformData = textElements[index].parentElement.getAttribute("transform").split(/\(|\)/);
+                var x = Number(transformData[1].split(/,/)[0]) + this.context.getZeroZeroTransformationPoint().x;
+                var y = Number(transformData[1].split(/,/)[1]) + this.context.getZeroZeroTransformationPoint().y;
+                this.leftPosition = x.toString() + 'px';
+                this.topPosition = y.toString() + 'px';
+                this.innerText = elem.text;
+
+                this.temporaryTextElement.nativeElement.addEventListener("focusout", () => {
+                    let innerText = this.temporaryTextElement.nativeElement.innerText;
+                    this.drawingsEventSource.textEdited.emit(new TextEditedDataEvent(this.editingDrawingId, innerText.replace(/\n$/, ""), this.editedElement));
+    
+                    rootElement.selectAll<SVGTextElement, TextElement>('text.editingMode')
+                        .attr("visibility", "visible")
+                        .classed("editingMode", false);
+
+                    this.isActive = false;
+                });
+
+                this.temporaryTextElement.nativeElement.focus();
             });
     }
 

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

@@ -1,29 +0,0 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
-import { Subscription } from 'rxjs';
-import { TextEditingTool } from '../../tools/text-editing-tool';
-import { DrawingsEventSource } from '../../events/drawings-event-source';
-import { TextEditedDataEvent } from '../../events/event-source';
-
-@Component({
-    selector: 'app-text-editing',
-    template: `<ng-content></ng-content>`,
-    styleUrls: ['./text-editing.component.scss']
-})
-export class TextEditingComponent implements OnInit, OnDestroy {
-    textEditingFinished: Subscription;
-
-    constructor(
-        private textEditingTool: TextEditingTool,
-        private drawingEventSource: DrawingsEventSource
-    ) {}
-
-    ngOnInit() {
-        this.textEditingFinished = this.textEditingTool.editingFinished.subscribe((evt: TextEditedDataEvent) => {
-            this.drawingEventSource.textEdited.emit(evt);
-        });
-    }
-
-    ngOnDestroy() {
-        this.textEditingFinished.unsubscribe();
-    }
-}

src/app/cartography/d3-map.imports.ts

@@ -5,7 +5,6 @@ import { DrawingsWidget } from './widgets/drawings';
 import { DrawingLineWidget } from './widgets/drawing-line';
 import { SelectionTool } from './tools/selection-tool';
 import { MovingTool } from './tools/moving-tool';
-import {TextEditingTool} from './tools/text-editing-tool';
 import { LayersWidget } from './widgets/layers';
 import { LinkWidget } from './widgets/link';
 import { InterfaceStatusWidget } from './widgets/interface-status';
@@ -29,7 +28,6 @@ export const D3_MAP_IMPORTS = [
     DrawingLineWidget,
     SelectionTool,
     MovingTool,
-    TextEditingTool,
     LayersWidget,
     LinkWidget,
     InterfaceStatusWidget,

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

@@ -1,86 +0,0 @@
-import { Injectable, EventEmitter } from "@angular/core";
-import { SVGSelection } from '../models/types';
-import { select } from 'd3-selection';
-import { TextElement } from '../models/drawings/text-element';
-import { TextEditedDataEvent } from '../events/event-source';
-import { DrawingsEventSource } from '../events/drawings-event-source';
-import { Context } from '../models/context';
-
-
-@Injectable()
-export class TextEditingTool {
-    private enabled = true;
-    private editingDrawingId: string;
-    private editedElement: any;
-    private temporaryElement: HTMLDivElement;
-    public editingFinished = new EventEmitter<any>();
-
-    constructor(
-        private drawingEventSource: DrawingsEventSource,
-        private context: Context
-    ){}
-
-    public setEnabled(enabled) {
-        this.enabled = enabled;
-    }
-
-    public draw(selection: SVGSelection){
-        if (!this.enabled){
-            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;
-            
-            select(textElements[index])
-                .attr("visibility", "hidden");
-
-            select(textElements[index])
-                .classed("editingMode", true);
-
-            this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute("drawing_id");
-
-            var transformData = textElements[index].parentElement.getAttribute("transform").split(/\(|\)/);
-            var x = Number(transformData[1].split(/,/)[0]) + this.context.getZeroZeroTransformationPoint().x;
-            var y = Number(transformData[1].split(/,/)[1]) + this.context.getZeroZeroTransformationPoint().y;
-
-            this.temporaryElement = document.createElement('div');
-            this.temporaryElement.className = "temporaryElement";
-            this.temporaryElement.style.paddingLeft = "4px";
-            this.temporaryElement.style.width = "fit-content";
-            this.temporaryElement.style.left = x.toString() + 'px';
-            this.temporaryElement.style.top = y.toString() + 'px';
-            this.temporaryElement.style.position = "absolute";
-            this.temporaryElement.style.zIndex = "99";
-            this.temporaryElement.style.fontFamily = elem.font_family;
-            this.temporaryElement.style.fontSize = `${elem.font_size}pt`;
-            this.temporaryElement.style.fontWeight = elem.font_weight;
-            this.temporaryElement.style.color = elem.fill;     
-            this.temporaryElement.style.textDecoration = elem.text_decoration;
-            this.temporaryElement.setAttribute("contenteditable", "true");
-            this.temporaryElement.innerText = elem.text;
-
-            this.temporaryElement.addEventListener("focusout", () => {
-                let innerText = this.temporaryElement.innerText;
-                this.editingFinished.emit(new TextEditedDataEvent(this.editingDrawingId, innerText.replace(/\n$/, ""), this.editedElement));
-
-                this.drawingEventSource.textSaved.subscribe((evt:boolean) => {
-                    if(evt){
-                        this.temporaryElement.remove();
-                        document.body.style.cursor = "default";
-                    }
-                });
-
-                selection.selectAll<SVGTextElement, TextElement>('text.editingMode')
-                    .attr("visibility", "visible")
-                    .classed("editingMode", false);
-            });
-
-            document.body.appendChild(this.temporaryElement);
-            this.temporaryElement.focus();
-        });
-    }
-}

src/app/cartography/widgets/graph-layout.ts

@@ -8,7 +8,6 @@ import { MovingTool } from "../tools/moving-tool";
 import { LayersWidget } from "./layers";
 import { LayersManager } from "../managers/layers-manager";
 import { Injectable } from "@angular/core";
-import { TextEditingTool } from '../tools/text-editing-tool';
 
 
 @Injectable()
@@ -18,7 +17,6 @@ export class GraphLayout implements Widget {
     private drawingLineTool: DrawingLineWidget,
     private selectionTool: SelectionTool,
     private movingTool: MovingTool,
-    private textEditingTool: TextEditingTool,
     private layersWidget: LayersWidget,
     private layersManager: LayersManager
   ) {
@@ -69,7 +67,6 @@ export class GraphLayout implements Widget {
     this.drawingLineTool.draw(view, context);
     this.selectionTool.draw(view, context);
     this.movingTool.draw(view, context);
-    this.textEditingTool.draw(view);
   }
 
   disconnect(view: SVGSelection) {