@nasser-sw/fabric 7.0.1-beta37 → 7.0.1-beta39

package/dist/index.js

@@ -360,7 +360,7 @@
   }
   const cache = new Cache();
 
-  var version = "7.0.1-beta36";
+  var version = "7.0.1-beta38";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -10392,21 +10392,19 @@
      * This ensures correct behavior with zoom and grouped objects.
      */
     drawExpandPreview(ctx, size, options) {
-      var _this$canvas6, _this$canvas7;
       if (!this.expandMode) return;
 
-      // Use options.scaleX/scaleY from qrDecompose which includes parent transforms and vpt
-      // This correctly handles grouped objects (like content images inside Frames)
-      // options comes from qrDecompose(vpt * calcTransformMatrix()) which includes:
-      // 1. Viewport zoom
-      // 2. Parent group's scale (Frame's scale)
-      // 3. Object's own scale
-      const scaleX = options !== null && options !== void 0 && options.scaleX ? Math.abs(options.scaleX) : (((_this$canvas6 = this.canvas) === null || _this$canvas6 === void 0 ? void 0 : _this$canvas6.getZoom()) || 1) * Math.abs(this.scaleX || 1);
-      const scaleY = options !== null && options !== void 0 && options.scaleY ? Math.abs(options.scaleY) : (((_this$canvas7 = this.canvas) === null || _this$canvas7 === void 0 ? void 0 : _this$canvas7.getZoom()) || 1) * Math.abs(this.scaleY || 1);
+      // Use size but subtract borderScaleFactor and padding to match control positioning
+      const borderOffset = this.borderScaleFactor || 1;
+      const paddingOffset = (this.padding || 0) * 2;
       const dim = {
-        x: (this.width || 1) * scaleX,
-        y: (this.height || 1) * scaleY
+        x: size.x - borderOffset - paddingOffset,
+        y: size.y - borderOffset - paddingOffset
       };
+
+      // Calculate scale factor from dim for expansion scaling
+      const scaleX = dim.x / (this.width || 1);
+      const scaleY = dim.y / (this.height || 1);
       const {
         expandLeft,
         expandRight,
@@ -29821,6 +29819,474 @@
   _defineProperty(Textbox, "ownDefaults", textboxDefaultValues);
   classRegistry.setClass(Textbox);
 
+  /**
+   * Minimum size for cropped images (in pixels)
+   */
+  const MIN_SIZE = 20;
+
+  /**
+   * Get the original element dimensions for an image
+   */
+  function getOriginalDimensions(target) {
+    const element = target.getElement();
+    if (!element) {
+      return {
+        width: target.width || 100,
+        height: target.height || 100
+      };
+    }
+    return {
+      width: element.naturalWidth || element.width || target.width || 100,
+      height: element.naturalHeight || element.height || target.height || 100
+    };
+  }
+
+  /**
+   * Handler for resizing from RIGHT edge (mr control) - Canva style
+   * Crops from right side, anchor on left
+   */
+  const resizeFromRightHandler = (eventData, transform, x, y) => {
+    const target = transform.target;
+    const original = getOriginalDimensions(target);
+    const currentScale = target.scaleX || 1;
+    const cropX = target.cropX || 0;
+    const localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y);
+    const requestedVisualWidth = Math.max(MIN_SIZE, Math.abs(localPoint.x));
+    const maxAvailableWidth = (original.width - cropX) * currentScale;
+    if (requestedVisualWidth <= maxAvailableWidth) {
+      // Within bounds - just change visible width, cropX stays same (crops from right)
+      target.width = requestedVisualWidth / currentScale;
+    } else {
+      // Beyond bounds - scale uniformly
+      target.width = original.width - cropX;
+      const newScale = requestedVisualWidth / target.width;
+      target.scaleX = newScale;
+      target.scaleY = newScale;
+      const currentVisualHeight = (target.height || original.height) * currentScale;
+      target.height = currentVisualHeight / newScale;
+    }
+    target.setCoords();
+    return true;
+  };
+
+  /**
+   * Handler for resizing from LEFT edge (ml control) - Canva style
+   * Crops from left side, anchor on right
+   */
+  const resizeFromLeftHandler = (eventData, transform, x, y) => {
+    const target = transform.target;
+    const original = getOriginalDimensions(target);
+    const currentScale = target.scaleX || 1;
+    const currentCropX = target.cropX || 0;
+    const currentWidth = target.width || original.width;
+    const localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y);
+    const requestedVisualWidth = Math.max(MIN_SIZE, Math.abs(localPoint.x));
+
+    // Right edge position in original image coords (stays fixed)
+    const rightEdgeInOriginal = currentCropX + currentWidth;
+
+    // Maximum we can expand to the left (cropX can go to 0)
+    const maxAvailableWidth = rightEdgeInOriginal * currentScale;
+    if (requestedVisualWidth <= maxAvailableWidth) {
+      // Within bounds - adjust cropX and width (crops from left)
+      const newWidthUnscaled = requestedVisualWidth / currentScale;
+      const newCropX = rightEdgeInOriginal - newWidthUnscaled;
+      if (newCropX >= 0) {
+        target.cropX = newCropX;
+        target.width = newWidthUnscaled;
+      } else {
+        // Hit left boundary
+        target.cropX = 0;
+        target.width = rightEdgeInOriginal;
+      }
+    } else {
+      // Beyond bounds - scale uniformly
+      target.cropX = 0;
+      target.width = rightEdgeInOriginal;
+      const newScale = requestedVisualWidth / target.width;
+      target.scaleX = newScale;
+      target.scaleY = newScale;
+      const currentVisualHeight = (target.height || original.height) * currentScale;
+      target.height = currentVisualHeight / newScale;
+    }
+    target.setCoords();
+    return true;
+  };
+
+  /**
+   * Handler for cropping from the right edge (mr control) - for crop mode
+   * - Drag inward: decrease width (crop right side)
+   * - Drag outward: increase width until hitting boundary, then scale
+   */
+  const cropFromRightHandler = (eventData, transform, x, y) => {
+    const target = transform.target;
+    const localPoint = getLocalPoint(transform, 'left', 'center', x, y);
+    const original = getOriginalDimensions(target);
+    const currentCropX = target.cropX || 0;
+    const currentScale = target.scaleX || 1;
+
+    // Maximum visible width at current scale (from current cropX to right edge of original)
+    const maxVisibleWidth = (original.width - currentCropX) * currentScale;
+
+    // Requested width based on mouse position
+    const requestedWidth = Math.max(MIN_SIZE, localPoint.x);
+    if (requestedWidth <= maxVisibleWidth) {
+      // Within bounds - just change visible width (crop/uncrop)
+      // Convert to unscaled width for the width property
+      target.width = requestedWidth / currentScale;
+    } else {
+      // Beyond bounds - need to scale
+      // First, set width to maximum possible
+      target.width = original.width - currentCropX;
+      // Calculate new scale to reach requested size
+      const newScale = requestedWidth / target.width;
+      target.scaleX = newScale;
+      target.scaleY = newScale; // Uniform scaling
+    }
+    target.setCoords();
+    return true;
+  };
+
+  /**
+   * Handler for resizing from BOTTOM edge (mb control) - Canva style
+   * Crops from bottom side, anchor on top
+   */
+  const resizeFromBottomHandler = (eventData, transform, x, y) => {
+    const target = transform.target;
+    const original = getOriginalDimensions(target);
+    const currentScale = target.scaleY || 1;
+    const cropY = target.cropY || 0;
+    const localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y);
+    const requestedVisualHeight = Math.max(MIN_SIZE, Math.abs(localPoint.y));
+    const maxAvailableHeight = (original.height - cropY) * currentScale;
+    if (requestedVisualHeight <= maxAvailableHeight) {
+      // Within bounds - just change visible height, cropY stays same (crops from bottom)
+      target.height = requestedVisualHeight / currentScale;
+    } else {
+      // Beyond bounds - scale uniformly
+      target.height = original.height - cropY;
+      const newScale = requestedVisualHeight / target.height;
+      target.scaleX = newScale;
+      target.scaleY = newScale;
+      const currentVisualWidth = (target.width || original.width) * currentScale;
+      target.width = currentVisualWidth / newScale;
+    }
+    target.setCoords();
+    return true;
+  };
+
+  /**
+   * Handler for resizing from TOP edge (mt control) - Canva style
+   * Crops from top side, anchor on bottom
+   */
+  const resizeFromTopHandler = (eventData, transform, x, y) => {
+    const target = transform.target;
+    const original = getOriginalDimensions(target);
+    const currentScale = target.scaleY || 1;
+    const currentCropY = target.cropY || 0;
+    const currentHeight = target.height || original.height;
+    const localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y);
+    const requestedVisualHeight = Math.max(MIN_SIZE, Math.abs(localPoint.y));
+
+    // Bottom edge position in original image coords (stays fixed)
+    const bottomEdgeInOriginal = currentCropY + currentHeight;
+
+    // Maximum we can expand to the top (cropY can go to 0)
+    const maxAvailableHeight = bottomEdgeInOriginal * currentScale;
+    if (requestedVisualHeight <= maxAvailableHeight) {
+      // Within bounds - adjust cropY and height (crops from top)
+      const newHeightUnscaled = requestedVisualHeight / currentScale;
+      const newCropY = bottomEdgeInOriginal - newHeightUnscaled;
+      if (newCropY >= 0) {
+        target.cropY = newCropY;
+        target.height = newHeightUnscaled;
+      } else {
+        // Hit top boundary
+        target.cropY = 0;
+        target.height = bottomEdgeInOriginal;
+      }
+    } else {
+      // Beyond bounds - scale uniformly
+      target.cropY = 0;
+      target.height = bottomEdgeInOriginal;
+      const newScale = requestedVisualHeight / target.height;
+      target.scaleX = newScale;
+      target.scaleY = newScale;
+      const currentVisualWidth = (target.width || original.width) * currentScale;
+      target.width = currentVisualWidth / newScale;
+    }
+    target.setCoords();
+    return true;
+  };
+
+  // Wrapped resize handlers with fixed anchor
+  const resizeFromRight = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(resizeFromRightHandler));
+  const resizeFromLeft = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(resizeFromLeftHandler));
+  const resizeFromBottom = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(resizeFromBottomHandler));
+  const resizeFromTop = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(resizeFromTopHandler));
+
+  /**
+   * Handler for cropping from the left edge (ml control)
+   * - Drag inward: increase cropX, decrease width (crop left side)
+   * - Drag outward: decrease cropX until 0, then scale
+   */
+  const cropFromLeftHandler = (eventData, transform, x, y) => {
+    const target = transform.target;
+    const localPoint = getLocalPoint(transform, 'right', 'center', x, y);
+    getOriginalDimensions(target);
+    const currentCropX = target.cropX || 0;
+    const currentWidth = target.width || 100;
+    const currentScale = target.scaleX || 1;
+
+    // Requested width based on mouse position (localPoint.x is negative from right origin)
+    const requestedWidth = Math.max(MIN_SIZE, Math.abs(localPoint.x));
+
+    // Current right edge position in original image coordinates
+    const rightEdge = currentCropX + currentWidth;
+
+    // Maximum possible width at current scale (if cropX goes to 0)
+    const maxVisibleWidth = rightEdge * currentScale;
+    if (requestedWidth <= maxVisibleWidth) {
+      // Within bounds - adjust cropX and width
+      const newWidthUnscaled = requestedWidth / currentScale;
+      const newCropX = rightEdge - newWidthUnscaled;
+      if (newCropX >= 0) {
+        target.cropX = newCropX;
+        target.width = newWidthUnscaled;
+      } else {
+        // Would go past left edge - clamp cropX to 0
+        target.cropX = 0;
+        target.width = rightEdge;
+      }
+    } else {
+      // Beyond bounds - need to scale
+      target.cropX = 0;
+      target.width = rightEdge;
+      const newScale = requestedWidth / target.width;
+      target.scaleX = newScale;
+      target.scaleY = newScale;
+    }
+    target.setCoords();
+    return true;
+  };
+
+  /**
+   * Handler for cropping from the bottom edge (mb control)
+   */
+  const cropFromBottomHandler = (eventData, transform, x, y) => {
+    const target = transform.target;
+    const localPoint = getLocalPoint(transform, 'center', 'top', x, y);
+    const original = getOriginalDimensions(target);
+    const currentCropY = target.cropY || 0;
+    const currentScale = target.scaleY || 1;
+    const maxVisibleHeight = (original.height - currentCropY) * currentScale;
+    const requestedHeight = Math.max(MIN_SIZE, localPoint.y);
+    if (requestedHeight <= maxVisibleHeight) {
+      target.height = requestedHeight / currentScale;
+    } else {
+      target.height = original.height - currentCropY;
+      const newScale = requestedHeight / target.height;
+      target.scaleX = newScale;
+      target.scaleY = newScale;
+    }
+    target.setCoords();
+    return true;
+  };
+
+  /**
+   * Handler for cropping from the top edge (mt control)
+   */
+  const cropFromTopHandler = (eventData, transform, x, y) => {
+    const target = transform.target;
+    const localPoint = getLocalPoint(transform, 'center', 'bottom', x, y);
+    getOriginalDimensions(target);
+    const currentCropY = target.cropY || 0;
+    const currentHeight = target.height || 100;
+    const currentScale = target.scaleY || 1;
+    const requestedHeight = Math.max(MIN_SIZE, Math.abs(localPoint.y));
+    const bottomEdge = currentCropY + currentHeight;
+    const maxVisibleHeight = bottomEdge * currentScale;
+    if (requestedHeight <= maxVisibleHeight) {
+      const newHeightUnscaled = requestedHeight / currentScale;
+      const newCropY = bottomEdge - newHeightUnscaled;
+      if (newCropY >= 0) {
+        target.cropY = newCropY;
+        target.height = newHeightUnscaled;
+      } else {
+        target.cropY = 0;
+        target.height = bottomEdge;
+      }
+    } else {
+      target.cropY = 0;
+      target.height = bottomEdge;
+      const newScale = requestedHeight / target.height;
+      target.scaleX = newScale;
+      target.scaleY = newScale;
+    }
+    target.setCoords();
+    return true;
+  };
+
+  /**
+   * Handler for cropping from corners (tl, tr, bl, br controls)
+   * Handles both dimensions simultaneously
+   */
+  const createCornerCropHandler = (xDirection, yDirection) => {
+    const xHandler = xDirection === 'left' ? cropFromLeftHandler : cropFromRightHandler;
+    const yHandler = yDirection === 'top' ? cropFromTopHandler : cropFromBottomHandler;
+    return (eventData, transform, x, y) => {
+      // Apply both handlers
+      const xChanged = xHandler(eventData, transform, x, y);
+      const yChanged = yHandler(eventData, transform, x, y);
+      return xChanged || yChanged;
+    };
+  };
+
+  // Wrapped handlers with fixed anchor and fire event
+  const cropFromRight = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(cropFromRightHandler));
+  const cropFromLeft = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(cropFromLeftHandler));
+  const cropFromBottom = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(cropFromBottomHandler));
+  const cropFromTop = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(cropFromTopHandler));
+  const cropFromTopLeft = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(createCornerCropHandler('left', 'top')));
+  const cropFromTopRight = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(createCornerCropHandler('right', 'top')));
+  const cropFromBottomLeft = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(createCornerCropHandler('left', 'bottom')));
+  const cropFromBottomRight = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(createCornerCropHandler('right', 'bottom')));
+
+  /**
+   * Creates Canva-like controls for FabricImage
+   * - Side handles crop/resize visible area (Canva style)
+   * - Corner handles scale uniformly
+   * - Double-click enters crop mode for fine-tuning
+   */
+  const createImageCropControls = () => ({
+    // Side controls - crop from each side
+    ml: new Control({
+      x: -0.5,
+      y: 0,
+      cursorStyleHandler: scaleSkewCursorStyleHandler,
+      actionHandler: resizeFromLeft,
+      actionName: RESIZING,
+      render: renderHorizontalPillControl,
+      sizeX: 6,
+      sizeY: 20
+    }),
+    mr: new Control({
+      x: 0.5,
+      y: 0,
+      cursorStyleHandler: scaleSkewCursorStyleHandler,
+      actionHandler: resizeFromRight,
+      actionName: RESIZING,
+      render: renderHorizontalPillControl,
+      sizeX: 6,
+      sizeY: 20
+    }),
+    mb: new Control({
+      x: 0,
+      y: 0.5,
+      cursorStyleHandler: scaleSkewCursorStyleHandler,
+      actionHandler: resizeFromBottom,
+      actionName: RESIZING,
+      render: renderVerticalPillControl,
+      sizeX: 20,
+      sizeY: 6
+    }),
+    mt: new Control({
+      x: 0,
+      y: -0.5,
+      cursorStyleHandler: scaleSkewCursorStyleHandler,
+      actionHandler: resizeFromTop,
+      actionName: RESIZING,
+      render: renderVerticalPillControl,
+      sizeX: 20,
+      sizeY: 6
+    }),
+    // Corner controls - uniform scaling (like Canva)
+    tl: new Control({
+      x: -0.5,
+      y: -0.5,
+      cursorStyleHandler: scaleCursorStyleHandler,
+      actionHandler: scalingEqually
+    }),
+    tr: new Control({
+      x: 0.5,
+      y: -0.5,
+      cursorStyleHandler: scaleCursorStyleHandler,
+      actionHandler: scalingEqually
+    }),
+    bl: new Control({
+      x: -0.5,
+      y: 0.5,
+      cursorStyleHandler: scaleCursorStyleHandler,
+      actionHandler: scalingEqually
+    }),
+    br: new Control({
+      x: 0.5,
+      y: 0.5,
+      cursorStyleHandler: scaleCursorStyleHandler,
+      actionHandler: scalingEqually
+    }),
+    mtr: new Control({
+      x: 0,
+      y: -0.5,
+      actionHandler: rotationWithSnapping,
+      cursorStyleHandler: rotationStyleHandler,
+      offsetY: -40,
+      withConnection: true,
+      actionName: ROTATE
+    })
+  });
+
+  /**
+   * Creates crop mode controls for FabricImage (used in crop mode after double-click)
+   * - Side handles crop/uncrop single axis
+   * - Corner handles crop/uncrop both axes
+   */
+  const createImageCropModeControls = () => ({
+    ml: new Control({
+      x: -0.5,
+      y: 0,
+      cursorStyleHandler: scaleSkewCursorStyleHandler,
+      actionHandler: cropFromLeft,
+      actionName: RESIZING,
+      render: renderHorizontalPillControl,
+      sizeX: 6,
+      sizeY: 20
+    }),
+    mr: new Control({
+      x: 0.5,
+      y: 0,
+      cursorStyleHandler: scaleSkewCursorStyleHandler,
+      actionHandler: cropFromRight,
+      actionName: RESIZING,
+      render: renderHorizontalPillControl,
+      sizeX: 6,
+      sizeY: 20
+    }),
+    mb: new Control({
+      x: 0,
+      y: 0.5,
+      cursorStyleHandler: scaleSkewCursorStyleHandler,
+      actionHandler: cropFromBottom,
+      actionName: RESIZING,
+      render: renderVerticalPillControl,
+      sizeX: 20,
+      sizeY: 6
+    }),
+    mt: new Control({
+      x: 0,
+      y: -0.5,
+      cursorStyleHandler: scaleSkewCursorStyleHandler,
+      actionHandler: cropFromTop,
+      actionName: RESIZING,
+      render: renderVerticalPillControl,
+      sizeX: 20,
+      sizeY: 6
+    })
+
+    // No corner controls in crop mode - or could add corner crop handlers
+    // No rotation in crop mode
+  });
+
   /**
    * Canvas 2D filter backend.
    */
@@ -30231,7 +30697,8 @@
     minimumScaleTrigger: 0.5,
     cropX: 0,
     cropY: 0,
-    imageSmoothing: true
+    imageSmoothing: true,
+    cropMode: false
   };
   const IMAGE_PROPS = ['cropX', 'cropY'];
 
@@ -30245,6 +30712,154 @@
         ...FabricImage.ownDefaults
       };
     }
+
+    /**
+     * Creates Canva-like controls for images
+     * - All handles scale uniformly
+     * - Double-click to enter crop mode
+     */
+    static createControls() {
+      return {
+        controls: createImageCropControls()
+      };
+    }
+
+    /**
+     * Enter crop mode - switches to crop controls
+     * Call this on double-click
+     */
+    enterCropMode() {
+      var _this$canvas;
+      if (this.cropMode) return;
+      this.cropMode = true;
+      // Backup current controls
+      this._normalControls = {
+        ...this.controls
+      };
+      // Switch to crop mode controls
+      this.controls = createImageCropModeControls();
+      // Dirty cache to force re-render with full image visible
+      this.dirty = true;
+      // Reset drag state
+      this._cropModeDragActive = false;
+      this.setCoords();
+      (_this$canvas = this.canvas) === null || _this$canvas === void 0 || _this$canvas.requestRenderAll();
+    }
+
+    /**
+     * Exit crop mode - restores normal controls
+     * Call this on click outside or escape
+     */
+    exitCropMode() {
+      var _this$canvas2;
+      if (!this.cropMode) return;
+      this.cropMode = false;
+      // Restore normal controls
+      if (this._normalControls) {
+        this.controls = this._normalControls;
+        this._normalControls = undefined;
+      } else {
+        this.controls = createImageCropControls();
+      }
+      // Dirty cache to force re-render with cropped image only
+      this.dirty = true;
+      this.setCoords();
+      (_this$canvas2 = this.canvas) === null || _this$canvas2 === void 0 || _this$canvas2.requestRenderAll();
+    }
+
+    /**
+     * Toggle crop mode
+     */
+    toggleCropMode() {
+      if (this.cropMode) {
+        this.exitCropMode();
+      } else {
+        this.enterCropMode();
+      }
+    }
+
+    /**
+     * Override set to intercept movement in crop mode
+     * In crop mode, dragging adjusts cropX/cropY instead of left/top
+     */
+    // @ts-ignore - override set with different signature for crop mode handling
+    set(key, value) {
+      // Only intercept in crop mode when actually dragging (isMoving is true)
+      if (this.cropMode && this.isMoving && typeof key === 'string') {
+        if (key === 'left' && typeof value === 'number') {
+          return this._setCropModePosition('left', value);
+        }
+        if (key === 'top' && typeof value === 'number') {
+          return this._setCropModePosition('top', value);
+        }
+      }
+      return super.set(key, value);
+    }
+
+    /**
+     * Handle position changes in crop mode - converts to cropX/cropY changes
+     * @private
+     */
+    _setCropModePosition(axis, newPos) {
+      const element = this._element;
+      if (!element) {
+        return super.set(axis, newPos);
+      }
+
+      // Capture baseline values at the start of each new drag
+      if (!this._cropModeDragActive) {
+        this._cropModeDragActive = true;
+        this._cropModeOriginalLeft = this.left;
+        this._cropModeOriginalTop = this.top;
+        this._cropModeOriginalCropX = this.cropX;
+        this._cropModeOriginalCropY = this.cropY;
+      }
+      const scale = axis === 'left' ? this.scaleX || 1 : this.scaleY || 1;
+      const basePos = axis === 'left' ? this._cropModeOriginalLeft : this._cropModeOriginalTop;
+      const baseCrop = axis === 'left' ? this._cropModeOriginalCropX : this._cropModeOriginalCropY;
+      const cropProp = axis === 'left' ? 'cropX' : 'cropY';
+      const sizeProp = axis === 'left' ? 'width' : 'height';
+      const elSize = axis === 'left' ? element.naturalWidth || element.width : element.naturalHeight || element.height;
+      if (basePos === undefined || baseCrop === undefined) {
+        return super.set(axis, newPos);
+      }
+
+      // Calculate total delta from drag start position
+      const totalDelta = newPos - basePos;
+
+      // Convert screen delta to source image pixels
+      // Dragging right (positive delta) should move the visible content right
+      // This means showing content from further LEFT in the source = cropX decreases
+      // So we negate the delta. Use Math.abs(scale) to handle flipped images.
+      const cropOffset = -totalDelta / Math.abs(scale);
+
+      // Calculate new crop value from baseline crop + offset
+      const currentSize = this[sizeProp] || elSize;
+      let newCrop = baseCrop + cropOffset;
+
+      // Clamp to valid range: 0 to (elSize - visible size)
+      const maxCrop = Math.max(0, elSize - currentSize);
+      newCrop = Math.max(0, Math.min(maxCrop, newCrop));
+
+      // Update crop value
+      super.set(cropProp, newCrop);
+      // Keep position fixed at baseline
+      super.set(axis, basePos);
+      // Mark as dirty for re-render
+      this.dirty = true;
+      return this;
+    }
+
+    /**
+     * Reset crop mode drag state when drag ends
+     * Called by canvas on mouse up
+     */
+    _onMouseUp() {
+      if (this.cropMode) {
+        this._cropModeDragActive = false;
+      }
+    }
+
     /**
      * Constructor
      * Image can be initialized with any canvas drawable or a string.
@@ -30290,6 +30905,19 @@
        * @type Number
        */
       _defineProperty(this, "_filterScalingY", 1);
+      /**
+       * Backup of normal controls when entering crop mode
+       */
+      _defineProperty(this, "_normalControls", void 0);
+      /**
+       * Original position and crop values for drag-to-reposition in crop mode
+       * Updated at the start of each drag
+       */
+      _defineProperty(this, "_cropModeOriginalLeft", void 0);
+      _defineProperty(this, "_cropModeOriginalTop", void 0);
+      _defineProperty(this, "_cropModeOriginalCropX", void 0);
+      _defineProperty(this, "_cropModeOriginalCropY", void 0);
+      _defineProperty(this, "_cropModeDragActive", void 0);
       this.filters = [];
       Object.assign(this, FabricImage.ownDefaults);
       this.setOptions(options);
@@ -30648,6 +31276,10 @@
      * @return {Boolean}
      */
     shouldCache() {
+      // Don't cache in crop mode - we need to render the full image
+      if (this.cropMode) {
+        return false;
+      }
       return this.needsItsOwnCache();
     }
     _renderFill(ctx) {
@@ -30673,7 +31305,87 @@
         y = -h / 2,
         maxDestW = Math.min(w, elWidth / scaleX - cropX),
         maxDestH = Math.min(h, elHeight / scaleY - cropY);
-      elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, maxDestW, maxDestH);
+      if (this.cropMode) {
+        // In crop mode: show full image with crop area highlighted
+        this._renderCropMode(ctx, elementToDraw, elWidth, elHeight, scaleX, scaleY);
+      } else {
+        // Normal mode: just draw the cropped portion
+        elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, maxDestW, maxDestH);
+      }
+    }
+
+    /**
+     * Render the image in crop mode - shows full image dimmed with crop area highlighted
+     * @private
+     */
+    _renderCropMode(ctx, elementToDraw, elWidth, elHeight, scaleX, scaleY) {
+      const w = this.width,
+        h = this.height,
+        cropX = Math.max(this.cropX, 0),
+        cropY = Math.max(this.cropY, 0);
+
+      // Calculate full image dimensions at current scale
+      const fullW = elWidth / scaleX;
+      const fullH = elHeight / scaleY;
+
+      // Position of the full image (crop area is centered at 0,0)
+      // The crop window starts at (cropX, cropY) in the original image
+      // We want the crop window to be at (-w/2, -h/2) to (w/2, h/2)
+      // So the full image starts at (-w/2 - cropX, -h/2 - cropY)
+      const fullX = -w / 2 - cropX;
+      const fullY = -h / 2 - cropY;
+
+      // Draw the FULL image dimmed (outside crop area)
+      ctx.save();
+      ctx.globalAlpha = 0.3;
+      ctx.drawImage(elementToDraw, 0, 0, elWidth, elHeight,
+      // source: full image
+      fullX, fullY, fullW, fullH // dest: positioned so crop area is centered
+      );
+      ctx.restore();
+
+      // Draw dark overlay on the dimmed parts (outside crop area)
+      ctx.save();
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+      // Left side
+      if (cropX > 0) {
+        ctx.fillRect(fullX, fullY, cropX, fullH);
+      }
+      // Right side
+      const rightStart = -w / 2 + w;
+      const rightWidth = fullW - cropX - w;
+      if (rightWidth > 0) {
+        ctx.fillRect(rightStart, fullY, rightWidth, fullH);
+      }
+      // Top side (between left and right)
+      if (cropY > 0) {
+        ctx.fillRect(-w / 2, fullY, w, cropY);
+      }
+      // Bottom side (between left and right)
+      const bottomStart = -h / 2 + h;
+      const bottomHeight = fullH - cropY - h;
+      if (bottomHeight > 0) {
+        ctx.fillRect(-w / 2, bottomStart, w, bottomHeight);
+      }
+      ctx.restore();
+
+      // Draw the crop area at FULL opacity
+      const sX = cropX * scaleX,
+        sY = cropY * scaleY,
+        sW = Math.min(w * scaleX, elWidth - sX),
+        sH = Math.min(h * scaleY, elHeight - sY),
+        x = -w / 2,
+        y = -h / 2,
+        maxDestW = Math.min(w, elWidth / scaleX - cropX),
+        maxDestH = Math.min(h, elHeight / scaleY - cropY);
+      ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, maxDestW, maxDestH);
+
+      // Draw a border around the crop area
+      ctx.save();
+      ctx.strokeStyle = '#fff';
+      ctx.lineWidth = 2;
+      ctx.strokeRect(-w / 2, -h / 2, w, h);
+      ctx.restore();
     }
 
     /**
@@ -31032,6 +31744,11 @@
        * @private
        */
       _defineProperty(this, "_editModeObjectCaching", void 0);
+      /**
+       * Stored original controls of content image before edit mode
+       * @private
+       */
+      _defineProperty(this, "_editModeOriginalControls", void 0);
       /**
        * Bound constraint handler references for cleanup
        * @private
@@ -31654,6 +32371,15 @@
       });
       this._contentImage.dirty = true;
 
+      // Save original controls and replace with corner-only controls for scaling
+      this._editModeOriginalControls = this._contentImage.controls;
+      this._contentImage.controls = {
+        tl: this._contentImage.controls.tl,
+        tr: this._contentImage.controls.tr,
+        bl: this._contentImage.controls.bl,
+        br: this._contentImage.controls.br
+      };
+
       // Store and remove clipPath to show full image
       // We must actually remove it (not just skip rendering) because Fabric's
       // rendering pipeline checks clipPath existence in multiple places
@@ -31951,6 +32677,12 @@
         contentScaleY: contentScaleY
       };
 
+      // Restore original controls before making non-interactive
+      if (this._editModeOriginalControls) {
+        this._contentImage.controls = this._editModeOriginalControls;
+        this._editModeOriginalControls = undefined;
+      }
+
       // Make content non-interactive again and restore caching
       this._contentImage.set({
         selectable: false,
@@ -33504,6 +34236,8 @@
     changeWidth: changeWidth,
     createDefaultExpansion: createDefaultExpansion,
     createExpandControls: createExpandControls,
+    createImageCropControls: createImageCropControls,
+    createImageCropModeControls: createImageCropModeControls,
     createObjectDefaultControls: createObjectDefaultControls,
     createPathControls: createPathControls,
     createPolyActionHandler: createPolyActionHandler,
@@ -33511,6 +34245,14 @@
     createPolyPositionHandler: createPolyPositionHandler,
     createResizeControls: createResizeControls,
     createTextboxDefaultControls: createTextboxDefaultControls,
+    cropFromBottom: cropFromBottom,
+    cropFromBottomLeft: cropFromBottomLeft,
+    cropFromBottomRight: cropFromBottomRight,
+    cropFromLeft: cropFromLeft,
+    cropFromRight: cropFromRight,
+    cropFromTop: cropFromTop,
+    cropFromTopLeft: cropFromTopLeft,
+    cropFromTopRight: cropFromTopRight,
     dragHandler: dragHandler,
     expandBottomHandler: expandBottomHandler,
     expandLeftHandler: expandLeftHandler,