title: Angular2: mouse event handling (movement relative to current position)
body: <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>