Zoom buttons added

src/app/app.module.ts

@@ -177,6 +177,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';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -360,7 +361,8 @@ if (environment.production) {
     IouService,
     IouConfigurationService,
     RecentlyOpenedProjectService,
-    ServerManagementService
+    ServerManagementService,
+    MapScaleService
   ],
   entryComponents: [
     AddServerDialogComponent,

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,6 +121,10 @@ 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.mapChangeDetectorRef.detectChanges();

src/app/cartography/widgets/link.ts

@@ -11,6 +11,7 @@ import { MapLink } from '../models/map/map-link';
 import { SelectionManager } from '../managers/selection-manager';
 import { event } from 'd3-selection';
 import { LinkContextMenu } from '../events/event-source';
+import { MapScaleService } from '../../services/mapScale.service';
 
 @Injectable()
 export class LinkWidget implements Widget {
@@ -20,7 +21,8 @@ export class LinkWidget implements Widget {
     private multiLinkCalculatorHelper: MultiLinkCalculatorHelper,
     private interfaceLabelWidget: InterfaceLabelWidget,
     private interfaceStatusWidget: InterfaceStatusWidget,
-    private selectionManager: SelectionManager
+    private selectionManager: SelectionManager,
+    private mapScaleService: MapScaleService
   ) {}
 
   public draw(view: SVGSelection) {
@@ -29,7 +31,8 @@ export class LinkWidget implements Widget {
     const link_body_enter = link_body
       .enter()
       .append<SVGGElement>('g')
-      .attr('class', 'link_body');
+      .attr('class', 'link_body')
+      .attr('transform', `scale(${this.mapScaleService.getScale()})`);;
 
     const link_body_merge = link_body.merge(link_body_enter).attr('transform', link => {
       const translation = this.multiLinkCalculatorHelper.linkTranslation(link.distance, link.source, link.target);

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

@@ -139,6 +139,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

@@ -89,6 +89,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

@@ -43,6 +43,7 @@ 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';
 
 export class MockedProgressService {
   public activate() {}
@@ -216,6 +217,7 @@ describe('ProjectMapComponent', () => {
           provide: RecentlyOpenedProjectService,
           useClass: RecentlyOpenedProjectService
         },
+        { provide: MapScaleService }
       ],
       declarations: [ProjectMapComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
       schemas: [NO_ERRORS_SCHEMA]

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

@@ -44,6 +44,7 @@ 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';
 
 
 @Component({
@@ -110,7 +111,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private selectionManager: SelectionManager,
     private selectionTool: SelectionTool,
     private recentlyOpenedProjectService: RecentlyOpenedProjectService,
-    private movingEventSource: MovingEventSource
+    private movingEventSource: MovingEventSource,
+    private mapScaleService: MapScaleService
   ) {}
 
   ngOnInit() {
@@ -381,6 +383,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 ngOnDestroy() {
     this.drawingsDataSource.clear();
     this.nodesDataSource.clear();

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);
+    }
+}