Merge branch 'master' into Changing-scrollbar-style-to-modern-look

src/app/app.module.ts

@@ -191,6 +191,7 @@ import { DuplicateActionComponent } from './components/project-map/context-menu/
 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';
+import { BringToFrontActionComponent } from './components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -312,7 +313,8 @@ if (environment.production) {
     ConsoleComponent,
     NodesMenuComponent,
     ProjectMapMenuComponent,
-    HelpComponent
+    HelpComponent,
+    BringToFrontActionComponent
   ],
   imports: [
     BrowserModule,

src/app/common/progress/progress.component.spec.ts

@@ -7,7 +7,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { Router } from '@angular/router';
 import { BehaviorSubject, Observable } from 'rxjs';
 
-class MockedRouter {
+export class MockedRouter {
   events: BehaviorSubject<boolean>;
 
   constructor() {

src/app/components/help/help.component.html

@@ -3,6 +3,19 @@
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-accordion>
+                <mat-expansion-panel>
+                    <mat-expansion-panel-header>
+                        <mat-panel-title> Useful shortcuts </mat-panel-title>
+                    </mat-expansion-panel-header>
+                    <mat-list>
+                        <mat-list-item> ctrl + + to zoom in </mat-list-item>
+                        <mat-list-item> ctrl + - to zoom out </mat-list-item>
+                        <mat-list-item> ctrl + 0 to reset zoom </mat-list-item>
+                        <mat-list-item> ctrl + a to select all items on map </mat-list-item>
+                        <mat-list-item> ctrl + shift + a to deselect all items on map </mat-list-item>
+                        <mat-list-item> ctrl + shift + s to go to preferences </mat-list-item>
+                    </mat-list>
+                </mat-expansion-panel>
                 <mat-expansion-panel>
                     <mat-expansion-panel-header>
                         <mat-panel-title> Third party components </mat-panel-title>

src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.html

@@ -0,0 +1,4 @@
+<button mat-menu-item (click)="bringToFront()">
+    <mat-icon>vertical_align_top</mat-icon>
+    <span>Bring to front</span>
+</button>

src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.spec.ts

@@ -0,0 +1,66 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BringToFrontActionComponent } from './bring-to-front-action.component';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MockedDrawingService, MockedDrawingsDataSource, MockedNodesDataSource, MockedNodeService } from '../../../project-map.component.spec';
+import { DrawingService } from '../../../../../services/drawing.service';
+import { NodesDataSource } from '../../../../../cartography/datasources/nodes-datasource';
+import { DrawingsDataSource } from '../../../../../cartography/datasources/drawings-datasource';
+import { NodeService } from '../../../../../services/node.service';
+import { Node } from '../../../../../cartography/models/node';
+import { of } from 'rxjs';
+import { ComponentFactoryResolver } from '@angular/core';
+import { Drawing } from '../../../../../cartography/models/drawing';
+
+describe('BringToFrontActionComponent', () => {
+  let component: BringToFrontActionComponent;
+  let fixture: ComponentFixture<BringToFrontActionComponent>;
+  let drawingService = new MockedDrawingService();
+  let drawingsDataSource = new MockedDrawingsDataSource();
+  let nodeService  = new MockedNodeService();
+  let nodesDataSource = new MockedNodesDataSource();
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+        imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
+        providers: [
+            { provide: DrawingService, useValue: drawingService },
+            { provide: DrawingsDataSource, useValue: drawingsDataSource },
+            { provide: NodeService, useValue: nodeService },
+            { provide: NodesDataSource, useValue: nodesDataSource },
+          ],
+        declarations: [BringToFrontActionComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BringToFrontActionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call node service when bring to front action called', () => {
+    spyOn(nodeService, 'update').and.returnValue(of());
+    component.nodes = [{z: 0} as Node];
+    component.drawings = [];
+
+    component.bringToFront();
+
+    expect(nodeService.update).toHaveBeenCalled();
+  });
+
+  it('should call drawing service when bring to front action called', () => {
+    spyOn(drawingService, 'update').and.returnValue(of());
+    component.nodes = [];
+    component.drawings = [{z: 0} as Drawing];
+
+    component.bringToFront();
+
+    expect(drawingService.update).toHaveBeenCalled();
+  });
+});

src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Server } from '../../../../../models/server';
+import { Node } from '../../../../../cartography/models/node';
+import { NodesDataSource } from '../../../../../cartography/datasources/nodes-datasource';
+import { NodeService } from '../../../../../services/node.service';
+import { Drawing } from '../../../../../cartography/models/drawing';
+import { DrawingsDataSource } from '../../../../../cartography/datasources/drawings-datasource';
+import { DrawingService } from '../../../../../services/drawing.service';
+
+@Component({
+  selector: 'app-bring-to-front-action',
+  templateUrl: './bring-to-front-action.component.html'
+})
+export class BringToFrontActionComponent implements OnInit {
+  @Input() server: Server;
+  @Input() nodes: Node[];
+  @Input() drawings: Drawing[];
+
+  constructor(
+    private nodesDataSource: NodesDataSource,
+    private drawingsDataSource: DrawingsDataSource,
+    private nodeService: NodeService,
+    private drawingService: DrawingService
+  ) {}
+
+  ngOnInit() {}
+
+  bringToFront() {
+    this.nodes.forEach((node) => {
+      node.z = 100;
+      this.nodesDataSource.update(node);
+
+      this.nodeService.update(this.server, node).subscribe((node: Node) => {});
+    });
+
+    this.drawings.forEach((drawing) => {
+      drawing.z = 100;
+      this.drawingsDataSource.update(drawing);
+
+      this.drawingService.update(this.server, drawing).subscribe((drawing: Drawing) => {});
+    });
+  }
+}

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

@@ -44,6 +44,12 @@
       [nodes]="nodes"
       [drawings]="drawings"
     ></app-move-layer-down-action>
+    <app-bring-to-front-action
+      *ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length) && labels.length===0"
+      [server]="server"
+      [nodes]="nodes"
+      [drawings]="drawings"
+    ></app-bring-to-front-action>
     <app-start-capture-action
       *ngIf="!projectService.isReadOnly(project) && isBundledServer 
       && drawings.length===0 && nodes.length===0 && links.length===1"

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

@@ -46,6 +46,10 @@
           <mat-icon>developer_board</mat-icon>
           <span>Servers</span>
         </button>
+        <button mat-menu-item (click)="deleteProject()">
+          <mat-icon>delete</mat-icon>
+          <span>Delete project</span>
+        </button>
       </mat-menu>
 
       <mat-toolbar-row>

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

@@ -20,7 +20,7 @@ import { DrawingsDataSource } from '../../cartography/datasources/drawings-datas
 import { CommonModule } from '@angular/common';
 import { ANGULAR_MAP_DECLARATIONS } from '../../cartography/angular-map.imports';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { MockedSettingsService } from '../../services/settings.service.spec';
 import { MockedServerService } from '../../services/server.service.spec';
 import { MockedProjectService } from '../../services/project.service.spec';
@@ -52,6 +52,8 @@ import { MapSettingService } from '../../services/mapsettings.service';
 import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
 import { MockedToasterService } from '../../services/toaster.service.spec';
 import { ToasterService } from '../../services/toaster.service';
+import { MockedActivatedRoute } from '../snapshots/list-of-snapshots/list-of-snaphshots.component.spec';
+import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource } from '../../cartography/datasources/map-datasource';
 
 export class MockedProgressService {
   public activate() {}
@@ -94,6 +96,10 @@ export class MockedNodeService {
   duplicate(server: Server, node: Node) {
     return of(node);
   }
+  
+  update(server: Server, node: Node) {
+    return of(node);
+  }
 }
 
 export class MockedDrawingService {
@@ -202,6 +208,7 @@ describe('ProjectMapComponent', () => {
   let linksDataSource = new MockedLinksDataSource();
   let mockedToasterService = new MockedToasterService();
   let nodeCreatedLabelStylesFixer;
+  let mockedRouter = new MockedActivatedRoute;
 
   beforeEach(async(() => {
     nodeCreatedLabelStylesFixer = {
@@ -245,7 +252,12 @@ describe('ProjectMapComponent', () => {
         { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer},
         { provide: MapScaleService },
         { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer},
-        { provide: ToasterService, useValue: mockedToasterService }
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: Router, useValue: mockedRouter },
+        { provide: MapNodesDataSource, useClass: MapNodesDataSource },
+        { provide: MapLinksDataSource, useClass: LinksDataSource },
+        { provide: MapDrawingsDataSource, useClass: MapDrawingsDataSource },
+        { provide: MapSymbolsDataSource, useClass: MapSymbolsDataSource }
       ],
       declarations: [ProjectMapComponent, ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
       schemas: [NO_ERRORS_SCHEMA]

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

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 
 import { Observable, Subject, Subscription, from } from 'rxjs';
 import { webSocket } from 'rxjs/webSocket';
@@ -51,6 +51,7 @@ import { LabelWidget } from '../../cartography/widgets/label';
 import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map/map-link-node-to-link-node-converter';
 import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
 import { ToasterService } from '../../services/toaster.service';
+import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
 
 
 @Component({
@@ -115,7 +116,12 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private movingEventSource: MovingEventSource,
     private mapScaleService: MapScaleService,
     private nodeCreatedLabelStylesFixer: NodeCreatedLabelStylesFixer,
-    private toasterService: ToasterService
+    private toasterService: ToasterService,
+    private router: Router,
+    private mapNodesDataSource: MapNodesDataSource,
+    private mapLinksDataSource: MapLinksDataSource,
+    private mapDrawingsDataSource: MapDrawingsDataSource,
+    private mapSymbolsDataSource: MapSymbolsDataSource
   ) {}
 
   ngOnInit() {
@@ -196,11 +202,37 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   addKeyboardListeners() {
     Mousetrap.bind('ctrl++', (event: Event) => {
       event.preventDefault();
+      this.zoomIn();
     });
 
     Mousetrap.bind('ctrl+-', (event: Event) => {
       event.preventDefault();
-    });;
+      this.zoomOut();
+    });
+
+    Mousetrap.bind('ctrl+0', (event: Event) => {
+      event.preventDefault();
+      this.resetZoom();
+    });
+
+    Mousetrap.bind('ctrl+a', (event: Event) => {
+      event.preventDefault();
+      let allNodes: Indexed[] = this.mapNodesDataSource.getItems();
+      let allDrawings: Indexed[] = this.mapDrawingsDataSource.getItems();
+      let allLinks: Indexed[] = this.mapLinksDataSource.getItems();
+      let allSymbols: Indexed[] = this.mapSymbolsDataSource.getItems();
+      this.selectionManager.setSelected(allNodes.concat(allDrawings).concat(allLinks).concat(allSymbols));
+    });
+
+    Mousetrap.bind('ctrl+shift+a', (event: Event) => {
+      event.preventDefault();
+      this.selectionManager.setSelected([]);
+    });
+
+    Mousetrap.bind('ctrl+shift+s', (event: Event) => {
+      event.preventDefault();
+      this.router.navigate(['/server', this.server.id, 'preferences']);
+    });
   }
 
   onProjectLoad(project: Project) {
@@ -408,6 +440,12 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     imageToUpload.src = window.URL.createObjectURL(file);
   }
 
+  public deleteProject() {
+    this.projectService.delete(this.server, this.project.project_id).subscribe(() => {
+      this.router.navigate(['/server', this.server.id, 'projects']);
+    });
+  }
+
   public ngOnDestroy() {
     this.drawingsDataSource.clear();
     this.nodesDataSource.clear();