Merge pull request #428 from HumanBrainProject/bugfix/captureClickDirective

bugfix: fixes #426

src/util/directives/captureClickListener.directive.ts

-import {Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output} from "@angular/core";
-import {Observable, Observer, Subscription} from "rxjs";
-import {switchMapTo, takeUntil} from "rxjs/operators";
+import { Directive, ElementRef, EventEmitter, OnDestroy, OnInit, Output } from "@angular/core";
+import { Subscription, fromEvent } from "rxjs";
+import { switchMapTo, takeUntil } from "rxjs/operators";
 
 @Directive({
-    selector: '[iav-captureClickListenerDirective]'
+  selector: '[iav-captureClickListenerDirective]'
 })
 
 export class CaptureClickListenerDirective implements OnInit, OnDestroy {
 
-    private subscriptions: Subscription[] = []
-    @Output('iav-captureClickListenerDirective-onClick') mapClicked: EventEmitter<any> = new EventEmitter()
-    @Output('iav-captureClickListenerDirective-onMousedown') mouseDownEmitter: EventEmitter<any> = new EventEmitter()
-
-
-    constructor(private el: ElementRef){}
-
-    ngOnInit(){
-
-        // Listen click Events
-        const mouseDownObs$ = new Observable((observer: Observer<any>) => {
-            this.el.nativeElement.addEventListener('mousedown', event => observer.next({eventName: 'mousedown', event}), true)
-        })  as Observable<{eventName: string, event: MouseEvent}>
-        const mouseMoveObs$ = new Observable((observer: Observer<any>) => {
-            this.el.nativeElement.addEventListener('mousemove', event => observer.next({eventName: 'mousemove', event}), true)
-        })  as Observable<{eventName: string, event: MouseEvent}>
-        const mouseUpObs$ = new Observable((observer: Observer<any>) => {
-            this.el.nativeElement.addEventListener('mouseup', event => observer.next({eventName: 'mouseup', event}), true)
-        })  as Observable<{eventName: string, event: MouseEvent}>
-
-        this.subscriptions.push(
-            mouseDownObs$.subscribe(e => {
-                this.mouseDownEmitter.emit(e.event)
-            }),
-            mouseDownObs$.pipe(
-                switchMapTo(
-                    mouseUpObs$.pipe(
-                        takeUntil(mouseMoveObs$)
-                    )
-                )
-            ).subscribe(e => {
-                this.mapClicked.emit(e.event)
-            })
+  private subscriptions: Subscription[] = []
+  @Output('iav-captureClickListenerDirective-onClick') mapClicked: EventEmitter<any> = new EventEmitter()
+  @Output('iav-captureClickListenerDirective-onMousedown') mouseDownEmitter: EventEmitter<any> = new EventEmitter()
+
+  constructor(private el: ElementRef) { }
+
+  ngOnInit() {
+    const mouseDownObs$ = fromEvent(this.el.nativeElement, 'mousedown', { capture: true })
+    const mouseMoveObs$ = fromEvent(this.el.nativeElement, 'mousemove', { capture: true })
+    const mouseUpObs$ = fromEvent(this.el.nativeElement, 'mouseup', { capture: true })
+
+    this.subscriptions.push(
+      mouseDownObs$.subscribe(event => {
+        this.mouseDownEmitter.emit(event)
+      }),
+      mouseDownObs$.pipe(
+        switchMapTo(
+          mouseUpObs$.pipe(
+            takeUntil(mouseMoveObs$)
+          )
         )
-    }
-
-    ngOnDestroy(){
-        this.subscriptions.forEach(s=> s.unsubscribe())
-    }
+      ).subscribe(event => {
+        this.mapClicked.emit(event)
+      })
+    )
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach(s => s.unsubscribe())
+  }
 
 }
\ No newline at end of file