Limit resize in Fabric.js - html5-canvas

Question

I'm trying to limit max object resize in Fabric.js. I'm using observe("object:scaling") with this code:
canvasLI.observe("object:scaling", function(e) {
var shape = e.target;
var scaleX = shape.scaleX;
var scaleY = shape.scaleY;
var posX = shape.left;
var posY = shape.top;
if(!isNaN(scaleX) && scaleX > 2)
{
shape.set({
scaleX: 2,
});
}
if(!isNaN(scaleY) && scaleY > 2)
{
shape.set({
scaleY: 2,
});
}
shape.set({
left: posX,
top: posY,
});
console.log("X:" + ( shape.scaleX) + " Y:" + (shape.scaleY));
});
It works fine, and limit max size in scale, but when one object has scale limit and try to resize again, it moves following the mouse cursor on top and bottom-left controls (not in bottom-right control).
Also, I tried to capture left and top values in the object to move it to these values, but doesn't work.
Thanks.
PS: Also tried to change shape.width and shape.height instead of scaleX and scaleY and the problem is the same.
EDIT:
I have been could stop the movement of the object on scaling adding lockScalingX:true and lockScalingY:true to the code on max-scale, but now I have another problem. How I can disable this lockScaling putting this value to false when I scale DOWN? How I can get the event of scale DOWN?

Answer 1

You can use the callback onBeforeScaleRotate
canvas.onBeforeScaleRotate = function lock(object) {
object.set({ lockScalingX:false, lockScalingY: false });
};

Answer 2

The following will stop the object to resize over the canvas size and resize in the reverse side.
canvas.on('object:scaling', function(event){
var el = event.target;
if (el && (el.height*el.scaleX) > 10 && (el.left + (el.width*el.scaleX)) < canvas.width && (el.top + (el.height*el.scaleY)) < canvas.height){
previous_scaleY=el.scaleY;
previous_scaleX=el.scaleX;
previous_left=el.left;
previous_top=el.top;
}
if(el && (el.height*el.scaleX) <10) {
el.left=previous_left;
el.top=previous_top;
el.scaleX=previous_scaleX;
el.scaleY=previous_scaleY;
el.lockScalingX=true;
el.lockScalingY= true;
canvas.renderAll();
}
if (el && (el.left + (el.width*el.scaleX)) > canvas.width || (el.top + (el.height*el.scaleY)) > canvas.height){
console.log('mOVINGGGGGGGGGGGGG');
el.left=previous_left;
el.top=previous_top;
console.log('Scale X:'+el.scaleX);
console.log('Scale Y:'+el.scaleY);
console.log('width:'+el.width);
console.log('Height:'+el.height);
console.log('Previous Y: '+previous_scaleY); // PREVIOUS SCALE X & Y WILL COME FROM MOUSE DOWN EVENT
el.scaleX=previous_scaleX;
el.scaleY=previous_scaleY;
canvas.renderAll();
}
});
canvas.observe('mouse:up', function (e) {
var activeObject = e.target;
activeObject.lockScalingX=false; // this will connect with object scalling event
activeObject.lockScalingY= false;
});