From 00b4e1ef7f8cd0437a50a1bad885a663aa661397 Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Thu, 13 Jun 2019 06:43:23 -0700 Subject: [PATCH] Zoom functionality applied to drawings & texts --- .../drawing-adding/drawing-adding.component.ts | 4 ++-- .../text-editor/text-editor.component.spec.ts | 4 +++- .../text-editor/text-editor.component.ts | 15 +++++++++------ .../text-added/text-added.component.ts | 4 ++-- 4 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/app/cartography/components/drawing-adding/drawing-adding.component.ts b/src/app/cartography/components/drawing-adding/drawing-adding.component.ts index 41782c86..cc380967 100644 --- a/src/app/cartography/components/drawing-adding/drawing-adding.component.ts +++ b/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 y = event.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y); + 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))/this.context.transformation.k; this.drawingsEventSource.pointToAddSelected.emit(new AddedDataEvent(x, y)); this.deactivate(); diff --git a/src/app/cartography/components/text-editor/text-editor.component.spec.ts b/src/app/cartography/components/text-editor/text-editor.component.spec.ts index 89c52c0b..63067ff3 100644 --- a/src/app/cartography/components/text-editor/text-editor.component.spec.ts +++ b/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(); diff --git a/src/app/cartography/components/text-editor/text-editor.component.ts b/src/app/cartography/components/text-editor/text-editor.component.ts index a5b72242..b4dbdcfe 100644 --- a/src/app/cartography/components/text-editor/text-editor.component.ts +++ b/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.pageY - this.context.transformation.y + event.pageX, + event.pageY ) ); this.deactivateTextAdding(); @@ -84,16 +87,16 @@ export class TextEditorComponent implements OnInit, OnDestroy { .selectAll('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 y = Number(transformData[1].split(/,/)[1]) + this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y; + 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.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; diff --git a/src/app/components/drawings-listeners/text-added/text-added.component.ts b/src/app/components/drawings-listeners/text-added/text-added.component.ts index c5e6a655..3ecaa237 100644 --- a/src/app/components/drawings-listeners/text-added/text-added.component.ts +++ b/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.y - this.context.getZeroZeroTransformationPoint().y, + (evt.x - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x))/this.context.transformation.k, + (evt.y - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y))/this.context.transformation.k, svgText ) .subscribe((serverDrawing: Drawing) => {