Raphael.js newbie question: how to create a rectangular and lines as ONE object?

In raphael, if I want to render the following shape:

I have to do something like:

var paper = Raphael("notepad", 320, 200);

var re开发者_StackOverflow社区ct = paper.rect(...);
var line1 = paper.path(...);
var line2 = paper.path(...);

which create three elements: rect, line1, line2.

BUT, I would like to treat the rendered shape as one object in other js code insteand of three. In Raphael, how can I create this shape which returns me just one object not three?

You want to create a set.

Creates array-like object to keep and operate couple of elements at once. Warning: it doesn't create any elements for itself in the page.

var st = paper.set();
st.push(
    paper.circle(10, 10, 5),
    paper.circle(30, 10, 5)
);
st.attr({fill: "red"});

Your code would look something like this:

var paper = Raphael("notepad", 320, 200),
    st = paper.set();

st.push(
    paper.rect(...),
    paper.path(...),
    paper.path(...)
);

// use st elsewhere

Edit

How can I access individual element in the set then?

You can grab references to the objects before you add them to the set:

var paper = Raphael("notepad", 320, 200),
    st = paper.set(),
    rect1 = paper.rect(...),
    path1 = paper.path(...),
    path2 = paper.path(...);

st.push(rect1, path1, path2);

I'm not 100% sure, but since the docs say that a set is "array-like," then you should also be able to access elements in the set using array index notation:

var i, elt;
for (i=0; i<st.length; i++)
{
    elt = st[i];
    // do stuff with elt
}