fix: crop box overflows in "viewMode" 1 and 2

When using "viewMode" 1 or 2, the crop box could overflow if the canvas
is moved partly beyond the container boundaries.

If moved beyond the top/left boundaries, it could overflow the
container. If moved beyond the bottom/right boundaries, it could
overflow the canvas (exceeding its size).

src/js/render.js

@@ -366,14 +366,28 @@ export default {
  if (sizeLimited) {
  let minCropBoxWidth = Number(options.minCropBoxWidth) || 0;
  let minCropBoxHeight = Number(options.minCropBoxHeight) || 0;
- let maxCropBoxWidth = Math.min(
- containerData.width,
- limited ? canvasData.width : containerData.width,
- );
- let maxCropBoxHeight = Math.min(
- containerData.height,
- limited ? canvasData.height : containerData.height,
- );
+ let maxCropBoxWidth = containerData.width;
+ let maxCropBoxHeight = containerData.height;
+
+ if (limited) {
+ const canvasRight = containerData.width - canvasData.left - canvasData.width;
+ const canvasBottom = containerData.height - canvasData.top - canvasData.height;
+
+ maxCropBoxWidth = Math.min(
+ containerData.width,
+ Math.min(
+ canvasData.width,
+ canvasData.width + (canvasRight < 0 ? canvasRight : canvasData.left),
+ ),
+ );
+ maxCropBoxHeight = Math.min(
+ containerData.height,
+ Math.min(
+ canvasData.height,
+ canvasData.height + (canvasBottom < 0 ? canvasBottom : canvasData.top),
+ ),
+ );
+ }
 
  // The min/maxCropBoxWidth/Height must be less than container's width/height
  minCropBoxWidth = Math.min(minCropBoxWidth, containerData.width);

test/specs/options/viewMode.spec.js

@@ -28,11 +28,55 @@ describe('viewMode (option)', () => {
  viewMode: 1,
 
  ready() {
- const canvasData = cropper.zoom(-0.5).getCanvasData();
- const cropBoxData = cropper.getCropBoxData();
+ let canvasData = cropper.zoom(-0.5).getCanvasData();
+ let cropBoxData = cropper.getCropBoxData();
 
  expect(canvasData.width).to.be.least(cropBoxData.width);
  expect(canvasData.height).to.be.least(cropBoxData.height);
+
+ // Move the canvas beyond the top and left container boundaries
+ canvasData = cropper.zoom(0.5).setCropBoxData({
+ left: 0,
+ top: 0,
+ width: 10,
+ height: 10,
+ }).moveTo(-200).getCanvasData();
+
+ expect(canvasData.left).to.be.equal(-200);
+ expect(canvasData.top).to.be.equal(-200);
+
+ cropBoxData = cropper.setCropBoxData({
+ width: canvasData.width,
+ height: canvasData.height,
+ }).getCropBoxData();
+
+ expect(cropBoxData.width).to.be.equal(canvasData.width + canvasData.left);
+ expect(cropBoxData.height).to.be.equal(canvasData.height + canvasData.top);
+
+ // Move the canvas beyond the bottom and right container boundaries
+ canvasData = cropper.setCropBoxData({
+ left: cropBoxData.width,
+ top: cropBoxData.height,
+ width: 10,
+ height: 10,
+ }).move(500).getCanvasData();
+
+ const canvasRight = cropper.getContainerData().width - canvasData.left - canvasData.width;
+ const canvasBottom = cropper.getContainerData().height - canvasData.top - canvasData.height;
+
+ expect(canvasData.left).to.be.least(1);
+ expect(canvasData.top).to.be.least(1);
+ expect(canvasRight).to.be.below(0);
+ expect(canvasBottom).to.be.below(0);
+
+ cropBoxData = cropper.setCropBoxData({
+ width: canvasData.width,
+ height: canvasData.height,
+ }).getCropBoxData();
+
+ expect(cropBoxData.width).to.be.equal(canvasData.width + canvasRight);
+ expect(cropBoxData.height).to.be.equal(canvasData.height + canvasBottom);
+
  done();
  },
  });