Home/ Questions/Q 8613767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T04:57:46+00:00

I am new to Reactive Extensions and JavaScript . Can someone help me unscrew

  • 0

I am new to Reactive Extensions and JavaScript. Can someone help me unscrew the following code? It’s from Matthew Podwysocki’s Introduction to the Reactive Extensions to JavaScript.

<html>
<head>
 <title>Learning ReactiveExtensions</title>
 <!--scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="rx.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {
var mouseDragMe = $("#mouseDragMe").context;

var mouseMove = Rx.Observable.FromHtmlEvent(mouseDragMe, "mousemove");
var mouseUp = Rx.Observable.FromHtmlEvent(mouseDragMe, "mouseup");
var mouseDown = Rx.Observable.FromHtmlEvent(mouseDragMe, "mousedown");

    var mouseMoves = mouseMove
.Skip(1)
.Zip(mouseMove, function(left, right) {
    return { x1 : left.clientX,
             y1 : left.clientY,
             x2 : right.clientX,
             y2 : right.clientY };
});

    var mouseDrags = mouseDown.SelectMany(function(md) {
return mouseMoves.TakeUntil(mouseUp);

    mouseDrags.Subscribe(function(mouseEvents) {
$("#results").html(
    "Old (X: " + mouseEvents.x1 + " Y: " + mouseEvents.y1 + ") " +
    "New (X: " + mouseEvents.x2 + " Y: " + mouseEvents.y2 + ")");
});
});                     
});
</script>
</head>
<body>
<div id="mouseDragMe" style="border:solid 1px red;">
    i am a rx newbie
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are descriptions of this out there. I would recommend looking at this video about Writing your first Rx Application. The code’s in C# but the concepts are exactly the same regardless of the programming language.

    Essentially you want to understand 3 things

    1. Conceptualizing of a series of events as a Sequence. Just like an
      array is a sequence of data in space, events can be thought of as a
      sequence of data in time (or in motion).
    2. The operators (i.e. Skip, Zip, SelectMany and TakeUntil)
    3. Subscription semantics

    In this scenario we have 3 source sequences; mouseMove, mouseUp and mouseDown.

    The mouseMove sequence will push a value of the mouse coordinates each time the mouse is moved. For example if the mouse started at the top left corner of the screen and moved diagonally down then straight across you may see values like {0,0}, {10,10}, {20,10} published on the sequence.

    The values that mouseUp and mouseDown publish are not interesting, just the point in time that they are published is interesting.

    The actual problem of “dragging” requires us to know when the mouse button is pressed and the delta of where the mouse was when it was pressed, and where it was when the button was released. The way we can get the delta of these positions is to take values of the final position and minus the values of the original position. Even better is if we can get all of the intermediate delta values so we can animate the movement. If we take our sequence above, to get a delta of movements we want to have the original sequence and an off by one sequence

    Original { 0, 0}, {10,10}, {20,10}  
offby1   {10,10}, {20,10}

    This allows us to calculate the deltas to figure out the movement (not just the location).

    Original { 0, 0}, {10,10}, {20,10}
offby1   {10,10}, {20,10}
delta    {10,10}, {10, 0}

    The way we can achieve this with Rx is first to use Skip(1) to skip one value. This creates our offby1 sequence. Next we want to combine values in pairs. The Zip function gives us this (more in my blog post about Combining sequences with Zip).

    We could rewrite the code you have above

    var mouseMoves = mouseMove
.Skip(1)
.Zip(mouseMove, function(left, right) {
    return { x1 : left.clientX,
             y1 : left.clientY,
             x2 : right.clientX,
             y2 : right.clientY };
});

    To be

    var offby1 = mouseMove.Skip(1);
var mouseMoves = offby1.Zip(mouseMove, function(left, right) {
    return { x1 : left.clientX,
             y1 : left.clientY,
             x2 : right.clientX,
             y2 : right.clientY };
});

    Once we have the pairs, we need to apply the simple math of newValue-OldValue=delta.
    This gives us our delta sequence which is effectively our Movement sequence. 

    var offby1 = mouseMove.Skip(1);
var mouseMoves = offby1.Zip(mouseMove, function(current, last) {
    return { x : current.clientX-last.clientX,
             y : current.clientY-last.clientY };
});

    Now we only want to get values when the mouse is down. To do this we use the SelectMany operator. This says for each value from the source, get 0 or more values from this source. In our case each time a mouseDown event happens we want to get all the delta events (as mouseMoves). 

    var mouseDrags = mouseDown.SelectMany(function(md) { return mouseMoves;});

    However we only want to keep receiving them until a corresponding mouseUp event happens. To do this we TakeUntil the mouseUp event produces a value.

    var mouseDrags = mouseDown.SelectMany(function(md) {
  return mouseMoves.TakeUntil(mouseUp);
});

    Now that we have all this plumbing done, we usually apply those movements to the Position/Margin/offset of a UI element. It appears in the example, we just print the value though.

    • 0