From 3c05b470320fb645c99c57be54ff76d520e643d4 Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Wed, 3 Apr 2019 03:31:14 -0700 Subject: [PATCH] Zoom buttons added --- src/app/app.module.ts | 4 +- .../components/d3-map/d3-map.component.ts | 8 +++- src/app/cartography/widgets/link.ts | 7 +++- .../project-map/project-map.component.html | 6 +++ .../project-map/project-map.component.scss | 38 +++++++++++++++++++ .../project-map/project-map.component.spec.ts | 2 + .../project-map/project-map.component.ts | 20 +++++++++- src/app/services/mapScale.service.ts | 30 +++++++++++++++ 8 files changed, 110 insertions(+), 5 deletions(-) create mode 100644 src/app/services/mapScale.service.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index eab5be9e..fbdbd089 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -177,6 +177,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'; if (environment.production) { Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', { @@ -360,7 +361,8 @@ if (environment.production) { IouService, IouConfigurationService, RecentlyOpenedProjectService, - ServerManagementService + ServerManagementService, + MapScaleService ], entryComponents: [ AddServerDialogComponent, diff --git a/src/app/cartography/components/d3-map/d3-map.component.ts b/src/app/cartography/components/d3-map/d3-map.component.ts index 61ff692c..f4e78aab 100644 --- a/src/app/cartography/components/d3-map/d3-map.component.ts +++ b/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,6 +121,10 @@ 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.mapChangeDetectorRef.detectChanges(); diff --git a/src/app/cartography/widgets/link.ts b/src/app/cartography/widgets/link.ts index 5874574a..0b8dd7fe 100644 --- a/src/app/cartography/widgets/link.ts +++ b/src/app/cartography/widgets/link.ts @@ -11,6 +11,7 @@ import { MapLink } from '../models/map/map-link'; import { SelectionManager } from '../managers/selection-manager'; import { event } from 'd3-selection'; import { LinkContextMenu } from '../events/event-source'; +import { MapScaleService } from '../../services/mapScale.service'; @Injectable() export class LinkWidget implements Widget { @@ -20,7 +21,8 @@ export class LinkWidget implements Widget { private multiLinkCalculatorHelper: MultiLinkCalculatorHelper, private interfaceLabelWidget: InterfaceLabelWidget, private interfaceStatusWidget: InterfaceStatusWidget, - private selectionManager: SelectionManager + private selectionManager: SelectionManager, + private mapScaleService: MapScaleService ) {} public draw(view: SVGSelection) { @@ -29,7 +31,8 @@ export class LinkWidget implements Widget { const link_body_enter = link_body .enter() .append('g') - .attr('class', 'link_body'); + .attr('class', 'link_body') + .attr('transform', `scale(${this.mapScaleService.getScale()})`);; const link_body_merge = link_body.merge(link_body_enter).attr('transform', link => { const translation = this.multiLinkCalculatorHelper.linkTranslation(link.distance, link.source, link.target); diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index eceb368e..90b41696 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -139,6 +139,12 @@ +
+ + + +
+ diff --git a/src/app/components/project-map/project-map.component.scss b/src/app/components/project-map/project-map.component.scss index 2815ca1a..58bde722 100644 --- a/src/app/components/project-map/project-map.component.scss +++ b/src/app/components/project-map/project-map.component.scss @@ -89,6 +89,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 { diff --git a/src/app/components/project-map/project-map.component.spec.ts b/src/app/components/project-map/project-map.component.spec.ts index 57b4eab7..8abd13ff 100644 --- a/src/app/components/project-map/project-map.component.spec.ts +++ b/src/app/components/project-map/project-map.component.spec.ts @@ -43,6 +43,7 @@ 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'; export class MockedProgressService { public activate() {} @@ -216,6 +217,7 @@ describe('ProjectMapComponent', () => { provide: RecentlyOpenedProjectService, useClass: RecentlyOpenedProjectService }, + { provide: MapScaleService } ], declarations: [ProjectMapComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS], schemas: [NO_ERRORS_SCHEMA] diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index b6e4fb12..541ec371 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -44,6 +44,7 @@ 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'; @Component({ @@ -110,7 +111,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy { private selectionManager: SelectionManager, private selectionTool: SelectionTool, private recentlyOpenedProjectService: RecentlyOpenedProjectService, - private movingEventSource: MovingEventSource + private movingEventSource: MovingEventSource, + private mapScaleService: MapScaleService ) {} ngOnInit() { @@ -381,6 +383,22 @@ export class ProjectMapComponent implements OnInit, OnDestroy { this.drawTools.visibility = 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 ngOnDestroy() { this.drawingsDataSource.clear(); this.nodesDataSource.clear(); diff --git a/src/app/services/mapScale.service.ts b/src/app/services/mapScale.service.ts new file mode 100644 index 00000000..cae1ad87 --- /dev/null +++ b/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); + } +}