Keyboard shortcuts added

This commit is contained in:
Piotr Pekala 2019-08-01 09:10:51 -07:00
parent 8da7311fa4
commit d94f6d3d7d
4 changed files with 59 additions and 5 deletions

View File

@ -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() {

View File

@ -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>

View File

@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProjectMapComponent } from './project-map.component';
import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
import { Router } from '@angular/router';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ServerService } from '../../services/server.service';
import { ProjectService } from '../../services/project.service';
@ -52,6 +53,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 { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource } from '../../cartography/datasources/map-datasource';
import { MockedRouter } from '../../common/progress/progress.component.spec';
export class MockedProgressService {
public activate() {}
@ -201,6 +204,7 @@ describe('ProjectMapComponent', () => {
let nodesDataSource = new MockedNodesDataSource();
let linksDataSource = new MockedLinksDataSource();
let mockedToasterService = new MockedToasterService();
let router = new MockedRouter();
let nodeCreatedLabelStylesFixer;
beforeEach(async(() => {
@ -245,7 +249,12 @@ describe('ProjectMapComponent', () => {
{ provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer},
{ provide: MapScaleService },
{ provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer},
{ provide: ToasterService, useValue: mockedToasterService }
{ provide: ToasterService, useValue: mockedToasterService },
{ provide: MapNodesDataSource, useClass: MapNodesDataSource },
{ provide: MapLinksDataSource, useClass: LinksDataSource },
{ provide: MapDrawingsDataSource, useClass: MapDrawingsDataSource },
{ provide: MapSymbolsDataSource, useClass: MapSymbolsDataSource },
{ provide: Router, useValue: router}
],
declarations: [ProjectMapComponent, ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
schemas: [NO_ERRORS_SCHEMA]

View File

@ -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 mapNodesDataSource: MapNodesDataSource,
private mapLinksDataSource: MapLinksDataSource,
private mapDrawingsDataSource: MapDrawingsDataSource,
private mapSymbolsDataSource: MapSymbolsDataSource,
private router: Router
) {}
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) {