RX - draw

by yshayy

HTML

<body>
    <div id="display"></div>
    <div id="console"></div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.11/rx.all.js"></script>
    <script>
        var $console = {
            log: function(x) {
                var log = document.createElement("div");
                log.textContent += x;
                document.querySelector("#console").appendChild(log);
            }
        }
        
        function $display(x) {
            document.querySelector("#display").textContent = x;
        }
        
        function markArea(from, to) {
            $display("marking area from (" + from.x + "," + from.y + ") to (" + to.x + "," + to.y + ")");
        }
        
        function drawRectangle(from, to) {
           $console.log("draw rectangle at (" + from.x + "," + from.y + ") : (" + to.x + "," + to.y + ")");
        }


    </script>
</body>

CoffeeScript

mouseDown = Rx.Observable.fromEvent(document, 'mousedown')
mouseMove = Rx.Observable.fromEvent(document, 'mousemove')
mouseUp = Rx.Observable.fromEvent(document, 'mouseup')

mouseDown
.select( (e) -> { x: e.clientX, y : e.clientY}) 
.flatMap( (startPoint) -> 
           mouseMove
           .select( (e) -> { x: e.clientX, y : e.clientY}) 
           .do( (currentPoint) -> markArea(startPoint, currentPoint))
           .takeUntil(mouseUp)
           .last()
           .select((endPoint)=>{start:startPoint, end:endPoint})
).subscribe((rect) -> drawRectangle(rect.start, rect.end))