_this.saveContainerPosition();

[62000] Fix | Delete

var containerAspect = _this.containerRect.width / _this.containerRect.height;

[62001] Fix | Delete

var naturalWidth = ((_a = _this.imageRef.current) === null || _a === void 0 ? void 0 : _a.naturalWidth) || ((_b = _this.videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) || 0;

[62002] Fix | Delete

var naturalHeight = ((_c = _this.imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalHeight) || ((_d = _this.videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) || 0;

[62003] Fix | Delete

var isMediaScaledDown = mediaRef.offsetWidth < naturalWidth || mediaRef.offsetHeight < naturalHeight;

[62004] Fix | Delete

var mediaAspect = naturalWidth / naturalHeight;

[62005] Fix | Delete

// We do not rely on the offsetWidth/offsetHeight if the media is scaled down

[62006] Fix | Delete

// as the values they report are rounded. That will result in precision losses

[62007] Fix | Delete

// when calculating zoom. We use the fact that the media is positionned relative

[62008] Fix | Delete

// to the container. That allows us to use the container's dimensions

[62009] Fix | Delete

// and natural aspect ratio of the media to calculate accurate media size.

[62010] Fix | Delete

// However, for this to work, the container should not be rotated

[62011] Fix | Delete

var renderedMediaSize = void 0;

[62012] Fix | Delete

if (isMediaScaledDown) {

[62013] Fix | Delete

switch (_this.state.mediaObjectFit) {

[62014] Fix | Delete

default:

[62015] Fix | Delete

case 'contain':

[62016] Fix | Delete

renderedMediaSize = containerAspect > mediaAspect ? {

[62017] Fix | Delete

width: _this.containerRect.height * mediaAspect,

[62018] Fix | Delete

height: _this.containerRect.height

[62019] Fix | Delete

} : {

[62020] Fix | Delete

width: _this.containerRect.width,

[62021] Fix | Delete

height: _this.containerRect.width / mediaAspect

[62022] Fix | Delete

};

[62023] Fix | Delete

break;

[62024] Fix | Delete

case 'horizontal-cover':

[62025] Fix | Delete

renderedMediaSize = {

[62026] Fix | Delete

width: _this.containerRect.width,

[62027] Fix | Delete

height: _this.containerRect.width / mediaAspect

[62028] Fix | Delete

};

[62029] Fix | Delete

break;

[62030] Fix | Delete

case 'vertical-cover':

[62031] Fix | Delete

renderedMediaSize = {

[62032] Fix | Delete

width: _this.containerRect.height * mediaAspect,

[62033] Fix | Delete

height: _this.containerRect.height

[62034] Fix | Delete

};

[62035] Fix | Delete

break;

[62036] Fix | Delete

}

[62037] Fix | Delete

} else {

[62038] Fix | Delete

renderedMediaSize = {

[62039] Fix | Delete

width: mediaRef.offsetWidth,

[62040] Fix | Delete

height: mediaRef.offsetHeight

[62041] Fix | Delete

};

[62042] Fix | Delete

}

[62043] Fix | Delete

_this.mediaSize = __assign(__assign({}, renderedMediaSize), {

[62044] Fix | Delete

naturalWidth: naturalWidth,

[62045] Fix | Delete

naturalHeight: naturalHeight

[62046] Fix | Delete

});

[62047] Fix | Delete

// set media size in the parent

[62048] Fix | Delete

if (_this.props.setMediaSize) {

[62049] Fix | Delete

_this.props.setMediaSize(_this.mediaSize);

[62050] Fix | Delete

}

[62051] Fix | Delete

var cropSize = _this.props.cropSize ? _this.props.cropSize : getCropSize(_this.mediaSize.width, _this.mediaSize.height, _this.containerRect.width, _this.containerRect.height, _this.props.aspect, _this.props.rotation);

[62052] Fix | Delete

if (((_e = _this.state.cropSize) === null || _e === void 0 ? void 0 : _e.height) !== cropSize.height || ((_f = _this.state.cropSize) === null || _f === void 0 ? void 0 : _f.width) !== cropSize.width) {

[62053] Fix | Delete

_this.props.onCropSizeChange && _this.props.onCropSizeChange(cropSize);

[62054] Fix | Delete

}

[62055] Fix | Delete

_this.setState({

[62056] Fix | Delete

cropSize: cropSize

[62057] Fix | Delete

}, _this.recomputeCropPosition);

[62058] Fix | Delete

// pass crop size to parent

[62059] Fix | Delete

if (_this.props.setCropSize) {

[62060] Fix | Delete

_this.props.setCropSize(cropSize);

[62061] Fix | Delete

}

[62062] Fix | Delete

return cropSize;

[62063] Fix | Delete

}

[62064] Fix | Delete

};

[62065] Fix | Delete

_this.saveContainerPosition = function () {

[62066] Fix | Delete

if (_this.containerRef) {

[62067] Fix | Delete

var bounds = _this.containerRef.getBoundingClientRect();

[62068] Fix | Delete

_this.containerPosition = {

[62069] Fix | Delete

x: bounds.left,

[62070] Fix | Delete

y: bounds.top

[62071] Fix | Delete

};

[62072] Fix | Delete

}

[62073] Fix | Delete

};

[62074] Fix | Delete

_this.onMouseDown = function (e) {

[62075] Fix | Delete

if (!_this.currentDoc) return;

[62076] Fix | Delete

e.preventDefault();

[62077] Fix | Delete

_this.currentDoc.addEventListener('mousemove', _this.onMouseMove);

[62078] Fix | Delete

_this.currentDoc.addEventListener('mouseup', _this.onDragStopped);

[62079] Fix | Delete

_this.saveContainerPosition();

[62080] Fix | Delete

_this.onDragStart(Cropper.getMousePoint(e));

[62081] Fix | Delete

};

[62082] Fix | Delete

_this.onMouseMove = function (e) {

[62083] Fix | Delete

return _this.onDrag(Cropper.getMousePoint(e));

[62084] Fix | Delete

};

[62085] Fix | Delete

_this.onScroll = function (e) {

[62086] Fix | Delete

if (!_this.currentDoc) return;

[62087] Fix | Delete

e.preventDefault();

[62088] Fix | Delete

_this.saveContainerPosition();

[62089] Fix | Delete

};

[62090] Fix | Delete

_this.onTouchStart = function (e) {

[62091] Fix | Delete

if (!_this.currentDoc) return;

[62092] Fix | Delete

_this.isTouching = true;

[62093] Fix | Delete

if (_this.props.onTouchRequest && !_this.props.onTouchRequest(e)) {

[62094] Fix | Delete

return;

[62095] Fix | Delete

}

[62096] Fix | Delete

_this.currentDoc.addEventListener('touchmove', _this.onTouchMove, {

[62097] Fix | Delete

passive: false

[62098] Fix | Delete

}); // iOS 11 now defaults to passive: true

[62099] Fix | Delete

_this.currentDoc.addEventListener('touchend', _this.onDragStopped);

[62100] Fix | Delete

_this.saveContainerPosition();

[62101] Fix | Delete

if (e.touches.length === 2) {

[62102] Fix | Delete

_this.onPinchStart(e);

[62103] Fix | Delete

} else if (e.touches.length === 1) {

[62104] Fix | Delete

_this.onDragStart(Cropper.getTouchPoint(e.touches[0]));

[62105] Fix | Delete

}

[62106] Fix | Delete

};

[62107] Fix | Delete

_this.onTouchMove = function (e) {

[62108] Fix | Delete

// Prevent whole page from scrolling on iOS.

[62109] Fix | Delete

e.preventDefault();

[62110] Fix | Delete

if (e.touches.length === 2) {

[62111] Fix | Delete

_this.onPinchMove(e);

[62112] Fix | Delete

} else if (e.touches.length === 1) {

[62113] Fix | Delete

_this.onDrag(Cropper.getTouchPoint(e.touches[0]));

[62114] Fix | Delete

}

[62115] Fix | Delete

};

[62116] Fix | Delete

_this.onGestureStart = function (e) {

[62117] Fix | Delete

if (!_this.currentDoc) return;

[62118] Fix | Delete

e.preventDefault();

[62119] Fix | Delete

_this.currentDoc.addEventListener('gesturechange', _this.onGestureMove);

[62120] Fix | Delete

_this.currentDoc.addEventListener('gestureend', _this.onGestureEnd);

[62121] Fix | Delete

_this.gestureZoomStart = _this.props.zoom;

[62122] Fix | Delete

_this.gestureRotationStart = _this.props.rotation;

[62123] Fix | Delete

};

[62124] Fix | Delete

_this.onGestureMove = function (e) {

[62125] Fix | Delete

e.preventDefault();

[62126] Fix | Delete

if (_this.isTouching) {

[62127] Fix | Delete

// this is to avoid conflict between gesture and touch events

[62128] Fix | Delete

return;

[62129] Fix | Delete

}

[62130] Fix | Delete

var point = Cropper.getMousePoint(e);

[62131] Fix | Delete

var newZoom = _this.gestureZoomStart - 1 + e.scale;

[62132] Fix | Delete

_this.setNewZoom(newZoom, point, {

[62133] Fix | Delete

shouldUpdatePosition: true

[62134] Fix | Delete

});

[62135] Fix | Delete

if (_this.props.onRotationChange) {

[62136] Fix | Delete

var newRotation = _this.gestureRotationStart + e.rotation;

[62137] Fix | Delete

_this.props.onRotationChange(newRotation);

[62138] Fix | Delete

}

[62139] Fix | Delete

};

[62140] Fix | Delete

_this.onGestureEnd = function (e) {

[62141] Fix | Delete

_this.cleanEvents();

[62142] Fix | Delete

};

[62143] Fix | Delete

_this.onDragStart = function (_a) {

[62144] Fix | Delete

var _b, _c;

[62145] Fix | Delete

var x = _a.x,

[62146] Fix | Delete

y = _a.y;

[62147] Fix | Delete

_this.dragStartPosition = {

[62148] Fix | Delete

x: x,

[62149] Fix | Delete

y: y

[62150] Fix | Delete

};

[62151] Fix | Delete

_this.dragStartCrop = __assign({}, _this.props.crop);

[62152] Fix | Delete

(_c = (_b = _this.props).onInteractionStart) === null || _c === void 0 ? void 0 : _c.call(_b);

[62153] Fix | Delete

};

[62154] Fix | Delete

_this.onDrag = function (_a) {

[62155] Fix | Delete

var x = _a.x,

[62156] Fix | Delete

y = _a.y;

[62157] Fix | Delete

if (!_this.currentWindow) return;

[62158] Fix | Delete

if (_this.rafDragTimeout) _this.currentWindow.cancelAnimationFrame(_this.rafDragTimeout);

[62159] Fix | Delete

_this.rafDragTimeout = _this.currentWindow.requestAnimationFrame(function () {

[62160] Fix | Delete

if (!_this.state.cropSize) return;

[62161] Fix | Delete

if (x === undefined || y === undefined) return;

[62162] Fix | Delete

var offsetX = x - _this.dragStartPosition.x;

[62163] Fix | Delete

var offsetY = y - _this.dragStartPosition.y;

[62164] Fix | Delete

var requestedPosition = {

[62165] Fix | Delete

x: _this.dragStartCrop.x + offsetX,

[62166] Fix | Delete

y: _this.dragStartCrop.y + offsetY

[62167] Fix | Delete

};

[62168] Fix | Delete

var newPosition = _this.props.restrictPosition ? restrictPosition(requestedPosition, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : requestedPosition;

[62169] Fix | Delete

_this.props.onCropChange(newPosition);

[62170] Fix | Delete

});

[62171] Fix | Delete

};

[62172] Fix | Delete

_this.onDragStopped = function () {

[62173] Fix | Delete

var _a, _b;

[62174] Fix | Delete

_this.isTouching = false;

[62175] Fix | Delete

_this.cleanEvents();

[62176] Fix | Delete

_this.emitCropData();

[62177] Fix | Delete

(_b = (_a = _this.props).onInteractionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);

[62178] Fix | Delete

};

[62179] Fix | Delete

_this.onWheel = function (e) {

[62180] Fix | Delete

if (!_this.currentWindow) return;

[62181] Fix | Delete

if (_this.props.onWheelRequest && !_this.props.onWheelRequest(e)) {

[62182] Fix | Delete

return;

[62183] Fix | Delete

}

[62184] Fix | Delete

e.preventDefault();

[62185] Fix | Delete

var point = Cropper.getMousePoint(e);

[62186] Fix | Delete

var pixelY = normalize_wheel_default()(e).pixelY;

[62187] Fix | Delete

var newZoom = _this.props.zoom - pixelY * _this.props.zoomSpeed / 200;

[62188] Fix | Delete

_this.setNewZoom(newZoom, point, {

[62189] Fix | Delete

shouldUpdatePosition: true

[62190] Fix | Delete

});

[62191] Fix | Delete

if (!_this.state.hasWheelJustStarted) {

[62192] Fix | Delete

_this.setState({

[62193] Fix | Delete

hasWheelJustStarted: true

[62194] Fix | Delete

}, function () {

[62195] Fix | Delete

var _a, _b;

[62196] Fix | Delete

return (_b = (_a = _this.props).onInteractionStart) === null || _b === void 0 ? void 0 : _b.call(_a);

[62197] Fix | Delete

});

[62198] Fix | Delete

}

[62199] Fix | Delete

if (_this.wheelTimer) {

[62200] Fix | Delete

clearTimeout(_this.wheelTimer);

[62201] Fix | Delete

}

[62202] Fix | Delete

_this.wheelTimer = _this.currentWindow.setTimeout(function () {

[62203] Fix | Delete

return _this.setState({

[62204] Fix | Delete

hasWheelJustStarted: false

[62205] Fix | Delete

}, function () {

[62206] Fix | Delete

var _a, _b;

[62207] Fix | Delete

return (_b = (_a = _this.props).onInteractionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);

[62208] Fix | Delete

});

[62209] Fix | Delete

}, 250);

[62210] Fix | Delete

};

[62211] Fix | Delete

_this.getPointOnContainer = function (_a, containerTopLeft) {

[62212] Fix | Delete

var x = _a.x,

[62213] Fix | Delete

y = _a.y;

[62214] Fix | Delete

if (!_this.containerRect) {

[62215] Fix | Delete

throw new Error('The Cropper is not mounted');

[62216] Fix | Delete

}

[62217] Fix | Delete

return {

[62218] Fix | Delete

x: _this.containerRect.width / 2 - (x - containerTopLeft.x),

[62219] Fix | Delete

y: _this.containerRect.height / 2 - (y - containerTopLeft.y)

[62220] Fix | Delete

};

[62221] Fix | Delete

};

[62222] Fix | Delete

_this.getPointOnMedia = function (_a) {

[62223] Fix | Delete

var x = _a.x,

[62224] Fix | Delete

y = _a.y;

[62225] Fix | Delete

var _b = _this.props,

[62226] Fix | Delete

crop = _b.crop,

[62227] Fix | Delete

zoom = _b.zoom;

[62228] Fix | Delete

return {

[62229] Fix | Delete

x: (x + crop.x) / zoom,

[62230] Fix | Delete

y: (y + crop.y) / zoom

[62231] Fix | Delete

};

[62232] Fix | Delete

};

[62233] Fix | Delete

_this.setNewZoom = function (zoom, point, _a) {

[62234] Fix | Delete

var _b = _a === void 0 ? {} : _a,

[62235] Fix | Delete

_c = _b.shouldUpdatePosition,

[62236] Fix | Delete

shouldUpdatePosition = _c === void 0 ? true : _c;

[62237] Fix | Delete

if (!_this.state.cropSize || !_this.props.onZoomChange) return;

[62238] Fix | Delete

var newZoom = clamp(zoom, _this.props.minZoom, _this.props.maxZoom);

[62239] Fix | Delete

if (shouldUpdatePosition) {

[62240] Fix | Delete

var zoomPoint = _this.getPointOnContainer(point, _this.containerPosition);

[62241] Fix | Delete

var zoomTarget = _this.getPointOnMedia(zoomPoint);

[62242] Fix | Delete

var requestedPosition = {

[62243] Fix | Delete

x: zoomTarget.x * newZoom - zoomPoint.x,

[62244] Fix | Delete

y: zoomTarget.y * newZoom - zoomPoint.y

[62245] Fix | Delete

};

[62246] Fix | Delete

var newPosition = _this.props.restrictPosition ? restrictPosition(requestedPosition, _this.mediaSize, _this.state.cropSize, newZoom, _this.props.rotation) : requestedPosition;

[62247] Fix | Delete

_this.props.onCropChange(newPosition);

[62248] Fix | Delete

}

[62249] Fix | Delete

_this.props.onZoomChange(newZoom);

[62250] Fix | Delete

};

[62251] Fix | Delete

_this.getCropData = function () {

[62252] Fix | Delete

if (!_this.state.cropSize) {

[62253] Fix | Delete

return null;

[62254] Fix | Delete

}

[62255] Fix | Delete

// this is to ensure the crop is correctly restricted after a zoom back (https://github.com/ValentinH/react-easy-crop/issues/6)

[62256] Fix | Delete

var restrictedPosition = _this.props.restrictPosition ? restrictPosition(_this.props.crop, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : _this.props.crop;

[62257] Fix | Delete

return computeCroppedArea(restrictedPosition, _this.mediaSize, _this.state.cropSize, _this.getAspect(), _this.props.zoom, _this.props.rotation, _this.props.restrictPosition);

[62258] Fix | Delete

};

[62259] Fix | Delete

_this.emitCropData = function () {

[62260] Fix | Delete

var cropData = _this.getCropData();

[62261] Fix | Delete

if (!cropData) return;

[62262] Fix | Delete

var croppedAreaPercentages = cropData.croppedAreaPercentages,

[62263] Fix | Delete

croppedAreaPixels = cropData.croppedAreaPixels;

[62264] Fix | Delete

if (_this.props.onCropComplete) {

[62265] Fix | Delete

_this.props.onCropComplete(croppedAreaPercentages, croppedAreaPixels);

[62266] Fix | Delete

}

[62267] Fix | Delete

if (_this.props.onCropAreaChange) {

[62268] Fix | Delete

_this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);

[62269] Fix | Delete

}

[62270] Fix | Delete

};

[62271] Fix | Delete

_this.emitCropAreaChange = function () {

[62272] Fix | Delete

var cropData = _this.getCropData();

[62273] Fix | Delete

if (!cropData) return;

[62274] Fix | Delete

var croppedAreaPercentages = cropData.croppedAreaPercentages,

[62275] Fix | Delete

croppedAreaPixels = cropData.croppedAreaPixels;

[62276] Fix | Delete

if (_this.props.onCropAreaChange) {

[62277] Fix | Delete

_this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);

[62278] Fix | Delete

}

[62279] Fix | Delete

};

[62280] Fix | Delete

_this.recomputeCropPosition = function () {

[62281] Fix | Delete

if (!_this.state.cropSize) return;

[62282] Fix | Delete

var newPosition = _this.props.restrictPosition ? restrictPosition(_this.props.crop, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : _this.props.crop;

[62283] Fix | Delete

_this.props.onCropChange(newPosition);

[62284] Fix | Delete

_this.emitCropData();

[62285] Fix | Delete

};

[62286] Fix | Delete

return _this;

[62287] Fix | Delete

}

[62288] Fix | Delete

Cropper.prototype.componentDidMount = function () {

[62289] Fix | Delete

if (!this.currentDoc || !this.currentWindow) return;

[62290] Fix | Delete

if (this.containerRef) {

[62291] Fix | Delete

if (this.containerRef.ownerDocument) {

[62292] Fix | Delete

this.currentDoc = this.containerRef.ownerDocument;

[62293] Fix | Delete

}

[62294] Fix | Delete

if (this.currentDoc.defaultView) {

[62295] Fix | Delete

this.currentWindow = this.currentDoc.defaultView;

[62296] Fix | Delete

}

[62297] Fix | Delete

this.initResizeObserver();

[62298] Fix | Delete

// only add window resize listener if ResizeObserver is not supported. Otherwise, it would be redundant

[62299] Fix | Delete

if (typeof window.ResizeObserver === 'undefined') {

[62300] Fix | Delete

this.currentWindow.addEventListener('resize', this.computeSizes);

[62301] Fix | Delete

}

[62302] Fix | Delete

this.props.zoomWithScroll && this.containerRef.addEventListener('wheel', this.onWheel, {

[62303] Fix | Delete

passive: false

[62304] Fix | Delete

});

[62305] Fix | Delete

this.containerRef.addEventListener('gesturestart', this.onGestureStart);

[62306] Fix | Delete

}

[62307] Fix | Delete

this.currentDoc.addEventListener('scroll', this.onScroll);

[62308] Fix | Delete

if (!this.props.disableAutomaticStylesInjection) {

[62309] Fix | Delete

this.styleRef = this.currentDoc.createElement('style');

[62310] Fix | Delete

this.styleRef.setAttribute('type', 'text/css');

[62311] Fix | Delete

if (this.props.nonce) {

[62312] Fix | Delete

this.styleRef.setAttribute('nonce', this.props.nonce);

[62313] Fix | Delete

}

[62314] Fix | Delete

this.styleRef.innerHTML = css_248z;

[62315] Fix | Delete

this.currentDoc.head.appendChild(this.styleRef);

[62316] Fix | Delete

}

[62317] Fix | Delete

// when rendered via SSR, the image can already be loaded and its onLoad callback will never be called

[62318] Fix | Delete

if (this.imageRef.current && this.imageRef.current.complete) {

[62319] Fix | Delete

this.onMediaLoad();

[62320] Fix | Delete

}

[62321] Fix | Delete

// set image and video refs in the parent if the callbacks exist

[62322] Fix | Delete

if (this.props.setImageRef) {

[62323] Fix | Delete

this.props.setImageRef(this.imageRef);

[62324] Fix | Delete

}

[62325] Fix | Delete

if (this.props.setVideoRef) {

[62326] Fix | Delete

this.props.setVideoRef(this.videoRef);

[62327] Fix | Delete

}

[62328] Fix | Delete

};

[62329] Fix | Delete

Cropper.prototype.componentWillUnmount = function () {

[62330] Fix | Delete

var _a, _b;

[62331] Fix | Delete

if (!this.currentDoc || !this.currentWindow) return;

[62332] Fix | Delete

if (typeof window.ResizeObserver === 'undefined') {

[62333] Fix | Delete

this.currentWindow.removeEventListener('resize', this.computeSizes);

[62334] Fix | Delete

}

[62335] Fix | Delete

(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();

[62336] Fix | Delete

if (this.containerRef) {

[62337] Fix | Delete

this.containerRef.removeEventListener('gesturestart', this.preventZoomSafari);

[62338] Fix | Delete

}

[62339] Fix | Delete

if (this.styleRef) {

[62340] Fix | Delete

(_b = this.styleRef.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.styleRef);

[62341] Fix | Delete

}

[62342] Fix | Delete

this.cleanEvents();

[62343] Fix | Delete

this.props.zoomWithScroll && this.clearScrollEvent();

[62344] Fix | Delete

};

[62345] Fix | Delete

Cropper.prototype.componentDidUpdate = function (prevProps) {

[62346] Fix | Delete

var _a, _b, _c, _d, _e, _f, _g, _h, _j;

[62347] Fix | Delete

if (prevProps.rotation !== this.props.rotation) {

[62348] Fix | Delete

this.computeSizes();

[62349] Fix | Delete

this.recomputeCropPosition();

[62350] Fix | Delete

} else if (prevProps.aspect !== this.props.aspect) {

[62351] Fix | Delete

this.computeSizes();

[62352] Fix | Delete

} else if (prevProps.objectFit !== this.props.objectFit) {

[62353] Fix | Delete

this.computeSizes();

[62354] Fix | Delete

} else if (prevProps.zoom !== this.props.zoom) {

[62355] Fix | Delete

this.recomputeCropPosition();

[62356] Fix | Delete

} else if (((_a = prevProps.cropSize) === null || _a === void 0 ? void 0 : _a.height) !== ((_b = this.props.cropSize) === null || _b === void 0 ? void 0 : _b.height) || ((_c = prevProps.cropSize) === null || _c === void 0 ? void 0 : _c.width) !== ((_d = this.props.cropSize) === null || _d === void 0 ? void 0 : _d.width)) {

[62357] Fix | Delete

this.computeSizes();

[62358] Fix | Delete

} else if (((_e = prevProps.crop) === null || _e === void 0 ? void 0 : _e.x) !== ((_f = this.props.crop) === null || _f === void 0 ? void 0 : _f.x) || ((_g = prevProps.crop) === null || _g === void 0 ? void 0 : _g.y) !== ((_h = this.props.crop) === null || _h === void 0 ? void 0 : _h.y)) {

[62359] Fix | Delete

this.emitCropAreaChange();

[62360] Fix | Delete

}

[62361] Fix | Delete

if (prevProps.zoomWithScroll !== this.props.zoomWithScroll && this.containerRef) {

[62362] Fix | Delete

this.props.zoomWithScroll ? this.containerRef.addEventListener('wheel', this.onWheel, {

[62363] Fix | Delete

passive: false

[62364] Fix | Delete

}) : this.clearScrollEvent();

[62365] Fix | Delete

}

[62366] Fix | Delete

if (prevProps.video !== this.props.video) {

[62367] Fix | Delete

(_j = this.videoRef.current) === null || _j === void 0 ? void 0 : _j.load();

[62368] Fix | Delete

}

[62369] Fix | Delete

var objectFit = this.getObjectFit();

[62370] Fix | Delete

if (objectFit !== this.state.mediaObjectFit) {

[62371] Fix | Delete

this.setState({

[62372] Fix | Delete

mediaObjectFit: objectFit

[62373] Fix | Delete

}, this.computeSizes);

[62374] Fix | Delete

}

[62375] Fix | Delete

};

[62376] Fix | Delete

Cropper.prototype.getAspect = function () {

[62377] Fix | Delete

var _a = this.props,

[62378] Fix | Delete

cropSize = _a.cropSize,

[62379] Fix | Delete

aspect = _a.aspect;

[62380] Fix | Delete

if (cropSize) {

[62381] Fix | Delete

return cropSize.width / cropSize.height;

[62382] Fix | Delete

}

[62383] Fix | Delete

return aspect;

[62384] Fix | Delete

};

[62385] Fix | Delete

Cropper.prototype.getObjectFit = function () {

[62386] Fix | Delete

var _a, _b, _c, _d;

[62387] Fix | Delete

if (this.props.objectFit === 'cover') {

[62388] Fix | Delete

var mediaRef = this.imageRef.current || this.videoRef.current;

[62389] Fix | Delete

if (mediaRef && this.containerRef) {

[62390] Fix | Delete

this.containerRect = this.containerRef.getBoundingClientRect();

[62391] Fix | Delete

var containerAspect = this.containerRect.width / this.containerRect.height;

[62392] Fix | Delete

var naturalWidth = ((_a = this.imageRef.current) === null || _a === void 0 ? void 0 : _a.naturalWidth) || ((_b = this.videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) || 0;

[62393] Fix | Delete

var naturalHeight = ((_c = this.imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalHeight) || ((_d = this.videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) || 0;

[62394] Fix | Delete

var mediaAspect = naturalWidth / naturalHeight;

[62395] Fix | Delete

return mediaAspect < containerAspect ? 'horizontal-cover' : 'vertical-cover';

[62396] Fix | Delete

}

[62397] Fix | Delete

return 'horizontal-cover';

[62398] Fix | Delete

}

[62399] Fix | Delete

return this.props.objectFit;

[62400] Fix | Delete

};

[62401] Fix | Delete

Cropper.prototype.onPinchStart = function (e) {

[62402] Fix | Delete

var pointA = Cropper.getTouchPoint(e.touches[0]);

[62403] Fix | Delete

var pointB = Cropper.getTouchPoint(e.touches[1]);

[62404] Fix | Delete

this.lastPinchDistance = getDistanceBetweenPoints(pointA, pointB);

[62405] Fix | Delete

this.lastPinchRotation = getRotationBetweenPoints(pointA, pointB);

[62406] Fix | Delete

this.onDragStart(getCenter(pointA, pointB));

[62407] Fix | Delete

};

[62408] Fix | Delete

Cropper.prototype.onPinchMove = function (e) {

[62409] Fix | Delete

var _this = this;

[62410] Fix | Delete

if (!this.currentDoc || !this.currentWindow) return;

[62411] Fix | Delete

var pointA = Cropper.getTouchPoint(e.touches[0]);

[62412] Fix | Delete

var pointB = Cropper.getTouchPoint(e.touches[1]);

[62413] Fix | Delete

var center = getCenter(pointA, pointB);

[62414] Fix | Delete

this.onDrag(center);

[62415] Fix | Delete

if (this.rafPinchTimeout) this.currentWindow.cancelAnimationFrame(this.rafPinchTimeout);

[62416] Fix | Delete

this.rafPinchTimeout = this.currentWindow.requestAnimationFrame(function () {

[62417] Fix | Delete

var distance = getDistanceBetweenPoints(pointA, pointB);

[62418] Fix | Delete

var newZoom = _this.props.zoom * (distance / _this.lastPinchDistance);

[62419] Fix | Delete

_this.setNewZoom(newZoom, center, {

[62420] Fix | Delete

shouldUpdatePosition: false

[62421] Fix | Delete

});

[62422] Fix | Delete

_this.lastPinchDistance = distance;

[62423] Fix | Delete

var rotation = getRotationBetweenPoints(pointA, pointB);

[62424] Fix | Delete

var newRotation = _this.props.rotation + (rotation - _this.lastPinchRotation);

[62425] Fix | Delete

_this.props.onRotationChange && _this.props.onRotationChange(newRotation);

[62426] Fix | Delete

_this.lastPinchRotation = rotation;

[62427] Fix | Delete

});

[62428] Fix | Delete

};

[62429] Fix | Delete

Cropper.prototype.render = function () {

[62430] Fix | Delete

var _this = this;

[62431] Fix | Delete

var _a = this.props,

[62432] Fix | Delete

image = _a.image,

[62433] Fix | Delete

video = _a.video,

[62434] Fix | Delete

mediaProps = _a.mediaProps,

[62435] Fix | Delete

transform = _a.transform,

[62436] Fix | Delete

_b = _a.crop,

[62437] Fix | Delete

x = _b.x,

[62438] Fix | Delete

y = _b.y,

[62439] Fix | Delete

rotation = _a.rotation,

[62440] Fix | Delete

zoom = _a.zoom,

[62441] Fix | Delete

cropShape = _a.cropShape,

[62442] Fix | Delete

showGrid = _a.showGrid,

[62443] Fix | Delete

_c = _a.style,

[62444] Fix | Delete

containerStyle = _c.containerStyle,

[62445] Fix | Delete

cropAreaStyle = _c.cropAreaStyle,

[62446] Fix | Delete

mediaStyle = _c.mediaStyle,

[62447] Fix | Delete

_d = _a.classes,

[62448] Fix | Delete

containerClassName = _d.containerClassName,

[62449] Fix | Delete

cropAreaClassName = _d.cropAreaClassName,

[62450] Fix | Delete

mediaClassName = _d.mediaClassName;

[62451] Fix | Delete

var objectFit = this.state.mediaObjectFit;

[62452] Fix | Delete

return external_React_.createElement("div", {

[62453] Fix | Delete

onMouseDown: this.onMouseDown,

[62454] Fix | Delete

onTouchStart: this.onTouchStart,

[62455] Fix | Delete

ref: function ref(el) {

[62456] Fix | Delete

return _this.containerRef = el;

[62457] Fix | Delete

},

[62458] Fix | Delete

"data-testid": "container",

[62459] Fix | Delete

style: containerStyle,

[62460] Fix | Delete

className: classNames('reactEasyCrop_Container', containerClassName)

[62461] Fix | Delete

}, image ? external_React_.createElement("img", __assign({

[62462] Fix | Delete

alt: "",

[62463] Fix | Delete

className: classNames('reactEasyCrop_Image', objectFit === 'contain' && 'reactEasyCrop_Contain', objectFit === 'horizontal-cover' && 'reactEasyCrop_Cover_Horizontal', objectFit === 'vertical-cover' && 'reactEasyCrop_Cover_Vertical', mediaClassName)

[62464] Fix | Delete

}, mediaProps, {

[62465] Fix | Delete

src: image,

[62466] Fix | Delete

ref: this.imageRef,

[62467] Fix | Delete

style: __assign(__assign({}, mediaStyle), {

[62468] Fix | Delete

transform: transform || "translate(".concat(x, "px, ").concat(y, "px) rotate(").concat(rotation, "deg) scale(").concat(zoom, ")")

[62469] Fix | Delete

}),

[62470] Fix | Delete

onLoad: this.onMediaLoad

[62471] Fix | Delete

})) : video && external_React_.createElement("video", __assign({

[62472] Fix | Delete

autoPlay: true,

[62473] Fix | Delete

loop: true,

[62474] Fix | Delete

muted: true,

[62475] Fix | Delete

className: classNames('reactEasyCrop_Video', objectFit === 'contain' && 'reactEasyCrop_Contain', objectFit === 'horizontal-cover' && 'reactEasyCrop_Cover_Horizontal', objectFit === 'vertical-cover' && 'reactEasyCrop_Cover_Vertical', mediaClassName)

[62476] Fix | Delete

}, mediaProps, {

[62477] Fix | Delete

ref: this.videoRef,

[62478] Fix | Delete

onLoadedMetadata: this.onMediaLoad,

[62479] Fix | Delete

style: __assign(__assign({}, mediaStyle), {

[62480] Fix | Delete

transform: transform || "translate(".concat(x, "px, ").concat(y, "px) rotate(").concat(rotation, "deg) scale(").concat(zoom, ")")

[62481] Fix | Delete

}),

[62482] Fix | Delete

controls: false

[62483] Fix | Delete

}), (Array.isArray(video) ? video : [{

[62484] Fix | Delete

src: video

[62485] Fix | Delete

}]).map(function (item) {

[62486] Fix | Delete

return external_React_.createElement("source", __assign({

[62487] Fix | Delete

key: item.src

[62488] Fix | Delete

}, item));

[62489] Fix | Delete

})), this.state.cropSize && external_React_.createElement("div", {

[62490] Fix | Delete

style: __assign(__assign({}, cropAreaStyle), {

[62491] Fix | Delete

width: this.state.cropSize.width,

[62492] Fix | Delete

height: this.state.cropSize.height

[62493] Fix | Delete

}),

[62494] Fix | Delete

"data-testid": "cropper",

[62495] Fix | Delete

className: classNames('reactEasyCrop_CropArea', cropShape === 'round' && 'reactEasyCrop_CropAreaRound', showGrid && 'reactEasyCrop_CropAreaGrid', cropAreaClassName)

[62496] Fix | Delete

}));

[62497] Fix | Delete

};

[62498] Fix | Delete

Cropper.defaultProps = {

[62499] Fix | Delete