Adding text separated from main component

src/app/cartography/cartography.module.ts

@@ -41,6 +41,7 @@ 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 { TextAddingComponent } from './components/text-adding/text-adding.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';
@@ -56,6 +57,7 @@ import { StylesToFontConverter } from './converters/styles-to-font-converter';
     D3MapComponent,
     ExperimentalMapComponent,
     DrawingResizingComponent,
+    TextAddingComponent,
     TextEditingComponent,
     ...ANGULAR_MAP_DECLARATIONS,
     SelectionControlComponent,

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

@@ -11,5 +11,6 @@
 <app-drawing-resizing></app-drawing-resizing>
 <app-selection-control></app-selection-control>
 <app-selection-select></app-selection-select>
+<app-text-adding></app-text-adding>
 <app-text-editing></app-text-editing>
 <app-draggable-selection [svg]="svg"></app-draggable-selection>

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

@@ -20,6 +20,8 @@ import { Symbol } from '../../../models/symbol';
 import { GraphDataManager } from '../../managers/graph-data-manager';
 import { DraggedDataEvent } from '../../events/event-source';
 import { MapSettingsManager } from '../../managers/map-settings-manager';
+import { TextEditingTool } from '../../tools/text-editing-tool';
+import { TextAddingComponent } from '../text-adding/text-adding.component';
 
 
 @Component({
@@ -37,6 +39,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() height = 600;
 
   @ViewChild('svg') svgRef: ElementRef;
+  @ViewChild(TextAddingComponent) textAddingComponent: TextAddingComponent;
 
   private parentNativeElement: any;
   private svg: Selection<SVGSVGElement, any, null, undefined>;
@@ -47,6 +50,10 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
     'show_interface_labels': true
   };
 
+  ngAfterInit(){
+    console.log(this.textAddingComponent);
+  }
+
   constructor(
     private graphDataManager: GraphDataManager,
     public context: Context,
@@ -57,6 +64,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
     protected interfaceLabelWidget: InterfaceLabelWidget,
     protected selectionToolWidget: SelectionTool,
     protected movingToolWidget: MovingTool,
+    protected textEditingToolWidget: TextEditingTool,
     public graphLayout: GraphLayout,
     ) {
     this.parentNativeElement = element.nativeElement;
@@ -81,6 +89,12 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
     this.mapChangeDetectorRef.detectChanges();
   }
 
+  @Input('text-editing-tool')
+  set textEditingTool(value){
+    this.textEditingToolWidget.setEnabled(value);
+    this.mapChangeDetectorRef.detectChanges();
+  }
+
   @Input('draw-link-tool') drawLinkTool: boolean;
 
   @Input('readonly') set readonly(value) {

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

@@ -0,0 +1,64 @@
+import { Component, OnInit } from "@angular/core";
+import { select } from 'd3-selection';
+import { Context } from "../../models/context";
+
+@Component({
+    selector: 'app-text-adding',
+    template: `<ng-content></ng-content>`,
+    styleUrls: ['./text-adding.component.scss']
+})
+export class TextAddingComponent implements OnInit {
+    public isEnabled: boolean = true;
+
+    constructor(
+        private context: Context
+    ){}
+
+    ngOnInit(){
+
+    }
+
+    addingTextSelected(){
+
+
+        //let x = event.clientX - this.mapChild.context.getZeroZeroTransformationPoint().x;
+        //let y = event.clientY - this.mapChild.context.getZeroZeroTransformationPoint().y;
+
+        const svgElement = select("g.canvas");
+        svgElement
+          .append("foreignObject")
+            .attr("id", "temporaryText")
+            .attr("transform", `translate(${x},${y}) rotate(0)`)
+            .attr("width", '1000px')
+          .append("xhtml:div")
+            .attr("class", "temporaryTextInside")
+            .attr('style', () => {
+              const styles: string[] = [];
+              styles.push(`font-family: Noto Sans`)
+              styles.push(`font-size: 11pt`);
+              styles.push(`font-weight: bold`)
+              styles.push(`color: #000000`);
+              return styles.join("; ");
+            })
+            .attr("width", 'fit-content')
+            .attr("height", 'max-content')
+            .attr('contenteditable', 'true')
+            .text("")
+            .on("focusout", () => {
+              let elem = document.getElementsByClassName("temporaryTextInside")[0] as HTMLElement;
+              let savedText = elem.innerText;
+
+            //   let drawing = this.getDrawingMock("text", savedText);
+            //   (drawing.element as TextElement).text = savedText;
+            //   let svgText = this.mapDrawingToSvgConverter.convert(drawing);
+
+            //   this.drawingService
+            //     .add(this.server, this.project.project_id, x, y, svgText)
+            //     .subscribe((serverDrawing: Drawing) => {
+            //      var temporaryElement = document.getElementById("temporaryText") as HTMLElement;
+            //      temporaryElement.remove();
+            //       this.drawingsDataSource.add(serverDrawing);
+            //     });
+            });
+    }
+}

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

@@ -23,6 +23,10 @@ export class TextEditingComponent implements OnInit, OnDestroy{
         });
     }
 
+    onTextAddingChosen() {
+
+    }
+
     ngOnDestroy() {
         this.textEditingFinished.unsubscribe();
     }

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

@@ -33,7 +33,7 @@ export class TextEditingTool {
                 .classed("editingMode", true);
 
             this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute("drawing_id");
-            //simply get canvas
+
             select(textElements[index].parentElement.parentElement.parentElement)
                 .append("foreignObject")
                 .attr("width", '1000px')
@@ -41,7 +41,7 @@ export class TextEditingTool {
                 .attr("height", '100px')
                 .attr("id", "temporaryText")
                 .attr("transform", textElements[index].parentElement.getAttribute("transform"))
-                .append("xhtml:div")
+                .append("xhtml:span")
                 .attr("width", "fit-content")
                 .attr("height", "fit-content")
                 .attr("class", "temporaryTextInside")

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

@@ -10,6 +10,7 @@
     [show-interface-labels]="project.show_interface_labels"
     [selection-tool]="tools.selection"
     [moving-tool]="tools.moving"
+    [text-editing-tool]="tools.text_editing"
     [draw-link-tool]="tools.draw_link"
     [readonly]="inReadOnlyMode"
     (nodeDragged)="onNodeDragged($event)"

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

@@ -27,7 +27,7 @@ import { MapChangeDetectorRef } from '../../cartography/services/map-change-dete
 import { NodeContextMenu } from '../../cartography/events/nodes';
 import { MapLinkCreated } from '../../cartography/events/links';
 import { NodeWidget } from '../../cartography/widgets/node';
-import { DraggedDataEvent, ResizedDataEvent, EditedDataEvent, TextEditedDataEvent } from '../../cartography/events/event-source';
+import { DraggedDataEvent, ResizedDataEvent, TextEditedDataEvent } from '../../cartography/events/event-source';
 import { DrawingService } from '../../services/drawing.service';
 import { MapNodeToNodeConverter } from '../../cartography/converters/map/map-node-to-node-converter';
 import { NodesEventSource } from '../../cartography/events/nodes-event-source';
@@ -48,6 +48,7 @@ import { MapLinkNode } from '../../cartography/models/map/map-link-node';
 import { TextElement } from '../../cartography/models/drawings/text-element';
 import { FontFixer } from '../../cartography/helpers/font-fixer';
 import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-label-to-label-converter';
+import { select } from 'd3-selection';
 
 
 @Component({
@@ -70,7 +71,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   tools = {
     'selection': true,
     'moving': false,
-    'draw_link': false
+    'draw_link': false,
+    'text_editing': true
   };
   protected settings: Settings;