We Keep Coding

Making javascript animation smooth?

Basically what I want to achieve is to drag some div within another container div. Inner div should stop when it reaches the boundaries of the container div. I managed to do the most parts. But the problem is that if I drag inner div slowly & carefully it stops where it is supposed to be on the edges, however if I drag it faster, it sometimes overflow the edges or stops way before the edges. What is the problem here? What should I do to fix this?
Here is full code
function mouseMove(e) {
e.preventDefault();
console.log("mouse moving");
if(isMouseDown > 0 && currentElement) {
mouseX = e.clientX;
mouseY = e.clientY;
var diffX = mouseX - lastMouseX;
var diffY = mouseY - lastMouseY;
if(diffX + lastElementX + elementWidth < rightLimit && diffX + lastElementX > leftLimit) {
lastElementX += diffX;
lastMouseX = mouseX;
}
if(diffY + lastElementY + elementHeight < bottomLimit && diffY + lastElementY > topLimit) {
lastElementY += diffY;
lastMouseY = mouseY;
}
setCurrentElementPosition(lastElementX, lastElementY);
}
}
Above code runs on mouse move event changing inner div's position.

Here's my solution for you, I've programmed video games before, and you run into this problem a lot.
You're checking if it'll go out, but not doing anything if it does! If it goes outside, you have to set it to the edge.
https://jsfiddle.net/7btv7oqy/3/
var lastElementX = 0; //last X position of element
var lastElementY = 0; //last Y position of element
var lastMouseX = 0; //last X position of mouse
var lastMouseY = 0;//last Y position of mouse
var mouseX = 0; //current mouse position X
var mouseY = 0; //current mouse position Y
var currentElement = null; //currently selected div
var elementWidth = 0;
var elementHeight = 0;
var container = null; //container div
var isMouseDown = 0; //if greater than zero, mouse is down
//limits of container div
var bottomLimit = 0;
var topLimit = 0;
var leftLimit = 0;
var rightLimit = 0;
function init() {
container = document.getElementsByClassName("container")[0];
topLimit = container.getBoundingClientRect().top;
bottomLimit = container.getBoundingClientRect().bottom;
leftLimit = container.getBoundingClientRect().left;
rightLimit = container.getBoundingClientRect().right;
document.addEventListener("mousedown", function mouseDown(e) {
e.preventDefault();
++isMouseDown;
document.addEventListener("mousemove", mouseMove);
setCurrentElement(getElementUnderMouse(e)); //set current element
currentElement.style.position = "absolute";
lastElementX = currentElement.getBoundingClientRect().left;
lastElementY = currentElement.getBoundingClientRect().top;
lastMouseX = e.clientX;
lastMouseY = e.clientY;
});
document.addEventListener("mouseup", function mouseUp(e) {
e.preventDefault();
--isMouseDown;
setCurrentElement(null);
document.removeEventListener("mousemove", mouseMove);
});
}
function mouseMove(e) {
e.preventDefault();
console.log("mouse moving");
// report(e);
if(isMouseDown > 0 && currentElement) {
mouseX = e.clientX;
mouseY = e.clientY;
var diffX = mouseX - lastMouseX;
var diffY = mouseY - lastMouseY;
if(diffX + lastElementX + elementWidth < rightLimit && diffX + lastElementX > leftLimit) {
lastElementX += diffX;
} else {
//without this, the location wouldn't update at all:
//check if it would go off the right edge, set to right edge
if (diffX + lastElementX + elementWidth >= rightLimit) {
lastElementX = rightLimit - elementWidth;
}
//check if it would go off the left edge, set to left edge
if(diffX + lastElementX <= leftLimit) {
lastElementX = leftLimit;
}
}
//this will always happen:
lastMouseX = mouseX;
if(diffY + lastElementY + elementHeight < bottomLimit && diffY + lastElementY > topLimit) {
lastElementY += diffY;
} else {
//without this, the location wouldn't update at all:
//check if it would go off the bottom edge, set to bottom edge
if(diffY + lastElementY + elementHeight >= bottomLimit) {
lastElementY = bottomLimit - elementHeight;
}
//check if it would go off the top edge, set to top edge
if(diffY + lastElementY <= topLimit) {
lastElementY = topLimit;
}
}
//this will always happen:
lastMouseY = mouseY;
setCurrentElementPosition(lastElementX, lastElementY);
}
}
function setCurrentElementPosition(left = null, top = null) {
if(currentElement) {
currentElement.style.top = top + 'px'
currentElement.style.left = left + 'px';
}
}
function setCurrentElement(element) {
currentElement = element;
if(element) {
elementWidth = currentElement.offsetWidth;
elementHeight = currentElement.offsetHeight;
} else {
elementWidth = 0;
elementHeight = 0;
}
}
function hasClass(element, cls) {
return ("" + element.className + "").indexOf("" + cls + "") > -1;
}
function getElementUnderMouse(e) {
var x = e.clientX;
var y = e.clientY;
return document.elementFromPoint(x, y);
}
function report(e) {
console.log("isMouseDown: " + isMouseDown);
console.log("mouseX: " + e.clientX);
console.log("mouseY: " + e.clientY);
console.log("currentElement: " + currentElement);
console.log("currentElement top: " + currentElement.getBoundingClientRect().top);
console.log("currentElement bottom: " + currentElement.getBoundingClientRect().bottom);
console.log("container top: " + container.getBoundingClientRect().top);
console.log("container bottom: " + container.getBoundingClientRect().bottom);
}
init();
EDIT: Not sure why it's missing by one pixel at the right and bottom, you'll have to do some investigation on that front. Seems like it's not taking into consideration the border, despite you using offsetWidth. Good luck!

Here's my take; I've decoupled the element's movement from diffX/diffY:
https://jsfiddle.net/ttyrtjez/
// in onmousedown
offsetX = e.clientX - lastElementX;
offsetY = e.clientY - lastElementY;
// in onmousemove
var newElementX = mouseX - offsetX;
var newElementY = mouseY - offsetY;
if (newElementX + elementWidth >= rightLimit - 1) newElementX = rightLimit - elementWidth - 2;
if (newElementX < leftLimit) newElementX = leftLimit;
if (newElementY + elementHeight >= bottomLimit - 1) newElementY = bottomLimit - elementHeight - 2;
if (newElementY < topLimit) newElementY = topLimit;
setCurrentElementPosition(newElementX, newElementY);

html5 canvas cropping is incorrect, when margin is added

Hello I want to crop an image using canvas, but when the image is not on the top of the page, but has a margin or other elements before on the page, the result will get incorrect and has a wrong offset of the margin. I think it is a bad practice to substract the offset. Do I have to wrap the content in a special way or are my position attributes wrong?
the relevant function is cropMedia.
function cropMedia(media, {
stretch = 1,
left = 0,
top = 0,
width,
height
} = {}) {
const croppedCanvas = document.createElement('canvas');
croppedCanvas.width = width;
croppedCanvas.height = height;
const ctx = croppedCanvas.getContext('2d');
ctx.drawImage(media, left, top, width, height, 0, 0, width * stretch, height * stretch);
return croppedCanvas;
}
Here is my codepen for more relevant code: http://codepen.io/anon/pen/YqNaow
thank you ver much

Pay attention to mouseup. You try to get correct top and left values for fixed element, but its top and left properties of style calculated by the viewport of browser (not by the top and left of document). This is correct code.
class CanvasCrop {
constructor(media) {
let x1 = 0;
let y1 = 0;
let x2 = 0;
let y2 = 0;
let dragThreshold = 50;
let mousedown = false;
let dragging = false;
const selectionRect = document.getElementById('selectionRect');
function reCalc() {
var x3 = Math.min(x1, x2);
var x4 = Math.max(x1, x2);
var y3 = Math.min(y1, y2);
var y4 = Math.max(y1, y2);
selectionRect.style.left = x3 + 'px';
selectionRect.style.top = y3 + 'px';
selectionRect.style.width = x4 - x3 + 'px';
selectionRect.style.height = y4 - y3 + 'px';
}
function cropMedia(media, {
stretch = 1,
left = 0,
top = 0,
width,
height
} = {}) {
const croppedCanvas = document.createElement('canvas');
croppedCanvas.width = width;
croppedCanvas.height = height;
const ctx = croppedCanvas.getContext('2d');
ctx.drawImage(media, left, top, width, height, 0, 0, width * stretch, height * stretch);
return croppedCanvas;
}
media.onmousedown = function(e) {
mousedown = true;
selectionRect.hidden = 0;
x1 = e.clientX;
y1 = e.clientY;
};
onmousemove = function(e) {
//todo implement isDragging
if (mousedown) {
x2 = e.clientX;
y2 = e.clientY;
var deltaX = Math.abs(x2 - x1);
var deltaY = Math.abs(x2 - x1);
reCalc();
if (deltaX > dragThreshold || deltaY > dragThreshold) dragging = true;
}
};
onmouseup = (e) => {
var pic = document.getElementById('pic');
var offsetTop = pic.offsetTop;
var offsetLeft = pic.offsetLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
scrollTop -= offsetTop;
scrollLeft -= offsetLeft;
selectionRect.hidden = 1;
mousedown = false;
if (dragging) {
dragging = false;
let croppedCanvas = cropMedia(media, {
left: parseInt(selectionRect.style.left, 10) + scrollLeft,
top: parseInt(selectionRect.style.top, 10) + scrollTop,
width: parseInt(selectionRect.style.width, 10),
height: parseInt(selectionRect.style.height, 10)
});
const preview = document.getElementById('preview');
preview.innerHTML = '';
preview.appendChild(croppedCanvas);
}
};
}
}
const cc = new CanvasCrop(document.getElementById('pic'));

Show mousex and mousey position using JavaScript not working

HTML and JavaScript code are shown below and I have checked it in mozila and chrome and it's not working.
This is the HTML part
<form name ="show">
<input type="text" name="mouseXField" >Mouse X Position<br />
<input type="text" name="mouseYField" >Mouse Y Position<br />
</form>
This is javascript part
var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
if (!mie) {
document.captureEvent(Event.MOUSEMOVE);
document.captureEvent(Event.MOUSEDOWN);
}
document.onmousemove = mousePos();
document.onmousedown = mouseClicked();
var mouseClick=0;
var keyClicked=0;
var mouseX = 0;
var mouseY = 0;
function mousePos (e) {
if (!mie) {
mouseX = e.pageX;
mouseY = e.pageY;
}
else {
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
document.show.mouseXField.value = mouseX;
document.show.mouseYField.value = mouseY;
return true;
}

Here is a solution with jquery : fiddle
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
}
else
{
tempX = e.pageX
tempY = e.pageY
}
$('#spnCursor').html("x: " + tempX+" y: "+ tempY);
return true
}

Where is the event variable referenced in your else block declared?
Could you also post the html?
A quick google revealed a few jsfiddle pages which achieve what you're after.

angularjs: rescaling textbox

I'm trying to make an editable textbox like those in powerpoint and other presentation editors.
This is my feeble attempt.
I'm having trouble with the initial rescaling. To be concise, the first instant when I adjust the drag handle, the box does not scale to the correct height and width.
Any idea why is that so?
element.find('span').bind('mousedown', function(event) {
console.log('resizing...');
event.preventDefault();
var domElement = element[0];
var rect = domElement.getBoundingClientRect();
startX = rect.left;
startY = rect.bottom;
console.log(startX + " " + startY);
$document.bind('mousemove', resize);
$document.bind('mouseup', mouseup2);
event.cancelBubble = true;
});
function resize(event) {
var height = event.screenY - startY;
var width = event.screenX - startX;
scope.$apply(function() {
scope.tb.height = height + 'px';
scope.tb.width = width + 'px';
});
}

I updated your fiddle implementing this:
tbW and tbH hold the current box size (inital 200px x 100px):
var tbW = 200,
tbH = 100;
scope.tb.width = tbW + 'px',
scope.tb.height = tbH + 'px';
On mousedown startX and startY are assigned to the current mouse postion
In the resize function the delta of the mouse movement is calculated and added to the width and height of your tbox:
tbH += event.screenY - startY;
startY = event.screenY;
tbW += event.screenX - startX;
startX = event.screenX;
scope.$apply(function () {
scope.tb.height = tbH + 'px';
scope.tb.width = tbW + 'px';
});

coordinates mouse canvas

So ... I created canvas element with jquery:
var canvasElement = $("<canvas id='map' width='" + CANVAS_WIDTH + "' height='" + CANVAS_HEIGHT + "'></canvas");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');
And now i want to get mouse coordinates, but the next code doesn't work:
canvasElement.onmousemove = mousemove;
function mousemove(evt) {
var mouseX = evt.pageX - canvasElement.offsetLeft;
var mouseY = evt.pageY - canvasElement.offsetTop;
alert(mouseX+":"+mouseY);
}
canvasElement.offsetLeft is not work, evt.pageX too... Help !

Those properties aren't cross-browser.
I know of two solutions to get the canvas position :
the easy one : use jQuery offset
another one : use a custom and complex code :
if (!canvasElement.offsetX) {
// firefox
var obj = canvasElement;
var oX = obj.offsetLeft;var oY = obj.offsetTop;
while(obj.parentNode){
oX=oX+obj.parentNode.offsetLeft;
oY=oY+obj.parentNode.offsetTop;
if(obj==document.getElementsByTagName('body')[0]){break}
else{obj=obj.parentNode;}
}
canvas_position_x = oX;
canvas_position_y = oY;
} else {
// chrome
canvas_position_x = canvasElement.offsetX;
canvas_position_y = canvasElement.offsetY;
}
As there is a loop, you'd better store canvas_position_x and canvas_position_y and have them recomputed at each document resize instead of at each mousemove.
Demonstration

Live Demo
Its pretty easy actually without jQuery. Below is the important part from the fiddle. cX and cY are the coordinates of the clicked canvas.
function clicked(e) {
var cX = 0,
cY = 0;
if (event.pageX || event.pageY) {
cX = event.pageX;
cY = event.pageY;
}
else {
cX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
cY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
cX -= canvas.offsetLeft;
cY -= canvas.offsetTop;
ctx.fillRect(cX, cY, 2, 2);
}​
Demo with mouse move