Angular2: mouse event handling (movement relative to current position)
<p>My user should be able to move (or rotate) an object by mouse in a canvas. When mouse events occur the screen coordinates are used to calculate the delta (direction and length) to the last event. Nothing special...</p>
<ol>
<li>mousedown (get the first coordinate)</li>
<li>mousemove (get nth coordinate, calculate deltaXY, move object by deltaXY)</li>
<li>mouseup (same as step 2 and stop the mousemove and mouseup event handling)</li>
</ol>
<p>After this chain of events it should be possible to repeat the same action.</p>
<p>This outdated example works as expected, after removing the <code>toRx</code> calls. But here the delta to the first coordinate is determined: <a href="https://github.com/Reactive-Extensions/RxJS" rel="noreferrer">github.com:rx-draggable</a></p>
<p>Here is my effort to adapt the code from the example:</p>
<pre class="lang-ts prettyprint-override"><code>@Component({
  selector: 'home',
  providers: [Scene],
  template: '&lt;canvas #canvas id=&quot;3dview&quot;&gt;&lt;/canvas&gt;'
})
export class Home {
  @ViewChild('canvas') canvas: ElementRef;
  private scene: Scene;
  private mousedrag = new EventEmitter();
  private mouseup   = new EventEmitter&lt;MouseEvent&gt;();
  private mousedown = new EventEmitter&lt;MouseEvent&gt;();
  private mousemove = new EventEmitter&lt;MouseEvent&gt;();
  private last: MouseEvent;
  private el: HTMLElement;

  @HostListener('mouseup', ['$event'])
  onMouseup(event: MouseEvent) { this.mouseup.emit(event); }

  @HostListener('mousemove', ['$event'])
  onMousemove(event: MouseEvent) { this.mousemove.emit(event); }

  constructor(@Inject(ElementRef) elementRef: ElementRef, scene: Scene) {
    this.el = elementRef.nativeElement;
    this.scene = scene;
  }

  @HostListener('mousedown', ['$event'])
  mouseHandling(event) {
    event.preventDefault();
    console.log('mousedown', event);
    this.last = event;
    this.mousemove.subscribe({next: evt =&gt; {
      console.log('mousemove.subscribe', evt);
      this.mousedrag.emit(evt);
    }});
    this.mouseup.subscribe({next: evt =&gt; {
      console.log('mousemove.subscribe', evt);
      this.mousedrag.emit(evt);
      this.mousemove.unsubscribe();
      this.mouseup.unsubscribe();
    }});
  }

  ngOnInit() {
    console.log('init');
    this.mousedrag.subscribe({
      next: evt =&gt; {
        console.log('mousedrag.subscribe', evt);
        this.scene.rotate(
            evt.clientX - this.last.clientX, 
            evt.clientY - this.last.clientY);
        this.last = evt;
      }
    });
  }
  ...
}
</code></pre>
<p>It works only for one cycle. After the <code>mouseup</code> event i got this error:</p>
<blockquote>
<p>Uncaught EXCEPTION: Error during evaluation of &quot;mousemove&quot;</p>
<p>ORIGINAL EXCEPTION: ObjectUnsubscribedError</p>
<p>ERROR CONTEXT: EventEvaluationErrorContext</p>
</blockquote>
<p>The cancellation of the <code>mousemove</code> subscription does not work. The error is repeating for all following mousemoves.</p>
<p>Do you have an idea what is wrong with my code? Is there a different elegant approach to solve this problem?</p>