fabric/dist-extensions/cropping_controls/croppingHandlers.mjs

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

import { controlsUtils, Point, util } from 'fabric';

const {
  wrapWithFixedAnchor,
  wrapWithFireEvent
} = controlsUtils;

/**
 * Wrap controlsUtils.changeObjectWidth with image constrains
 */
const changeImageWidth = (eventData, transform, x, y) => {
  const {
    target
  } = transform;
  const {
    width
  } = target;
  const image = target;
  const modified = controlsUtils.changeObjectWidth(eventData, transform, x, y);
  const availableWidth = image._element.width - image.cropX;
  if (modified) {
    if (image.width > availableWidth) {
      image.width = availableWidth;
    }
    if (image.width < 1) {
      image.width = 1;
    }
  }
  return width !== image.width;
};
const changeCropWidth = wrapWithFireEvent('CROPPING', wrapWithFixedAnchor(changeImageWidth));

/**
 * Wrap controlsUtils.changeObjectHeight with image constrains
 */
const changeImageHeight = (eventData, transform, x, y) => {
  const {
    target
  } = transform;
  const {
    height
  } = target;
  const image = target;
  const modified = controlsUtils.changeObjectHeight(eventData, transform, x, y);
  const availableHeight = image._element.height - image.cropY;
  if (modified) {
    if (image.height > availableHeight) {
      image.height = availableHeight;
    }
    if (image.height < 1) {
      image.height = 1;
    }
  }
  return height !== image.height;
};
const changeCropHeight = wrapWithFireEvent('CROPPING', wrapWithFixedAnchor(changeImageHeight));
const changeImageCropX = (eventData, transform, x, y) => {
  const {
    target
  } = transform;
  const image = target;
  const {
    width,
    cropX
  } = image;
  const modified = controlsUtils.changeObjectWidth(eventData, transform, x, y);
  let newCropX = cropX + width - image.width;
  image.width = width;
  if (modified) {
    if (newCropX < 0) {
      newCropX = 0;
    }
    image.cropX = newCropX;
    // calculate new width on the base of how much crop we have now
    image.width += cropX - newCropX;
  }
  return newCropX !== cropX;
};
const changeImageCropY = (eventData, transform, x, y) => {
  const {
    target
  } = transform;
  const image = target;
  const {
    height,
    cropY
  } = image;
  const modified = controlsUtils.changeObjectHeight(eventData, transform, x, y);
  let newCropY = cropY + height - image.height;
  image.height = height;
  if (modified) {
    if (newCropY < 0) {
      newCropY = 0;
    }
    image.cropY = newCropY;
    image.height += cropY - newCropY;
  }
  return newCropY !== cropY;
};
const changeCropX = wrapWithFireEvent('CROPPING', wrapWithFixedAnchor(changeImageCropX));
const changeCropY = wrapWithFireEvent('CROPPING', wrapWithFixedAnchor(changeImageCropY));

/**
 * A function to counter the move action and change cropX/cropY of an image
 * Keep the image steady, but moves it inside its own cropping rectangle
 */
const cropPanMoveHandler = _ref => {
  let {
    transform
  } = _ref;
  // this makes the image pan too fast.
  const {
    target,
    original
  } = transform;
  const fabricImage = target;
  const p = new Point(target.left - original.left, target.top - original.top).transform(util.invertTransform(util.createRotateMatrix({
    angle: fabricImage.getTotalAngle()
  })));
  let cropX = original.cropX - p.x / fabricImage.scaleX;
  let cropY = original.cropY - p.y / fabricImage.scaleY;
  const {
    width,
    height,
    _element
  } = fabricImage;
  if (cropX < 0) {
    cropX = 0;
  }
  if (cropY < 0) {
    cropY = 0;
  }
  if (cropX + width > _element.width) {
    cropX = _element.width - width;
  }
  if (cropY + height > _element.height) {
    cropY = _element.height - height;
  }
  fabricImage.cropX = cropX;
  fabricImage.cropY = cropY;
  fabricImage.left = original.left;
  fabricImage.top = original.top;
};

export { changeCropHeight, changeCropWidth, changeCropX, changeCropY, changeImageCropX, changeImageCropY, changeImageHeight, changeImageWidth, cropPanMoveHandler };
//# sourceMappingURL=croppingHandlers.mjs.map