Question

So I have a strange problem with the raphael.js library that makes no sense to me. I have a map of the world with dots representing locations. Many of the dots overlap each other. When I want to single out various locations I would like to brint the element to the foreground.

Given the following code…

$("#peerIdSelector").change(function() {
    var peerSelected = $(this).val();
    var counter = 0;
    var antiCounter = 0;
    paper.forEach(function (el) {
        var peer = el.data("peer");
        if (peer === peerSelected) {
            //el.toFront();
            el.attr("fill", "#ffff00");
            counter++;
         } else {
            el.attr("fill", "#00ffff" );
            antiCounter++;
         }
    });
    alert(counter + " peers updated for " +  peerSelected + "\n" + antiCounter + " peers not updated")
});

When the el.toFront() is commented out, the code works as expected, finding the correct number of elements based on the if statement. However if I include the el.toFront() directive, then only the first if (peer === peerSelected) encountered will show as true, every other one after that shows up as false.

At the moment I’m stumped as to what would cause this behavior. What am I doing wrong here?

Answer 1

This is what Raphael’s forEach function does:

paperproto.forEach = function (callback, thisArg) {
    var bot = this.bottom;
    while (bot) {
        if (callback.call(thisArg, bot) === false) {
            return this;
        }
        bot = bot.next;
    }
    return this;
};

Calling toFront on the current item will cause the element is in question to be moved to the end of the list, so bot.next will be null and the while loop will kick out earlier than you intended.

I’d recommend this as a solution:

var frontSet = paper.set();
paper.forEach(function (el) {
    var peer = el.data("peer");
    if (peer === peerSelected) {
        frontSet.push( el );
        el.attr("fill", "#ffff00");
        counter++;
     } else {
        el.attr("fill", "#00ffff" );
        antiCounter++;
     }
});
frontSet.toFront();