From 24856d8f963a734aa7b72a44480e95fa08f622bc Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Mon, 10 Jun 2019 05:00:06 -0700
Subject: [PATCH] Zooming directive rewritten

---
 .../zooming-canvas.directive.spec.ts          | 12 ++++++------
 .../directives/zooming-canvas.directive.ts    | 19 ++++++++++++-------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/app/cartography/directives/zooming-canvas.directive.spec.ts b/src/app/cartography/directives/zooming-canvas.directive.spec.ts
index 1ef3cac9..8e84de01 100644
--- a/src/app/cartography/directives/zooming-canvas.directive.spec.ts
+++ b/src/app/cartography/directives/zooming-canvas.directive.spec.ts
@@ -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();
diff --git a/src/app/cartography/directives/zooming-canvas.directive.ts b/src/app/cartography/directives/zooming-canvas.directive.ts
index 3b3c17a3..c2b25288 100644
--- a/src/app/cartography/directives/zooming-canvas.directive.ts
+++ b/src/app/cartography/directives/zooming-canvas.directive.ts
@@ -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);
     }
 }