diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 75724c39..9a04aa22 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -180,6 +180,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'; import { AdbutlerComponent } from './components/adbutler/adbutler.component'; import { ConsoleService } from './services/settings/console.service'; import { DefaultConsoleService } from './services/settings/default-console.service'; @@ -376,6 +377,7 @@ if (environment.production) { IouConfigurationService, RecentlyOpenedProjectService, ServerManagementService, + MapScaleService, ConsoleService, DefaultConsoleService, NodeCreatedLabelStylesFixer, diff --git a/src/app/cartography/cartography.module.ts b/src/app/cartography/cartography.module.ts index 4e218c3c..226ebbae 100644 --- a/src/app/cartography/cartography.module.ts +++ b/src/app/cartography/cartography.module.ts @@ -55,6 +55,9 @@ import { RectangleElementFactory } from './helpers/drawings-factory/rectangle-el import { LineElementFactory } from './helpers/drawings-factory/line-element-factory'; import { TextEditorComponent } from './components/text-editor/text-editor.component'; import { DrawingAddingComponent } from './components/drawing-adding/drawing-adding.component'; +import { MovingEventSource } from './events/moving-event-source'; +import { MovingCanvasDirective } from './directives/moving-canvas.directive'; +import { ZoomingCanvasDirective } from './directives/zooming-canvas.directive'; @NgModule({ imports: [CommonModule, MatMenuModule, MatIconModule], @@ -67,7 +70,9 @@ import { DrawingAddingComponent } from './components/drawing-adding/drawing-addi ...ANGULAR_MAP_DECLARATIONS, SelectionControlComponent, SelectionSelectComponent, - DraggableSelectionComponent + DraggableSelectionComponent, + MovingCanvasDirective, + ZoomingCanvasDirective ], providers: [ CssFixer, @@ -87,6 +92,7 @@ import { DrawingAddingComponent } from './components/drawing-adding/drawing-addi DrawingsEventSource, NodesEventSource, LinksEventSource, + MovingEventSource, MapDrawingToSvgConverter, DrawingToMapDrawingConverter, LabelToMapLabelConverter, diff --git a/src/app/cartography/components/d3-map/d3-map.component.html b/src/app/cartography/components/d3-map/d3-map.component.html index 796f4e93..5ca089d5 100644 --- a/src/app/cartography/components/d3-map/d3-map.component.html +++ b/src/app/cartography/components/d3-map/d3-map.component.html @@ -1,4 +1,4 @@ - + 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 4a26de88..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,9 +121,12 @@ 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.movingToolWidget.setEnabled(value); this.mapChangeDetectorRef.detectChanges(); }) ); diff --git a/src/app/cartography/components/drawing-adding/drawing-adding.component.ts b/src/app/cartography/components/drawing-adding/drawing-adding.component.ts index 41782c86..cc380967 100644 --- a/src/app/cartography/components/drawing-adding/drawing-adding.component.ts +++ b/src/app/cartography/components/drawing-adding/drawing-adding.component.ts @@ -25,8 +25,8 @@ export class DrawingAddingComponent implements OnInit, OnDestroy { activate() { let listener = (event: MouseEvent) => { - let x = event.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x); - let y = event.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y); + let x = (event.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x))/this.context.transformation.k; + let y = (event.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y))/this.context.transformation.k; this.drawingsEventSource.pointToAddSelected.emit(new AddedDataEvent(x, y)); this.deactivate(); diff --git a/src/app/cartography/components/text-editor/text-editor.component.spec.ts b/src/app/cartography/components/text-editor/text-editor.component.spec.ts index 89c52c0b..63067ff3 100644 --- a/src/app/cartography/components/text-editor/text-editor.component.spec.ts +++ b/src/app/cartography/components/text-editor/text-editor.component.spec.ts @@ -5,6 +5,7 @@ import { DrawingsEventSource } from '../../events/drawings-event-source'; import { ToolsService } from '../../../services/tools.service'; import { Context } from '../../models/context'; import { Renderer2 } from '@angular/core'; +import { MapScaleService } from '../../../services/mapScale.service'; describe('TemporaryTextElementComponent', () => { let component: TextEditorComponent; @@ -17,7 +18,8 @@ describe('TemporaryTextElementComponent', () => { { provide: DrawingsEventSource, useClass: DrawingsEventSource }, { provide: ToolsService, useClass: ToolsService }, { provide: Context, useClass: Context }, - { provide: Renderer2, useClass: Renderer2 } + { provide: Renderer2, useClass: Renderer2 }, + { provide: MapScaleService, useClass: MapScaleService } ], declarations: [TextEditorComponent] }).compileComponents(); diff --git a/src/app/cartography/components/text-editor/text-editor.component.ts b/src/app/cartography/components/text-editor/text-editor.component.ts index a5b72242..b4dbdcfe 100644 --- a/src/app/cartography/components/text-editor/text-editor.component.ts +++ b/src/app/cartography/components/text-editor/text-editor.component.ts @@ -6,6 +6,7 @@ import { select } from 'd3-selection'; import { TextElement } from '../../models/drawings/text-element'; import { Context } from '../../models/context'; import { Subscription } from 'rxjs'; +import { MapScaleService } from '../../../services/mapScale.service'; @Component({ selector: 'app-text-editor', @@ -32,7 +33,8 @@ export class TextEditorComponent implements OnInit, OnDestroy { private drawingsEventSource: DrawingsEventSource, private toolsService: ToolsService, private context: Context, - private renderer: Renderer2 + private renderer: Renderer2, + private mapScaleService: MapScaleService ) {} ngOnInit() { @@ -48,14 +50,15 @@ export class TextEditorComponent implements OnInit, OnDestroy { this.leftPosition = event.pageX.toString() + 'px'; this.topPosition = event.pageY.toString() + 'px'; this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial'); + this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`); this.temporaryTextElement.nativeElement.focus(); let textListener = () => { this.drawingsEventSource.textAdded.emit( new TextAddedDataEvent( this.temporaryTextElement.nativeElement.innerText.replace(/\n$/, ''), - event.pageX - this.context.transformation.x, - event.pageY - this.context.transformation.y + event.pageX, + event.pageY ) ); this.deactivateTextAdding(); @@ -84,16 +87,16 @@ export class TextEditorComponent implements OnInit, OnDestroy { .selectAll('text.text_element') .on('dblclick', (elem, index, textElements) => { this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial'); + this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`); this.editedElement = elem; select(textElements[index]).attr('visibility', 'hidden'); - select(textElements[index]).classed('editingMode', true); this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute('drawing_id'); var transformData = textElements[index].parentElement.getAttribute('transform').split(/\(|\)/); - var x = Number(transformData[1].split(/,/)[0]) + this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x; - var y = Number(transformData[1].split(/,/)[1]) + this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y; + var x = (Number(transformData[1].split(/,/)[0]) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x; + var y = (Number(transformData[1].split(/,/)[1]) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y; this.leftPosition = x.toString() + 'px'; this.topPosition = y.toString() + 'px'; this.temporaryTextElement.nativeElement.innerText = elem.text; diff --git a/src/app/cartography/directives/moving-canvas.directive.spec.ts b/src/app/cartography/directives/moving-canvas.directive.spec.ts new file mode 100644 index 00000000..1813c8c4 --- /dev/null +++ b/src/app/cartography/directives/moving-canvas.directive.spec.ts @@ -0,0 +1,169 @@ +import { ComponentFixture, TestBed, async, tick, fakeAsync } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { Context } from '../models/context'; +import { MovingEventSource } from '../events/moving-event-source'; +import { MovingCanvasDirective } from './moving-canvas.directive'; +import { Component } from '@angular/core'; + +@Component({ + template: `` +}) +class DummyComponent { + constructor(){} +} + +describe('MovingCanvasDirective', () => { + let component: DummyComponent; + let fixture: ComponentFixture; + let movingEventSource = new MovingEventSource(); + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [NoopAnimationsModule], + providers: [ + { provide: MovingEventSource, useValue: movingEventSource }, + { provide: Context, useClass: Context } + ], + declarations: [DummyComponent, MovingCanvasDirective] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DummyComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should move canvas if moving mode is activated', fakeAsync(() => { + movingEventSource.movingModeState.emit(true); + const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas'); + let xMovement: number = 200; + let yMovement: number = 200; + + canvas.dispatchEvent(new MouseEvent('mousedown', { + bubbles: true, + clientX: 0, + clientY: 0, + screenY: 0, + screenX: 0, + view: window + })); + tick(); + canvas.dispatchEvent(new MouseEvent('mousemove', { + bubbles: true, + relatedTarget: canvas, + movementX: xMovement, + movementY: yMovement + } as MouseEventInit)); + tick(); + + expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`); + })); + + it('should not move canvas if moving mode is not activated', fakeAsync(() => { + const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas'); + + canvas.dispatchEvent(new MouseEvent('mousedown', { + bubbles: true, + clientX: 0, + clientY: 0, + screenY: 0, + screenX: 0, + view: window + })); + tick(); + canvas.dispatchEvent(new MouseEvent('mousemove', { + bubbles: true, + relatedTarget: canvas, + movementX: 1000, + movementY: 1000 + } as MouseEventInit)); + tick(); + + expect(canvas.getAttribute('transform')).toEqual('translate(0, 0) scale(1)'); + })); + + it('should not move canvas after mouseup event', fakeAsync(() => { + movingEventSource.movingModeState.emit(true); + const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas'); + let xMovement: number = 200; + let yMovement: number = 200; + + canvas.dispatchEvent(new MouseEvent('mousedown', { + bubbles: true, + clientX: 0, + clientY: 0, + screenY: 0, + screenX: 0, + view: window + })); + tick(); + canvas.dispatchEvent(new MouseEvent('mousemove', { + bubbles: true, + relatedTarget: canvas, + movementX: xMovement, + movementY: yMovement + } as MouseEventInit)); + tick(); + + expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`); + + canvas.dispatchEvent(new MouseEvent('mouseup', { + bubbles: true, + relatedTarget: canvas, + movementX: 1000, + movementY: 1000 + } as MouseEventInit)); + tick(); + canvas.dispatchEvent(new MouseEvent('mousemove', { + bubbles: true, + relatedTarget: canvas, + movementX: xMovement, + movementY: yMovement + } as MouseEventInit)); + tick(); + + expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`); + })); + + it('should not move canvas after deactivation of moving mode', fakeAsync(() => { + movingEventSource.movingModeState.emit(true); + const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas'); + let xMovement: number = 200; + let yMovement: number = 200; + + canvas.dispatchEvent(new MouseEvent('mousedown', { + bubbles: true, + clientX: 0, + clientY: 0, + screenY: 0, + screenX: 0, + view: window + })); + tick(); + canvas.dispatchEvent(new MouseEvent('mousemove', { + bubbles: true, + relatedTarget: canvas, + movementX: xMovement, + movementY: yMovement + } as MouseEventInit)); + tick(); + + expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`); + + movingEventSource.movingModeState.emit(false); + canvas.dispatchEvent(new MouseEvent('mousemove', { + bubbles: true, + relatedTarget: canvas, + movementX: 1000, + movementY: 1000 + } as MouseEventInit)); + tick(); + + expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`); + })); +}); diff --git a/src/app/cartography/directives/moving-canvas.directive.ts b/src/app/cartography/directives/moving-canvas.directive.ts new file mode 100644 index 00000000..983b2e3b --- /dev/null +++ b/src/app/cartography/directives/moving-canvas.directive.ts @@ -0,0 +1,65 @@ +import { HostListener, ElementRef, Renderer, Directive, Input, OnInit, OnDestroy } from '@angular/core' +import { Subscription } from 'rxjs'; +import { MovingEventSource } from '../events/moving-event-source'; +import { Context } from '../models/context'; +import { select } from 'd3-selection'; + +@Directive({ + selector: '[movingCanvas]', +}) +export class MovingCanvasDirective implements OnInit, OnDestroy { + private mouseupListener: Function; + private mousemoveListener: Function; + private movingModeState: Subscription; + private activated: boolean = false; + + constructor( + private element: ElementRef, + private movingEventSource: MovingEventSource, + private context: Context + ) {} + + ngOnInit() { + this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => { + this.activated = event; + if (!event) this.removelisteners(); + }); + } + + ngOnDestroy() { + this.movingModeState.unsubscribe(); + } + + @HostListener('mousedown', ['$event']) + onMouseDown(event: MouseEvent) { + if (this.activated) { + this.mousemoveListener = (event: MouseEvent) => { + const view = select(this.element.nativeElement); + const canvas = view.selectAll('g.canvas').data([this.context]); + + canvas.attr('transform', () => { + this.context.transformation.x = this.context.transformation.x + event.movementX; + this.context.transformation.y = this.context.transformation.y + event.movementY; + + const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x; + const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y; + const kTrans = this.context.transformation.k; + + return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`; + }); + }; + + this.mouseupListener = (event: MouseEvent) => { + this.removelisteners(); + }; + + this.element.nativeElement.addEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject); + this.element.nativeElement.addEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject); + } + } + + removelisteners() { + this.element.nativeElement.removeEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject); + this.element.nativeElement.removeEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject); + } +} diff --git a/src/app/cartography/directives/zooming-canvas.directive.spec.ts b/src/app/cartography/directives/zooming-canvas.directive.spec.ts new file mode 100644 index 00000000..8e84de01 --- /dev/null +++ b/src/app/cartography/directives/zooming-canvas.directive.spec.ts @@ -0,0 +1,139 @@ +import { ComponentFixture, TestBed, async, tick, fakeAsync } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { Context } from '../models/context'; +import { MovingEventSource } from '../events/moving-event-source'; +import { Component } from '@angular/core'; +import { ZoomingCanvasDirective } from './zooming-canvas.directive'; +import { MapScaleService } from '../../services/mapScale.service'; + +@Component({ + template: `` +}) +class DummyComponent { + constructor(){} +} + +describe('ZoomingCanvasDirective', () => { + let component: DummyComponent; + let fixture: ComponentFixture; + let movingEventSource = new MovingEventSource(); + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [NoopAnimationsModule], + providers: [ + { provide: MovingEventSource, useValue: movingEventSource }, + { provide: Context, useClass: Context }, + { provide: MapScaleService, useClass: MapScaleService } + ], + declarations: [DummyComponent, ZoomingCanvasDirective] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DummyComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should zoom in canvas if moving mode is activated', fakeAsync(() => { + movingEventSource.movingModeState.emit(true); + const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas'); + let deltaMode: number = 0; + let zoom: number = -1000; + + canvas.dispatchEvent(new WheelEvent('wheel', { + bubbles: true, + relatedTarget: canvas, + deltaMode: deltaMode, + deltaY: zoom + })); + tick(); + + expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`); + })); + + it('should zoom out canvas if moving mode is activated', fakeAsync(() => { + movingEventSource.movingModeState.emit(true); + const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas'); + let deltaMode: number = 0; + let zoom: number = 100; + + canvas.dispatchEvent(new WheelEvent('wheel', { + bubbles: true, + relatedTarget: canvas, + deltaMode: deltaMode, + deltaY: zoom + })); + tick(); + + expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(0.9)`); + })); + + it('should not zoom in/out canvas if moving mode is not activated', fakeAsync(() => { + movingEventSource.movingModeState.emit(true); + const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas'); + let deltaMode: number = 0; + let zoom: number = -1000; + + canvas.dispatchEvent(new WheelEvent('wheel', { + bubbles: true, + relatedTarget: canvas, + deltaMode: deltaMode, + deltaY: zoom + })); + tick(); + + expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`); + + movingEventSource.movingModeState.emit(false); + canvas.dispatchEvent(new WheelEvent('wheel', { + bubbles: true, + relatedTarget: canvas, + deltaMode: deltaMode, + deltaY: zoom + })); + tick(); + + expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`); + })); + + it('should not zoom in/out canvas after deactivation of moving mode', fakeAsync(() => { + const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas'); + let deltaMode: number = 0; + let zoom: number = -1000; + + canvas.dispatchEvent(new WheelEvent('wheel', { + bubbles: true, + relatedTarget: canvas, + deltaMode: deltaMode, + deltaY: zoom + })); + tick(); + + expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(1)`); + })); + + it('should prevent from default wheel behaviour when moving mode activated', fakeAsync(() => { + movingEventSource.movingModeState.emit(true); + const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas'); + let deltaMode: number = 0; + let zoom: number = -1000; + const event = new WheelEvent('wheel', { + bubbles: true, + relatedTarget: canvas, + deltaMode: deltaMode, + deltaY: zoom + }); + spyOn(event, 'preventDefault'); + + canvas.dispatchEvent(event); + tick(); + + expect(event.preventDefault).toHaveBeenCalled(); + })); +}); diff --git a/src/app/cartography/directives/zooming-canvas.directive.ts b/src/app/cartography/directives/zooming-canvas.directive.ts new file mode 100644 index 00000000..c2b25288 --- /dev/null +++ b/src/app/cartography/directives/zooming-canvas.directive.ts @@ -0,0 +1,61 @@ +import { ElementRef, Directive, OnInit, OnDestroy } from '@angular/core' +import { Subscription } from 'rxjs'; +import { MovingEventSource } from '../events/moving-event-source'; +import { Context } from '../models/context'; +import { select } from 'd3-selection'; +import { MapScaleService } from '../../services/mapScale.service'; + +@Directive({ + selector: '[zoomingCanvas]', +}) +export class ZoomingCanvasDirective implements OnInit, OnDestroy { + private wheelListener: Function; + private movingModeState: Subscription; + + constructor( + private element: ElementRef, + private movingEventSource: MovingEventSource, + private context: Context, + private mapsScaleService: MapScaleService + ) {} + + ngOnInit() { + this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => { + event ? this.addListener() : this.removeListener(); + }); + } + + ngOnDestroy() { + this.movingModeState.unsubscribe(); + } + + addListener() { + this.wheelListener = (event: WheelEvent) => { + event.stopPropagation(); + event.preventDefault(); + + let zoom = event.deltaY; + zoom = event.deltaMode === 0 ? zoom/100 : zoom/3; + + const view = select(this.element.nativeElement); + const canvas = view.selectAll('g.canvas').data([this.context]); + + canvas.attr('transform', () => { + this.context.transformation.k = this.context.transformation.k - zoom/10; + + const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x; + const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y; + const kTrans = this.context.transformation.k; + this.mapsScaleService.setScale(kTrans); + + return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`; + }); + }; + + this.element.nativeElement.addEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject, {passive: false}); + } + + removeListener() { + this.element.nativeElement.removeEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject); + } +} diff --git a/src/app/cartography/events/moving-event-source.ts b/src/app/cartography/events/moving-event-source.ts new file mode 100644 index 00000000..afa0d1a1 --- /dev/null +++ b/src/app/cartography/events/moving-event-source.ts @@ -0,0 +1,6 @@ +import { Injectable, EventEmitter } from "@angular/core"; + +@Injectable() +export class MovingEventSource { + public movingModeState = new EventEmitter(); +} diff --git a/src/app/cartography/tools/selection-tool.ts b/src/app/cartography/tools/selection-tool.ts index 2c6e12cf..40c037a9 100644 --- a/src/app/cartography/tools/selection-tool.ts +++ b/src/app/cartography/tools/selection-tool.ts @@ -100,7 +100,9 @@ export class SelectionTool { } private moveSelection(start, move) { - this.path.attr('d', this.rect(start[0], start[1], move[0] - start[0], move[1] - start[1])); + let x = start[0]/this.context.transformation.k; + let y = start[1]/this.context.transformation.k; + this.path.attr('d', this.rect(x, y, move[0]/this.context.transformation.k - x, move[1]/this.context.transformation.k - y)); this.selectedEvent(start, move); } diff --git a/src/app/components/drawings-listeners/text-added/text-added.component.ts b/src/app/components/drawings-listeners/text-added/text-added.component.ts index c5e6a655..3ecaa237 100644 --- a/src/app/components/drawings-listeners/text-added/text-added.component.ts +++ b/src/app/components/drawings-listeners/text-added/text-added.component.ts @@ -45,8 +45,8 @@ export class TextAddedComponent implements OnInit, OnDestroy { .add( this.server, this.project.project_id, - evt.x - this.context.getZeroZeroTransformationPoint().x, - evt.y - this.context.getZeroZeroTransformationPoint().y, + (evt.x - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x))/this.context.transformation.k, + (evt.y - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y))/this.context.transformation.k, svgText ) .subscribe((serverDrawing: Drawing) => { diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index c1fc69a6..0ed30a68 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -154,6 +154,12 @@ +
+ + + +
+ diff --git a/src/app/components/project-map/project-map.component.scss b/src/app/components/project-map/project-map.component.scss index a40f4c6d..0f9a00fe 100644 --- a/src/app/components/project-map/project-map.component.scss +++ b/src/app/components/project-map/project-map.component.scss @@ -93,6 +93,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 bd399179..b55dc225 100644 --- a/src/app/components/project-map/project-map.component.spec.ts +++ b/src/app/components/project-map/project-map.component.spec.ts @@ -40,8 +40,10 @@ import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProje import { MapLinkToLinkConverter } from '../../cartography/converters/map/map-link-to-link-converter'; import { Link } from '../../models/link'; 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'; import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer'; export class MockedProgressService { @@ -216,10 +218,12 @@ describe('ProjectMapComponent', () => { { provide: ToolsService }, { provide: SelectionManager }, { provide: SelectionTool }, + { provide: MovingEventSource }, { provide: RecentlyOpenedProjectService, useClass: RecentlyOpenedProjectService }, + { provide: MapScaleService }, { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer} ], declarations: [ProjectMapComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS], diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index 1d9ebc27..a25e5472 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -42,7 +42,9 @@ import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-l import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProject.service'; 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'; import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer'; @@ -110,6 +112,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy { private selectionManager: SelectionManager, private selectionTool: SelectionTool, private recentlyOpenedProjectService: RecentlyOpenedProjectService, + private movingEventSource: MovingEventSource, + private mapScaleService: MapScaleService, private nodeCreatedLabelStylesFixer: NodeCreatedLabelStylesFixer ) {} @@ -184,6 +188,18 @@ export class ProjectMapComponent implements OnInit, OnDestroy { this.mapChangeDetectorRef.detectChanges(); }) ); + + this.addKeyboardListeners(); + } + + addKeyboardListeners() { + Mousetrap.bind('ctrl++', (event: Event) => { + event.preventDefault(); + }); + + Mousetrap.bind('ctrl+-', (event: Event) => { + event.preventDefault(); + });; } onProjectLoad(project: Project) { @@ -308,7 +324,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy { public toggleMovingMode() { this.tools.moving = !this.tools.moving; - this.toolsService.movingToolActivation(this.tools.moving); + this.movingEventSource.movingModeState.emit(this.tools.moving); + if (!this.readonly) { this.tools.selection = !this.tools.moving; this.toolsService.selectionToolActivation(this.tools.selection); @@ -374,6 +391,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 uploadImageFile(event) { this.readImageFile(event.target); } 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); + } +}