RxJS Challenge #16: Image viewer

Let’s start our last week of RxJS Challenge by switching to hard mode. New challenge contains a picture in some preview app and logic that handles user events and collect them in three streams: drag$, rotation$ and zoom$.

You need to make an RxJS stream that will transform a picture inside zone according to drag events, rotation and zoom (drag works only for scaled image).

Try it here: https://stackblitz.com/edit/rxjs-challenge-16

Let’s explore the task

This challenge is big and there is a lot of code by default. Let’s see what is going on here.

These two entities are tooling for convenient working with drag events. Every drag event has its start, several or many moves and an end. And it allows us to write the following util function: