I have been trying for ages to make this javascript-code continue the rotation of the pane-element from where it currently is when clicking and dragging on the rotation button. Now it skips back to top-position first, then I am able to rotate it. I just can’t seem to make it.
Any help on this is really appriciated!
Codepen:
https://codepen.io/MrSounds/pen/zYLzdYJ
//ROTATION
let rotationHistory = [];
var $rotateBtn = $('#pane_center');
const $rotationInput = $('#rotation');
const $pane = $('#pane');
const input = document.getElementById('rotation');
document.addEventListener('mouseup', function() {
let rotation = pane.style.transform ? parseInt(pane.style.transform.match(/-?d+/g)[0]) : 0;
rotation = (rotation % 360 + 360) % 360;
input.value = rotation;
});
// Update the input field with the current rotation of the pane
$rotationInput.val(parseInt($pane.css('transform').split(/[()]/)[1]) || 0);
// Update the rotation of the pane when the input value changes
document.getElementById('rotation').addEventListener('input', function() {
const rotationInput = document.getElementById('rotation');
const rotation = parseInt(rotationInput.value, 10);
document.getElementById('pane').style.transform = 'rotate(' + rotation + 'deg)';
});
function get_degrees(mouse_x, mouse_y) {
const pane = $('#pane');
const radius = pane.outerWidth() / 2;
const center_x = pane.offset().left + radius;
const center_y = pane.offset().top + radius;
const radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
const degrees = Math.round((radians * (180 / Math.PI) * -1) + 100);
return degrees;
}
$rotateBtn.on('mousedown touchstart', function (event) {
$(document).off("mousemove touchmove", onMove);
const click_degrees = get_degrees(event.pageX, event.pageY);
$(document).bind('mousemove touchmove', click_degrees, function(event) {
const pane = $('#pane');
let degrees = get_degrees(event.pageX, event.pageY) - click_degrees;
pane.css('transform', 'rotate('+degrees+'deg)');
// Store the current rotation in the history array
rotationHistory.push(degrees);
});
});
animate();
function onUp(e) {
$(document).off("mousemove");
$(document).off("touchend");
$(document).on("mousemove", onMove);
calc(e);
clicked = null;
}
$('#undoBtn').on('click', function(event) {
rotationHistory.pop();
const previousRotation = rotationHistory[rotationHistory.length - 1] || 0;
$('#pane').css('transform', 'rotate(' + previousRotation + 'deg)');
});
$('#redoBtn').on('click', function(event) {
const nextRotation = rotationHistory[rotationHistory.length] || 0;
if (nextRotation) {
$('#pane').css('transform', 'rotate(' + nextRotation + 'deg)');
rotationHistory.push(nextRotation);
}
});
`