CODEWITHSUNDEEP
javascriptsvgmootoolsraphael
Tom Smith
Tom Smith

Reputation: 1

Modifying Shapes In RaphaelJS Or Re-Drawing Them?

I am creating a diagramming tool using RaphaelJS and have run into a problem, i cannot see how i can edit the shapes that have been painted onto the canvas paper. For example, below is the code i use to create a UML Class shape and would now like to know how to modify the elements contained within, Im using MooTools BTW:

var uml_Class = new Class(
{
    initialize: function(name)
    {
        this.className = name;
        this.pointA_X = 1;    this.pointA_Y = 1;
        this.pointB_X = 150;  this.pointB_Y = 1;
        this.pointC_X = 1;    this.pointC_Y = 40;
        this.pointD_X = 150;  this.pointD_Y = 40;
        this.pointE_X = 1;    this.pointE_Y = 100;
        this.pointF_X = 150;  this.pointF_Y = 100;
        this.pointG_X = 1;    this.pointG_Y = 160;
        this.pointH_X = 150;  this.pointH_Y = 160;
        this.generate_Shape();
    },
    generate_Shape: function()
    {
        this.classSet = paper.set();
        this.classSet.push
        (
           this.shapeBase = paper.rect(this.pointA_X,this.pointA_Y,this.pointH_X,this.pointH_Y).attr({"fill":"white"}),         

           this.line_Attrib = paper.path("M " + this.pointC_X + " " + this.pointC_Y + " L " + this.pointD_X + " " + this.pointD_Y),
           this.line_Method = paper.path("M " + this.pointE_X + " " + this.pointE_Y + " L " + this.pointF_X + " " + this.pointF_Y),

           this.classText = paper.text(this.pointB_X/2, this.pointA_Y+20, this.className).attr({"font-size":"14"}),
           this.attribText = paper.text(this.pointD_X/2, this.pointC_Y+10, "Attributes").attr({"font-size":"10"}),
           this.methodText = paper.text(this.pointF_X/2, this.pointE_Y+10, "Methods").attr({"font-size":"10"})
        );
        this.shapeBase.draggable.enable();
    },
    add_new_Attrib: function()
    {
    },
    add_new_Attrib: function()
    {
    }
});

The above code works fine and on my canvas classes are created which show there name and are constructed using the rectangle for the base and two line to create the three sections:

By making the shapeBase rectangle variable draggable i means that the user can click anywhere within this shape to drag, again this functionality works fine.

i would now like to code the two functions add_new_Attrib and add_new_Method. The attrib function should first resize or grow the cube by adding 20 to the overall height (via point_H_X) to make space for a new attrib entry and then move the method line (line_Method) and text (method_Text) down by 20.

the add_new_method line should also grow the shapeBase rectangle by 20 to make room for the new method entry.

I cant seem to find a way to do this, for example, when i put the following code into the add_new_Attrib shape, i am trying to redraw the shapeBase but instead it draws an entirely new rectangle:

add_new_Attrib: function()
{
    this.shapeBase = paper.rect(this.pointA_X,this.pointA_Y,this.pointH_X,this.pointH_Y+20).attr({"fill":"white"});
},

Could anyone tell me how to resize or reposition the rectangle and paths that are inside my class?

Thanks for any input your may have!

Upvotes: 0

Views: 1165

Answers (1)

assertchris
assertchris

Reputation: 161

RaphaelJS's getBBox and attr methods is what you are looking for:

add_new_Attrib: function()
{
    var bbox = this.shapeBase.getBBox();
    this.shapeBase.attr({'height': bbox.height + 20, "fill":"white"})
}

To reposition, look at translate (can't link, but it is in the same doc as above).

Upvotes: 1

Related Questions