I have a code to resize an element, I need to capture the resize from a margin of 18 pixels:
$(document).on("mousedown",".image",function(me) {
var move = $(this);
var fm = matrix(this);
var sv = scaleValue(this);
//--
var data = move.offset();
data.width = move.width();
data.height = move.height();
var sx = me.clientX;
var sy = me.clientY;
var x = (me.offsetX != null) ? me.offsetX : me.originalEvent.layerX;
var y = (me.offsetY != null) ? me.offsetY : me.originalEvent.layerY;
//--
var elementW = move.width();
var elementH = move.height();
var relX = me.pageX - move.offset().left;
var relY = me.pageY - move.offset().top;
var isSizingRight = false, isSizingLeft = false, isSizingHeight = false;
var margin = 18;
var img_crop_margin_width = (elementW - margin);
var img_crop_margin_height = (elementH - margin);
if ((data.height - x) < 18) {
isSizingRight = true;
} else if((data.height - y) < 18) {
isSizingHeight = true;
} else {
if (x < 18 || y < 18) {
isSizingLeft = true;
}
}
// console.log(isSizing + " - " + isSizingLeft);
//--
var lastOffset = move.data('lastTransform');
var lastOffsetX = lastOffset ? lastOffset.dx : 0,
lastOffsetY = lastOffset ? lastOffset.dy : 0;
lastOffsetX = lastOffsetY = 0;
var startX = me.pageX - lastOffsetX, startY = me.pageY - lastOffsetY;
$(document).on("mousemove",function(e) {
if(!isEraser && !drawPen) {
var newDx = (e.pageX - startX),
newDy = (e.pageY - startY);
if (isSizingRight) {
// console.log('aumento para direita - x');
var dif = e.pageX - startX;
var startScale = (((dif - 48) / 100) / 2.5);
var scaleVal = ((elementW + dif) / elementW) + startScale;
var t = scale(fm, scaleVal);
startScale = 0;
move.css('transform', t);
} else if (isSizingHeight) {
// console.log('aumento para direita - y');
var dif = startX - e.pageX;
var startScale = (((dif - 48) / 100) / 2.5);
var scaleVal = ((elementH + dif) / elementH) + startScale;
var t = scale(fm, scaleVal);
startScale = 0;
move.css('transform', t);
} else {
if (isSizingLeft) {
// console.log('aumento para esquerda - x');
var dif = startX - e.pageX;
var startScale = (((dif - 48) / 100) / 2.5);
var scaleVal = ((elementW + dif) / elementW) + startScale;
var t = scale(fm, scaleVal);
startScale = 0;
move.css('transform', t);
} else {
var t = translate(fm, newDx / sv, newDy / sv);
// console.log('arrastar');
move.css('transform', t);
//move.css('transform','translate(' + newDx + 'px, ' + newDy + 'px)');
// we need to save last made offset
move.data('lastTransform', {dx: newDx, dy: newDy});
}
}
}
});
});
The problem is that it is not working very well on the right side. It should only drag the object and resize only when it is on the margin.