CODEWITHSUNDEEP
javascriptraphael
j0hnstew
j0hnstew

Reputation: 709

raphael selection assistance

Alright so I want to select an element lets says a circle then if I want to deselect it I can either click it to deselect it or click on another element to deselect the previous element and select the new one. There is a previous stack overflow question that gets at what I am talking about sort of.

Here is the link: Raphael element selection problem There is a jsfiddle in there that works nicely for two elements. I want to implement the functionality I talked about before doing something similar to this. Any suggestions would be helpful.

Here is a link to a fiddle I tried creating but was unsuccessful. http://jsfiddle.net/stewbydoo/jwAzS/1/

Upvotes: 1

Views: 286

Answers (1)

Kevin Nielsen
Kevin Nielsen

Reputation: 4433

I would abstract this a little to make it as reusable as possible. Here's a rough example:

function CreateMultiselectGroup(paper, set, groupID, selAttr, unselAttr) {
    groupID = groupID || "default";
    selAttr = selAttr || {
        fill : 'red',
        stroke : 'black',
        'stroke-width' : 3
    };
    unselAttr = unselAttr || {
        fill : 'white',
        stroke : 'gray',
        'stroke-width' : 1
    };
    var multiselector = function(paper, selectedEntity) {
        paper.forEach(function(el) {
            if(el.data("multiselect-group") == groupID) {
                el.attr(unselAttr);
            }
        });
        selectedEntity.attr(selAttr);
    };
    set.forEach(function(el) {
        el.data("multiselect-group", groupID);
        el.click(function() {
            multiselector(paper, el);
        });
    });
}

The function CreateMultiselectGroup accepts a Raphael paper object, a set of objects which are to be part of the group, an arbitrary name for the group (which defaults to 'default'), and attribute sets for selected and unselected states. It marks each of the elements in the set as belonging to the particular multiselect group. When one of them is clicked, it deselects all of the members of the group and then applies the selected attributes to the clicked element only.

This could easily be extended to work with click callbacks or animations -- this is just a wireframe for further functionality.

Here's a fiddle that demonstrates the use of two select groups (circles and squares) in random locations.

Upvotes: 3

Related Questions