Dragging after scaling on raphael

Dragging after scaling

by odegraciajr

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<div id="area"></div>
<div class="controls">
    <button data-action="down" class="fontsize-control"><span class="label">Font (-)</span></button>
    <button data-action="up" class="fontsize-control"><span class="label">Font (+)</span></button>
</div>

JavaScript

var paper = Raphael(document.getElementById("area"), 900, 500);
var attr = {"fill":"red","font-family": "arial", "font-size": "50px","cursor":"move"};
var text = paper.text(250, 250, "Some\nTEST").attr(attr);

start = function () {

	this.ox = parseFloat( this.attr("x") );
	this.oy = parseFloat( this.attr("y") );
},
move = function (dx, dy) {
	this.attr({x: this.ox + dx, y: this.oy + dy});
	this.odx = dx;
	this.ody = dy;
},
up = function () {
	this.attr({cursor:"move"});
};

text.drag(move, start, up);

$("button.fontsize-control").click(function(){
	var action = $(this).data("action");
	if( action == "down" ){
		text.transform("s.80...");
	}else{
		text.transform("s1.2...");
	}
});