RxJS Challenge #14: select folders

My new challenge is to allow users to select several folders with their mouse dragging (like on a desktop).

You can try your skills here:

https://stackblitz.com/edit/rxjs-challenge-14

My solution

First of all, let’s add references to DOM elements in the template and get them with ViewChild and ViewChildren in our component.

We added areas$$ that emits when area is ready and we can start calculating coordinates of our dragging zone.

So, now we have a stream that emits Rect object with coordinates of the left-top corner of selecting a zone and its width and height. We just listen to mousedown event in our working area and switch them to listening to mousemove event until mouseup on Document happens (because the user can stop…