title: Smooth mousemove tracking with observables
body: <p>I'm using this code to use drag and drop selection, the animation of the selection square is not as smooth as what you get with Windows or OSX's drag and drop selection, I'm not sure why this is but I think it might be to do with <code>fromEvent()</code>. Is it possible to make it smoother by overriding a default of <code>fromEvent()</code> or using a timer, with something like setTimeout() to check and update the mouse position every x milliseconds rather than whatever fromEvent's default is?</p>
  
  <p><strong>Update:</strong> I think it is because the checking of mouse position with mousemove is too slow because if I move the mouse fast and it is out of the component then the last position of the mouse is not at the edge of the component so I need to increase the rate of mousemove check somehow.</p>
  
  <p>I'm tracking a mouse position using an observable:</p>
  
  <pre><code>this.mouseMoveSubscription = fromEvent(this.elementRef.nativeElement, 'mousemove')
          .subscribe((e: MouseEvent) =&gt; {
              this.dragSelectEnd.left = e.clientX - this.elementRef.nativeElement.offsetLeft;
              this.dragSelectEnd.top = e.clientY - this.elementRef.nativeElement.offsetTop;
              this.updateHighlightSelector();
          });
  </code></pre>
  
  <p>And rendering it on the page with this:</p>
  
  <pre><code>&lt;div class="highlight-selection"
    *ngIf="highlightSelectorActive"
    [style.left.px]="highlightSelector.left"
    [style.top.px]="highlightSelector.top"
    [style.height.px]="highlightSelector.height"
    [style.width.px]="highlightSelector.width"&gt;&lt;/div&gt;
  </code></pre>