diff --git a/src/util/directives/captureClickListener.directive.ts b/src/util/directives/captureClickListener.directive.ts index 5489eaf2131ecd96db11aa480c56ae814fd04c4c..3931bc88187bef63764d5754d688d60a1bdcff4a 100644 --- a/src/util/directives/captureClickListener.directive.ts +++ b/src/util/directives/captureClickListener.directive.ts @@ -1,51 +1,42 @@ -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