@atlaskit/editor-plugin-media-editing
Version:
MediaEditing plugin for @atlaskit/editor-core
80 lines • 2.3 kB
JavaScript
const ASPECT_RATIOS = {
original: null,
custom: null,
square: {
x: 1,
y: 1
},
circle: {
x: 1,
y: 1
},
landscape: {
x: 4,
y: 3
},
portrait: {
x: 3,
y: 4
},
wide: {
x: 16,
y: 9
}
};
export const useImageAspectRatio = () => {
// no ratio = undefined = custom cropping selection
const getAspectRatioValue = ratio => {
const aspectRatioValue = ASPECT_RATIOS[ratio];
if (aspectRatioValue) {
return aspectRatioValue.x / aspectRatioValue.y;
}
return undefined;
};
return {
getAspectRatioValue
};
};
export const useImageFlip = cropperRef => {
const flipHorizontal = () => {
var _cropperRef$current;
const image = (_cropperRef$current = cropperRef.current) === null || _cropperRef$current === void 0 ? void 0 : _cropperRef$current.getImage();
if (image !== null && image !== void 0 && image.$scale) {
image.$scale(-1, 1);
}
};
const flipVertical = () => {
var _cropperRef$current2;
const image = (_cropperRef$current2 = cropperRef.current) === null || _cropperRef$current2 === void 0 ? void 0 : _cropperRef$current2.getImage();
if (image !== null && image !== void 0 && image.$scale) {
image.$scale(1, -1);
}
};
return {
flipHorizontal,
flipVertical
};
};
export const useImageRotate = cropperRef => {
const rotateRight = () => {
var _cropperRef$current3, _cropperRef$current4, _cropperRef$current5;
const canvas = (_cropperRef$current3 = cropperRef.current) === null || _cropperRef$current3 === void 0 ? void 0 : _cropperRef$current3.getCanvas();
const image = (_cropperRef$current4 = cropperRef.current) === null || _cropperRef$current4 === void 0 ? void 0 : _cropperRef$current4.getImage();
if (!canvas || !image) {
return;
}
const selectionEl = canvas.querySelector('cropper-selection');
if (selectionEl instanceof HTMLElement) {
selectionEl.style.opacity = '0';
}
image.$rotate('90deg');
image.$center('contain');
(_cropperRef$current5 = cropperRef.current) === null || _cropperRef$current5 === void 0 ? void 0 : _cropperRef$current5.fitStencilToImage();
if (selectionEl instanceof HTMLElement) {
selectionEl.style.opacity = '1';
}
};
return {
rotateRight
};
};