infinity-forge
Version:
84 lines • 3.3 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useCropState = useCropState;
var react_1 = require("react");
function useCropState(_a) {
var file = _a.file;
var _b = (0, react_1.useState)({ width: 0, height: 0 }), imageDimensions = _b[0], setImageDimensions = _b[1];
var _c = (0, react_1.useState)({
x: 0,
y: 0,
width: 0,
height: 0,
}), cropArea = _c[0], setCropArea = _c[1];
var _d = (0, react_1.useState)(null), aspectRatio = _d[0], setAspectRatio = _d[1];
var _e = (0, react_1.useState)(null), originalCropArea = _e[0], setOriginalCropArea = _e[1];
var imageDimensionsRef = (0, react_1.useRef)(imageDimensions);
var originalCropAreaRef = (0, react_1.useRef)(originalCropArea);
imageDimensionsRef.current = imageDimensions;
originalCropAreaRef.current = originalCropArea;
(0, react_1.useEffect)(function () {
if (file === null || file === void 0 ? void 0 : file.url) {
var img_1 = new Image();
img_1.onload = function () {
var dimensions = { width: img_1.naturalWidth, height: img_1.naturalHeight };
setImageDimensions(dimensions);
var initialCropArea = {
x: dimensions.width * 0.15,
y: dimensions.height * 0.15,
width: dimensions.width * 0.7,
height: dimensions.height * 0.6,
};
setCropArea(initialCropArea);
setOriginalCropArea(initialCropArea);
};
img_1.src = file.url;
}
}, [file]);
var restoreOriginal = (0, react_1.useCallback)(function () {
if (originalCropAreaRef.current) {
setCropArea(originalCropAreaRef.current);
}
else {
setCropArea({
x: 0,
y: 0,
width: imageDimensionsRef.current.width,
height: imageDimensionsRef.current.height,
});
}
setAspectRatio(null);
}, []);
var setAspectRatioPreset = (0, react_1.useCallback)(function (ratio) {
if (ratio === 'free') {
setAspectRatio(null);
return;
}
var _a = ratio.split(':').map(Number), w = _a[0], h = _a[1];
var newAspectRatio = w / h;
setAspectRatio(newAspectRatio);
setCropArea(function (prev) { return (__assign(__assign({}, prev), { height: prev.width / newAspectRatio })); });
}, []);
return {
imageDimensions: imageDimensions,
cropArea: cropArea,
setCropArea: setCropArea,
aspectRatio: aspectRatio,
setAspectRatio: setAspectRatio,
restoreOriginal: restoreOriginal,
setAspectRatioPreset: setAspectRatioPreset,
originalCropArea: originalCropArea,
};
}
//# sourceMappingURL=use-crop-state.js.map