Autoselection and resize for slide creation.

templates/slides/canvas.html

@@ -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