How to limit pan to canvas edges? - fabricjs

Question

I use fabricJS to edit an image, i've already implemented a zoom tool and a pan tool.
The paning method :
if (!this.isStartedAction) return;
var x = ev.e.screenX,
y = ev.e.screenY;
this.canvas.relativePan({ x: x - this.firstPositionPan.x, y: y - this.firstPositionPan.y });
this.firstPositionPan.x = x;
this.firstPositionPan.y = y;
Problem is, regardless if i zoomed or not, when i use the pan i can move my image outside the canvas. I would like to limit the move to the edge of the canvas but i don't know how to do.
Any suggestion?

Answer 1

Try this
canvas.on('mouse:move', function (e) {
if (isPanning && e && e.e) {
var delta = new fabric.Point(e.e.movementX, e.e.movementY);
canvas.relativePan(delta);
var canvasViewPort = canvas.viewportTransform;
var imageHeight = canvas.height * canvasViewPort[0];
var imageWidth = canvas.width * canvasViewPort[0];
var bottomEndPoint = canvas.height * (canvasViewPort[0] - 1);
if(canvasViewPort[5] >= 0 || -bottomEndPoint > canvasViewPort[5]) {
canvasViewPort[5] = (canvasViewPort[5] >= 0) ? 0 : -bottomEndPoint;
}
var rightEndPoint = canvas.width * (canvasViewPort[0] - 1);
if(canvasViewPort[4] >= 0 || -rightEndPoint > canvasViewPort[4]) {
canvasViewPort[4] = (canvasViewPort[4] >= 0) ? 0 : -rightEndPoint;
}
}
});