var angle = 0;
var rotate= true;
var gloablAngle =0;
var mouseStartAngle = false; // The angle of the mouse relative to the image centre at the start of the rotation
var imageStartAngle = 0;
var dragging = true;
var ox = 0;
var oy = 0;
var R = Raphael("room_box", 800, 400)
var c = R.rect(100,100, 200, 100).attr({
fill: "#00f",
stroke: "transparent"
});
var butt1 = R.rect(95,95,10,10).attr({
fill: "red",
stroke: "none",
opacity: 0
});
var butt2 = R.rect(295,95,10,10).attr({
fill: "red",
stroke: "none",
opacity: 0
});
var butt3 = R.rect(95,195,10,10).attr({
fill: "red",
stroke: "none",
opacity: 0
});
var butt4 = R.rect(295,195,10,10).attr({
fill: "red",
stroke: "none",
opacity: 0
});
registerTransformPoint(butt1);
registerTransformPoint(butt2);
registerTransformPoint(butt3);
registerTransformPoint(butt4);
var st = R.set();
st.push(c);
st.push( butt1);
st.push( butt2);
st.push( butt3);
st.push( butt4);
var start = function () {
// storing original coordinates
if(!rotate) {
ox = event.screenX;
oy = event.screenY;
c.attr({
opacity: .5
});
dragging = true;
},
move = function (dx, dy) {
if (dragging) {
st.translate(event.screenX - ox, event.screenY - oy);
ox = event.screenX;
oy = event.screenY;
}
},
up = function () {
dragging = false;
c.attr({
opacity: 1
});
};
//alert(st.attr('rotation'));
function startRotate(target) {
document.onmousemove = function(event) {
if(!rotate) return false;
st.attr({opacity: 1});
/*if (globalX < event.pageX ) {
gloablAngle = gloablAngle + 2;
angel = 2;
}
if (globalX > event.pageX) {
gloablAngle = gloablAngle - 2;
angel = -2;
}*/
var cx, cy;
cx = c.attr('x') + c.attr('width') /2;
cy = c.attr('y') + c.attr('height')/2;
// Calculate the new mouse angle relative to the image centre
var mouseXFromCentre = event.pageX - cx;
var mouseYFromCentre = event.pageY - cy;
var mouseAngle = (180/Math.PI) * Math.atan2( mouseYFromCentre, mouseXFromCentre );
// Calculate the new rotation angle for the image
var rotateAngle = mouseAngle - mouseStartAngle + imageStartAngle;
// Rotate the image to the new angle, and store the new angle
//target.rotate(angel);
//butt1.rotate(gloablAngle, cx, cy, true);
if(event.shiftKey) {
document.getElementById('debug3').innerHTML = 'SHIFT';
if(rotateAngle > 0 && rotateAngle < 45) {
rotateAngle = 0;
} else if(rotateAngle >= 45 && rotateAngle < 90) {
rotateAngle = 45;
} else if(rotateAngle >= 90 && rotateAngle < 135) {
rotateAngle = 90;
} else if(rotateAngle >= 135 && rotateAngle < 180) {
rotateAngle = 135;
} else if(rotateAngle >= 180 && rotateAngle < 225) {
rotateAngle = 180;
} else if(rotateAngle >= 225 && rotateAngle < 270) {
rotateAngle = 225;
} else if(rotateAngle >= 270 && rotateAngle < 360) {
rotateAngle = 270;
} else if(rotateAngle > 0) {
rotateAngle = 0;
}
} else if(!event.shiftKey){
document.getElementById('debug3').innerHTML = '';
rotateAngle = mouseAngle - mouseStartAngle + imageStartAngle;
}
target.rotate(rotateAngle ,cx , cy, false);
//butt1.attr({ x: target.attr('x')-5, y: target.attr('y')-5});
document.getElementById('debug').innerHTML = 'ANGLE : ' + rotateAngle;
}
}
function registerTransformPoint(point) {
point.mousedown(function (event) {
//globalPoint = point;
dragging = false;
rotate= true;
var cx, cy;
cx = c.attr('x') + c.attr('width') /2;
cy = c.attr('y') + c.attr('height')/2;
var mouseStartXFromCentre = event.pageX - cx;
var mouseStartYFromCentre = event.pageY - cy;
mouseStartAngle = (180/Math.PI) * Math.atan2( mouseStartYFromCentre, mouseStartXFromCentre );
// Store the current rotation angle of the image at the start of the rotatio
imageStartAngle = 0 * (180/Math.PI);
globalX = event.pageX;
globalY = event.pageY;
startRotate(st);
})
.mouseover(function () {
document.getElementById('debug2').innerHTML = 'Hover';
})
.mouseout(function () {
document.getElementById('debug2').innerHTML = 'OUT';
});
}
setTimeout(function () {R.safari();});
document.onmouseup = function(){
rotate= false;
globalPoint.attr({opacity: 0});
}
st.mouseover(function(event) {
butt1.animate({opacity: 1}, 300);
butt2.animate({opacity: 1}, 300);
butt3.animate({opacity: 1}, 300);
butt4.animate({opacity: 1}, 300);
});
st.mouseout(function(event) {
butt1.animate({opacity: 0}, 300);
butt2.animate({opacity: 0}, 300);
butt3.animate({opacity: 0}, 300);
butt4.animate({opacity: 0}, 300);
});
st.drag(move, start, up);