mouse events binded rxjs.ts

mouse-events-binded-rxjs.ts

import { Component, OnInit, ElementRef } from '@angular/core';
import { fromEvent } from 'rxjs';
import { skipUntil, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-board',
  templateUrl: './board.component.html',
  styleUrls: ['./board.component.scss']
})

export class BoardComponent implements OnInit {
  private mousedown$;
  private mouseup$;
  private mouseMoveSub;

  constructor(private elm: ElementRef) {}

  ngOnInit() {
    this.mousedown$ = fromEvent(this.elm.nativeElement, 'mousedown');
    this.mouseup$ = fromEvent(this.elm.nativeElement, 'mouseup');

    this.mousedown$.subscribe(_ => {
      console.log('onMouse down');
    });

    this.mouseup$.subscribe(_ => {
      console.log('onMouse up');
      this.register();
    });
  }
  private register() {
    if (this.mouseMoveSub) {
      this.mouseMoveSub.unsubscribe();
    }

    let mousemove$ = fromEvent(this.elm.nativeElement, 'mousemove');
    mousemove$ = mousemove$.pipe(skipUntil(this.mousedown$));
    mousemove$ = mousemove$.pipe(takeUntil(this.mouseup$));

    console.log('regsitered', mousemove$);
    this.mouseMoveSub = mousemove$.subscribe(e => {
      console.log('on mouse release');
    });
  }
}