set an id at “Raphaeljs set”

Question

i want to set an id to Raphael set because i want to display it after an event click.

this is my set:

var divResult = document.getElementById('printResult');
var space2Draw = Raphael(divResult, 1600, 900);
var st = space2Draw.set();

st.push(
    space2Draw.circle(newXCoordinates, newYCoordinates, 20).click((function (valore) {
        return function () {
            window.open("index-point.html?id=" + (valore) + "&type=" + type + "&description=" + description + "&name=" + name);
        }
    }(valore))).mouseover(function () {
        this.attr({ 'cursor': 'pointer' });
        this.attr({ 'opacity': '.50' });
    }).mouseout(function () {
        this.attr({ 'opacity': '1' });
    })

            );

in my page i have a button:

function show(){
        var element = space2Draw.getById(-1);
        element.show();

    }
}

Is not possible to set an id in this way : set.id = -1? How can I set an id and then I find the set?

Thanks in advance for the help.

Answer 1

You can try using setAttribute() to add a CLASS for the elements you want to access later, and then modify their CSS propperties. The first step would be to change the CLASS of each element:

myElement.node.setAttribute("class", "class_name");

Unfortunately, Raphael does not allow you to handle sets as unique HTML objects, so you cannot do this for the entire set at once. Instead, you might have to do this for each element in your set, possibly with a for cycle, something like this:

for (var i=0; i<st.length; i++) {
    st[i].node.setAttribute("class", "class_name");
}

Then, using JQuery, you can modify the CSS properties of the CLASS you created in order to display the elements in your set.

function show(){
    $('.class_name').css('display', 'block');
 }

I hope this helps.

Answer 2

Maybe you can use Raphael data() function to assign any data to your element/set.

Example:

// you can keep global var for your id and increment it within your code
var id = 0;

var p = Raphael(100, 100, 500, 500),
    r = p.rect(150, 150, 80, 40, 5).attr({fill: 'red'}),
    c = p.circle(200, 200, 70).attr({fill: 'blue'});

var set = p.set(r,c).data("id", id);
id++;

// then in your click event to get the id you can do
var whichSet = this.data("id");

// data("id") will return you the global id variable

Good Luck