ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-09 19:41:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Zooming directive rewritten

Browse Source
This commit is contained in:
Piotr Pekala 2019-06-10 05:00:06 -07:00
parent ee54d620ab
commit 24856d8f96
2 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/cartography/directives/zooming-canvas.directive.spec.ts
View File

@ -46,7 +46,7 @@ describe('ZoomingCanvasDirective', () => {
let deltaMode: number = 0;
let zoom: number = -1000;
window.dispatchEvent(new WheelEvent('wheel', {
canvas.dispatchEvent(new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
@ -63,7 +63,7 @@ describe('ZoomingCanvasDirective', () => {
let deltaMode: number = 0;
let zoom: number = 100;
window.dispatchEvent(new WheelEvent('wheel', {
canvas.dispatchEvent(new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
@ -80,7 +80,7 @@ describe('ZoomingCanvasDirective', () => {
let deltaMode: number = 0;
let zoom: number = -1000;
window.dispatchEvent(new WheelEvent('wheel', {
canvas.dispatchEvent(new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
@ -91,7 +91,7 @@ describe('ZoomingCanvasDirective', () => {
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
movingEventSource.movingModeState.emit(false);
window.dispatchEvent(new WheelEvent('wheel', {
canvas.dispatchEvent(new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
@ -107,7 +107,7 @@ describe('ZoomingCanvasDirective', () => {
let deltaMode: number = 0;
let zoom: number = -1000;
window.dispatchEvent(new WheelEvent('wheel', {
canvas.dispatchEvent(new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
@ -131,7 +131,7 @@ describe('ZoomingCanvasDirective', () => {
});
spyOn(event, 'preventDefault');
window.dispatchEvent(event);
canvas.dispatchEvent(event);
tick();
expect(event.preventDefault).toHaveBeenCalled();

19
src/app/cartography/directives/zooming-canvas.directive.ts
View File

@ -1,4 +1,4 @@
import { HostListener, ElementRef, Renderer, Directive, Input, OnInit, OnDestroy } from '@angular/core'
import { ElementRef, Directive, OnInit, OnDestroy } from '@angular/core'
import { Subscription } from 'rxjs';
import { MovingEventSource } from '../events/moving-event-source';
import { Context } from '../models/context';
@ -9,8 +9,8 @@ import { MapScaleService } from '../../services/mapScale.service';
selector: '[zoomingCanvas]',
})
export class ZoomingCanvasDirective implements OnInit, OnDestroy {
private wheelListener: Function;
private movingModeState: Subscription;
private activated: boolean = false;
constructor(
private element: ElementRef,
@ -21,7 +21,7 @@ export class ZoomingCanvasDirective implements OnInit, OnDestroy {
ngOnInit() {
this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
this.activated = event;
event ? this.addListener() : this.removeListener();
});
}
@ -29,9 +29,8 @@ export class ZoomingCanvasDirective implements OnInit, OnDestroy {
this.movingModeState.unsubscribe();
}
@HostListener('window:wheel', ['$event'])
onWheel(event: WheelEvent) {
if (this.activated) {
addListener() {
this.wheelListener = (event: WheelEvent) => {
event.stopPropagation();
event.preventDefault();
@ -51,6 +50,12 @@ export class ZoomingCanvasDirective implements OnInit, OnDestroy {
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);
}
}