Delete nodes by delete key, Fixes: #86

package.json

@@ -36,6 +36,7 @@
     "@angular/platform-browser-dynamic": "^5.2.1",
     "@angular/router": "^5.2.1",
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
+    "angular2-hotkeys": "^2.0.4",
     "angular2-indexeddb": "^1.2.2",
     "bootstrap": "4.0.0",
     "core-js": "^2.4.1",

src/app/app.module.ts

@@ -24,6 +24,8 @@ import {
 import { D3Service } from 'd3-ng2-service';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
+import { HotkeyModule } from 'angular2-hotkeys';
+
 import { AppRoutingModule } from './app-routing.module';
 
 import { VersionService } from './shared/services/version.service';
@@ -62,6 +64,7 @@ import { InRectangleHelper } from "./cartography/map/helpers/in-rectangle-helper
 import { DrawingsDataSource } from "./cartography/shared/datasources/drawings-datasource";
 import { MoveLayerDownActionComponent } from './shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component';
 import { MoveLayerUpActionComponent } from './shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component';
+import { ProjectMapShortcutsComponent } from './project-map/project-map-shortcuts/project-map-shortcuts.component';
 
 
 @NgModule({
@@ -82,6 +85,7 @@ import { MoveLayerUpActionComponent } from './shared/node-context-menu/actions/m
     NodeSelectInterfaceComponent,
     MoveLayerDownActionComponent,
     MoveLayerUpActionComponent,
+    ProjectMapShortcutsComponent,
   ],
   imports: [
     NgbModule.forRoot(),
@@ -104,7 +108,8 @@ import { MoveLayerUpActionComponent } from './shared/node-context-menu/actions/m
     MatProgressSpinnerModule,
     MatSnackBarModule,
     CdkTableModule,
-    CartographyModule
+    CartographyModule,
+    HotkeyModule.forRoot()
   ],
   providers: [
     D3Service,

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectMapShortcutsComponent } from './project-map-shortcuts.component';
+
+describe('ProjectMapShortcutsComponent', () => {
+  let component: ProjectMapShortcutsComponent;
+  let fixture: ComponentFixture<ProjectMapShortcutsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProjectMapShortcutsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectMapShortcutsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,46 @@
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { HotkeysService, Hotkey } from 'angular2-hotkeys';
+
+import { SelectionManager } from '../../cartography/shared/managers/selection-manager';
+import { NodeService } from '../../shared/services/node.service';
+import { Server } from '../../shared/models/server';
+import { ToasterService } from '../../shared/services/toaster.service';
+
+
+@Component({
+  selector: 'app-project-map-shortcuts',
+  templateUrl: './project-map-shortcuts.component.html',
+  styleUrls: ['./project-map-shortcuts.component.scss']
+})
+export class ProjectMapShortcutsComponent implements OnInit, OnDestroy {
+  @Input() server: Server;
+  @Input() selectionManager: SelectionManager;
+
+  private deleteHotkey: Hotkey;
+
+  constructor(
+    private hotkeysService: HotkeysService,
+    private toaster: ToasterService,
+    private nodesService: NodeService,
+  ) { }
+
+  ngOnInit() {
+    this.deleteHotkey = new Hotkey('del', (event: KeyboardEvent): boolean => {
+      const selectedNodes = this.selectionManager.getSelectedNodes();
+      if (selectedNodes) {
+        selectedNodes.forEach((node) => {
+          this.nodesService.delete(this.server, node).subscribe(data => {
+            this.toaster.success("Node has been deleted");
+          });
+        });
+      }
+      return false;
+    });
+
+    this.hotkeysService.add(this.deleteHotkey);
+  }
+
+  ngOnDestroy() {
+    this.hotkeysService.remove(this.deleteHotkey);
+  }
+}

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

@@ -55,4 +55,4 @@
   </mat-spinner>
 </div>
 
-
+<app-project-map-shortcuts [server]="server" [selectionManager]="selectionManager"></app-project-map-shortcuts>

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

@@ -1,5 +1,6 @@
-import  {Component, Inject, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, Inject, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
+import { HotkeysService } from 'angular2-hotkeys';
 
 import { Observable } from 'rxjs/Observable';
 import { Subject } from "rxjs/Subject";
@@ -41,6 +42,7 @@ import { InRectangleHelper } from "../cartography/map/helpers/in-rectangle-helpe
 import { DrawingsDataSource } from "../cartography/shared/datasources/drawings-datasource";
 
 
+
 @Component({
   selector: 'app-project-map',
   encapsulation: ViewEncapsulation.None,
@@ -60,6 +62,8 @@ export class ProjectMapComponent implements OnInit {
   private drawLineMode =  false;
   private movingMode = false;
 
+  protected selectionManager: SelectionManager;
+
   public isLoading = true;
 
   @ViewChild(MapComponent) mapChild: MapComponent;
@@ -81,8 +85,11 @@ export class ProjectMapComponent implements OnInit {
               private projectWebServiceHandler: ProjectWebServiceHandler,
               protected nodesDataSource: NodesDataSource,
               protected linksDataSource: LinksDataSource,
-              protected drawingsDataSource: DrawingsDataSource
+              protected drawingsDataSource: DrawingsDataSource,
+              protected hotkeysService: HotkeysService
               ) {
+    this.selectionManager = new SelectionManager(
+      this.nodesDataSource, this.linksDataSource, new InRectangleHelper());
   }
 
   ngOnInit() {
@@ -169,14 +176,12 @@ export class ProjectMapComponent implements OnInit {
   }
 
   setUpMapCallbacks(project: Project) {
-    const selectionManager = new SelectionManager(this.nodesDataSource, this.linksDataSource, new InRectangleHelper());
-
     this.mapChild.graphLayout.getNodesWidget().setOnContextMenuCallback((event: any, node: Node) => {
       this.nodeContextMenu.open(node, event.clientY, event.clientX);
     });
 
     this.mapChild.graphLayout.getNodesWidget().setOnNodeClickedCallback((event: any, node: Node) => {
-      selectionManager.setSelectedNodes([node]);
+      this.selectionManager.setSelectedNodes([node]);
       if (this.drawLineMode) {
         this.nodeSelectInterfaceMenu.open(node, event.clientY, event.clientX);
       }
@@ -191,7 +196,7 @@ export class ProjectMapComponent implements OnInit {
         });
     });
 
-    selectionManager.subscribe(this.mapChild.graphLayout.getSelectionTool().rectangleSelected);
+    this.selectionManager.subscribe(this.mapChild.graphLayout.getSelectionTool().rectangleSelected);
   }
 
   onNodeCreation(appliance: Appliance) {

src/app/shared/services/node.service.ts

@@ -51,4 +51,8 @@ export class NodeService {
                 });
   }
 
+  delete(server: Server, node: Node) {
+    return this.httpServer.delete<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`);
+  }
+
 }

yarn.lock

@@ -383,6 +383,10 @@
   dependencies:
     "@types/jasmine" "*"
 
+"@types/mousetrap@^1.5.32":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@types/mousetrap/-/mousetrap-1.6.0.tgz#c3951ab98b88ff6093cd0b1e4f8591af439141b8"
+
 "@types/node@^6.0.46":
   version "6.0.96"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.96.tgz#7bf0bf40d6ce51e93762cc47d010c8cc5ebb2179"
@@ -531,6 +535,13 @@ amqplib@^0.5.2:
     readable-stream "1.x >=1.1.9"
     safe-buffer "^5.0.1"
 
+angular2-hotkeys@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/angular2-hotkeys/-/angular2-hotkeys-2.0.4.tgz#83355f0a65fe484bfdd3d238b6ee96d63526eb91"
+  dependencies:
+    "@types/mousetrap" "^1.5.32"
+    mousetrap "^1.6.0"
+
 angular2-indexeddb@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/angular2-indexeddb/-/angular2-indexeddb-1.2.2.tgz#ec91bd2e94a451013a52060f7df4acb33fcec93b"
@@ -5521,6 +5532,10 @@ module-deps@^4.0.8:
     through2 "^2.0.0"
     xtend "^4.0.0"
 
+mousetrap@^1.6.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.1.tgz#2a085f5c751294c75e7e81f6ec2545b29cbf42d9"
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"