Zoom functionality applied to drawings & texts

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

@@ -25,8 +25,8 @@ export class DrawingAddingComponent implements OnInit, OnDestroy {
 
   activate() {
     let listener = (event: MouseEvent) => {
-      let x = event.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
+      let x = (event.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x))/this.context.transformation.k;
-      let y = event.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
+      let y = (event.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y))/this.context.transformation.k;
 
       this.drawingsEventSource.pointToAddSelected.emit(new AddedDataEvent(x, y));
       this.deactivate();

src/app/cartography/components/text-editor/text-editor.component.spec.ts

@@ -5,6 +5,7 @@ import { DrawingsEventSource } from '../../events/drawings-event-source';
 import { ToolsService } from '../../../services/tools.service';
 import { Context } from '../../models/context';
 import { Renderer2 } from '@angular/core';
+import { MapScaleService } from '../../../services/mapScale.service';
 
 describe('TemporaryTextElementComponent', () => {
   let component: TextEditorComponent;
@@ -17,7 +18,8 @@ describe('TemporaryTextElementComponent', () => {
         { provide: DrawingsEventSource, useClass: DrawingsEventSource },
         { provide: ToolsService, useClass: ToolsService },
         { provide: Context, useClass: Context },
-        { provide: Renderer2, useClass: Renderer2 }
+        { provide: Renderer2, useClass: Renderer2 },
+        { provide: MapScaleService, useClass: MapScaleService }
       ],
       declarations: [TextEditorComponent]
     }).compileComponents();

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

@@ -6,6 +6,7 @@ import { select } from 'd3-selection';
 import { TextElement } from '../../models/drawings/text-element';
 import { Context } from '../../models/context';
 import { Subscription } from 'rxjs';
+import { MapScaleService } from '../../../services/mapScale.service';
 
 @Component({
   selector: 'app-text-editor',
@@ -32,7 +33,8 @@ export class TextEditorComponent implements OnInit, OnDestroy {
     private drawingsEventSource: DrawingsEventSource,
     private toolsService: ToolsService,
     private context: Context,
-    private renderer: Renderer2
+    private renderer: Renderer2,
+    private mapScaleService: MapScaleService
   ) {}
 
   ngOnInit() {
@@ -48,14 +50,15 @@ export class TextEditorComponent implements OnInit, OnDestroy {
       this.leftPosition = event.pageX.toString() + 'px';
       this.topPosition = event.pageY.toString() + 'px';
       this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
+      this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`);
       this.temporaryTextElement.nativeElement.focus();
 
       let textListener = () => {
         this.drawingsEventSource.textAdded.emit(
           new TextAddedDataEvent(
             this.temporaryTextElement.nativeElement.innerText.replace(/\n$/, ''),
-            event.pageX - this.context.transformation.x,
+            event.pageX,
-            event.pageY - this.context.transformation.y
+            event.pageY
           )
         );
         this.deactivateTextAdding();
@@ -84,16 +87,16 @@ export class TextEditorComponent implements OnInit, OnDestroy {
       .selectAll<SVGTextElement, TextElement>('text.text_element')
       .on('dblclick', (elem, index, textElements) => {
         this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
+        this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`);
         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 + this.context.transformation.x;
+        var x = (Number(transformData[1].split(/,/)[0]) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
-        var y = Number(transformData[1].split(/,/)[1]) + this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
+        var y = (Number(transformData[1].split(/,/)[1]) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
         this.leftPosition = x.toString() + 'px';
         this.topPosition = y.toString() + 'px';
         this.temporaryTextElement.nativeElement.innerText = elem.text;

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

@@ -45,8 +45,8 @@ export class TextAddedComponent implements OnInit, OnDestroy {
       .add(
         this.server,
         this.project.project_id,
-        evt.x - this.context.getZeroZeroTransformationPoint().x,
+        (evt.x - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x))/this.context.transformation.k,
-        evt.y - this.context.getZeroZeroTransformationPoint().y,
+        (evt.y - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y))/this.context.transformation.k,
         svgText
       )
       .subscribe((serverDrawing: Drawing) => {