I would like to create a custom Raphael element, with custom properties and functions. This object must also contain predefined Raphael objects. For example, I would have a node class, that would contain a circle with text and some other elements inside it. The problem is to add this new object to a set. These demands are needed because non-Raphael objects cannot be added to sets. As a result, custom objects that can contain Raphael objects cannot be used. The code would look like this:

var Node = function (paper) {
    // Coordinates & Dimensions
    this.x = 0,
    this.y = 0,
    this.radius = 0,
    this.draw = function () {
        this.entireSet = paper.set();
        var circle = paper.circle(this.x, this.y, this.radius);
        this.circleObj = circle;
        this.entireSet.push(circle);
        var text = paper.text(this.x, this.y, this.text);
        this.entireSet.push(text);
    }
    // other functions
}

var NodeList = function(paper){
    this.nodes = paper.set(),
    this.populateList = function(){
      // in order to add a node to the set
      // the object must be of type Raphael object
      // otherwise the set will have no elements
      this.nodes.push(// new node)
    }
    this.nextNode = function(){
        // ...
    }
    this.previousNode = function(){
        // ...
    }
}

I would like to create a custom Raphael element, with custom properties and functions. This object must also contain predefined Raphael objects. For example, I would have a node class, that would contain a circle with text and some other elements inside it. The problem is to add this new object to a set. These demands are needed because non-Raphael objects cannot be added to sets. As a result, custom objects that can contain Raphael objects cannot be used. The code would look like this:

var Node = function (paper) {
    // Coordinates & Dimensions
    this.x = 0,
    this.y = 0,
    this.radius = 0,
    this.draw = function () {
        this.entireSet = paper.set();
        var circle = paper.circle(this.x, this.y, this.radius);
        this.circleObj = circle;
        this.entireSet.push(circle);
        var text = paper.text(this.x, this.y, this.text);
        this.entireSet.push(text);
    }
    // other functions
}

var NodeList = function(paper){
    this.nodes = paper.set(),
    this.populateList = function(){
      // in order to add a node to the set
      // the object must be of type Raphael object
      // otherwise the set will have no elements
      this.nodes.push(// new node)
    }
    this.nextNode = function(){
        // ...
    }
    this.previousNode = function(){
        // ...
    }
}

• javascript
• raphael

Share Improve this question Follow edited Jan 25, 2012 at 12:15 Claudia asked Jan 24, 2012 at 15:51 ClaudiaClaudia 5311 silver badge44 bronze badges 4

• Are you looking for something like this? raphaeljs./reference.html#Raphael.fn. It is explained how to add custom functions which can create plex objects as result of the function like .arrow() or whatever you want. – cabreracanal Commented Jan 24, 2012 at 16:31
• As far as I know, Raphael.fn does not create a Raphael object. Thus, the created objects cannot be added to a Raphael set. My class looks like this: var Node = function () { // Coordinates & Dimensions this.x = 0, this.y = 0, this.radius = 0, this.stroke = 1, //... return this; } – Claudia Commented Jan 25, 2012 at 8:18
• It is the function that you attach to .fn who creates it. If you want to create a circle with a text inside (if I've understand your question) I would do it this way, like in this example gist.github./1043360. If your object is a path then you can add it to a set. Even more, you can create text and circles separately to put them into the set. You can also put your custom attributes to it. – cabreracanal Commented Jan 25, 2012 at 8:43
• My problem is that I need to access the properties from the created object(x, y, radius , stroke from the example below). That's why I would need a custom object that can be seen as a Raphael object. In the example you gave the function returns predefined Raphael objects and the classes I have are more plex and cannot use only Raphael elements. I also have custom functions for the objects that I create (like previous and next), so I don't really know if adding custom attributes to predefined objects will work for me. – Claudia Commented Jan 25, 2012 at 8:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can only add Raphael object (rect,circle, eclipse,text) to paper.set(), not self defined object( with Raphael.fn) . Instead use normal array definition of javascript []. As fas as i understand nodeList is a simple list but with more options like nextnode , previous nodes.

Take a look at this demo, i changed abit José Manuel Cabrera's codes: http://jsfiddle/Tomen/JNPYN/1/

Raphael.fn.node = function(x, y, radius, txt) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.txt = txt;
    this.circleObj = paper.circle(this.x, this.y, radius), this.textObj = paper.text(this.x, this.y, this.txt);
    this.entireSet = paper.set(this.circleObj, this.textObj);
    return this
}
Raphael.fn.nodeList = function() {
    this.nodes = [];
    this.push = function(p) {
        return this.nodes.push(p);
    };

    //  this.nextNode = function(){
    // ... manipulate this.nodes here
    // }
    //  this.previousNode = function(){
    // ...
    //  }
    return this
}
var ca = paper.node(250, 150, 50.0, "hola");
var list = paper.nodeList();
list.push(ca);

Some examples may fall down if there is no global 'paper' The context of Raphael.fn.yrMethod will be the instance (paper) This example creates a raphael object which wraps a g element, which is for some reason not currently supported:

    (function(R){

        function g(_paper){

            var _canvas = _paper.canvas,
                _node = document.createElementNS("http://www.w3/2000/svg", "g");

            _canvas.appendChild(_node);

            this.add = function(rElement){
                _node.appendChild(rElement.node);
            }

            this.remove = function(rElement){
                _canvas.appendChild(rElement.node);
            }

            this.transform = function(tString){
                _node.setAttribute('transform', tString);
            }

        }

        R.fn.g = function(){
            return new g(this);
        }

    })(Raphael);

this code allow you to create a node with a text (it returns a set) and you can manipulate it as a Raphael object (put the method after loading the dom):

    function loadShape(){
    Raphael.fn.node = function(x, y, radius, txt){
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.txt = txt;

        this.drawCircle = function () {
            return paper.circle(this.x, this.y, radius);
        };
        this.drawText = function () {
            return paper.text(this.x, this.y, this.txt);
        };

        this.draw = function(){
            var group = paper.set();
            var circulo = paper.circle(this.x, this.y, radius);
            var texto = paper.text(this.x, this.y, this.txt);
            group.push(circulo);
            group.push(texto);
            return group;
        }
        this.init = function(ox, oy, r, t){
            this.x = ox;
            this.y = oy;
            this.radius = r;
            this.txt = t;
        };
        // etc…
        return this;
    };
    var paper = new Raphael(document.getElementById("wrapper"), "100%", "100%");

    //var nodo = paper.node();
    //nodo.init(50, 50, 2.0, "soy un nodo");
    var nodo = paper.node(250, 150, 50.0, "hola");
    nodo.draw();
    //circ.attr({"propiedad":"hola"});
    //alert(circ.attr("propiedad"));
}

Tell me if this was useful to you!