@wordpress/block-editor
Version:
94 lines • 2.81 kB
JavaScript
/* wp:polyfill */
/**
* WordPress dependencies
*/
import { useCallback, useMemo, useState } from '@wordpress/element';
import { applyFilters } from '@wordpress/hooks';
export default function useTransformImage({
url,
naturalWidth,
naturalHeight
}) {
const [editedUrl, setEditedUrl] = useState();
const [crop, setCrop] = useState();
const [position, setPosition] = useState({
x: 0,
y: 0
});
const [zoom, setZoom] = useState(100);
const [rotation, setRotation] = useState(0);
const defaultAspect = naturalWidth / naturalHeight;
const [aspect, setAspect] = useState(defaultAspect);
const rotateClockwise = useCallback(() => {
const angle = (rotation + 90) % 360;
let naturalAspectRatio = defaultAspect;
if (rotation % 180 === 90) {
naturalAspectRatio = 1 / defaultAspect;
}
if (angle === 0) {
setEditedUrl();
setRotation(angle);
setAspect(defaultAspect);
setPosition(prevPosition => ({
x: -(prevPosition.y * naturalAspectRatio),
y: prevPosition.x * naturalAspectRatio
}));
return;
}
function editImage(event) {
const canvas = document.createElement('canvas');
let translateX = 0;
let translateY = 0;
if (angle % 180) {
canvas.width = event.target.height;
canvas.height = event.target.width;
} else {
canvas.width = event.target.width;
canvas.height = event.target.height;
}
if (angle === 90 || angle === 180) {
translateX = canvas.width;
}
if (angle === 270 || angle === 180) {
translateY = canvas.height;
}
const context = canvas.getContext('2d');
context.translate(translateX, translateY);
context.rotate(angle * Math.PI / 180);
context.drawImage(event.target, 0, 0);
canvas.toBlob(blob => {
setEditedUrl(URL.createObjectURL(blob));
setRotation(angle);
setAspect(canvas.width / canvas.height);
setPosition(prevPosition => ({
x: -(prevPosition.y * naturalAspectRatio),
y: prevPosition.x * naturalAspectRatio
}));
});
}
const el = new window.Image();
el.src = url;
el.onload = editImage;
const imgCrossOrigin = applyFilters('media.crossOrigin', undefined, url);
if (typeof imgCrossOrigin === 'string') {
el.crossOrigin = imgCrossOrigin;
}
}, [rotation, defaultAspect, url]);
return useMemo(() => ({
editedUrl,
setEditedUrl,
crop,
setCrop,
position,
setPosition,
zoom,
setZoom,
rotation,
setRotation,
rotateClockwise,
aspect,
setAspect,
defaultAspect
}), [editedUrl, crop, position, zoom, rotation, rotateClockwise, aspect, defaultAspect]);
}
//# sourceMappingURL=use-transform-image.js.map