ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-09 19:41:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Zoom functionality applied to drawings & texts

Browse Source
This commit is contained in:
Piotr Pekala 2019-06-13 06:43:23 -07:00
parent 24856d8f96
commit 00b4e1ef7f
4 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/cartography/components/drawing-adding/drawing-adding.component.ts
View File

@ -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();

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

@ -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();

15
src/app/cartography/components/text-editor/text-editor.component.ts
View File

@ -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<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 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;

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

@ -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) => {