Merge pull request #360 from GNS3/Rewrite-MovingTool-to-custom-solution

Rewrite MovingTool to custom solution

src/app/app.module.ts

@@ -180,6 +180,7 @@ import { StartCaptureDialogComponent } from './components/project-map/packet-cap
 import { SuspendLinkActionComponent } from './components/project-map/context-menu/actions/suspend-link/suspend-link-action.component';
 import { ResumeLinkActionComponent } from './components/project-map/context-menu/actions/resume-link-action/resume-link-action.component';
 import { StopCaptureActionComponent } from './components/project-map/context-menu/actions/stop-capture/stop-capture-action.component';
+import { MapScaleService } from './services/mapScale.service';
 import { AdbutlerComponent } from './components/adbutler/adbutler.component';
 import { ConsoleService } from './services/settings/console.service';
 import { DefaultConsoleService } from './services/settings/default-console.service';
@@ -376,6 +377,7 @@ if (environment.production) {
     IouConfigurationService,
     RecentlyOpenedProjectService,
     ServerManagementService,
+    MapScaleService,
     ConsoleService,
     DefaultConsoleService,
     NodeCreatedLabelStylesFixer,

src/app/cartography/cartography.module.ts

@@ -55,6 +55,9 @@ import { RectangleElementFactory } from './helpers/drawings-factory/rectangle-el
 import { LineElementFactory } from './helpers/drawings-factory/line-element-factory';
 import { TextEditorComponent } from './components/text-editor/text-editor.component';
 import { DrawingAddingComponent } from './components/drawing-adding/drawing-adding.component';
+import { MovingEventSource } from './events/moving-event-source';
+import { MovingCanvasDirective } from './directives/moving-canvas.directive';
+import { ZoomingCanvasDirective } from './directives/zooming-canvas.directive';
 
 @NgModule({
   imports: [CommonModule, MatMenuModule, MatIconModule],
@@ -67,7 +70,9 @@ import { DrawingAddingComponent } from './components/drawing-adding/drawing-addi
     ...ANGULAR_MAP_DECLARATIONS,
     SelectionControlComponent,
     SelectionSelectComponent,
-    DraggableSelectionComponent
+    DraggableSelectionComponent,
+    MovingCanvasDirective,
+    ZoomingCanvasDirective
   ],
   providers: [
     CssFixer,
@@ -87,6 +92,7 @@ import { DrawingAddingComponent } from './components/drawing-adding/drawing-addi
     DrawingsEventSource,
     NodesEventSource,
     LinksEventSource,
+    MovingEventSource,
     MapDrawingToSvgConverter,
     DrawingToMapDrawingConverter,
     LabelToMapLabelConverter,

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

@@ -1,4 +1,4 @@
-<svg #svg class="map" preserveAspectRatio="none">
+<svg #svg class="map" preserveAspectRatio="none" movingCanvas zoomingCanvas>
   <filter id="grayscale"><feColorMatrix id="feGrayscale" type="saturate" values="0" /></filter>
 </svg>
 

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

@@ -31,6 +31,7 @@ import { MapSettingsManager } from '../../managers/map-settings-manager';
 import { Server } from '../../../models/server';
 import { ToolsService } from '../../../services/tools.service';
 import { TextEditorComponent } from '../text-editor/text-editor.component';
+import { MapScaleService } from '../../../services/mapScale.service';
 
 @Component({
   selector: 'app-d3-map',
@@ -73,7 +74,8 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
     protected selectionToolWidget: SelectionTool,
     protected movingToolWidget: MovingTool,
     public graphLayout: GraphLayout,
-    private toolsService: ToolsService
+    private toolsService: ToolsService,
+    private mapScaleService: MapScaleService
   ) {
     this.parentNativeElement = element.nativeElement;
   }
@@ -119,9 +121,12 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
       }
     });
 
+    this.subscriptions.push(
+      this.mapScaleService.scaleChangeEmitter.subscribe((value: number) => this.redraw())
+    );
+
     this.subscriptions.push(
       this.toolsService.isMovingToolActivated.subscribe((value: boolean) => {
-        this.movingToolWidget.setEnabled(value);
         this.mapChangeDetectorRef.detectChanges();
       })
     );

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

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

src/app/cartography/directives/moving-canvas.directive.spec.ts

@@ -0,0 +1,169 @@
+import { ComponentFixture, TestBed, async, tick, fakeAsync } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Context } from '../models/context';
+import { MovingEventSource } from '../events/moving-event-source';
+import { MovingCanvasDirective } from './moving-canvas.directive';
+import { Component } from '@angular/core';
+
+@Component({
+    template: `<svg #svg class="map" preserveAspectRatio="none" movingCanvas><g class="canvas" transform="translate(0, 0) scale(1)"></g></svg>`
+})
+class DummyComponent {
+    constructor(){}
+}
+
+describe('MovingCanvasDirective', () => {
+    let component: DummyComponent;
+    let fixture: ComponentFixture<DummyComponent>;
+    let movingEventSource = new MovingEventSource();
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+        imports: [NoopAnimationsModule],
+        providers: [
+            { provide: MovingEventSource, useValue: movingEventSource },
+            { provide: Context, useClass: Context }
+        ],
+        declarations: [DummyComponent, MovingCanvasDirective]
+        }).compileComponents();
+    }));
+    
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DummyComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should move canvas if moving mode is activated', fakeAsync(() => {
+        movingEventSource.movingModeState.emit(true);
+        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+        let xMovement: number = 200;
+        let yMovement: number = 200;
+
+        canvas.dispatchEvent(new MouseEvent('mousedown', {
+            bubbles: true,
+            clientX: 0,
+            clientY: 0,
+            screenY: 0,
+            screenX: 0,
+            view: window
+        }));
+        tick();
+        canvas.dispatchEvent(new MouseEvent('mousemove', { 
+            bubbles: true, 
+            relatedTarget: canvas, 
+            movementX: xMovement, 
+            movementY: yMovement 
+        } as MouseEventInit));
+        tick();
+    
+        expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
+    }));
+
+    it('should not move canvas if moving mode is not activated', fakeAsync(() => {
+        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+
+        canvas.dispatchEvent(new MouseEvent('mousedown', {
+            bubbles: true,
+            clientX: 0,
+            clientY: 0,
+            screenY: 0,
+            screenX: 0,
+            view: window
+        }));
+        tick();
+        canvas.dispatchEvent(new MouseEvent('mousemove', { 
+            bubbles: true, 
+            relatedTarget: canvas, 
+            movementX: 1000, 
+            movementY: 1000 
+        } as MouseEventInit));
+        tick();
+    
+        expect(canvas.getAttribute('transform')).toEqual('translate(0, 0) scale(1)');
+    }));
+
+    it('should not move canvas after mouseup event', fakeAsync(() => {
+        movingEventSource.movingModeState.emit(true);
+        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+        let xMovement: number = 200;
+        let yMovement: number = 200;
+
+        canvas.dispatchEvent(new MouseEvent('mousedown', {
+            bubbles: true,
+            clientX: 0,
+            clientY: 0,
+            screenY: 0,
+            screenX: 0,
+            view: window
+        }));
+        tick();
+        canvas.dispatchEvent(new MouseEvent('mousemove', { 
+            bubbles: true, 
+            relatedTarget: canvas, 
+            movementX: xMovement, 
+            movementY: yMovement 
+        } as MouseEventInit));
+        tick();
+    
+        expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
+        
+        canvas.dispatchEvent(new MouseEvent('mouseup', { 
+            bubbles: true, 
+            relatedTarget: canvas, 
+            movementX: 1000, 
+            movementY: 1000
+        } as MouseEventInit));
+        tick();
+        canvas.dispatchEvent(new MouseEvent('mousemove', { 
+            bubbles: true, 
+            relatedTarget: canvas, 
+            movementX: xMovement, 
+            movementY: yMovement 
+        } as MouseEventInit));
+        tick();
+
+        expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
+    }));
+
+    it('should not move canvas after deactivation of moving mode', fakeAsync(() => {
+        movingEventSource.movingModeState.emit(true);
+        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+        let xMovement: number = 200;
+        let yMovement: number = 200;
+
+        canvas.dispatchEvent(new MouseEvent('mousedown', {
+            bubbles: true,
+            clientX: 0,
+            clientY: 0,
+            screenY: 0,
+            screenX: 0,
+            view: window
+        }));
+        tick();
+        canvas.dispatchEvent(new MouseEvent('mousemove', { 
+            bubbles: true, 
+            relatedTarget: canvas, 
+            movementX: xMovement, 
+            movementY: yMovement 
+        } as MouseEventInit));
+        tick();
+    
+        expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
+        
+        movingEventSource.movingModeState.emit(false);
+        canvas.dispatchEvent(new MouseEvent('mousemove', { 
+            bubbles: true, 
+            relatedTarget: canvas, 
+            movementX: 1000, 
+            movementY: 1000
+        } as MouseEventInit));
+        tick();
+
+        expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
+    }));
+});

src/app/cartography/directives/moving-canvas.directive.ts

@@ -0,0 +1,65 @@
+import { HostListener, ElementRef, Renderer, Directive, Input, OnInit, OnDestroy } from '@angular/core'
+import { Subscription } from 'rxjs';
+import { MovingEventSource } from '../events/moving-event-source';
+import { Context } from '../models/context';
+import { select } from 'd3-selection';
+
+@Directive({
+    selector: '[movingCanvas]',
+})
+export class MovingCanvasDirective implements OnInit, OnDestroy {
+    private mouseupListener: Function;
+    private mousemoveListener: Function;
+    private movingModeState: Subscription;
+    private activated: boolean = false;
+    
+    constructor(
+        private element: ElementRef,
+        private movingEventSource: MovingEventSource,
+        private context: Context
+    ) {}
+
+    ngOnInit() {
+        this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
+            this.activated = event;
+            if (!event) this.removelisteners();
+        });
+    }
+
+    ngOnDestroy() {
+        this.movingModeState.unsubscribe();
+    }
+
+    @HostListener('mousedown', ['$event'])
+    onMouseDown(event: MouseEvent) {
+        if (this.activated) {
+            this.mousemoveListener = (event: MouseEvent) => {
+                const view = select(this.element.nativeElement);
+                const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
+                
+                canvas.attr('transform', () => {
+                    this.context.transformation.x = this.context.transformation.x + event.movementX;
+                    this.context.transformation.y = this.context.transformation.y + event.movementY;
+    
+                    const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
+                    const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
+                    const kTrans = this.context.transformation.k;
+    
+                    return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
+                });
+            };
+    
+            this.mouseupListener = (event: MouseEvent) => {
+                this.removelisteners();
+            };
+    
+            this.element.nativeElement.addEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject);
+            this.element.nativeElement.addEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject);
+        }
+    }
+
+    removelisteners() {
+        this.element.nativeElement.removeEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject);
+        this.element.nativeElement.removeEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject);
+    }
+}

src/app/cartography/directives/zooming-canvas.directive.spec.ts

@@ -0,0 +1,139 @@
+import { ComponentFixture, TestBed, async, tick, fakeAsync } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Context } from '../models/context';
+import { MovingEventSource } from '../events/moving-event-source';
+import { Component } from '@angular/core';
+import { ZoomingCanvasDirective } from './zooming-canvas.directive';
+import { MapScaleService } from '../../services/mapScale.service';
+
+@Component({
+    template: `<svg #svg class="map" preserveAspectRatio="none" zoomingCanvas><g class="canvas" transform="translate(0, 0) scale(1)"></g></svg>`
+})
+class DummyComponent {
+    constructor(){}
+}
+
+describe('ZoomingCanvasDirective', () => {
+    let component: DummyComponent;
+    let fixture: ComponentFixture<DummyComponent>;
+    let movingEventSource = new MovingEventSource();
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+        imports: [NoopAnimationsModule],
+        providers: [
+            { provide: MovingEventSource, useValue: movingEventSource },
+            { provide: Context, useClass: Context },
+            { provide: MapScaleService, useClass: MapScaleService }
+        ],
+        declarations: [DummyComponent, ZoomingCanvasDirective]
+        }).compileComponents();
+    }));
+    
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DummyComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should zoom in canvas if moving mode is activated', fakeAsync(() => {
+        movingEventSource.movingModeState.emit(true);
+        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+        let deltaMode: number = 0;
+        let zoom: number = -1000;
+
+        canvas.dispatchEvent(new WheelEvent('wheel', { 
+            bubbles: true, 
+            relatedTarget: canvas, 
+            deltaMode: deltaMode, 
+            deltaY: zoom
+        }));
+        tick();
+    
+        expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
+    }));
+
+    it('should zoom out canvas if moving mode is activated', fakeAsync(() => {
+        movingEventSource.movingModeState.emit(true);
+        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+        let deltaMode: number = 0;
+        let zoom: number = 100;
+
+        canvas.dispatchEvent(new WheelEvent('wheel', { 
+            bubbles: true, 
+            relatedTarget: canvas, 
+            deltaMode: deltaMode, 
+            deltaY: zoom
+        }));
+        tick();
+    
+        expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(0.9)`);
+    }));
+
+    it('should not zoom in/out canvas if moving mode is not activated', fakeAsync(() => {
+        movingEventSource.movingModeState.emit(true);
+        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+        let deltaMode: number = 0;
+        let zoom: number = -1000;
+
+        canvas.dispatchEvent(new WheelEvent('wheel', { 
+            bubbles: true, 
+            relatedTarget: canvas, 
+            deltaMode: deltaMode, 
+            deltaY: zoom
+        }));
+        tick();
+    
+        expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
+        
+        movingEventSource.movingModeState.emit(false);
+        canvas.dispatchEvent(new WheelEvent('wheel', { 
+            bubbles: true, 
+            relatedTarget: canvas, 
+            deltaMode: deltaMode, 
+            deltaY: zoom
+        }));
+        tick();
+
+        expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
+    }));
+
+    it('should not zoom in/out canvas after deactivation of moving mode', fakeAsync(() => {
+        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+        let deltaMode: number = 0;
+        let zoom: number = -1000;
+
+        canvas.dispatchEvent(new WheelEvent('wheel', { 
+            bubbles: true, 
+            relatedTarget: canvas, 
+            deltaMode: deltaMode, 
+            deltaY: zoom
+        }));
+        tick();
+    
+        expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(1)`);
+    }));
+
+    it('should prevent from default wheel behaviour when moving mode activated', fakeAsync(() => {
+        movingEventSource.movingModeState.emit(true);
+        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+        let deltaMode: number = 0;
+        let zoom: number = -1000;
+        const event = new WheelEvent('wheel', { 
+            bubbles: true, 
+            relatedTarget: canvas, 
+            deltaMode: deltaMode, 
+            deltaY: zoom
+        });
+        spyOn(event, 'preventDefault');
+
+        canvas.dispatchEvent(event);
+        tick();
+    
+        expect(event.preventDefault).toHaveBeenCalled();
+    }));
+});

src/app/cartography/directives/zooming-canvas.directive.ts

@@ -0,0 +1,61 @@
+import { ElementRef, Directive, OnInit, OnDestroy } from '@angular/core'
+import { Subscription } from 'rxjs';
+import { MovingEventSource } from '../events/moving-event-source';
+import { Context } from '../models/context';
+import { select } from 'd3-selection';
+import { MapScaleService } from '../../services/mapScale.service';
+
+@Directive({
+    selector: '[zoomingCanvas]',
+})
+export class ZoomingCanvasDirective implements OnInit, OnDestroy {
+    private wheelListener: Function;
+    private movingModeState: Subscription;
+    
+    constructor(
+        private element: ElementRef,
+        private movingEventSource: MovingEventSource,
+        private context: Context,
+        private mapsScaleService: MapScaleService
+    ) {}
+
+    ngOnInit() {
+        this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
+            event ? this.addListener() : this.removeListener();
+        });
+    }
+
+    ngOnDestroy() {
+        this.movingModeState.unsubscribe();
+    }
+
+    addListener() {
+        this.wheelListener = (event: WheelEvent) => {
+            event.stopPropagation();
+            event.preventDefault();
+
+            let zoom = event.deltaY;
+            zoom = event.deltaMode === 0 ? zoom/100 : zoom/3;
+
+            const view = select(this.element.nativeElement);
+            const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
+            
+            canvas.attr('transform', () => {
+                this.context.transformation.k = this.context.transformation.k - zoom/10;
+
+                const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
+                const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
+                const kTrans = this.context.transformation.k;
+                this.mapsScaleService.setScale(kTrans);
+
+                return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
+            });
+        };
+
+        this.element.nativeElement.addEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject, {passive: false});
+    }
+
+    removeListener() {
+        this.element.nativeElement.removeEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject);
+    }
+}

src/app/cartography/events/moving-event-source.ts

@@ -0,0 +1,6 @@
+import { Injectable, EventEmitter } from "@angular/core";
+
+@Injectable()
+export class MovingEventSource {
+    public movingModeState = new EventEmitter<boolean>();
+}

src/app/cartography/tools/selection-tool.ts

@@ -100,7 +100,9 @@ export class SelectionTool {
   }
 
   private moveSelection(start, move) {
-    this.path.attr('d', this.rect(start[0], start[1], move[0] - start[0], move[1] - start[1]));
+    let x = start[0]/this.context.transformation.k;
+    let y = start[1]/this.context.transformation.k;
+    this.path.attr('d', this.rect(x, y, move[0]/this.context.transformation.k - x, move[1]/this.context.transformation.k - y));
     this.selectedEvent(start, move);
   }
 

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

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

@@ -154,6 +154,12 @@
   <app-context-menu [project]="project" [server]="server"></app-context-menu>
 </div>
 
+<div id="zoom-buttons">
+  <button class="zoom-button" (click)="zoomIn()">+</button>
+  <button class="zoom-button" (click)="resetZoom()"><mat-icon>adjust</mat-icon></button>
+  <button class="zoom-button" (click)="zoomOut()">-</button>
+</div>
+
 <app-progress></app-progress>
 
 <app-project-map-shortcuts *ngIf="project" [project]="project" [server]="server"> </app-project-map-shortcuts>

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

@@ -93,6 +93,44 @@ mat-divider.divider {
   color: gray;
 }
 
+#zoom-buttons {
+  position: fixed;
+  background: #263238;
+  bottom: 20px;
+  right: 20px;
+  display: grid;
+
+  .zoom-button {
+    outline: none;
+    height: 40px;
+    width: 40px;
+    background: #263238;
+    border: none;
+    color: white;
+    font-size: 1.25rem;
+    font-weight: bold;
+
+    mat-icon {
+      margin-top: 8px;
+    }
+  }
+
+  .zoom-button-white {
+    outline: none;
+    height: 40px;
+    width: 40px;
+    color: #263238;
+    border: none;
+    background: white;
+    font-size: 1.25rem;
+    font-weight: bold;
+
+    mat-icon {
+      margin-top: 8px;
+    }
+  } 
+}
+
 @-moz-document url-prefix() {
   /** fixes gray background of drawing menu on Firefox **/
   .mat-drawer-content {

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

@@ -40,8 +40,10 @@ import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProje
 import { MapLinkToLinkConverter } from '../../cartography/converters/map/map-link-to-link-converter';
 import { Link } from '../../models/link';
 import { Project } from '../../models/project';
+import { MovingEventSource } from '../../cartography/events/moving-event-source';
 import { CapturingSettings } from '../../models/capturingSettings';
 import { LinkWidget } from '../../cartography/widgets/link';
+import { MapScaleService } from '../../services/mapScale.service';
 import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer';
 
 export class MockedProgressService {
@@ -216,10 +218,12 @@ describe('ProjectMapComponent', () => {
         { provide: ToolsService },
         { provide: SelectionManager },
         { provide: SelectionTool },
+        { provide: MovingEventSource },
         {
           provide: RecentlyOpenedProjectService,
           useClass: RecentlyOpenedProjectService
         },
+        { provide: MapScaleService },
         { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer}
       ],
       declarations: [ProjectMapComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],

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

@@ -42,7 +42,9 @@ import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-l
 import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProject.service';
 import { MapLink } from '../../cartography/models/map/map-link';
 import { MapLinkToLinkConverter } from '../../cartography/converters/map/map-link-to-link-converter';
+import { MovingEventSource } from '../../cartography/events/moving-event-source';
 import { LinkWidget } from '../../cartography/widgets/link';
+import { MapScaleService } from '../../services/mapScale.service';
 import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer';
 
 
@@ -110,6 +112,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private selectionManager: SelectionManager,
     private selectionTool: SelectionTool,
     private recentlyOpenedProjectService: RecentlyOpenedProjectService,
+    private movingEventSource: MovingEventSource,
+    private mapScaleService: MapScaleService,
     private nodeCreatedLabelStylesFixer: NodeCreatedLabelStylesFixer
   ) {}
 
@@ -184,6 +188,18 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
         this.mapChangeDetectorRef.detectChanges();
       })
     );
+
+    this.addKeyboardListeners();
+  }
+
+  addKeyboardListeners() {
+    Mousetrap.bind('ctrl++', (event: Event) => {
+      event.preventDefault();
+    });
+
+    Mousetrap.bind('ctrl+-', (event: Event) => {
+      event.preventDefault();
+    });;
   }
 
   onProjectLoad(project: Project) {
@@ -308,7 +324,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
   public toggleMovingMode() {
     this.tools.moving = !this.tools.moving;
-    this.toolsService.movingToolActivation(this.tools.moving);
+    this.movingEventSource.movingModeState.emit(this.tools.moving);
+    
     if (!this.readonly) {
       this.tools.selection = !this.tools.moving;
       this.toolsService.selectionToolActivation(this.tools.selection);
@@ -374,6 +391,22 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.drawTools.visibility = true;
   }
 
+  zoomIn() {
+    this.mapScaleService.setScale(this.mapScaleService.getScale() + 0.1);
+  }
+
+  zoomOut() {
+    let currentScale = this.mapScaleService.getScale();
+
+    if ((currentScale - 0.1) > 0) {
+      this.mapScaleService.setScale(currentScale - 0.1);
+    }
+  }
+
+  resetZoom() {
+    this.mapScaleService.resetToDefault();
+  }
+  
   public uploadImageFile(event) {
     this.readImageFile(event.target);
   }

src/app/services/mapScale.service.ts

@@ -0,0 +1,30 @@
+import { Injectable, EventEmitter } from '@angular/core';
+import { Context } from '../cartography/models/context';
+
+@Injectable()
+export class MapScaleService {
+    public currentScale: number;
+    public scaleChangeEmitter = new EventEmitter();
+
+    constructor(
+        private context: Context
+    ) {
+        this.currentScale = 1;
+    }
+
+    getScale() {
+        return this.currentScale;
+    }
+
+    setScale(newScale: number) {
+        this.currentScale = newScale;
+        this.context.transformation.k = this.currentScale;
+        this.scaleChangeEmitter.emit(this.currentScale);
+    }
+
+    resetToDefault() {
+        this.currentScale = 1;
+        this.context.transformation.k = this.currentScale;
+        this.scaleChangeEmitter.emit(this.currentScale);
+    }
+}