One of the features I want to implement for my user is the ability to move or rotate an object in a canvas using the mouse. The process involves calculating the delta (direction and length) between successive mouse events in order to update the position of the object on the screen.
- When the user presses down on the mouse button, the initial coordinates are captured.
- As the user moves the mouse, subsequent coordinates are recorded and used to calculate the deltaXY, which is then used to adjust the position of the object accordingly.
- Upon releasing the mouse button, the last set of coordinates is used to finalize the movement and stop handling further mouse events.
Once this sequence of events is completed, the action should be repeatable.
This example seems outdated but functional once the unnecessary toRx calls are removed. You can find the code at: github.com:rx-draggable
I have attempted to adapt the code from the provided example:
@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;
}
});
}
...
}
Although the functionality works for one cycle, upon triggering the mouseup event, I encountered the following error:
Uncaught EXCEPTION: Error during evaluation of "mousemove"
ORIGINAL EXCEPTION: ObjectUnsubscribedError
ERROR CONTEXT: EventEvaluationErrorContext
The issue seems to arise from the inability to cancel the mousemove subscription properly, leading to repeated errors with subsequent mouse movements. Any suggestions on what might be causing this issue? Is there a more elegant solution to handle this problem?