Commit e5e662d5 authored by Mirko Vucicevich's avatar Mirko Vucicevich

Merge branch 'slide-editor' into 'master'

Autoselection and resize for slide creation.

See merge request !53
parents 04ea7891 f287446e
......@@ -688,6 +688,7 @@
theCanvas.addEventListener("mousedown", mouseDownListener, false);
var dragIndex;
var dragging;
var resizeMode;
var mouseX;
var mouseY;
var dragHoldX;
......@@ -711,17 +712,44 @@
})
}
function hitTest(hitX, hitY){
// Loop through all widgets in the list and check if any of them have been hit
for(let i = 0; i < $('#layerlist>.activeIcon').length; i++) {
var templayer = $($('#layerlist>.activeIcon').get(i));
var x = parseFloat($("div>.x", templayer).val())
var y = parseFloat($("div>.y", templayer).val())
var height = parseFloat($("div>.height", templayer).val())
var width = parseFloat($("div>.width", templayer).val())
// Test if the widget has been hit. If yes, select it and return true on hit test
if(((hitX < (x + width))&&(hitX > x)&&(hitY > y)&&(hitY < (y + height)))){
selectLayer(templayer)
return true
}
}
return false
}
function resizeHitTest(hitX, hitY){
var x = parseFloat($('.layerSelected>div>.x').val())
var y = parseFloat($('.layerSelected>div>.y').val())
var height = parseFloat($('.layerSelected>div>.height').val())
var width = parseFloat($('.layerSelected>div>.width').val())
return((hitX < (x + width))&&(hitX > x)&&(hitY > y)&&(hitY < (y + height)));
return((hitX < (x + width))&&(hitX > x + width-5)&&(hitY > y + height - 5)&&(hitY < (y + height)));
}
function selectLayer(thislayer){
$('.layerSelected').removeClass('layerSelected');
thislayer.addClass('layerSelected')
$('.canvasSelected').css('resize', 'none');
$('.canvasSelected').removeClass('canvasSelected');
$('#'+$('.canvas_link', thislayer).text()).addClass('canvasSelected')
$('#'+$('.canvas_link', thislayer).text()).css('resize', 'both')
var bRect = theCanvas.getBoundingClientRect();
var maxHeight = bRect.bottom - $('.layerSelected>div>.y').val();
var maxWidth = bRect.right - $('.layerSelected>div>.x').val();
$('#'+$('.canvas_link', thislayer).text()).css('max-height', maxHeight + "px")
$('#'+$('.canvas_link', thislayer).text()).css('max-width', maxWidth + "px")
// Set up the right bar
var rightbar = $('#rightbar');
$('#xinput').val($("div>.x", thislayer).val());
......@@ -804,7 +832,24 @@
dragging = true;
//the following variable will be reset if this loop repeats with another successful
}
if (dragging) {
if(resizeHitTest(mouseX, mouseY)) {
resizeMode = true;
}
if(resizeMode && dragging) {
window.addEventListener("mousemove", mouseMoveListener, false);
dragHoldX = mouseX - parseFloat($('.layerSelected>div>.x').val());
dragHoldY = mouseY - parseFloat($('.layerSelected>div>.y').val());
//The "target" position is where the object should be if it were to move there instantaneously. But we will
//set up the code so that this target position is approached gradually, producing a smooth motion.
targetX = mouseX - dragHoldX;
targetY = mouseY - dragHoldY;
//start timer
timer = setInterval(onTimerTick, 1000/30);
}
else if (dragging) {
window.addEventListener("mousemove", mouseMoveListener, false);
//place currently dragged shape on top
//shapeto drag is now last one in array
......@@ -832,27 +877,55 @@
//because of reordering, the dragging shape is the last one in the array.
var x = parseFloat($('.layerSelected>div>.x').val());
var y = parseFloat($('.layerSelected>div>.y').val());
x = x + easeAmount*(targetX - x);
y = y + easeAmount*(targetY - y);
var height = parseFloat($('.layerSelected>div>.height').val())
var width = parseFloat($('.layerSelected>div>.width').val())
if(!resizeMode && dragging){
x = x + easeAmount*(targetX - x);
y = y + easeAmount*(targetY - y);
} else {
height = (mouseY - y)
if(height < 0){
height = 0
}
width = (mouseX - x)
if(width < 0){
width = 0
}
}
//console.log(layer.x)
//console.log(layer.y)
//stop the timer when the target position is reached (close enough)
if ((!dragging)&&(Math.abs(x - targetX) < 0.1) && (Math.abs(y - targetY) < 0.1)) {
x = targetX;
y = targetY;
if(!resizeMode){
x = targetX;
y = targetY;
}
//stop timer
clearInterval(timer);
}
$("#xinput").val(x);
$('.layerSelected>div>.x').val(x)
$("#yinput").val(y);
$('.layerSelected>div>.y').val(y)
if(!resizeMode){
$("#xinput").val(x);
$('.layerSelected>div>.x').val(x)
$("#yinput").val(y);
$('.layerSelected>div>.y').val(y)
} else {
$(".widthinput").val(width);
$('.layerSelected>div>.width').val(width)
$(".heightinput").val(height);
$('.layerSelected>div>.height').val(height)
}
drawScreen($(".layerSelected"));
}
function mouseUpListener(evt) {
formUpdated = true;
theCanvas.addEventListener("mousedown", mouseDownListener, false);
window.removeEventListener("mouseup", mouseUpListener, false);
if (resizeMode) {
resizeMode = false
}
if (dragging) {
dragging = false;
window.removeEventListener("mousemove", mouseMoveListener, false);
......@@ -866,17 +939,32 @@
var maxX = 100 - $('.layerSelected>div>.width').val();
var minY = 0;
var maxY = 100 - $('.layerSelected>div>.height').val();
var minHeight = 0.001;
var maxHeight = 100 - $('.layerSelected>div>.y').val();
var minWidth = 0.001;
var maxWidth = 100 - $('.layerSelected>div>.x').val();
//getting mouse position correctly
var bRect = theCanvas.getBoundingClientRect();
mouseX = (evt.clientX - bRect.left)*(theCanvas.width/bRect.width)/theCanvas.width*100;
mouseY = (evt.clientY - bRect.top)*(theCanvas.height/bRect.height)/theCanvas.height*100;
//clamp x and y positions to prevent object from dragging outside of canvas
posX = mouseX - dragHoldX;
posX = (posX < minX) ? minX : ((posX > maxX) ? maxX : posX);
posY = mouseY - dragHoldY;
posY = (posY < minY) ? minY : ((posY > maxY) ? maxY : posY);
targetX = posX;
targetY = posY;
if(!resizeMode){
posX = mouseX - dragHoldX;
posX = (posX < minX) ? minX : ((posX > maxX) ? maxX : posX);
posY = mouseY - dragHoldY;
posY = (posY < minY) ? minY : ((posY > maxY) ? maxY : posY);
targetX = posX;
targetY = posY;
} else {
// if user tries to go beyond the canvas, just stay at maximum size
if (mouseX >= 100) {
mouseX = 100
}
if (mouseY >= 100) {
mouseY = 100
}
}
}
function drawShapes(thislayer) {
// Draw a layer
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment