Raphael JS nested transformations

Question

I have several nested sets in Raphael JS that I want to use like layers in photoshop. That is: objects in sets may have their own transformations, and being places to a set they become relatively positioned in it. And set may have it's own transformation too.

Now it seems when a set transformation is applied, it just performs it to each element separately and with absolute position relatively the page.

With that mechanics I run into such simple problem: I have the set and the rectangle in it. Then I resize rectangle with scale(0.5,0.5,0,0); And then I want to drag the entire set. I perform dragging with set.translate(x,y). As the result I get rectangle that moves twice slower than other non-scaled items.

var rdr = this;
this.paper = Raphael(0,0,1000,1000);
this.set = this.paper.set();
this.set.push(this.paper.rect(0,0,100,100)); // non-scaled rectangle
this.set.push(this.paper.rect(0,0,100,100).scale(0.5,0.5,0,0)); // scaled rectangle
$("body").bind("mousedown.RDR",function(e) {
  var ox = e.pageX;
  var oy = e.pageY;
  $("body").bind("mousemove.RDR",function(e) {
    rdr.set.translate(e.pageX-ox,e.pageY-oy);
    ox = e.pageX;
    oy = e.pageY;
  }).bind("mouseup.RDR",function() {
    $("body").unbind("mouseup.RDR").unbind("mousemove.RDR");
  });
});

How should I correct this code to make my rectangles move with the same speed?

---

Theoretically all that I need to move a set of objects simultaneously is a way to control the order of transformations. I haven't found built in solution so there's a little hack that inserts translation of a set "BEFORE" transformations that're already applied to elements:

Raphael.el.translateBefore = function(x,y) {
  var matrix = this.matrix;
  var transform = matrix.toTransformString();
  transform = ("t"+x.toString()+","+y.toString()) + "," + transform;
  this.transform(transform);
  return this;
}

this.paper = Raphael(this.containerId,this.paperWidth,this.paperHeight);
// добавляем метод для raphael.set через жопу, не нашел нормальный способ
this.paper.set().__proto__.translateBefore = function(x,y) {
  _.each(this,function(el) {
    el.translateBefore(x,y);
  });
  return this;
}

Answer 1

http://raphaeljs.com/reference.html#Element.transform

// if you want you can append or prepend transformations
el.transform("...t50,50");
el.transform("s2...");