: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
if (r && !r.done && (m = i["return"])) m.call(i);
finally { if (e) throw e.error; }
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
return to.concat(ar || Array.prototype.slice.call(from));
return this instanceof __await ? (this.v = v, this) : new __await(v);
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
function __asyncDelegator(o) {
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }
function __asyncValues(o) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
var __setModuleDefault = Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
function __importStar(mod) {
if (mod && mod.__esModule) return mod;
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
function __classPrivateFieldGet(receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
function __classPrivateFieldSet(receiver, state, value, kind, f) {
if (kind === "m") throw new TypeError("Private method is not writable");
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
function __classPrivateFieldIn(state, receiver) {
if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function")) throw new TypeError("Cannot use 'in' operator on non-object");
return typeof state === "function" ? receiver === state : state.has(receiver);
function __addDisposableResource(env, value, async) {
if (value !== null && value !== void 0) {
if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
dispose = value[Symbol.asyncDispose];
if (dispose === void 0) {
if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
dispose = value[Symbol.dispose];
if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
env.stack.push({ value: value, dispose: dispose, async: async });
env.stack.push({ async: true });
var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
function __disposeResources(env) {
env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
while (env.stack.length) {
var rec = env.stack.pop();
var result = rec.dispose && rec.dispose.call(rec.value);
if (rec.async) return Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
if (env.hasError) throw env.error;
/* harmony default export */ const tslib_es6 = ({
// EXTERNAL MODULE: ./node_modules/normalize-wheel/index.js
var normalize_wheel = __webpack_require__(7520);
var normalize_wheel_default = /*#__PURE__*/__webpack_require__.n(normalize_wheel);
;// CONCATENATED MODULE: ./node_modules/react-easy-crop/index.module.js
* Compute the dimension of the crop area based on media size,
* aspect ratio and optionally rotation
function getCropSize(mediaWidth, mediaHeight, containerWidth, containerHeight, aspect, rotation) {
if (rotation === void 0) {
var _a = rotateSize(mediaWidth, mediaHeight, rotation),
var fittingWidth = Math.min(width, containerWidth);
var fittingHeight = Math.min(height, containerHeight);
if (fittingWidth > fittingHeight * aspect) {
width: fittingHeight * aspect,
height: fittingWidth / aspect
* We fit the media into the container with "max-width: 100%; max-height: 100%;"
function getMediaZoom(mediaSize) {
// Take the axis with more pixels to improve accuracy
return mediaSize.width > mediaSize.height ? mediaSize.width / mediaSize.naturalWidth : mediaSize.height / mediaSize.naturalHeight;
* Ensure a new media position stays in the crop area.
function restrictPosition(position, mediaSize, cropSize, zoom, rotation) {
if (rotation === void 0) {
var _a = rotateSize(mediaSize.width, mediaSize.height, rotation),
x: restrictPositionCoord(position.x, width, cropSize.width, zoom),
y: restrictPositionCoord(position.y, height, cropSize.height, zoom)
function restrictPositionCoord(position, mediaSize, cropSize, zoom) {
var maxPosition = mediaSize * zoom / 2 - cropSize / 2;
return clamp(position, -maxPosition, maxPosition);
function getDistanceBetweenPoints(pointA, pointB) {
return Math.sqrt(Math.pow(pointA.y - pointB.y, 2) + Math.pow(pointA.x - pointB.x, 2));
function getRotationBetweenPoints(pointA, pointB) {
return Math.atan2(pointB.y - pointA.y, pointB.x - pointA.x) * 180 / Math.PI;
* Compute the output cropped area of the media in percentages and pixels.
* x/y are the top-left coordinates on the src media
function computeCroppedArea(crop, mediaSize, cropSize, aspect, zoom, rotation, restrictPosition) {
if (rotation === void 0) {
if (restrictPosition === void 0) {
// if the media is rotated by the user, we cannot limit the position anymore
// as it might need to be negative.
var limitAreaFn = restrictPosition ? limitArea : noOp;
var mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
var mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
// calculate the crop area in percentages
var croppedAreaPercentages = {
x: limitAreaFn(100, ((mediaBBoxSize.width - cropSize.width / zoom) / 2 - crop.x / zoom) / mediaBBoxSize.width * 100),
y: limitAreaFn(100, ((mediaBBoxSize.height - cropSize.height / zoom) / 2 - crop.y / zoom) / mediaBBoxSize.height * 100),
width: limitAreaFn(100, cropSize.width / mediaBBoxSize.width * 100 / zoom),
height: limitAreaFn(100, cropSize.height / mediaBBoxSize.height * 100 / zoom)
// we compute the pixels size naively
var widthInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.width, croppedAreaPercentages.width * mediaNaturalBBoxSize.width / 100));
var heightInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.height, croppedAreaPercentages.height * mediaNaturalBBoxSize.height / 100));
var isImgWiderThanHigh = mediaNaturalBBoxSize.width >= mediaNaturalBBoxSize.height * aspect;
// then we ensure the width and height exactly match the aspect (to avoid rounding approximations)
// if the media is wider than high, when zoom is 0, the crop height will be equals to image height
// thus we want to compute the width from the height and aspect for accuracy.
// Otherwise, we compute the height from width and aspect.
var sizePixels = isImgWiderThanHigh ? {
width: Math.round(heightInPixels * aspect),
height: Math.round(widthInPixels / aspect)
var croppedAreaPixels = __assign(__assign({}, sizePixels), {
x: Math.round(limitAreaFn(mediaNaturalBBoxSize.width - sizePixels.width, croppedAreaPercentages.x * mediaNaturalBBoxSize.width / 100)),
y: Math.round(limitAreaFn(mediaNaturalBBoxSize.height - sizePixels.height, croppedAreaPercentages.y * mediaNaturalBBoxSize.height / 100))
croppedAreaPercentages: croppedAreaPercentages,
croppedAreaPixels: croppedAreaPixels
* Ensure the returned value is between 0 and max
function limitArea(max, value) {
return Math.min(max, Math.max(0, value));
function noOp(_max, value) {
* Compute crop and zoom from the croppedAreaPercentages.
function getInitialCropFromCroppedAreaPercentages(croppedAreaPercentages, mediaSize, rotation, cropSize, minZoom, maxZoom) {
var mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
// This is the inverse process of computeCroppedArea
var zoom = clamp(cropSize.width / mediaBBoxSize.width * (100 / croppedAreaPercentages.width), minZoom, maxZoom);
x: zoom * mediaBBoxSize.width / 2 - cropSize.width / 2 - mediaBBoxSize.width * zoom * (croppedAreaPercentages.x / 100),
y: zoom * mediaBBoxSize.height / 2 - cropSize.height / 2 - mediaBBoxSize.height * zoom * (croppedAreaPercentages.y / 100)
* Compute zoom from the croppedAreaPixels
function getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize) {
var mediaZoom = getMediaZoom(mediaSize);
return cropSize.height > cropSize.width ? cropSize.height / (croppedAreaPixels.height * mediaZoom) : cropSize.width / (croppedAreaPixels.width * mediaZoom);
* Compute crop and zoom from the croppedAreaPixels
function getInitialCropFromCroppedAreaPixels(croppedAreaPixels, mediaSize, rotation, cropSize, minZoom, maxZoom) {
if (rotation === void 0) {
var mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
var zoom = clamp(getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize), minZoom, maxZoom);
var cropZoom = cropSize.height > cropSize.width ? cropSize.height / croppedAreaPixels.height : cropSize.width / croppedAreaPixels.width;
x: ((mediaNaturalBBoxSize.width - croppedAreaPixels.width) / 2 - croppedAreaPixels.x) * cropZoom,
y: ((mediaNaturalBBoxSize.height - croppedAreaPixels.height) / 2 - croppedAreaPixels.y) * cropZoom
* Return the point that is the center of point a and b
function getCenter(a, b) {
function getRadianAngle(degreeValue) {
return degreeValue * Math.PI / 180;
* Returns the new bounding area of a rotated rectangle.
function rotateSize(width, height, rotation) {
var rotRad = getRadianAngle(rotation);
width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height)
* Clamp value between min and max
function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
* Combine multiple class names into a single string.
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
return args.filter(function (value) {
if (typeof value === 'string' && value.length > 0) {
var css_248z = ".reactEasyCrop_Container {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n user-select: none;\n touch-action: none;\n cursor: move;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.reactEasyCrop_Image,\n.reactEasyCrop_Video {\n will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */\n}\n\n.reactEasyCrop_Contain {\n max-width: 100%;\n max-height: 100%;\n margin: auto;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.reactEasyCrop_Cover_Horizontal {\n width: 100%;\n height: auto;\n}\n.reactEasyCrop_Cover_Vertical {\n width: auto;\n height: 100%;\n}\n\n.reactEasyCrop_CropArea {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n border: 1px solid rgba(255, 255, 255, 0.5);\n box-sizing: border-box;\n box-shadow: 0 0 0 9999em;\n color: rgba(0, 0, 0, 0.5);\n overflow: hidden;\n}\n\n.reactEasyCrop_CropAreaRound {\n border-radius: 50%;\n}\n\n.reactEasyCrop_CropAreaGrid::before {\n content: ' ';\n box-sizing: border-box;\n position: absolute;\n border: 1px solid rgba(255, 255, 255, 0.5);\n top: 0;\n bottom: 0;\n left: 33.33%;\n right: 33.33%;\n border-top: 0;\n border-bottom: 0;\n}\n\n.reactEasyCrop_CropAreaGrid::after {\n content: ' ';\n box-sizing: border-box;\n position: absolute;\n border: 1px solid rgba(255, 255, 255, 0.5);\n top: 33.33%;\n bottom: 33.33%;\n left: 0;\n right: 0;\n border-left: 0;\n border-right: 0;\n}\n";
var index_module_MIN_ZOOM = 1;
var index_module_MAX_ZOOM = 3;
var Cropper = /** @class */function (_super) {
__extends(Cropper, _super);
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.imageRef = external_React_.createRef();
_this.videoRef = external_React_.createRef();
_this.containerPosition = {
_this.containerRef = null;
_this.containerRect = null;
_this.dragStartPosition = {
_this.gestureZoomStart = 0;
_this.gestureRotationStart = 0;
_this.isTouching = false;
_this.lastPinchDistance = 0;
_this.lastPinchRotation = 0;
_this.rafDragTimeout = null;
_this.rafPinchTimeout = null;
_this.currentDoc = typeof document !== 'undefined' ? document : null;
_this.currentWindow = typeof window !== 'undefined' ? window : null;
_this.resizeObserver = null;
hasWheelJustStarted: false,
mediaObjectFit: undefined
_this.initResizeObserver = function () {
if (typeof window.ResizeObserver === 'undefined' || !_this.containerRef) {
var isFirstResize = true;
_this.resizeObserver = new window.ResizeObserver(function (entries) {
isFirstResize = false; // observe() is called on mount, we don't want to trigger a recompute on mount
_this.resizeObserver.observe(_this.containerRef);
// this is to prevent Safari on iOS >= 10 to zoom the page
_this.preventZoomSafari = function (e) {
return e.preventDefault();
_this.cleanEvents = function () {
if (!_this.currentDoc) return;
_this.currentDoc.removeEventListener('mousemove', _this.onMouseMove);
_this.currentDoc.removeEventListener('mouseup', _this.onDragStopped);
_this.currentDoc.removeEventListener('touchmove', _this.onTouchMove);
_this.currentDoc.removeEventListener('touchend', _this.onDragStopped);
_this.currentDoc.removeEventListener('gesturemove', _this.onGestureMove);
_this.currentDoc.removeEventListener('gestureend', _this.onGestureEnd);
_this.currentDoc.removeEventListener('scroll', _this.onScroll);
_this.clearScrollEvent = function () {
if (_this.containerRef) _this.containerRef.removeEventListener('wheel', _this.onWheel);
clearTimeout(_this.wheelTimer);
_this.onMediaLoad = function () {
var cropSize = _this.computeSizes();
_this.setInitialCrop(cropSize);
if (_this.props.onMediaLoaded) {
_this.props.onMediaLoaded(_this.mediaSize);
_this.setInitialCrop = function (cropSize) {
if (_this.props.initialCroppedAreaPercentages) {
var _a = getInitialCropFromCroppedAreaPercentages(_this.props.initialCroppedAreaPercentages, _this.mediaSize, _this.props.rotation, cropSize, _this.props.minZoom, _this.props.maxZoom),
_this.props.onCropChange(crop);
_this.props.onZoomChange && _this.props.onZoomChange(zoom);
} else if (_this.props.initialCroppedAreaPixels) {
var _b = getInitialCropFromCroppedAreaPixels(_this.props.initialCroppedAreaPixels, _this.mediaSize, _this.props.rotation, cropSize, _this.props.minZoom, _this.props.maxZoom),
_this.props.onCropChange(crop);
_this.props.onZoomChange && _this.props.onZoomChange(zoom);
_this.computeSizes = function () {
var _a, _b, _c, _d, _e, _f;
var mediaRef = _this.imageRef.current || _this.videoRef.current;
if (mediaRef && _this.containerRef) {
_this.containerRect = _this.containerRef.getBoundingClientRect();