Angular2: Maus-event-handling (Bewegung relativ zur aktuellen position)

Meine Benutzer sollen in der Lage sein, sich zu bewegen (oder zu drehen) auf ein Objekt mit der Maus in eine Leinwand. Wenn Mausereignisse auftreten, die Bildschirm-Koordinaten werden verwendet, um die Berechnung der delta (Richtung und Länge) zu der letzten Veranstaltung. Nichts besonderes...

1. mousedown (die erste Koordinate)
2. mousemove (erhalten N-te Koordinate, zu berechnen deltaXY, Objekt verschieben, indem deltaXY)
3. mouseup (wie in Schritt 2 und beenden die mousemove und mouseup-event handling)

Nach dieser Kette von Ereignissen sollte es möglich sein, wiederholen Sie die gleiche Aktion.

Diese veraltete Beispiel funktioniert wie erwartet, nach dem entfernen der toRx Anrufe. Aber hier ist das delta die erste Koordinate bestimmt wird: github.com:rx-ziehbar

Hier ist mein Aufwand zur Anpassung der code aus dem Beispiel:

@Component({
  selector: 'home',
  providers: [Scene],
  template: '<canvas #canvas id="3dview"></canvas>'
})
export class Home {
  @ViewChild('canvas') canvas: ElementRef;
  private scene: Scene;
  private mousedrag = new EventEmitter();
  private mouseup   = new EventEmitter<MouseEvent>();
  private mousedown = new EventEmitter<MouseEvent>();
  private mousemove = new EventEmitter<MouseEvent>();
  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 => {
      console.log('mousemove.subscribe', evt);
      this.mousedrag.emit(evt);
    }});
    this.mouseup.subscribe({next: evt => {
      console.log('mousemove.subscribe', evt);
      this.mousedrag.emit(evt);
      this.mousemove.unsubscribe();
      this.mouseup.unsubscribe();
    }});
  }

  ngOnInit() {
    console.log('init');
    this.mousedrag.subscribe({
      next: evt => {
        console.log('mousedrag.subscribe', evt);
        this.scene.rotate(
            evt.clientX - this.last.clientX, 
            evt.clientY - this.last.clientY);
        this.last = evt;
      }
    });
  }
  ...
}

Funktioniert es nur für einen Zyklus. Nach der mouseup Veranstaltung bekam ich diese Fehlermeldung:

Uncaught EXCEPTION: Fehler bei der Auswertung von "mousemove"

URSPRÜNGLICHE AUSNAHME: ObjectUnsubscribedError

Fehlerkontext: EventEvaluationErrorContext

Stornierung der mousemove Abonnement funktioniert nicht. Der Fehler wiederholt sich für alle folgenden mousemoves.

Haben Sie eine Idee, was falsch ist mit meinem code? Gibt es einen anderen, eleganten Ansatz dieses problem zu lösen?