I am creating a drawing program as an experiment, and I wanted to use observables to manage the flow of events.
Whole project can be found here: https://github.com/madebyjeffrey/Draw9/
Essentially what I am doing is defining a currentObject$ to define a drawing that is in progress (or null), and having the drawing kernel draw it when called to.
The way the events are managed are from 3 observables:
fromEvent<MouseEvent>(this.canvas, 'mousedown')
.filter(e => e.button === 0)
.map(e => <[number, number]>[e.offsetX, e.offsetY])
.map(pos => new PartialLine(pos, pos))
.subscribe(line => this.currentObject$.next(line));
fromEvent<MouseEvent>(this.canvas, "mousemove")
.filter(() => this.currentObject$.value !== null)
.map(e => <[number, number]>[e.offsetX, e.offsetY])
.map(pos => new PartialLine(this.currentObject$.value.head, pos))
.subscribe(line => this.currentObject$.next(line));
fromEvent<MouseEvent>(this.canvas, "mouseup")
.filter(() => this.currentObject$.value !== null)
.map(e => <[number, number]>[e.offsetX, e.offsetY])
.map(pos => {
const line = this.currentObject$.value.toLine();
line.tail = pos;
return line;
})
.subscribe(line => {
this.currentObject$.next(null);
this.kernel.addPrimitive(line);
});A few things that stick out to me in this code is how it is just transferring stuff to the currentObject$ at each line and at the very end it modifies the kernel to add the completed object.
This is just fancy wrapping of normal events and looks like it doesn't really take real advantage of the reactive style programming.
I am wondering if there is a way I can integrate this thing entirely into one pipeline, and even better if there was a way to use immutable objects to keep things more 'functional'.
I am relatively new to RxJs, I have done nothing more fancy than a switchMap for an http request in Angular.
