@wordpress/block-editor/build/components/image-editor/cropper.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ImageCropper;
var _reactEasyCrop = _interopRequireDefault(require("react-easy-crop"));
var _clsx = _interopRequireDefault(require("clsx"));
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _constants = require("./constants");
var _context = require("./context");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function ImageCropper({
  url,
  width,
  height,
  naturalHeight,
  naturalWidth,
  borderProps
}) {
  const {
    isInProgress,
    editedUrl,
    position,
    zoom,
    aspect,
    setPosition,
    setCrop,
    setZoom,
    rotation
  } = (0, _context.useImageEditingContext)();
  const [contentResizeListener, {
    width: clientWidth
  }] = (0, _compose.useResizeObserver)();
  let editedHeight = height || clientWidth * naturalHeight / naturalWidth;
  if (rotation % 180 === 90) {
    editedHeight = clientWidth * naturalWidth / naturalHeight;
  }
  const area = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _clsx.default)('wp-block-image__crop-area', borderProps?.className, {
      'is-applying': isInProgress
    }),
    style: {
      ...borderProps?.style,
      width: width || clientWidth,
      height: editedHeight
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactEasyCrop.default, {
      image: editedUrl || url,
      disabled: isInProgress,
      minZoom: _constants.MIN_ZOOM / 100,
      maxZoom: _constants.MAX_ZOOM / 100,
      crop: position,
      zoom: zoom / 100,
      aspect: aspect,
      onCropChange: pos => {
        setPosition(pos);
      },
      onCropComplete: newCropPercent => {
        setCrop(newCropPercent);
      },
      onZoomChange: newZoom => {
        setZoom(newZoom * 100);
      }
    }), isInProgress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})]
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [contentResizeListener, area]
  });
}
//# sourceMappingURL=cropper.js.map