Merge branch 'Lock/unlock-all-items-on-map' into Moving-the-menu-code-from-the-project-map-component

src/app/app-routing.module.ts

@@ -52,6 +52,7 @@ import { CopyDockerTemplateComponent } from './components/preferences/docker/cop
 import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component';
 import { ListOfSnapshotsComponent } from './components/snapshots/list-of-snapshots/list-of-snapshots.component';
 import { ConsoleComponent } from './components/settings/console/console.component';
+import { HelpComponent } from './components/help/help.component';
 
 const routes: Routes = [
   {
@@ -62,6 +63,7 @@ const routes: Routes = [
       { path: 'servers', component: ServersComponent },
       { path: 'bundled', component: BundledServerFinderComponent },
       { path: 'server/:server_id/projects', component: ProjectsComponent },
+      { path: 'help', component: HelpComponent },
       { path: 'settings', component: SettingsComponent },
       { path: 'settings/console', component: ConsoleComponent },
       { path: 'installed-software', component: InstalledSoftwareComponent },

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';
@@ -188,6 +189,7 @@ import { NonNegativeValidator } from './validators/non-negative-validator';
 import { RotationValidator } from './validators/rotation-validator';
 import { MapSettingService } from './services/mapsettings.service';
 import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component';
+import { HelpComponent } from './components/help/help.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -307,7 +309,8 @@ if (environment.production) {
     ConsoleDeviceActionComponent,
     ConsoleComponent,
     NodesMenuComponent,
-    ProjectMapMenuComponent
+    ProjectMapMenuComponent,
+    HelpComponent
   ],
   imports: [
     BrowserModule,
@@ -377,6 +380,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/link-created/link-created.component.ts

@@ -35,12 +35,48 @@ export class LinkCreatedComponent implements OnInit, OnDestroy {
   }
 
   onLinkCreated(linkCreated: MapLinkCreated) {
+    const xLength = Math.abs(linkCreated.sourceNode.x - linkCreated.targetNode.x);
+    const yLength = Math.abs(linkCreated.sourceNode.y - linkCreated.targetNode.y);
+    const zLength = Math.sqrt(Math.pow(xLength, 2) + Math.pow(yLength, 2));
+    //from law of sines
+    const sinY = yLength/zLength;
+
+    const x = (45 / zLength) * xLength;
+    const y = (45 / zLength) * yLength;
+
+    let xLabelSourceNode = 0;
+    let yLabelSourceNode = 0;
+    let xLabelTargetNode = 0;
+    let yLabelTargetNode = 0;
+
+    if ((linkCreated.sourceNode.x <= linkCreated.targetNode.x) && (linkCreated.sourceNode.y <= linkCreated.targetNode.y)) {
+      xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) + Math.round(x) + 5;
+      yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) + Math.round(y) + 5;
+      xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) - Math.round(x) - 5 - Math.round(20 * sinY);
+      yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) - Math.round(y) + 5 - Math.round(20 * sinY);
+    } else if ((linkCreated.sourceNode.x > linkCreated.targetNode.x) && (linkCreated.sourceNode.y < linkCreated.targetNode.y)) {
+      xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) - Math.round(x) - 5 - Math.round(20 * sinY);
+      yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) + Math.round(y) + 5 - Math.round(20 * sinY);
+      xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) + Math.round(x) + 5;
+      yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) - Math.round(y) - 5;
+    } else if ((linkCreated.sourceNode.x < linkCreated.targetNode.x) && (linkCreated.sourceNode.y > linkCreated.targetNode.y)) {
+      xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) + Math.round(x) + 5 - Math.round(20 * sinY);
+      yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) - Math.round(y) - 5 - Math.round(20 * sinY);
+      xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) - Math.round(x) - 5;
+      yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) + Math.round(y) + 5;
+    } else if ((linkCreated.sourceNode.x >= linkCreated.targetNode.x) && (linkCreated.sourceNode.y >= linkCreated.targetNode.y)) {
+      xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) - Math.round(x) - 5 - Math.round(20 * sinY);
+      yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) - Math.round(y) + 5 - Math.round(20 * sinY);
+      xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) + Math.round(x) + 5;
+      yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) + Math.round(y) + 5;
+    }
+
     const sourceNode = this.mapNodeToNode.convert(linkCreated.sourceNode);
     const sourcePort = this.mapPortToPort.convert(linkCreated.sourcePort);
     const targetNode = this.mapNodeToNode.convert(linkCreated.targetNode);
     const targetPort = this.mapPortToPort.convert(linkCreated.targetPort);
 
-    this.linkService.createLink(this.server, sourceNode, sourcePort, targetNode, targetPort).subscribe(() => {
+    this.linkService.createLink(this.server, sourceNode, sourcePort, targetNode, targetPort, xLabelSourceNode, yLabelSourceNode, xLabelTargetNode, yLabelTargetNode).subscribe(() => {
       this.projectService.links(this.server, this.project.project_id).subscribe((links: Link[]) => {
         this.linksDataSource.set(links);
       });

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/help/help.component.html

@@ -0,0 +1,15 @@
+<div class="content">
+    <div class="default-header"><h1>Help</h1></div>
+    <div class="default-content">
+        <div class="container mat-elevation-z8">
+            <mat-accordion>
+                <mat-expansion-panel>
+                    <mat-expansion-panel-header>
+                        <mat-panel-title> Third party components </mat-panel-title>
+                    </mat-expansion-panel-header>
+                    <div [innerHTML]="thirdpartylicenses"></div>
+                </mat-expansion-panel>
+            </mat-accordion>
+        </div>
+    </div>
+</div>

src/app/components/help/help.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+selector: 'app-help',
+templateUrl: './help.component.html',
+styleUrls: ['./help.component.scss']
+})
+export class HelpComponent implements OnInit {
+    thirdpartylicenses = '';
+
+    constructor(
+        private httpClient: HttpClient
+    ) {}
+
+    ngOnInit() {
+        this.httpClient.get('/3rdpartylicenses.txt', {responseType: 'text'})
+            .subscribe(data => {
+                this.thirdpartylicenses = data.replace(new RegExp('\n', 'g'), "<br />")
+            },
+            error => {
+                if (error.status === 404) {
+                    this.thirdpartylicenses = 'File not found';
+                } 
+            });
+    }
+}

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

@@ -100,6 +100,13 @@
 
   <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>
 <app-draw-link-tool [links]="links" *ngIf="tools.draw_link"></app-draw-link-tool>

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';
 import { MapSettingService } from '../../services/mapsettings.service';
 import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
@@ -218,10 +220,13 @@ describe('ProjectMapComponent', () => {
         { provide: ToolsService },
         { provide: SelectionManager },
         { provide: SelectionTool },
+        { provide: MovingEventSource },
         {
           provide: RecentlyOpenedProjectService,
           useClass: RecentlyOpenedProjectService
         },
+        { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer},
+        { provide: MapScaleService },
         { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer}
       ],
       declarations: [ProjectMapComponent, ProjectMapMenuComponent, 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';
 import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
 
@@ -103,6 +105,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
   ) {}
 
@@ -177,6 +181,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) {
@@ -301,7 +317,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);
@@ -326,6 +343,43 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.isProjectMapMenuVisible = 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);
+  }
+
+  private readImageFile(fileInput) {
+    let file: File = fileInput.files[0];
+    let fileReader: FileReader = new FileReader();
+    let imageToUpload = new Image();
+
+    fileReader.onloadend = () => {
+      let image = fileReader.result;
+      let svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" 
+                height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\">\n<image height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\" 
+                xlink:href=\"${image}\"/>\n</svg>`;
+      this.drawingService.add(this.server, this.project.project_id, -(imageToUpload.width/2), -(imageToUpload.height/2), svg).subscribe(() => {});
+    }
+        
+    imageToUpload.onload = () => { fileReader.readAsDataURL(file) };
+    imageToUpload.src = window.URL.createObjectURL(file);
+  }
+
   public ngOnDestroy() {
     this.drawingsDataSource.clear();
     this.nodesDataSource.clear();

src/app/components/servers/servers.component.html

@@ -13,8 +13,9 @@
         <ng-container matColumnDef="name">
           <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
           <mat-cell *matCellDef="let row">
-            <a [routerLink]="['/server', row.id, 'projects']" class="table-link">{{ row.name }}</a></mat-cell
-          >
+            <a *ngIf="getServerStatus(row) === 'running' || row.location === 'remote'" [routerLink]="['/server', row.id, 'projects']" class="table-link">{{ row.name }}</a>
+            <span *ngIf="getServerStatus(row) != 'running' && row.location !== 'remote'">{{ row.name }}</span>
+          </mat-cell>
         </ng-container>
 
         <ng-container matColumnDef="location">
@@ -42,6 +43,8 @@
             <button mat-icon-button (click)="stopServer(row)" *ngIf="row.location === 'local' && getServerStatus(row) === 'running'">
               <mat-icon aria-label="Stop server">stop</mat-icon>
             </button>
+
+            <mat-spinner [diameter]="24" *ngIf="row.location === 'local' && getServerStatus(row) === 'starting'"></mat-spinner>
             
             <button mat-icon-button (click)="deleteServer(row)">
               <mat-icon aria-label="Remove server">delete</mat-icon>

src/app/components/servers/servers.component.ts

@@ -49,6 +49,9 @@ export class ServersComponent implements OnInit, OnDestroy {
       if(!server) {
         return;
       }
+      if(serverStatus.status === 'starting') {
+        server.status = 'starting';
+      }
       if(serverStatus.status === 'stopped') {
         server.status = 'stopped';
       }

src/app/layouts/default-layout/default-layout.component.html

@@ -21,9 +21,12 @@
         <mat-icon>cloud_download</mat-icon>
         <span>Installed software</span>
       </button>
+      <button mat-menu-item routerLink="/help">
+        <mat-icon>help</mat-icon>
+        <span>Help</span>
+      </button>
     </mat-menu>
 
-
   </mat-toolbar>
 </header>
 
@@ -34,4 +37,3 @@
 <footer class="footer mat-app-background">
   GNS3 Web UI &copy; 2019 - v{{ uiVersion }}
 </footer>
-

src/app/services/link.service.spec.ts

@@ -52,7 +52,7 @@ describe('LinkService', () => {
     targetPort.port_number = 3;
     targetPort.adapter_number = 4;
 
-    service.createLink(server, sourceNode, sourcePort, targetNode, targetPort).subscribe();
+    service.createLink(server, sourceNode, sourcePort, targetNode, targetPort, 0, 0, 10, 10).subscribe();
 
     const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/projects/myproject/links');
     expect(req.request.method).toEqual('POST');
@@ -61,12 +61,26 @@ describe('LinkService', () => {
         {
           node_id: 'sourceid',
           port_number: 1,
-          adapter_number: 2
+          adapter_number: 2,
+          label: {
+            rotation: 0,
+            style: "font-size: 10; font-style: Verdana",
+            text: sourcePort.short_name,
+            x: 0,
+            y: 0
+          }
         },
         {
           node_id: 'targetid',
           port_number: 3,
-          adapter_number: 4
+          adapter_number: 4,
+          label: {
+            rotation: 0,
+            style: "font-size: 10; font-style: Verdana",
+            text: sourcePort.short_name,
+            x: 10,
+            y: 10
+          }
         }
       ]
     });

src/app/services/link.service.ts

@@ -14,18 +14,33 @@ import { CapturingSettings } from '../models/capturingSettings';
 export class LinkService {
   constructor(private httpServer: HttpServer) {}
 
-  createLink(server: Server, source_node: Node, source_port: Port, target_node: Node, target_port: Port) {
+  createLink(server: Server, source_node: Node, source_port: Port, target_node: Node, target_port: Port,
+    xLabelSourceNode: number, yLabelSourceNode: number, xLabelTargetNode: number, yLabelTargetNode: number) {
     return this.httpServer.post(server, `/projects/${source_node.project_id}/links`, {
       nodes: [
         {
           node_id: source_node.node_id,
           port_number: source_port.port_number,
-          adapter_number: source_port.adapter_number
+          adapter_number: source_port.adapter_number,
+          label: {
+            rotation: 0,
+            style: "font-size: 10; font-style: Verdana",
+            text: source_port.short_name,
+            x: xLabelSourceNode,
+            y: yLabelSourceNode
+          }
         },
         {
           node_id: target_node.node_id,
           port_number: target_port.port_number,
-          adapter_number: target_port.adapter_number
+          adapter_number: target_port.adapter_number,
+          label: {
+            rotation: 0,
+            style: "font-size: 10; font-style: Verdana",
+            text: target_port.short_name,
+            x: xLabelTargetNode,
+            y: yLabelTargetNode
+          }
         }
       ]
     });

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

src/app/services/server-management.service.ts

@@ -5,7 +5,7 @@ import { Subject } from 'rxjs';
 
 export interface ServerStateEvent {
   serverName: string;
-  status: "started" | "errored" | "stopped" | "stderr";
+  status: "starting" | "started" | "errored" | "stopped" | "stderr";
   message: string;
 }
 
@@ -29,6 +29,12 @@ export class ServerManagementService implements OnDestroy {
   }
 
   async start(server: Server) {
+    var startingEvent : ServerStateEvent = {
+      serverName: server.name,
+      status: "starting",
+      message: ''
+    };
+    this.serverStatusChanged.next(startingEvent);
     return await this.electronService.remote.require('./local-server.js').startLocalServer(server);
   }