SnapSVG drag rotated rectangle - svg

Question

I've managed to successfully drag a rectangle taking into account the mouse location using the following code (demonstrated by the small square)
When the rectangle is rotated the rectangle is dragged in parallel to the shape, please could someone show me how to correct this. I thought this could be done with a bit of trigonometry but haven't been successful to calculate the opposite (x) and adjacent(y)
A demo can be seen here http://jsbin.com/tihobu/2/edit?html,js,output
var s = Snap(400,400);
var smallSquare = s.rect(100, 100, 50,50).attr({fill:"#ffcc00"});
var bigSquare = s.rect(100,20,150,150).attr({fill:"#ff6600"});
var startx, starty;
var t = bigSquare.transform().localMatrix;
t.rotate(45);
bigSquare.transform(t);
var moveFunc = function (dx, dy, posx, posy) {
var xadj = startx - (0 - dx);
var yadj = starty - (0 - dy);
this.attr('x',xadj);
this.attr('y',yadj);
};
var startFunc = function(){
startx = this.attr('x');
starty = this.attr('y');
console.log("Move started");
};
var stopFunc = function(){};
bigSquare.drag( moveFunc,startFunc,stopFunc );
smallSquare.drag( moveFunc,startFunc,stopFunc );
thanks David

Answer 1

The problem is the coordinate space has been rotated, so you have a couple of options. Either work out where the new x,y would be, or use a drag with transforms rather than changing x,y. I personally would use transforms, but there may be good reasons why you want to change the x,y attributes.
Note, if you keep on working with changing the x,y attributes, you then have added issues that not all elements have this. Eg circles are positioned with cx, cy, you may have other complex elements.
Here is some code I used to make a transform handler...(edit: have changed code to cope with complex groups)
example
Snap.plugin( function( Snap, Element, Paper, global ) {
Element.prototype.globalToLocal = function( globalPoint ) {
var globalToLocal = this.node.getTransformToElement( this.paper.node ).inverse();
globalToLocal.e = globalToLocal.f = 0;
return globalPoint.matrixTransform( globalToLocal );
};
Element.prototype.getCursorPoint = function( x, y ) {
var pt = this.paper.node.createSVGPoint();
pt.x = x; pt.y = y;
return pt.matrixTransform( this.paper.node.getScreenCTM().inverse());
}
Element.prototype.altDrag = function() {
return this.drag( altMoveDrag, altStartDrag );
};
function altMoveDrag( xxdx, xxdy, ax, ay ) {
var tdx, tdy;
var cursorPoint = this.getCursorPoint( ax, ay );
var pt = this.paper.node.createSVGPoint();
pt.x = cursorPoint.x - this.data('op').x;
pt.y = cursorPoint.y - this.data('op').y;
var localPt = this.globalToLocal( pt );
this.transform( this.data('ot').toTransformString() + "t" + [ localPt.x, localPt.y ] );
};
function altStartDrag( x, y, ev ) {
this.data('ibb', this.getBBox());
this.data('op', this.getCursorPoint( x, y ));
this.data('ot', this.transform().localMatrix);
};
});