fabric 7.1.0 → 7.2.0

package/extensions/cropping_controls/croppingHandlers.spec.ts

@@ -1,17 +1,18 @@
 import type { Transform } from 'fabric';
-import { FabricImage, Canvas } from 'fabric';
+import { FabricImage, Canvas, Control, Point } from 'fabric';
+import { createImageCroppingControls } from './croppingControls';
 import {
   changeImageWidth,
-  changeCropWidth,
   changeImageHeight,
-  changeCropHeight,
   changeImageCropX,
-  changeCropX,
   changeImageCropY,
-  changeCropY,
+  cropPanMoveHandler,
+  ghostScalePositionHandler,
+  scaleEquallyCropGenerator,
+  renderGhostImage,
 } from './croppingHandlers';
 
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { describe, expect, test, beforeEach, afterEach, vi } from 'vitest';
 
 describe('croppingHandlers', () => {
   let canvas: Canvas;
@@ -26,7 +27,7 @@ describe('croppingHandlers', () => {
       corner,
       originX: origin.x,
       originY: origin.y,
-    } as Transform;
+    } as unknown as Transform;
   }
 
   function createMockImage(
@@ -57,6 +58,8 @@ describe('croppingHandlers', () => {
       cropX,
       cropY,
     });
+    img.controls = createImageCroppingControls();
+
     return img;
   }
 
@@ -65,7 +68,7 @@ describe('croppingHandlers', () => {
     image = createMockImage();
     canvas.add(image);
     eventData = {};
-    transform = prepareTransform(image, 'mr');
+    transform = prepareTransform(image, 'mrc');
   });
 
   afterEach(() => {
@@ -85,7 +88,7 @@ describe('croppingHandlers', () => {
       // Image element is 200px wide, cropX is 0, so max available is 200
       image = createMockImage({ width: 100, cropX: 50, elementWidth: 200 });
       canvas.add(image);
-      transform = prepareTransform(image, 'mr');
+      transform = prepareTransform(image, 'mrc');
 
       // Try to set width beyond available (200 - 50 = 150 available)
       changeImageWidth(eventData, transform, 500, 50);
@@ -94,7 +97,7 @@ describe('croppingHandlers', () => {
 
     test('constrains width to minimum of 1 (lower limit)', () => {
       image = createMockImage({ width: 100, cropX: 50, elementWidth: 200 });
-      transform = prepareTransform(image, 'mr');
+      transform = prepareTransform(image, 'mrc');
       changeImageWidth(eventData, transform, 0.1, 50);
       expect(image.width).toBe(1);
     });
@@ -105,7 +108,7 @@ describe('croppingHandlers', () => {
         cropX: 50,
         elementWidth: 200,
       });
-      transform = prepareTransform(image, 'mr');
+      transform = prepareTransform(image, 'mrc');
       const changed = changeImageWidth(eventData, transform, 200, 50);
       expect(changed).toBe(true);
       const changed2 = changeImageWidth(eventData, transform, 200, 50);
@@ -113,17 +116,6 @@ describe('croppingHandlers', () => {
     });
   });
 
-  describe('changeCropWidth', () => {
-    test('is wrapped with wrapWithFireEvent and wrapWithFixedAnchor', () => {
-      // Re-import to trigger the wrapping
-      // Since the module is already loaded, we verify the export is a function
-      expect(typeof changeCropWidth).toBe('function');
-
-      // The wrapped function should be different from the base function
-      expect(changeCropWidth).not.toBe(changeImageWidth);
-    });
-  });
-
   describe('changeImageHeight', () => {
     beforeEach(() => {
       image = createMockImage({
@@ -131,7 +123,7 @@ describe('croppingHandlers', () => {
         cropY: 50,
         elementHeight: 200,
       });
-      transform = prepareTransform(image, 'mb');
+      transform = prepareTransform(image, 'mbc');
     });
 
     test('changes height normally when within bounds', () => {
@@ -161,14 +153,6 @@ describe('croppingHandlers', () => {
     });
   });
 
-  describe('changeCropHeight', () => {
-    test('is wrapped with wrapWithFireEvent and wrapWithFixedAnchor', () => {
-      // The wrapped function should be different from the base function
-      expect(typeof changeCropHeight).toBe('function');
-      expect(changeCropHeight).not.toBe(changeImageHeight);
-    });
-  });
-
   describe('changeImageCropX', () => {
     beforeEach(() => {
       image = createMockImage({
@@ -177,7 +161,7 @@ describe('croppingHandlers', () => {
         elementWidth: 200,
       });
       // Use 'ml' corner for cropX - changing left side moves cropX
-      transform = prepareTransform(image, 'ml');
+      transform = prepareTransform(image, 'mlc');
     });
 
     test('changes cropX and width together', () => {
@@ -189,7 +173,7 @@ describe('croppingHandlers', () => {
 
     test('constrains cropX to minimum of 0 and adjusts width accordingly', () => {
       image = createMockImage({ width: 100, cropX: 10, elementWidth: 200 });
-      transform = prepareTransform(image, 'ml');
+      transform = prepareTransform(image, 'mlc');
 
       changeImageCropX(eventData, transform, -10, 50);
 
@@ -215,13 +199,6 @@ describe('croppingHandlers', () => {
     });
   });
 
-  describe('changeCropX', () => {
-    test('is wrapped with wrapWithFireEvent and wrapWithFixedAnchor', () => {
-      expect(typeof changeCropX).toBe('function');
-      expect(changeCropX).not.toBe(changeImageCropX);
-    });
-  });
-
   describe('changeImageCropY', () => {
     beforeEach(() => {
       image = createMockImage({
@@ -230,7 +207,7 @@ describe('croppingHandlers', () => {
         elementHeight: 200,
       });
       // Use 'mt' corner for cropY - changing top side moves cropY
-      transform = prepareTransform(image, 'mt');
+      transform = prepareTransform(image, 'mtc');
     });
 
     test('changes cropY and height together', () => {
@@ -245,7 +222,7 @@ describe('croppingHandlers', () => {
     test('constrains cropY to minimum of 0 and adjusts height accordingly', () => {
       image = createMockImage({ height: 100, cropY: 10, elementHeight: 200 });
       canvas.add(image);
-      transform = prepareTransform(image, 'mt');
+      transform = prepareTransform(image, 'mtc');
 
       changeImageCropY(eventData, transform, 50, -30);
 
@@ -261,10 +238,342 @@ describe('croppingHandlers', () => {
     });
   });
 
-  describe('changeCropY', () => {
-    test('is wrapped with wrapWithFireEvent and wrapWithFixedAnchor', () => {
-      expect(typeof changeCropY).toBe('function');
-      expect(changeCropY).not.toBe(changeImageCropY);
+  describe('cropPanMoveHandler', () => {
+    beforeEach(() => {
+      image = createMockImage({
+        width: 100,
+        height: 100,
+        cropX: 50,
+        cropY: 50,
+        elementWidth: 300,
+        elementHeight: 300,
+      });
+      canvas.add(image);
+    });
+
+    test('pans the image by adjusting cropX and cropY', () => {
+      const original = {
+        left: image.left,
+        top: image.top,
+        cropX: image.cropX,
+        cropY: image.cropY,
+      };
+
+      // Simulate moving the image 10px to the right and 10px down
+      image.left = original.left + 10;
+      image.top = original.top + 10;
+
+      const moveEvent = {
+        transform: {
+          target: image,
+          original,
+        } as unknown as Transform,
+      };
+
+      cropPanMoveHandler(moveEvent as any);
+
+      // cropX should decrease (panning right means showing more of the left side)
+      expect(image.cropX).toBeLessThan(original.cropX);
+      // cropY should decrease (panning down means showing more of the top)
+      expect(image.cropY).toBeLessThan(original.cropY);
+      // Position should be restored to original
+      expect(image.left).toBe(original.left);
+      expect(image.top).toBe(original.top);
+    });
+
+    test('constrains cropX to minimum of 0', () => {
+      const original = {
+        left: image.left,
+        top: image.top,
+        cropX: 10,
+        cropY: 50,
+      };
+      image.cropX = 10;
+
+      // Move far right to try to get negative cropX
+      image.left = original.left + 100;
+      image.top = original.top;
+
+      const moveEvent = {
+        transform: {
+          target: image,
+          original,
+        } as unknown as Transform,
+      };
+
+      cropPanMoveHandler(moveEvent as any);
+
+      expect(image.cropX).toBeGreaterThanOrEqual(0);
+    });
+
+    test('constrains cropY to minimum of 0', () => {
+      const original = {
+        left: image.left,
+        top: image.top,
+        cropX: 50,
+        cropY: 10,
+      };
+      image.cropY = 10;
+
+      // Move far down to try to get negative cropY
+      image.left = original.left;
+      image.top = original.top + 100;
+
+      const moveEvent = {
+        transform: {
+          target: image,
+          original,
+        } as unknown as Transform,
+      };
+
+      cropPanMoveHandler(moveEvent as any);
+
+      expect(image.cropY).toBeGreaterThanOrEqual(0);
+    });
+
+    test('constrains cropX so crop area stays within element bounds', () => {
+      const original = {
+        left: image.left,
+        top: image.top,
+        cropX: 150, // Near the right edge (element is 300px wide)
+        cropY: 50,
+      };
+      image.cropX = 150;
+
+      // Move far left to try to exceed element width
+      image.left = original.left - 200;
+      image.top = original.top;
+
+      const moveEvent = {
+        transform: {
+          target: image,
+          original,
+        } as unknown as Transform,
+      };
+
+      cropPanMoveHandler(moveEvent as any);
+
+      // cropX + width should not exceed element width
+      expect(image.cropX + image.width).toBeLessThanOrEqual(300);
+    });
+
+    test('constrains cropY so crop area stays within element bounds', () => {
+      const original = {
+        left: image.left,
+        top: image.top,
+        cropX: 50,
+        cropY: 150, // Near the bottom edge (element is 300px tall)
+      };
+      image.cropY = 150;
+
+      // Move far up to try to exceed element height
+      image.left = original.left;
+      image.top = original.top - 200;
+
+      const moveEvent = {
+        transform: {
+          target: image,
+          original,
+        } as unknown as Transform,
+      };
+
+      cropPanMoveHandler(moveEvent as any);
+
+      // cropY + height should not exceed element height
+      expect(image.cropY + image.height).toBeLessThanOrEqual(300);
+    });
+  });
+
+  describe('ghostScalePositionHandler', () => {
+    beforeEach(() => {
+      image = createMockImage({
+        width: 100,
+        height: 100,
+        cropX: 50,
+        cropY: 50,
+        elementWidth: 300,
+        elementHeight: 300,
+      });
+      canvas.add(image);
+    });
+
+    test('positions top-left corner control correctly', () => {
+      const control = new Control({ x: -0.5, y: -0.5 });
+      const result = ghostScalePositionHandler.call(
+        control,
+        new Point(100, 100),
+        [1, 2, 3, 4, 5, 6], // this matrix is not used
+        image,
+      );
+
+      expect(result).toEqual({ x: -50, y: -50 });
+    });
+
+    test('positions bottom-right corner control correctly', () => {
+      const control = new Control({ x: 0.5, y: 0.5 });
+      const result = ghostScalePositionHandler.call(
+        control,
+        new Point(100, 100),
+        [1, 2, 3, 4, 5, 6], // this matrix is not used
+        image,
+      );
+
+      expect(result).toEqual({ x: 250, y: 250 });
+    });
+
+    test('positions top-right corner control correctly', () => {
+      const control = new Control({ x: 0.5, y: -0.5 });
+      const result = ghostScalePositionHandler.call(
+        control,
+        new Point(100, 100),
+        [1, 2, 3, 4, 5, 6], // this matrix is not used
+        image,
+      );
+
+      expect(result).toEqual({ x: 250, y: -50 });
+    });
+
+    test('positions bottom-left corner control correctly', () => {
+      const control = new Control({ x: -0.5, y: 0.5 });
+      const result = ghostScalePositionHandler.call(
+        control,
+        new Point(100, 100),
+        [1, 2, 3, 4, 5, 6], // this matrix is not used
+        image,
+      );
+
+      expect(result).toEqual({ x: -50, y: 250 });
+    });
+  });
+
+  describe('scaleEquallyCropGenerator', () => {
+    beforeEach(() => {
+      image = createMockImage({
+        width: 100,
+        height: 100,
+        cropX: 50,
+        cropY: 50,
+        elementWidth: 300,
+        elementHeight: 300,
+      });
+      canvas.add(image);
+    });
+
+    test('returns a TransformActionHandler function', () => {
+      const handler = scaleEquallyCropGenerator(-0.5, -0.5);
+      expect(typeof handler).toBe('function');
+    });
+
+    test('scales image uniformly from top-left corner', () => {
+      const handler = scaleEquallyCropGenerator(-0.5, -0.5);
+      transform = prepareTransform(image, 'tls');
+      expect(image.scaleX).toBe(1);
+      // Simulate dragging to scale up
+      const result = handler(eventData, transform, -400, -400);
+
+      // The handler should return a boolean
+      expect(result).toBe(true);
+      expect(image.scaleX.toFixed(2)).toBe('2.17');
+      expect(image.scaleX).toBe(image.scaleY);
+    });
+
+    test('scales image uniformly from bottom-right corner', () => {
+      const handler = scaleEquallyCropGenerator(0.5, 0.5);
+      transform = prepareTransform(image, 'brs');
+      expect(image.scaleX).toBe(1);
+      const result = handler(eventData, transform, 400, 400);
+      expect(result).toBe(true);
+      expect(image.scaleX).toBe(1.5);
+      expect(image.scaleX).toBe(image.scaleY);
+    });
+
+    test('returns false when scaling would exceed element bounds', () => {
+      // Set up image near the edge of element
+      image = createMockImage({
+        width: 250,
+        height: 250,
+        cropX: 25,
+        cropY: 25,
+        elementWidth: 300,
+        elementHeight: 300,
+      });
+      canvas.add(image);
+
+      const handler = scaleEquallyCropGenerator(-0.5, -0.5);
+      transform = prepareTransform(image, 'tls');
+
+      // Try to scale down significantly which might push bounds
+      const result = handler(eventData, transform, 10, 10);
+
+      expect(result).toBe(false);
+    });
+
+    test('adjusts cropX and cropY when scaling from negative corner', () => {
+      image = createMockImage({
+        width: 90,
+        height: 90,
+        cropX: 25,
+        cropY: 25,
+        elementWidth: 300,
+        elementHeight: 300,
+      });
+      canvas.add(image);
+      const handler = scaleEquallyCropGenerator(-0.5, -0.5);
+      transform = prepareTransform(image, 'tls');
+      expect(image.cropX).toBe(25);
+      expect(image.cropY).toBe(25);
+      const result = handler(eventData, transform, 5, 5);
+      expect(result).toBe(true);
+      // When scaling from top-left, cropX and cropY should be recalculated
+      expect(image.cropX).toBe(0);
+      expect(image.cropY).toBe(0);
+    });
+  });
+
+  describe('renderGhostImage', () => {
+    beforeEach(() => {
+      image = createMockImage({
+        width: 100,
+        height: 100,
+        cropX: 50,
+        cropY: 50,
+        elementWidth: 300,
+        elementHeight: 300,
+      });
+    });
+
+    test('draws image at correct position based on crop values', () => {
+      const mockCtx = {
+        globalAlpha: 1,
+        drawImage: vi.fn(),
+      } as unknown as CanvasRenderingContext2D;
+
+      renderGhostImage.call(image, { ctx: mockCtx });
+
+      // Should draw at (-width/2 - cropX, -height/2 - cropY)
+      // = (-50 - 50, -50 - 50) = (-100, -100)
+      expect(mockCtx.drawImage).toHaveBeenCalledWith(
+        image._element,
+        -100,
+        -100,
+      );
+    });
+
+    test('temporarily reduces globalAlpha by 50%', () => {
+      let alphaWhenDrawing: number | undefined;
+      const mockCtx = {
+        globalAlpha: 0.8,
+        drawImage: vi.fn(() => {
+          alphaWhenDrawing = mockCtx.globalAlpha;
+        }),
+      } as unknown as CanvasRenderingContext2D;
+
+      renderGhostImage.call(image, { ctx: mockCtx });
+
+      // During draw, alpha should be 0.8 * 0.5 = 0.4
+      expect(alphaWhenDrawing).toBe(0.4);
+      // After render, alpha should be restored
+      expect(mockCtx.globalAlpha).toBe(0.8);
     });
   });
 });

package/extensions/cropping_controls/croppingHandlers.ts

@@ -4,6 +4,8 @@ import type {
   TransformActionHandler,
   FabricImage,
   ObjectEvents,
+  Control,
+  TMat2D,
 } from 'fabric';
 import { controlsUtils, Point, util } from 'fabric';
 
@@ -160,3 +162,124 @@ export const cropPanMoveHandler = ({ transform }: ObjectEvents['moving']) => {
   fabricImage.left = original.left;
   fabricImage.top = original.top;
 };
+
+/**
+ * This position handler works only for this specific use case.
+ * It does not support padding nor offset, and it reduces all possible positions
+ * to the main 4 corners only.
+ * Any position that is < 0 is the extreme left/top, the rest are right/bottom
+ */
+export function ghostScalePositionHandler(
+  this: Control,
+  dim: Point, // currentDimension
+  finalMatrix: TMat2D,
+  fabricObject: FabricImage,
+  // currentControl: Control,
+) {
+  const matrix = fabricObject.calcTransformMatrix();
+  const vpt = fabricObject.getViewportTransform();
+  const _finalMatrix = util.multiplyTransformMatrices(vpt, matrix);
+
+  let x = 0;
+  let y = 0;
+  if (this.x < 0) {
+    x = -fabricObject.width / 2 - fabricObject.cropX;
+  } else {
+    x =
+      fabricObject.getElement().width -
+      fabricObject.width / 2 -
+      fabricObject.cropX;
+  }
+
+  if (this.y < 0) {
+    y = -fabricObject.height / 2 - fabricObject.cropY;
+  } else {
+    y =
+      fabricObject.getElement().height -
+      fabricObject.height / 2 -
+      fabricObject.cropY;
+  }
+  return new Point(x, y).transform(_finalMatrix);
+}
+
+const calcScale = (currentPoint: Point, height: number, width: number) =>
+  Math.min(Math.abs(currentPoint.x / width), Math.abs(currentPoint.y / height));
+
+/**
+ * Action handler generator that handles scaling of an image in crop mode.
+ * The goal is to keep the current bounding box steady.
+ * So this action handler has its own calculations for a dynamic anchor point
+ */
+export const scaleEquallyCropGenerator =
+  (cx: number, cy: number): TransformActionHandler =>
+  (eventData, transform, x, y) => {
+    const { target } = transform as unknown as { target: FabricImage };
+    const { width: fullWidth, height: fullHeight } = target.getElement();
+    const remainderX = fullWidth - target.width - target.cropX;
+    const remainderY = fullHeight - target.height - target.cropY;
+    const anchorOriginX =
+      cx < 0 ? 1 + remainderX / target.width : -target.cropX / target.width;
+    const anchorOriginY =
+      cy < 0 ? 1 + remainderY / target.height : -target.cropY / target.height;
+    const constraint = target.translateToOriginPoint(
+      target.getCenterPoint(),
+      anchorOriginX,
+      anchorOriginY,
+    );
+    const newPoint = controlsUtils.getLocalPoint(
+      transform,
+      anchorOriginX,
+      anchorOriginY,
+      x,
+      y,
+    );
+    const scale = calcScale(newPoint, fullHeight, fullWidth);
+    const scaleChangeX = scale / target.scaleX;
+    const scaleChangeY = scale / target.scaleY;
+    const scaledRemainderX = remainderX / scaleChangeX;
+    const scaledRemainderY = remainderY / scaleChangeY;
+    const newWidth = target.width / scaleChangeX;
+    const newHeight = target.height / scaleChangeY;
+    const newCropX =
+      cx < 0
+        ? fullWidth - newWidth - scaledRemainderX
+        : target.cropX / scaleChangeX;
+    const newCropY =
+      cy < 0
+        ? fullHeight - newHeight - scaledRemainderY
+        : target.cropY / scaleChangeY;
+
+    if (
+      (cx < 0 ? scaledRemainderX : newCropX) + newWidth > fullWidth ||
+      (cy < 0 ? scaledRemainderY : newCropY) + newHeight > fullHeight
+    ) {
+      return false;
+    }
+
+    target.scaleX = scale;
+    target.scaleY = scale;
+    target.width = newWidth;
+    target.height = newHeight;
+    target.cropX = newCropX;
+    target.cropY = newCropY;
+    const newAnchorOriginX =
+      cx < 0 ? 1 + scaledRemainderX / newWidth : -newCropX / newWidth;
+    const newAnchorOriginY =
+      cy < 0 ? 1 + scaledRemainderY / newHeight : -newCropY / newHeight;
+    target.setPositionByOrigin(constraint, newAnchorOriginX, newAnchorOriginY);
+    return true;
+  };
+
+export function renderGhostImage(
+  this: FabricImage,
+  { ctx }: { ctx: CanvasRenderingContext2D },
+) {
+  const alpha = ctx.globalAlpha;
+  ctx.globalAlpha *= 0.5;
+  ctx.drawImage(
+    this._element,
+    -this.width / 2 - this.cropX,
+    -this.height / 2 - this.cropY,
+  );
+  ctx.globalAlpha = alpha;
+}

package/extensions/cropping_controls/enterCropMode.ts

@@ -1,6 +1,6 @@
 import { type FabricImage, type TPointerEventInfo } from 'fabric';
 import { createImageCroppingControls } from './croppingControls';
-import { cropPanMoveHandler } from './croppingHandlers';
+import { cropPanMoveHandler, renderGhostImage } from './croppingHandlers';
 /**
  * Coordinates the change to image to enter crop mode and returns
  * a function to exit crop mode
@@ -10,12 +10,16 @@ export const enterCropMode = function enterCropMode(
   { target }: TPointerEventInfo,
 ) {
   const fabricImage = target as FabricImage;
-  const { controls } = fabricImage;
+  const { controls, padding } = fabricImage;
+  fabricImage.padding = 0;
   fabricImage.controls = createImageCroppingControls();
   fabricImage.on('moving', cropPanMoveHandler);
+  fabricImage.on('before:render', renderGhostImage);
   fabricImage.setCoords();
   const exitCropMode = () => {
+    fabricImage.padding = padding;
     fabricImage.off('moving', cropPanMoveHandler);
+    fabricImage.off('before:render', renderGhostImage);
     fabricImage.controls = controls;
     fabricImage.setCoords();
     fabricImage.once('mousedblclick', enterCropMode);