Migration to mousetrap

src/app/app.module.ts

@@ -7,7 +7,6 @@ import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { D3Service } from 'd3-ng2-service';
-import { HotkeyModule } from 'angular2-hotkeys';
 import { PersistenceModule } from 'angular-persistence';
 import { NgxElectronModule } from 'ngx-electron';
 import { FileUploadModule } from 'ng2-file-upload';
@@ -54,7 +53,6 @@ import { DrawingsDataSource } from './cartography/datasources/drawings-datasourc
 import { EditStyleActionComponent } from './components/project-map/context-menu/actions/edit-style-action/edit-style-action.component';
 import { MoveLayerDownActionComponent } from './components/project-map/context-menu/actions/move-layer-down-action/move-layer-down-action.component';
 import { MoveLayerUpActionComponent } from './components/project-map/context-menu/actions/move-layer-up-action/move-layer-up-action.component';
-import { ProjectMapShortcutsComponent } from './components/project-map/project-map-shortcuts/project-map-shortcuts.component';
 import { SettingsComponent } from './components/settings/settings.component';
 import { SettingsService } from './services/settings.service';
 
@@ -316,7 +314,6 @@ import { UpdatesService } from './services/updates.service';
     StopCaptureActionComponent,
     ResumeLinkActionComponent,
     SuspendLinkActionComponent,
-    ProjectMapShortcutsComponent,
     SettingsComponent,
     PreferencesComponent,
     BundledServerFinderComponent,
@@ -482,7 +479,6 @@ import { UpdatesService } from './services/updates.service';
     BrowserAnimationsModule,
     CdkTableModule,
     CartographyModule,
-    HotkeyModule.forRoot(),
     PersistenceModule,
     NgxElectronModule,
     FileUploadModule,

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

@@ -1,114 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { inject } from '@angular/core/testing';
-
-import { mock, instance, capture, when, anything } from 'ts-mockito';
-import { HotkeyModule, HotkeysService, Hotkey } from 'angular2-hotkeys';
-import { of } from 'rxjs';
-
-import { ProjectMapShortcutsComponent } from './project-map-shortcuts.component';
-import { ToasterService } from '../../../services/toaster.service';
-import { NodeService } from '../../../services/node.service';
-import { HttpServer } from '../../../services/http-server.service';
-import { SelectionManager } from '../../../cartography/managers/selection-manager';
-import { Server } from '../../../models/server';
-import { Project } from '../../../models/project';
-import { ProjectService } from '../../../services/project.service';
-import { MockedProjectService } from '../../../services/project.service.spec';
-import { SettingsService } from '../../../services/settings.service';
-import { MockedToasterService } from '../../../services/toaster.service.spec';
-import { mapTo } from 'rxjs/internal/operators';
-import { MapNodeToNodeConverter } from '../../../cartography/converters/map/map-node-to-node-converter';
-import { MapNode } from '../../../cartography/models/map/map-node';
-import { MapLabelToLabelConverter } from '../../../cartography/converters/map/map-label-to-label-converter';
-import { MapPortToPortConverter } from '../../../cartography/converters/map/map-port-to-port-converter';
-import { Node } from '../../../cartography/models/node';
-import { FontBBoxCalculator } from '../../../cartography/helpers/font-bbox-calculator';
-import { CssFixer } from '../../../cartography/helpers/css-fixer';
-import { FontFixer } from '../../../cartography/helpers/font-fixer';
-
-describe('ProjectMapShortcutsComponent', () => {
-  let component: ProjectMapShortcutsComponent;
-  let fixture: ComponentFixture<ProjectMapShortcutsComponent>;
-  let hotkeyServiceMock: HotkeysService;
-  let hotkeyServiceInstanceMock: HotkeysService;
-  let nodeServiceMock: NodeService;
-  let node: MapNode;
-
-  beforeEach(async(() => {
-    node = new MapNode();
-    const selectionManagerMock = mock(SelectionManager);
-    when(selectionManagerMock.getSelected()).thenReturn([node]);
-
-    nodeServiceMock = mock(NodeService);
-    hotkeyServiceMock = mock(HotkeysService);
-    hotkeyServiceInstanceMock = instance(hotkeyServiceMock);
-    TestBed.configureTestingModule({
-      imports: [HotkeyModule.forRoot(), HttpClientTestingModule],
-      providers: [
-        HttpServer,
-        { provide: NodeService, useFactory: () => instance(nodeServiceMock) },
-        { provide: HotkeysService, useFactory: () => hotkeyServiceInstanceMock },
-        { provide: ToasterService, useClass: MockedToasterService },
-        { provide: ProjectService, useClass: MockedProjectService },
-        { provide: SelectionManager, useValue: instance(selectionManagerMock) },
-        SettingsService,
-        MapNodeToNodeConverter,
-        MapLabelToLabelConverter,
-        MapPortToPortConverter,
-        MapLabelToLabelConverter,
-        FontBBoxCalculator,
-        CssFixer,
-        FontFixer
-      ],
-      declarations: [ProjectMapShortcutsComponent]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ProjectMapShortcutsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should bind delete key', () => {
-    component.ngOnInit();
-    const [hotkey] = capture(hotkeyServiceMock.add).last();
-    expect((hotkey as Hotkey).combo).toEqual(['del']);
-    expect((hotkey as Hotkey).callback).toBeDefined();
-  });
-
-  it('should remove binding', () => {
-    component.ngOnDestroy();
-    const [hotkey] = capture(hotkeyServiceMock.remove).last();
-    expect((hotkey as Hotkey).combo).toEqual(['del']);
-  });
-
-  describe('onDeleteHandler', () => {
-    beforeEach(() => {
-      const server = new Server();
-      const project = new Project();
-
-      when(nodeServiceMock.delete(server, anything())).thenReturn(of(new Node()).pipe(mapTo(null)));
-
-      component.project = project;
-      component.server = server;
-    });
-
-    it('should handle delete', inject([ToasterService], (toaster: MockedToasterService) => {
-      component.project.readonly = false;
-      component.onDeleteHandler(null);
-      expect(toaster.successes).toEqual(['Node has been deleted']);
-    }));
-
-    it('should not delete when project in readonly mode', inject([ToasterService], (toaster: MockedToasterService) => {
-      component.project.readonly = true;
-      component.onDeleteHandler(null);
-      expect(toaster.successes).toEqual([]);
-    }));
-  });
-});

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

@@ -1,59 +0,0 @@
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
-import { HotkeysService, Hotkey } from 'angular2-hotkeys';
-
-import { SelectionManager } from '../../../cartography/managers/selection-manager';
-import { NodeService } from '../../../services/node.service';
-import { Server } from '../../../models/server';
-import { ToasterService } from '../../../services/toaster.service';
-import { Project } from '../../../models/project';
-import { ProjectService } from '../../../services/project.service';
-import { MapNode } from '../../../cartography/models/map/map-node';
-import { MapNodeToNodeConverter } from '../../../cartography/converters/map/map-node-to-node-converter';
-
-@Component({
-  selector: 'app-project-map-shortcuts',
-  template: ''
-})
-export class ProjectMapShortcutsComponent implements OnInit, OnDestroy {
-  @Input() project: Project;
-  @Input() server: Server;
-
-  private deleteHotkey: Hotkey;
-
-  constructor(
-    private hotkeysService: HotkeysService,
-    private toaster: ToasterService,
-    private nodesService: NodeService,
-    private projectService: ProjectService,
-    private mapNodeToNode: MapNodeToNodeConverter,
-    private selectionManager: SelectionManager
-  ) {}
-
-  ngOnInit() {
-    const self = this;
-    this.deleteHotkey = new Hotkey('del', (event: KeyboardEvent) => {
-      return self.onDeleteHandler(event);
-    });
-    this.hotkeysService.add(this.deleteHotkey);
-  }
-
-  onDeleteHandler(event: KeyboardEvent): boolean {
-    if (!this.projectService.isReadOnly(this.project)) {
-      const selected = this.selectionManager.getSelected();
-
-      selected
-        .filter(item => item instanceof MapNode)
-        .forEach((item: MapNode) => {
-          const node = this.mapNodeToNode.convert(item);
-          this.nodesService.delete(this.server, node).subscribe(data => {
-            this.toaster.success('Node has been deleted');
-          });
-        });
-    }
-    return false;
-  }
-
-  ngOnDestroy() {
-    this.hotkeysService.remove(this.deleteHotkey);
-  }
-}

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

@@ -193,7 +193,6 @@
 </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>
 
 <app-drawing-dragged [server]="server" [project]="project"></app-drawing-dragged>

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

@@ -330,6 +330,20 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       event.preventDefault();
       this.router.navigate(['/server', this.server.id, 'preferences']);
     });
+
+    Mousetrap.bind('del', (event: Event) => {
+      event.preventDefault();
+      const selected = this.selectionManager.getSelected();
+
+      selected
+        .filter(item => item instanceof MapNode)
+        .forEach((item: MapNode) => {
+          const node = this.mapNodeToNode.convert(item);
+          this.nodeService.delete(this.server, node).subscribe(data => {
+            this.toasterService.success('Node has been deleted');
+          });
+        });
+    });
   }
 
   onProjectLoad(project: Project) {