drag, resize and rotate with mouse - rotation

Question

I need to be able to resize, rotate, and move an image. I have managed to find the code below that works but I need to either have a rotation point on the image where I can use it to rotate it with mouse or have the slider to move with the image. The problem starts when the image and the slider are too far apart. I would prefer to have the slider as part of the image if possible, somehow connected. Many thanks in advance for your help. The image is a protractor where it needs to be moved and rotated to measure angles.
Below is my codes
HTML
<!-- Mockup img downloaded from www.magicmockups.com -->
<!-- Change the mockup image to any image of your choice in the img tag bellow. -->
<!-- XXX: WARNING: When the pen is saved, the movable div is RESET to the original
position/size/rotation. -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</div>
<div style="margin-top: 20px">ROTATION SLIDER:</div>
<div id="slider" style="display:inline-block; width: 50%; margin: 10px 0 10px1 0px;">
</div>
<div style="display: inline-block; position: relative;">
<!-- CHANGE IMG TO YOUR IMG -->
<div id="movable" >https://link to image</div>
Javascript
var currentUnit = "pixels"
$( function() {
$("input[type=radio]").checkboxradio();
$("#slider").slider({
min: -360,
max: 360,
slide: function(event, ui) {
// Set the slider's correct value for "value".
$(this).slider('value', ui.value);
$("#movable").css('transform', 'rotate(' + ui.value + 'deg)')
updateText()
}
});
$("#movable").draggable({
drag: function(event, ui) {
updateText()
}
})
$("#movable").resizable({
resize: function(event, ui) {
updateText()
}
})
// Init the text.
updateText();
});
function getPixelDimensions() {
precision = 100
// Save current transform (rotation).
originalTransform = $("#movable").css('transform')
// Remove rotation to make sure position() is the CSS position, not the bounding rect
position.
$("#movable").css('transform', 'rotate(0deg)')
position = $("#movable").position()
// Restore rotation.
$("#movable").css('transform', originalTransform)
dim = {
top: Math.round(position.top * precision) / precision,
left: Math.round(position.left * precision) / precision,
width: Math.round($("#movable")[0].clientWidth * precision) / precision,
height: Math.round($("#movable")[0].clientHeight * precision) / precision
}
return dim;
}
function getPercentageDimensions() {
}
function updateText() {
if(currentUnit == "pixels") {
dim = getPixelDimensions();
sufix = "px"
} else {
dim = getPercentageDimensions();
sufix = "%"
}
$(".d").remove()
for(prop in dim) {
$("#dimensions").append( "<div class='d'>" + prop + ": " + dim[prop] + sufix + "</div>");
}
$("#dimensions").append( "<div class='d'>rotate: " + $("#slider").slider("value") +
"deg</div>");
//console.log($("#outer").position().top)
}
$('input').change(function() {
if(this.id == "radio-1") {
currentUnit = "pixels";
updateText();
} else if(this.id.search("radio") != -1){
currentUnit = "percentage";
updateText();
}
})
function previewFile() {
var preview = document.querySelector('img'); //selects the query named img
var file = document.querySelector('input[type=file]').files[0]; //sames as here
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file); //reads the data as a URL
} else {
preview.src = "";
}
}
CSS
#movable {
position: absolute;
text-align: center;
/*Manually change values here.*/
width: 400px;
height: 400px;
top: 0px;
left: 0px;
transform: rotate(0deg);
}