Image panning of the image using the FabricJs

I am trying to implement the panning of the image while the image moves after double click on the image. It’s working fine for the non-rotated images. It’s not working for the rotated images. Here is the link to my code jsfiddle

canvas.observe('object:moving', function(e) {
        var movingBox = e.target;
  movingBox.setCoords();
        
  var top = movingBox.oCoords.tl.y;
  var bottom = top + movingBox.height;
  var left = movingBox.oCoords.tl.x;
  var right = left + movingBox.width;
  
  var boundingBox = picArea;
 boundingBox.setCoords();

  var topBound = boundingBox.oCoords.tl.y;
  var bottomBound = topBound + boundingBox.height;
  var leftBound = boundingBox.oCoords.tl.x;
  var rightBound = leftBound + boundingBox.width;
 movingBox.left = (Math.max(Math.min(left, leftBound), rightBound - movingBox.width));
 movingBox.top = (Math.max(Math.min(top, topBound), bottomBound - movingBox.height));
    }
   
);